HOWTO: Customize the Login Page

Updated: April 11, 2021

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.


<component name="org.nuxeo.sample.loginPage">
  <extension target="org.nuxeo.ecm.platform.ui.web.auth.service.PluggableAuthenticationService" point="loginScreen">
      <bodyBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newBackground.jpg") 0px 0px no-repeat #000</bodyBackgroundStyle>
      <videos loop="false" muted="true">
        <video src="//" type="video/webm" />
        <video src="//" type="video/mp4" />
      <loginBoxBackgroundStyle>url("${org.nuxeo.ecm.contextPath}/img/newLoginBox.jpg") 0 0 no-repeat #ff0000</loginBoxBackgroundStyle>

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:


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

# 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

We'd love to hear your thoughts!

All fields required