{t('Sign in')} - {t(business?.Name)}

import React, { Component } from 'react'; import { inject, observer } from 'mobx-react'; import { withTranslation, Trans } from 'react-i18next'; import Link from 'next/link'; import Head from 'next/head'; import { routes } from 'env/routes'; import { withRouter } from 'next/router'; import LoadingLayout from 'ui/layouts/LoadingLayout'; import LoadingSpinner from 'ui/components/LoadingSpinner'; import { analyticsService } from 'env/analytics/analyticsService'; import { withIframeHandler } from 'ui/components/withIframeHandler'; /*import { withCustomComponent } from 'ui/components/withCustomComponent'; @withCustomComponent('LoginPage')*/ @withIframeHandler() @withRouter @withTranslation() @inject('authStore', 'appStore') @observer class LoginPage extends Component { constructor(props) { super(props); this.state = { email: '', password: '', changePassword: false, newPassword: true, exchangedFailed: false, isRedirecting: false, }; } sendMagicLink = () => { const { t, appStore, authStore } = this.props; this.setState({ loginError: null }); authStore .sendMagicLink(this.state.email, appStore.business.Id) .then((res) => { appStore.setPopMessage( t('Please check your email to access your account.') ); }) .catch((err) => { this.setState({ loginError: t(err) }); }); }; login = () => { const { router, t, authStore } = this.props; this.setState({ loginError: null, passwordResetSent: false }); if (this.state.changePassword) { authStore .setPassword( this.state.email, this.state.changePasswordToken, this.state.password ) .then((res) => { if (res.Status == 500) { this.setState({ loginError: t(res.Message) }); } else { this.setState({ changePassword: false }); this.login(); } }) .catch((err) => { this.setState({ loginError: t(err) }); }); } else { authStore .login( this.state.email, this.state.password, this.state.totp, this.state.keepLoggedIn ) .catch((err) => { if (err?.response?.body?.error == 'must_reset_password') { this.setState({ changePassword: true, changePasswordToken: err?.response?.body?.error_description, password: '', loginMessage: t('You must change your password to continue') + '. ' + t( 'Your password must be at least 8 characters long and include lowercase (a-z), uppercase (A-Z) and symbols (!@#$%^&*)' ), }); } else if (err?.response?.body?.error == 'two_factor_auth_check') { this.setState({ twoFactorRequired: true, twoFactorToken: err?.response?.body?.error_description, loginMessage: t('Enter your 2 factor authentication code.'), }); } else if (err.response) this.setState({ loginError: t(err.response.body.error_description), }); else this.setState({ loginError: t(err) }); }) .then((data) => { if (data && data.refresh_token) return authStore.loadMe(); else return data; }) .then(this.afterLogin); } }; changePassword = () => { authStore.login(this.state.email, this.state.password); }; getSsoUrl = () => { const { appStore } = this.props; const { business } = appStore; return `${business.NativeHomeUrlWithLanguage}/login/sso`; }; getContinueToUrl = () => { const { router } = this.props; return ( router.query.ReturnUrl || router.query.returnurl || router.query.redirectUrl ); }; appendPublicPrefix = (url) => { if (url.toLowerCase().indexOf('/content') > -1) return url; if (url.toLowerCase().indexOf('/loginCoworker') > -1) return url; if (url.indexOf('http') > -1) return url; if (url.indexOf('?public') > -1) return url; if (url.indexOf('?') > -1) return url.replace('?', '?public&'); return url + '?public'; }; afterLogin = (me) => { const { appStore, authStore } = this.props; const { business } = appStore; const { router } = this.props; if (!me) return; if (!router.query.imp) authStore.setImpersonationToken(null); // Send log-in event to G4 analyticsService.login({ ...me }); //We use window.location to force a browser reload //This ensures we clear all mobx states after a user logs in. const continueTo = this.getContinueToUrl(); this.setState({ isRedirecting: true, isLoggingIn: false }); const isServerRedirect = router.query.server == '1'; setTimeout(() => { this.setState({ isRedirecting: false, isLoggingIn: false }); }, 5000); window.location = continueTo ? isServerRedirect ? `${business.NativeHomeUrlWithLanguage}/user/login?t=${ me.AccessToken }&redirectUrl=${encodeURIComponent(continueTo)}&server=${ router.query.server == '1' ? 'true' : 'false' }` : this.appendPublicPrefix(decodeURIComponent(continueTo)) : '/'; return me; }; getExclusiveSso() { const { appStore } = this.props; const { configuration } = appStore; return ( (configuration['Okta.Enabled'] && configuration['Okta.Exclusive']) || (configuration['ActiveDirectory.Enabled'] && configuration['ActiveDirectory.Exclusive']) || (configuration['OpenId.Enabled'] && configuration['OpenId.Exclusive']) ); } componentDidMount() { const { router, authStore, appStore, t } = this.props; const { me } = authStore; const exclusiveSso = this.getExclusiveSso(); if (!router.query.t && exclusiveSso) { if (window.parent !== window) { var ssoWindow = window.open(this.getSsoUrl()); var timer = setInterval(function () { if (ssoWindow.closed) { clearInterval(timer); this.afterLogin(); } }, 1000); } else window.location = this.getSsoUrl(); return; } if (router.query.t) { authStore .exchange(router.query.t, router.query.cid) .then((tokenResponse) => { if (tokenResponse?.token) return authStore.loadMe(); else { this.setState({ exchangedFailed: true }); return tokenResponse?.token; } }) .then(this.afterLogin); } else if (me && this.getContinueToUrl()) { this.afterLogin(me); return; } return; } render() { const { t, router, appStore, authStore } = this.props; const { business, configuration } = appStore; const { isLoggingIn, isLoadingMe } = authStore; const continueTo = router.query.returnurl || router.query.redirectUrl; const exclusiveSso = this.getExclusiveSso(); const hasExternalLogin = configuration['Signup.GooglePlusSignIn'] || configuration['Signup.FacebookSignIn'] || configuration['ActiveDirectory.Enabled'] || configuration['OpenId.Enabled'] || configuration['Okta.Enabled']; if (router.query.t && !this.state.exchangedFailed) return ; return (

{t('Sign in to {{Name}}', { Name: t(business.Name) })}

{!this.state.changePassword && (

{configuration['Signup.GooglePlusSignIn'] && ( {' '} {t('Sign in with Google')} )} {configuration['Signup.FacebookSignIn'] && ( {' '} {t('Sign in with Facebook')} )} {configuration['Okta.Enabled'] && ( {' '} {configuration['Okta.Label'] ? configuration['Okta.Label'] : t('Sign in with Corporate Account')} )} {configuration['ActiveDirectory.Enabled'] && ( {' '} {configuration['ActiveDirectory.Label'] ? configuration['ActiveDirectory.Label'] : t('Sign in with Corporate Account')} )} {configuration['OpenId.Enabled'] && ( {' '} {configuration['OpenId.Label'] ? configuration['OpenId.Label'] : t('Sign in with Corporate Account')} )}

)}

{!this.state.twoFactorRequired && !this.state.changePassword && (

{hasExternalLogin ? t('or sign in with your email address') : t('Enter your email and password')}

)} {!exclusiveSso && (

{ ev.preventDefault(); this.login(); }} > {!this.state.twoFactorRequired && !this.state.changePassword && (

{t('Email')}

this.setState({ email: ev.target.value }) } className="form-control" id="email" />

)}

{!this.state.twoFactorRequired && !this.state.changePassword && ( {!this.state.twoFactorRequired && !this.state.changePassword && t('Password')} {this.state.changePassword && t('New Password')} {this.state.twoFactorRequired && t('Your Authentication Code')} )}

{this.state.twoFactorRequired && ( this.setState({ totp: ev.target.value }) } className="form-control" /> )} {!this.state.twoFactorRequired && ( this.setState({ password: ev.target.value }) } className="form-control" id="password" /> )}

