Merge pull request #745 from auth0/hide-first-title-and-custom-titles

Hide first screen title option

css/index.styl

@@ -169,12 +169,12 @@ tabsHeight = 40px
     border 6px solid white
     cursor pointer
     line-height 0
-    
+
     svg
       -webkit-box-sizing content-box
       -moz-box-sizing content-box
       box-sizing content-box
-      
+
     polygon
       fill #373737
 
@@ -254,6 +254,11 @@ tabsHeight = 40px
     display inline-block
     margin 0 0 11px
     vertical-align middle
+    -webkit-transition margin-top .4s
+    transition margin-top .4s
+
+    &.centered
+      margin-top 20px
 
   .auth0-lock-firstname
     font-size 18px
@@ -530,7 +535,7 @@ tabsHeight = 40px
         vertical-align middle
         &.icon-text
           margin -4px 0 0 5px
-    
+
     .auth0-label-submit
       height 42px
       line-height 42px
@@ -928,7 +933,7 @@ tabsHeight = 40px
       .auth0-lock-form p
         @media screen and (max-width: 480px)
           font-size 14px
-    
+
     .auth0-lock-tabs-container
       //mobile view
       @media screen and (max-width: 480px)
@@ -948,7 +953,7 @@ tabsHeight = 40px
         -webkit-box-sizing border-box
         -moz-box-sizing border-box
         box-sizing border-box
-    
+
     .auth0-lock-sign-up-terms-agreement label input
       @media screen and (max-width: 480px)
         top 2px
@@ -967,7 +972,7 @@ tabsHeight = 40px
       //mobile view
       @media screen and (max-width: 480px)
         border-radius 0
-    
+
     &.auth0-lock-iphone
       .auth0-lock-body-content
         //mobile view
@@ -998,13 +1003,13 @@ tabsHeight = 40px
         @media screen and (max-width: 480px)
           min-height "calc(100vh - %s)" % (headerHeight + submitHeight + tabsHeight)
           padding-top 40px
-          
+
       &.auth0-lock-with-terms
         .auth0-lock-body-content
           //mobile view
           @media screen and (max-width: 480px)
             min-height "calc(100vh - %s - 42px)" % (headerHeight + submitHeight + tabsHeight) // - header - submit - tabs - terms
-      
+
       &.auth0-lock-iphone
         .auth0-lock-body-content
           //mobile view
@@ -1081,7 +1086,7 @@ tabsHeight = 40px
     justify-content center
     align-content center
     align-items stretch
-    
+
     &:after
       content ""
       display table

src/connection/database/reset_password.jsx

@@ -34,6 +34,10 @@ export default class ResetPassword extends Screen {
     return i18n.str(m, ["forgotPasswordSubmitLabel"]);
   }
 
+  getScreenTitle(m) {
+    return i18n.str(m, "forgotPasswordTitle");
+  }
+
   submitHandler() {
     return resetPassword;
   }

src/core.js

@@ -71,15 +71,16 @@ export default class Base extends EventEmitter {
           ? (...args) => handler(l.id(m), ...args)
           : handler;
       };
-
       const avatar = l.ui.avatar(m) && m.getIn(["avatar", "transient", "syncStatus"]) === "ok" || null;
