Skip to content

Sign in flow UI refactor #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smarcet merged 1 commit into from
Mar 31, 2022
Merged

Sign in flow UI refactor #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 116 additions & 85 deletions resources/js/login/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -130,8 +145,8 @@ const PasswordInputForm = ({
}
<ExistingAccountActions
emitOtpAction={handleEmitOtpAction}
onAuthenticate={onAuthenticate}
disableInput={disableInput}
userName={userNameValue}
forgotPasswordAction={forgotPasswordAction}
/>
</form>
);
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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.";
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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}
Expand All @@ -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}
/>
Expand Down
45 changes: 27 additions & 18 deletions resources/js/login/login.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
Expand Down
9 changes: 6 additions & 3 deletions resources/views/auth/register_success.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down