From f305f83fba1c218879a5420482c131f1ca45c0b6 Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 6 Dec 2016 11:56:01 -0300 Subject: [PATCH 1/6] hide first title and custom title per page --- css/index.styl | 23 +++++++++++-------- src/connection/database/reset_password.jsx | 4 ++++ src/core.js | 13 ++++++----- src/core/index.js | 4 +++- src/core/screen.js | 26 ++++++++++++++++++++++ src/i18n/en.js | 1 + src/ui/box/chrome.jsx | 2 +- src/ui/box/container.jsx | 2 +- src/ui/box/header.jsx | 6 +++-- 9 files changed, 62 insertions(+), 19 deletions(-) diff --git a/css/index.styl b/css/index.styl index 0931b4a70..6c2dda7a6 100644 --- a/css/index.styl +++ b/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 diff --git a/src/connection/database/reset_password.jsx b/src/connection/database/reset_password.jsx index 53743c523..42a9194c9 100644 --- a/src/connection/database/reset_password.jsx +++ b/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; } diff --git a/src/core.js b/src/core.js index 97b47f47c..851d403a1 100644 --- a/src/core.js +++ b/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); @@ -116,7 +117,9 @@ export default class Base extends EventEmitter { submitHandler: partialApplyId(screen, "submitHandler"), tabs: screen.renderTabs(m), terms: screen.renderTerms(m, i18nProp.html("signUpTerms")), - title: title, + title: l.ui.hideFistPageTitle(m) && !screen.isFirstScreen(m) + ? title + : null, transitionName: screen.name === "loading" ? "fade" : "horizontal-fade" }; render(l.ui.containerID(m), props); diff --git a/src/core/index.js b/src/core/index.js index 0ec11243d..086762b21 100644 --- a/src/core/index.js +++ b/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, hideFistPageTitle, 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, + hideFistPageTitle: hideFistPageTitle === false ? false : true, 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"), + hideFistPageTitle: lock => getUIAttribute(lock, "hideFistPageTitle"), language: lock => getUIAttribute(lock, "language"), logo: lock => getUIAttribute(lock, "logo"), mobile: lock => getUIAttribute(lock, "mobile"), diff --git a/src/core/screen.js b/src/core/screen.js index f791fe476..2c91ee0f6 100644 --- a/src/core/screen.js +++ b/src/core/screen.js @@ -1,5 +1,6 @@ import * as l from './index'; import * as i18n from '../i18n'; +import {getInitialScreen} from '../connection/database/index'; export default class Screen { @@ -19,6 +20,31 @@ 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]; + 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; } diff --git a/src/i18n/en.js b/src/i18n/en.js index 22f0ae882..7456c326e 100644 --- a/src/i18n/en.js +++ b/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", diff --git a/src/ui/box/chrome.jsx b/src/ui/box/chrome.jsx index 9ef0760d5..e7ef44d4d 100644 --- a/src/ui/box/chrome.jsx +++ b/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 }; diff --git a/src/ui/box/container.jsx b/src/ui/box/container.jsx index 6b327e74a..d1536d43c 100644 --- a/src/ui/box/container.jsx +++ b/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, diff --git a/src/ui/box/header.jsx b/src/ui/box/header.jsx index fc4e7f26f..798ae9f5b 100644 --- a/src/ui/box/header.jsx +++ b/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 = ; + const imgClassName = !!title ? 'auth0-lock-header-logo' : 'auth0-lock-header-logo centered'; + const img = ; + const welcome = title ? : null; return (
{imageUrl && img} - + {welcome}
); } From 55c48d1dbe99e4f037b46eb56014da85a78478c1 Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 6 Dec 2016 12:00:58 -0300 Subject: [PATCH 2/6] fix logic --- src/core.js | 2 +- src/core/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core.js b/src/core.js index 851d403a1..bcde2f8b9 100644 --- a/src/core.js +++ b/src/core.js @@ -117,7 +117,7 @@ export default class Base extends EventEmitter { submitHandler: partialApplyId(screen, "submitHandler"), tabs: screen.renderTabs(m), terms: screen.renderTerms(m, i18nProp.html("signUpTerms")), - title: l.ui.hideFistPageTitle(m) && !screen.isFirstScreen(m) + title: !l.ui.hideFistPageTitle(m) || !screen.isFirstScreen(m) ? title : null, transitionName: screen.name === "loading" ? "fade" : "horizontal-fade" diff --git a/src/core/index.js b/src/core/index.js index 086762b21..a3df18216 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -142,7 +142,7 @@ function extractUIOptions(id, options) { avatarProvider: avatarProvider, logo: typeof logo === "string" ? logo : undefined, closable: closable, - hideFistPageTitle: hideFistPageTitle === false ? false : true, + hideFistPageTitle: !!hideFistPageTitle, labeledSubmitButton: undefined === labeledSubmitButton ? true : !!labeledSubmitButton, language: undefined === options.language ? "en" : trim(options.language || "").toLowerCase(), dict: typeof options.languageDictionary === "object" ? options.languageDictionary : {}, From da777f49eaba5472a06fc7c5d724c65062d2cded Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 6 Dec 2016 12:03:41 -0300 Subject: [PATCH 3/6] added signup screen title --- src/engine/classic/sign_up_screen.jsx | 4 ++++ src/i18n/en.js | 1 + 2 files changed, 5 insertions(+) diff --git a/src/engine/classic/sign_up_screen.jsx b/src/engine/classic/sign_up_screen.jsx index 9a6e21ea7..947252ba9 100644 --- a/src/engine/classic/sign_up_screen.jsx +++ b/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)) diff --git a/src/i18n/en.js b/src/i18n/en.js index 7456c326e..35c372cd0 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -87,6 +87,7 @@ export default { resendingLabel: "Resending...", retryLabel: "Retry", sentLabel: "Sent!", + signupTitle: "Sign Up", signUpLabel: "Sign Up", signUpSubmitLabel: "Sign Up", signUpTerms: "", From ec41038fa0711fe53e82fe1d77181f69ba76d427 Mon Sep 17 00:00:00 2001 From: German Lena Date: Tue, 6 Dec 2016 14:30:23 -0300 Subject: [PATCH 4/6] added es translation --- src/i18n/es.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/i18n/es.js b/src/i18n/es.js index c508ec15a..bdf108039 100644 --- a/src/i18n/es.js +++ b/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: "", From 5dd18262a1d939614e2710faa9c476a120f495fc Mon Sep 17 00:00:00 2001 From: German Lena Date: Mon, 9 Jan 2017 12:18:11 -0300 Subject: [PATCH 5/6] Refactor + login/signup are both first screen --- src/core.js | 11 ++++++++--- src/core/screen.js | 9 ++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/core.js b/src/core.js index bcde2f8b9..751289010 100644 --- a/src/core.js +++ b/src/core.js @@ -90,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.hideFistPageTitle(m) && screen.isFirstScreen(m) + ? null + : title; + } + const props = { avatar: avatar && m.getIn(["avatar", "transient", "url"]), auxiliaryPane: screen.renderAuxiliaryPane(m), @@ -117,9 +124,7 @@ export default class Base extends EventEmitter { submitHandler: partialApplyId(screen, "submitHandler"), tabs: screen.renderTabs(m), terms: screen.renderTerms(m, i18nProp.html("signUpTerms")), - title: !l.ui.hideFistPageTitle(m) || !screen.isFirstScreen(m) - ? title - : null, + title: getScreenTitle(m), transitionName: screen.name === "loading" ? "fade" : "horizontal-fade" }; render(l.ui.containerID(m), props); diff --git a/src/core/screen.js b/src/core/screen.js index 2c91ee0f6..e9e9d7c96 100644 --- a/src/core/screen.js +++ b/src/core/screen.js @@ -1,6 +1,6 @@ import * as l from './index'; import * as i18n from '../i18n'; -import {getInitialScreen} from '../connection/database/index'; +import {getInitialScreen, hasScreen} from '../connection/database/index'; export default class Screen { @@ -24,6 +24,13 @@ export default class Screen { 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', From aa531c1bb57df4bad6f7207f7b6410ca84ef59ee Mon Sep 17 00:00:00 2001 From: German Lena Date: Thu, 12 Jan 2017 09:27:32 -0300 Subject: [PATCH 6/6] change flag name to hideMainScreenTitle --- src/core.js | 2 +- src/core/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/core.js b/src/core.js index 751289010..bf4e59b56 100644 --- a/src/core.js +++ b/src/core.js @@ -92,7 +92,7 @@ export default class Base extends EventEmitter { const getScreenTitle = (m) => { // if it is the first screen and the flag is enabled, it should hide the title - return l.ui.hideFistPageTitle(m) && screen.isFirstScreen(m) + return l.ui.hideMainScreenTitle(m) && screen.isFirstScreen(m) ? null : title; } diff --git a/src/core/index.js b/src/core/index.js index a3df18216..00a796d32 100644 --- a/src/core/index.js +++ b/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, hideFistPageTitle, logo, primaryColor, authButtons } = theme; + const { labeledSubmitButton, hideMainScreenTitle, logo, primaryColor, authButtons } = theme; const avatar = options.avatar !== null; const customAvatarProvider = options.avatar @@ -142,7 +142,7 @@ function extractUIOptions(id, options) { avatarProvider: avatarProvider, logo: typeof logo === "string" ? logo : undefined, closable: closable, - hideFistPageTitle: !!hideFistPageTitle, + hideMainScreenTitle: !!hideMainScreenTitle, labeledSubmitButton: undefined === labeledSubmitButton ? true : !!labeledSubmitButton, language: undefined === options.language ? "en" : trim(options.language || "").toLowerCase(), dict: typeof options.languageDictionary === "object" ? options.languageDictionary : {}, @@ -180,7 +180,7 @@ export const ui = { dict: lock => getUIAttribute(lock, "dict"), disableWarnings: lock => getUIAttribute(lock, "disableWarnings"), labeledSubmitButton: lock => getUIAttribute(lock, "labeledSubmitButton"), - hideFistPageTitle: lock => getUIAttribute(lock, "hideFistPageTitle"), + hideMainScreenTitle: lock => getUIAttribute(lock, "hideMainScreenTitle"), language: lock => getUIAttribute(lock, "language"), logo: lock => getUIAttribute(lock, "logo"), mobile: lock => getUIAttribute(lock, "mobile"),