Skip to content

Commit

Permalink
Improve passwordmanager and autocomplete features for account creation (
Browse files Browse the repository at this point in the history 
#1702)
  • Loading branch information
@J535D165
J535D165 committed Mar 18, 2024
1 parent 80ac6e7 commit 506e695
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 51 deletions.
2 changes: 2 additions & 0 deletions asreview/webapp/src/Components/SignInForm.js
View file
Expand Up @@ -109,6 +109,7 @@ const SignInForm = (props) => {
variant="outlined"
fullWidth
autoFocus
autoComplete="email"
/>
<FormControl>
<TextField
Expand All @@ -120,6 +121,7 @@ const SignInForm = (props) => {
variant="outlined"
fullWidth
type={returnType()}
autoComplete="current-password"
/>
<FormControlLabel
control={
Expand Down
70 changes: 35 additions & 35 deletions asreview/webapp/src/Components/SignUpForm.js
View file
Expand Up @@ -15,6 +15,7 @@ import {
Stack,
TextField,
Typography,
Divider,
} from "@mui/material";

import { InlineErrorHandler } from ".";
Expand Down Expand Up @@ -82,11 +83,7 @@ const SignUpForm = (props) => {
// be called when the form is submitted
const navigate = useNavigate();

const [showPassword, toggleShowPassword] = useToggle();

const returnType = () => {
return !showPassword ? "password" : "text";
};
const [showPassword, toggleShowPassword] = useToggle(false);

const initialValues = {
email: "",
Expand Down Expand Up @@ -146,14 +143,14 @@ const SignUpForm = (props) => {
spacing={3}
component="form"
noValidate
autoComplete="off"
>
<TextField
id="email"
name="email"
label="Email"
size="small"
type="email"
autoComplete="email"
fullWidth
value={formik.values.email}
onChange={formik.handleChange}
Expand All @@ -162,32 +159,6 @@ const SignUpForm = (props) => {
{formik.touched.email && formik.errors.email ? (
<FHT error={true}>{formik.errors.email}</FHT>
) : null}
<TextField
id="name"
name="name"
label="Full name"
size="small"
fullWidth
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.name && formik.errors.name ? (
<FHT error={true}>{formik.errors.name}</FHT>
) : null}
<TextField
id="affiliation"
label="Affiliation"
size="small"
name="affiliation"
fullWidth
value={formik.values.affiliation}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.affiliation && formik.errors.affiliation ? (
<FHT error={true}>{formik.errors.affiliation}</FHT>
) : null}
<FormControl>
<Stack direction="row" spacing={2}>
<TextField
Expand All @@ -196,7 +167,7 @@ const SignUpForm = (props) => {
size="small"
autoComplete="new-password"
fullWidth
type={returnType()}
type={showPassword ? "text" : "password"}
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
Expand All @@ -205,8 +176,9 @@ const SignUpForm = (props) => {
id="confirmPassword"
label="Confirm Password"
size="small"
autoComplete="new-password"
fullWidth
type={returnType()}
type={showPassword ? "text" : "password"}
onKeyDown={handleEnterKey}
value={formik.values.confirmPassword}
onChange={formik.handleChange}
Expand Down Expand Up @@ -254,7 +226,35 @@ const SignUpForm = (props) => {
)}
</FormControl>
{isError && <InlineErrorHandler message={error.message} />}

<Divider />
<TextField
id="name"
name="name"
label="Full name"
size="small"
autoComplete="name"
fullWidth
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.name && formik.errors.name ? (
<FHT error={true}>{formik.errors.name}</FHT>
) : null}
<TextField
id="affiliation"
label="Affiliation"
size="small"
name="affiliation"
autoComplete="organization"
fullWidth
value={formik.values.affiliation}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.affiliation && formik.errors.affiliation ? (
<FHT error={true}>{formik.errors.affiliation}</FHT>
) : null}
<Stack className={classes.button} direction="row">
<Button
id="sign-in"
Expand Down
36 changes: 20 additions & 16 deletions asreview/webapp/src/HomeComponents/DashboardComponents/ProfilePage.js
View file
Expand Up @@ -129,10 +129,22 @@ const ProfilePage = (props) => {
const renderPasswordFields = (formik) => {
return (
<>
<Divider />
<FormControl>
<Stack direction="column" spacing={2}>
<Typography variant="h6">Change Password</Typography>
<Typography variant="h6">Change email & password</Typography>
<TextField
id="email"
label="Email"
size="small"
fullWidth
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
autoComplete="off"
/>
{formik.touched.email && formik.errors.email ? (
<FHT error={true}>{formik.errors.email}</FHT>
) : null}
<TextField
id="oldPassword"
label="Old Password"
Expand All @@ -142,7 +154,7 @@ const ProfilePage = (props) => {
value={formik.values.oldPassword}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
autoComplete="off"
autoComplete="current-password"
/>
<TextField
id="newPassword"
Expand All @@ -155,6 +167,7 @@ const ProfilePage = (props) => {
onBlur={formik.handleBlur}
style={{ opacity: passwordFieldOpacity() }}
disabled={oldPasswordHasValue()}
autoComplete="new-password"
/>
<TextField
id="confirmPassword"
Expand All @@ -167,6 +180,7 @@ const ProfilePage = (props) => {
onBlur={formik.handleBlur}
style={{ opacity: passwordFieldOpacity() }}
disabled={oldPasswordHasValue()}
autoComplete="new-password"
/>
</Stack>
</FormControl>
Expand All @@ -188,6 +202,7 @@ const ProfilePage = (props) => {
label="Show passwords"
/>
</FormControl>
<Divider />
</>
);
};
Expand Down Expand Up @@ -236,19 +251,6 @@ const ProfilePage = (props) => {
{!showFirstTimeMessage && (
<Typography variant="h6">User data</Typography>
)}
<TextField
autoFocus
id="email"
label="Email"
size="small"
fullWidth
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email ? (
<FHT error={true}>{formik.errors.email}</FHT>
) : null}
<TextField
id="name"
label="Full name"
Expand All @@ -257,6 +259,7 @@ const ProfilePage = (props) => {
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
autoComplete="off"
/>
{formik.touched.name && formik.errors.name ? (
<FHT error={true}>{formik.errors.name}</FHT>
Expand All @@ -269,6 +272,7 @@ const ProfilePage = (props) => {
value={formik.values.affiliation}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
autoComplete="off"
/>
{formik.touched.affiliation && formik.errors.affiliation ? (
<FHT error={true}>{formik.errors.affiliation}</FHT>
Expand Down

0 comments on commit 506e695

Please sign in to comment.