From 041daf86b48ce4bc6a3066165a66a1556451a8b1 Mon Sep 17 00:00:00 2001
From: romanetar <roman_ag@hotmail.com>
Date: Tue, 29 Mar 2022 17:18:08 -0300
Subject: [PATCH] Sign in flow UI refactor

Signed-off-by: romanetar <roman_ag@hotmail.com>
---
 resources/js/login/login.js                   | 201 ++++++++++--------
 resources/js/login/login.module.scss          |  45 ++--
 .../views/auth/register_success.blade.php     |   9 +-
 3 files changed, 149 insertions(+), 106 deletions(-)

diff --git a/resources/js/login/login.js b/resources/js/login/login.js
index 04816ad4..e15935c4 100644
--- a/resources/js/login/login.js
+++ b/resources/js/login/login.js
@@ -67,18 +67,19 @@ const PasswordInputForm = ({
     onAuthenticate,
     disableInput,
     showPassword,
-    passwordValue,
-    passwordError,
-    onUserPasswordChange,
-    handleClickShowPassword,
-    handleMouseDownPassword,
-    userNameValue,
-    csrfToken,
-    shouldShowCaptcha,
-    captchaPublicKey,
-    onChangeRecaptcha,
-    handleEmitOtpAction
-}) => {
+                               passwordValue,
+                               passwordError,
+                               onUserPasswordChange,
+                               handleClickShowPassword,
+                               handleMouseDownPassword,
+                               userNameValue,
+                               csrfToken,
+                               shouldShowCaptcha,
+                               captchaPublicKey,
+                               onChangeRecaptcha,
+                               handleEmitOtpAction,
+                               forgotPasswordAction
+                           }) => {
     return (
         <form method="post" action={formAction} onSubmit={onAuthenticate} target="_self">
             <TextField
@@ -104,23 +105,37 @@ const PasswordInputForm = ({
                                 onMouseDown={handleMouseDownPassword}
                                 edge="end"
                             >
-                                {showPassword ? <Visibility /> : <VisibilityOff />}
+                                {showPassword ? <Visibility/> : <VisibilityOff/>}
                             </IconButton>
                         </InputAdornment>
                     )
                 }}
             />
             {passwordError &&
-                <p className={styles.error_label} dangerouslySetInnerHTML={{ __html: passwordError }}></p>
+                <p className={styles.error_label} dangerouslySetInnerHTML={{__html: passwordError}}></p>
             }
-            <FormControlLabel
-                disabled={disableInput}
-                control={<Checkbox value="remember" name="remember" id="remember" color="primary" />}
-                label="Remember me"
-            />
-            <input type="hidden" value={userNameValue} id="username" name="username" />
-            <input type="hidden" value={csrfToken} id="_token" name="_token" />
-            <input type="hidden" value="password" id="flow" name="flow" />
+            <Grid container spacing={1}>
+                <Grid item xs={12}>
+                    <Button variant="contained"
+                            disabled={disableInput}
+                            onClick={onAuthenticate}
+                            type="submit"
+                            color="primary">
+                        Continue
+                    </Button>
+                </Grid>
+                <Grid item xs={12}>
+                    <FormControlLabel
+                        disabled={disableInput}
+                        control={<Checkbox value="remember" name="remember" id="remember" color="primary"/>}
+                        label="Remember me"
+                    />
+                </Grid>
+            </Grid>
+
+            <input type="hidden" value={userNameValue} id="username" name="username"/>
+            <input type="hidden" value={csrfToken} id="_token" name="_token"/>
+            <input type="hidden" value="password" id="flow" name="flow"/>
             {shouldShowCaptcha() &&
                 <ReCAPTCHA
                     className={styles.recaptcha}
@@ -130,8 +145,8 @@ const PasswordInputForm = ({
             }
             <ExistingAccountActions
                 emitOtpAction={handleEmitOtpAction}
-                onAuthenticate={onAuthenticate}
-                disableInput={disableInput}
+                userName={userNameValue}
+                forgotPasswordAction={forgotPasswordAction}
             />
         </form>
     );
@@ -217,24 +232,24 @@ const OTPInputForm = ({
 }
 
 const HelpLinks = ({
-    userName,
-    showEmitOtpAction,
-    forgotPasswordAction,
-    showForgotPasswordAction,
-    showVerifyEmailAction,
-    verifyEmailAction,
-    showHelpAction,
-    helpAction,
-    appName,
-    emitOtpAction
-}) => {
+                       userName,
+                       showEmitOtpAction,
+                       forgotPasswordAction,
+                       showForgotPasswordAction,
+                       showVerifyEmailAction,
+                       verifyEmailAction,
+                       showHelpAction,
+                       helpAction,
+                       appName,
+                       emitOtpAction
+                   }) => {
     if (userName) {
         forgotPasswordAction = `${forgotPasswordAction}?email=${encodeURIComponent(userName)}`;
     }
 
     return (
         <>
-            <hr className={styles.separator} />
+            <hr className={styles.separator}/>
             {
                 showEmitOtpAction &&
                 <Link href="#" onClick={emitOtpAction} variant="body2" target="_self">
@@ -275,44 +290,61 @@ const OTPHelpLinks = ({ emitOtpAction }) => {
 
 const EmailErrorActions = ({ emitOtpAction, createAccountAction, onValidateEmail, disableInput }) => {
     return (
-        <Grid container style={{ alignItems: 'center', marginTop: "20%" }}>
-            <Grid item xs>
-                <p>
-                    Access your account by <Link href="#" onClick={emitOtpAction} variant="body2" target="_self">having
-                        a single-use login code emailed to you</Link>.  Or
-                    <Link href={createAccountAction} variant="body2" target="_self"> establish your account by setting up a password</Link>.
-                </p>
-            </Grid>
-            <Grid item>
-                <Button variant="contained"
-                    onClick={onValidateEmail}
-                    disabled={disableInput}
-                    color="primary">
-                    Continue
-                </Button>
+        <Grid container spacing={1}>
+            <Grid container item spacing={1} justifyContent="center" alignItems="center">
+                <Grid item>
+                    <Button variant="contained"
+                            onClick={emitOtpAction}
+                            type="button"
+                            className={styles.secondary_btn}
+                            color="primary">
+                        Email me a one time use code
+                    </Button>
+                </Grid>
+                <Grid item>
+                    <Button variant="contained"
+                            href={createAccountAction}
+                            type="button"
+                            className={styles.secondary_btn}
+                            color="primary">
+                        Register and set a password
+                    </Button>
+                </Grid>
+                <Grid item>
+                    <Button variant="text"
+                            onClick={onValidateEmail}
+                            disabled={disableInput}
+                            className={styles.secondary_btn}
+                            color="primary">
+                        Adjust email above and try again
+                    </Button>
+                </Grid>
             </Grid>
         </Grid>
     );
 }
 
-const ExistingAccountActions = ({ emitOtpAction, onAuthenticate, disableInput }) => {
+const ExistingAccountActions = ({emitOtpAction, forgotPasswordAction, userName}) => {
+    if (userName) {
+        forgotPasswordAction = `${forgotPasswordAction}?email=${encodeURIComponent(userName)}`;
+    }
+
     return (
-        <Grid container style={{ alignItems: 'center', marginTop: "20%" }}>
-            <Grid item xs>
-                <p>
-                    You have an existing account. If you don't remember or never set a password,
-                    <Link href="#" onClick={emitOtpAction} variant="body2" target="_self">  get a single-use login code </Link> emailed to you now.
-                </p>
-            </Grid>
-            <Grid item>
+        <Grid container spacing={1} style={{marginTop: "30px"}}>
+            <Grid item xs={12}>
                 <Button variant="contained"
-                    disabled={disableInput}
-                    onClick={onAuthenticate}
-                    className={styles.continue_btn} type="submit"
-                    color="primary">
-                    Continue
+                        onClick={emitOtpAction}
+                        type="button"
+                        className={styles.secondary_btn}
+                        color="primary">
+                    Login by emailing me a one time use code
                 </Button>
             </Grid>
+            <Grid item xs={12}>
+                <Link href={forgotPasswordAction} target="_self" variant="body2">
+                    Reset your password
+                </Link>
+            </Grid>
         </Grid>
     );
 }
@@ -483,7 +515,7 @@ class LoginPage extends React.Component {
             let newErrors = {};
 
             newErrors['password'] = '';
-            newErrors['email'] = "We could not find an Account with that email Address";
+            newErrors['email'] = " ";
 
             if (status == 429) {
                 newErrors['email'] = "Too many requests. Try it later.";
@@ -539,30 +571,28 @@ class LoginPage extends React.Component {
                 <Container className={styles.login_container}>
                     <div className={styles.inner_container}>
                         <Typography component="h1" className={styles.app_logo_container}>
-                            <a href={window.location.href}><img className={styles.app_logo} alt={this.props.appName} src={this.props.appLogo} /></a>
+                            <a href={window.location.href}><img className={styles.app_logo} alt={this.props.appName}
+                                                                src={this.props.appLogo}/></a>
                         </Typography>
                         <Typography component="h1" variant="h5">
-                            Sign in {this.state.user_fullname && <Chip
-                                avatar={<Avatar alt={this.state.user_fullname} src={this.state.user_pic} />}
-                                variant="outlined"
-                                className={styles.valid_user_name_chip}
-                                label={this.state.user_fullname}
-                                onDelete={this.handleDelete} />}
+                            {this.state.errors.email ? 'Create an account for:' : 'Login'}
+                            {this.state.user_fullname &&
+                                <Chip
+                                    avatar={<Avatar alt={this.state.user_fullname} src={this.state.user_pic}/>}
+                                    variant="outlined"
+                                    className={styles.valid_user_name_chip}
+                                    label={this.state.user_fullname}
+                                    onDelete={this.handleDelete}/>
+                            }
                         </Typography>
                         {!this.state.user_verified &&
                             <>
                                 {this.state.allowNativeAuth &&
-                                    <>
-                                        <EmailInputForm
-                                            onValidateEmail={this.onValidateEmail}
-                                            onHandleUserNameChange={this.onHandleUserNameChange}
-                                            disableInput={this.state.disableInput}
-                                            emailError={this.state.errors.email} />
-                                        {this.state.errors.email == '' &&
-                                            <p>If you have just registered for an event or don't know your password, enter your email
-                                                address and you'll be able to request a single-use login code.</p>
-                                        }
-                                    </>
+                                    <EmailInputForm
+                                        onValidateEmail={this.onValidateEmail}
+                                        onHandleUserNameChange={this.onHandleUserNameChange}
+                                        disableInput={this.state.disableInput}
+                                        emailError={this.state.errors.email}/>
                                 }
                                 {this.state.errors.email == '' &&
                                     this.props.thirdPartyProviders.length > 0 &&
@@ -618,6 +648,7 @@ class LoginPage extends React.Component {
                                     captchaPublicKey={this.props.captchaPublicKey}
                                     onChangeRecaptcha={this.onChangeRecaptcha}
                                     handleEmitOtpAction={this.handleEmitOtpAction}
+                                    forgotPasswordAction={this.props.forgotPasswordAction}
                                 />
                                 <HelpLinks
                                     userName={this.state.user_name}
@@ -627,7 +658,7 @@ class LoginPage extends React.Component {
                                     helpAction={this.props.helpAction}
                                     emitOtpAction={this.handleEmitOtpAction}
                                     showEmitOtpAction={false}
-                                    showForgotPasswordAction={true}
+                                    showForgotPasswordAction={false}
                                     showVerifyEmailAction={false}
                                     showHelpAction={true}
                                 />
diff --git a/resources/js/login/login.module.scss b/resources/js/login/login.module.scss
index f02d8203..6431b7f4 100644
--- a/resources/js/login/login.module.scss
+++ b/resources/js/login/login.module.scss
@@ -53,24 +53,33 @@ p > a {
     h1.app_logo_container {
       text-align: center;
     }
-    .app_logo{
-      max-width: 40%;
-      margin-bottom: 15%;
-    }
-    .continue_btn{
-      float: right;
-      margin-top: 30%;
-    }
-    .recaptcha{
-      width: 100%;
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-    .separator{
-      color:$base-color;
-      width: 100%;
-      border: 1px solid;
-      margin-bottom: 5%;
+
+  .app_logo {
+    max-width: 40%;
+    margin-bottom: 15%;
+  }
+
+  .continue_btn {
+    float: right;
+    margin-top: 30%;
+  }
+
+  .secondary_btn {
+    min-width: 300px;
+    text-transform: none;
+  }
+
+  .recaptcha {
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .separator {
+    color: $base-color;
+    width: 100%;
+    border: 1px solid;
+    margin-bottom: 5%;
       margin-top: 5%;
     }
 }
diff --git a/resources/views/auth/register_success.blade.php b/resources/views/auth/register_success.blade.php
index ca3329f9..7fb46962 100644
--- a/resources/views/auth/register_success.blade.php
+++ b/resources/views/auth/register_success.blade.php
@@ -11,10 +11,13 @@
 @section('content')
     <div class="container">
         <div class="well">
-            <p> Thank you for creating an {!! Config::get("app.app_name") !!}. You will be receiving an email to verify your email address and
-            then another confirming you have successfully created your {!! Config::get("app.app_name") !!} after your email is verified.</p>
+            <p class="text-center">Almost done!</p>
+            <p class="text-center">Final step: You will receive an email shortly asking you to verify your email address
+                by clicking a link.</p>
+            <p class="text-center">Thank you for creating an {!! Config::get("app.app_name") !!}.</p>
             @if($redirect_uri)
-                <p>Now you will be redirected to <a id="redirect_url" name="redirect_url" href="{{$redirect_uri}}">{{$redirect_uri}}</a></p>
+                <p>Now you will be redirected to <a id="redirect_url" name="redirect_url"
+                                                    href="{{$redirect_uri}}">{{$redirect_uri}}</a></p>
             @endif
         </div>
     </div>