Nuxeo Server

How to Customize the Login Page

Updated: October 13, 2017 Page Information Edit on GitHub

The basic customization can be made by extending the service org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService for the point loginScreen.

This point allows you to configure the Login Screen : header, footer, styles, openid providers ... The variable ${org.nuxeo.ecm.contextPath} can be used to avoid hardcoding the default application path (/nuxeo).

Let's create the component org.nuxeo.sample.loginPage.

src/main/resources/OSGI-INF/login-contribution.xml

<component name="org.nuxeo.sample.loginPage">
  <extension target="org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService" point="loginScreen">
    <loginScreenConfig>
      <bodyBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newBackground.jpg") 0px 0px no-repeat #000</bodyBackgroundStyle>
      <disableBackgroundSizeCover>false</disableBackgroundSizeCover>
      <videos loop="false" muted="true">
        <video src="//media.nuxeo.com/videos/login_8_10.webm" type="video/webm" />
        <video src="//media.nuxeo.com/videos/login_8_10.mp4" type="video/mp4" />
      </videos>
      <headerStyle></headerStyle>
      <footerStyle></footerStyle>
      <loginBoxBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newLoginBox.jpg") 0 0 no-repeat #ff0000</loginBoxBackgroundStyle>
      <loginBoxWidth>400px</loginBoxWidth>
      <logoUrl>${org.nuxeo.ecm.contextPath}/img/newLogo.png</logoUrl>
      <logoAlt>MyCompany</logoAlt>
      <logoWidth>113</logoWidth>
      <logoHeight>20</logoHeight>
    </loginScreenConfig>
  </extension>
</component>

It is recommended to have several video encoded with main standards. Offering a WEBM and a MP4 fallback helps you providing your video for all your users. Here is a script, using ffmpeg to encode any source with 2 pass encoding for a better result:

#!/bin/bash

IN=$1
OUT=$(echo $1 | sed 's/^\(.*\)\.[a-zA-Z0-9]*$/\1/')
SIZE=960x540

# webm 2 pass
ffmpeg -y -i $IN -f webm -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 1 -an  /dev/null
ffmpeg -y -i $IN -f webm -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 2 -an $OUT.webm

# mp4 2 pass
ffmpeg -y -i $IN -vcodec libx264 -f mp4 -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 1 -an  /dev/null
ffmpeg -y -i $IN -vcodec libx264 -f mp4 -threads 0 -b:v 1M -crf 22 -s $SIZE -pass 2 -an $OUT.mp4

9 days ago manonlumeau NXDOC-1346-FT review screenshot
a year ago Solen Guitter 42 | pdate how-to topic
2 years ago Manon Lumeau 41
2 years ago Anahide Tchertchian 40
3 years ago Manon Lumeau 39
3 years ago Manon Lumeau 38
3 years ago Solen Guitter 37
3 years ago Solen Guitter 36 | add link to the explorer
3 years ago Solen Guitter 35
3 years ago Gildas Lefevre 34 | NXDOC-363: Split the page in two, a beginner page and an advanced one
3 years ago Gildas Lefevre 33 | NXDOC-363: Update How-tos
3 years ago Anahide Tchertchian 32
3 years ago Solen Guitter 31
3 years ago Manon Lumeau 30
3 years ago Manon Lumeau 29
3 years ago Manon Lumeau 28
4 years ago Solen Guitter 27
4 years ago Solen Guitter 26
4 years ago Anahide Tchertchian 25
6 years ago Anahide Tchertchian 24
6 years ago Anahide Tchertchian 23
7 years ago Stéfane Fermigier 22
7 years ago Stéfane Fermigier 21
7 years ago Florent Guillaume 20
7 years ago Florent Guillaume 19
7 years ago Stéfane Fermigier 18
7 years ago Stéfane Fermigier 17
7 years ago Stéfane Fermigier 16
7 years ago Stéfane Fermigier 15
7 years ago Stéfane Fermigier 14
7 years ago Stéfane Fermigier 13
7 years ago Stéfane Fermigier 12
7 years ago Stéfane Fermigier 11
7 years ago Stéfane Fermigier 10
7 years ago Stéfane Fermigier 9
7 years ago Stéfane Fermigier 8
7 years ago Stéfane Fermigier 7
7 years ago Stéfane Fermigier 6
7 years ago Stéfane Fermigier 5
7 years ago Stéfane Fermigier 4
7 years ago Stéfane Fermigier 3
7 years ago Stéfane Fermigier 2
7 years ago Stéfane Fermigier 1
History: Created by Stéfane Fermigier