{!this.state.passwordResetSent && !this.state.changePassword && this.state.email && (

If you don't remember your current password:{' '} { if (this.state.passwordResetSent) return; ev.preventDefault(); this.setState({ passwordResetSent: true }); authStore .loadResetPassword( this.state.email, business.Id ) .then((data) => { appStore.setPopMessage( t( 'We have sent you an email to {{email}} to reset your password', { email: this.state.email } ) ); }); }} href="#" className="text-gray-700 tdu" > request a password reset email .

)} {this.state.changePassword && (

{ ev.preventDefault(); this.setState({ showPassword: true }); }} onTouchStart={(ev) => { ev.preventDefault(); this.setState({ showPassword: true }); }} onMouseUp={(ev) => { ev.preventDefault(); this.setState({ showPassword: false }); }} onTouchEnd={(ev) => { ev.preventDefault(); this.setState({ showPassword: false }); }} > {t('Show password')}

)}

{this.state.loginError && (

{t(this.state.loginError)}

)} {this.state.loginMessage && (

{t(this.state.loginMessage)}

)}

this.setState({ keepLoggedIn: ev.target.checked, }) } type="checkbox" className="custom-control-input" id="keepLoggedIn" /> {t('Keep me logged in')}

)}

); } } export default LoginPage;

Get in touch with us

Contact details