-      const title = avatar
-        ? i18n.str(m, "welcome", m.getIn(["avatar", "transient", "displayName"]))
-        : i18n.str(m, "title");
 
       if (l.rendering(m)) {
+
         const screen = this.engine.render(m);
 
+        const title = avatar
+          ? i18n.str(m, "welcome", m.getIn(["avatar", "transient", "displayName"]))
+          : screen.getTitle(m);
+
         const disableSubmitButton = screen.name === "main.signUp"
           && !termsAccepted(m);
 
@@ -89,6 +90,13 @@ export default class Base extends EventEmitter {
           str: (keyPath, ...args) => i18n.str(m, keyPath, ...args)
         };
 
+        const getScreenTitle = (m) => {
+          // if it is the first screen and the flag is enabled, it should hide the title
+          return l.ui.hideMainScreenTitle(m) && screen.isFirstScreen(m)
+                  ? null
+                  : title;
+        }
+
         const props = {
           avatar: avatar && m.getIn(["avatar", "transient", "url"]),
           auxiliaryPane: screen.renderAuxiliaryPane(m),
@@ -116,7 +124,7 @@ export default class Base extends EventEmitter {
           submitHandler: partialApplyId(screen, "submitHandler"),
           tabs: screen.renderTabs(m),
           terms: screen.renderTerms(m, i18nProp.html("signUpTerms")),
-          title: title,
+          title: getScreenTitle(m),
           transitionName: screen.name === "loading" ? "fade" : "horizontal-fade"
         };
         render(l.ui.containerID(m), props);

src/core/index.js

@@ -124,7 +124,7 @@ export function stopRendering(m) {
 function extractUIOptions(id, options) {
   const closable = options.container ? false : undefined === options.closable ? true : !!options.closable;
   const theme = options.theme || {};
-  const { labeledSubmitButton, logo, primaryColor, authButtons } = theme;
+  const { labeledSubmitButton, hideMainScreenTitle, logo, primaryColor, authButtons } = theme;
 
   const avatar = options.avatar !== null;
   const customAvatarProvider = options.avatar
@@ -142,6 +142,7 @@ function extractUIOptions(id, options) {
     avatarProvider: avatarProvider,
     logo: typeof logo === "string" ? logo : undefined,
     closable: closable,
+    hideMainScreenTitle: !!hideMainScreenTitle,
     labeledSubmitButton: undefined === labeledSubmitButton ? true : !!labeledSubmitButton,
     language: undefined === options.language ? "en" : trim(options.language || "").toLowerCase(),
     dict: typeof options.languageDictionary === "object" ? options.languageDictionary : {},
@@ -179,6 +180,7 @@ export const ui = {
   dict: lock => getUIAttribute(lock, "dict"),
   disableWarnings: lock => getUIAttribute(lock, "disableWarnings"),
   labeledSubmitButton: lock => getUIAttribute(lock, "labeledSubmitButton"),
+  hideMainScreenTitle: lock => getUIAttribute(lock, "hideMainScreenTitle"),
   language: lock => getUIAttribute(lock, "language"),
   logo: lock => getUIAttribute(lock, "logo"),
   mobile: lock => getUIAttribute(lock, "mobile"),

src/core/screen.js

@@ -1,5 +1,6 @@
 import * as l from './index';
 import * as i18n from '../i18n';
+import {getInitialScreen, hasScreen} from '../connection/database/index';
 
 export default class Screen {
 
@@ -19,6 +20,38 @@ export default class Screen {
     return i18n.str(m, ["submitLabel"]);
   }
 
+  isFirstScreen(m) {
+    const firstScreenName = getInitialScreen(m);
+    const currentScreenNameParts = this.name.split('.');
+    const currentScreenName = currentScreenNameParts[1] || currentScreenNameParts[0];
+
+    // if signup and login is enabled, both are the first screen in this scenario and
+    // neither of them should show the title
+    if (currentScreenName === 'signUp' && hasScreen(m, "login")) {
+      return true;
+    }
+
+    const initialScreens = [
+      firstScreenName,
+      'loading',
+      'lastLogin'
+    ];
+
+    return initialScreens.indexOf(currentScreenName) !== -1;
+  }
+
+  getTitle(m) {
+    if (this.isFirstScreen(m)) {
+      return i18n.str(m, "title");
+    }
+
+    return this.getScreenTitle(m);
+  }
+
+  getScreenTitle(m) {
+    return i18n.str(m, "title");
+  }
+
   submitHandler() {
     return null;
   }

src/engine/classic/sign_up_screen.jsx

@@ -100,6 +100,10 @@ export default class SignUp extends Screen {
     return true;
   }
 
+  getScreenTitle(m) {
+    return i18n.str(m, "signupTitle");
+  }
+
   renderTerms(m, terms) {
     const checkHandler = mustAcceptTerms(m)
       ? () => toggleTermsAcceptance(l.id(m))

src/i18n/en.js

@@ -52,6 +52,7 @@ export default {
   enterpriseLoginIntructions: "Login with your corporate credentials.",
   enterpriseActiveLoginInstructions: "Please enter your corporate credentials at %s.",
   failedLabel: "Failed!",
+  forgotPasswordTitle: "Reset your password",
   forgotPasswordAction: "Don't remember your password?",
   forgotPasswordInstructions: "Please enter your email address. We will send you an email to reset your password.",
   forgotPasswordSubmitLabel: "Send email",
@@ -86,6 +87,7 @@ export default {
   resendingLabel: "Resending...",
   retryLabel: "Retry",
   sentLabel: "Sent!",
+  signupTitle: "Sign Up",
   signUpLabel: "Sign Up",
   signUpSubmitLabel: "Sign Up",
   signUpTerms: "",

src/i18n/es.js

@@ -52,6 +52,7 @@ export default {
   enterpriseLoginIntructions: "Inicie sesión con sus credenciales corporativas.",
   enterpriseActiveLoginInstructions: "Ingrese las credenciales corporativas de %s.",
   failedLabel: "Error!",
+  forgotPasswordTitle: "Restablecer contraseña",
   forgotPasswordAction: "¿Olvidó su contraseña?",
   forgotPasswordInstructions: "Por favor ingrese su dirección de correo. Le enviaremos las instrucciones para restablecer su contrseña.",
   forgotPasswordSubmitLabel: "Enviar email",
@@ -86,6 +87,7 @@ export default {
   resendingLabel: "Reenviando...",
   retryLabel: "Reintentar",
   sentLabel: "Enviado!",
+  signupTitle: "Registrarse",
   signUpLabel: "Registrarse",
   signUpSubmitLabel: "Registrarse",
   signUpTerms: "",

src/ui/box/chrome.jsx

@@ -311,7 +311,7 @@ Chrome.propTypes = {
   submitButtonLabel: React.PropTypes.string,
   success: React.PropTypes.string,
   terms: React.PropTypes.element,
-  title: React.PropTypes.string.isRequired,
+  title: React.PropTypes.string,
   transitionName: React.PropTypes.string.isRequired
 };
 

src/ui/box/container.jsx

@@ -233,7 +233,7 @@ Container.propTypes = {
   success: React.PropTypes.string,
   tabs: React.PropTypes.bool,
   terms: React.PropTypes.element,
-  title: React.PropTypes.string.isRequired,
+  title: React.PropTypes.string,
   transitionName: React.PropTypes.string.isRequired
   // escHandler
   // submitHandler,

src/ui/box/header.jsx

@@ -26,12 +26,14 @@ Header.propTypes = {
 class Welcome extends React.Component {
   render() {
     const { name, imageUrl, title } = this.props;
-    const img = <img className="auth0-lock-header-logo" src={imageUrl} />;
+    const imgClassName = !!title ? 'auth0-lock-header-logo' : 'auth0-lock-header-logo centered';
+    const img = <img className={imgClassName} src={imageUrl} />;
+    const welcome = title ? <WelcomeMessage title={title} name={name}/> : null;
 
     return (
       <div className="auth0-lock-header-welcome">
         {imageUrl && img}
-        <WelcomeMessage title={title} name={name}/>
+        {welcome}
       </div>
     );
   }