From fe57dd2d2ffc952dd669d7c4d5b76d2c2aa878a0 Mon Sep 17 00:00:00 2001
From: Jovert Lota Palonpon <palonponjovertlota@gmail.com>
Date: Tue, 9 Apr 2019 23:10:33 +0800
Subject: [PATCH] Validate only when submitCount > 0, resolve #22

---
 .eslintrc                                     |   2 +-
 .../views/__backoffice/users/Forms/Account.js |  55 ++-
 .../views/__backoffice/users/Forms/Profile.js | 382 +++++++++---------
 resources/js/views/auth/passwords/Request.js  |  31 +-
 resources/js/views/auth/passwords/Reset.js    |  45 ++-
 resources/js/views/layouts/Auth.js            |   6 +-
 6 files changed, 284 insertions(+), 237 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index a7d0e6c..b5c6548 100755
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,7 +17,7 @@
     },
     "plugins": ["react"],
     "rules": {
-        "indent": ["warn", "4"],
+        "indent": ["warn", 4],
         "linebreak-style": ["warn", "unix"],
         "quotes": ["warn", "single"],
         "semi": ["warn", "always"],
diff --git a/resources/js/views/__backoffice/users/Forms/Account.js b/resources/js/views/__backoffice/users/Forms/Account.js
index 6ace5f6..a2b1d46 100644
--- a/resources/js/views/__backoffice/users/Forms/Account.js
+++ b/resources/js/views/__backoffice/users/Forms/Account.js
@@ -32,7 +32,7 @@ const Account = props => {
             onSubmit={handleSubmit}
             validateOnBlur={false}
         >
-            {({ values, handleChange, errors, isSubmitting }) => (
+            {({ values, handleChange, errors, submitCount, isSubmitting }) => (
                 <Form>
                     <Typography variant="h6" gutterBottom>
                         Account Settings
@@ -42,7 +42,10 @@ const Account = props => {
                         <Grid item xs={12} sm={12}>
                             <FormControl
                                 className={classes.formControl}
-                                error={errors.hasOwnProperty('type')}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('type')
+                                }
                             >
                                 <InputLabel htmlFor="type">
                                     Type{' '}
@@ -68,11 +71,12 @@ const Account = props => {
                                     <MenuItem value="user">User</MenuItem>
                                 </Select>
 
-                                {errors.hasOwnProperty('type') && (
-                                    <FormHelperText>
-                                        {errors.type}
-                                    </FormHelperText>
-                                )}
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('type') && (
+                                        <FormHelperText>
+                                            {errors.type}
+                                        </FormHelperText>
+                                    )}
                             </FormControl>
                         </Grid>
                     </Grid>
@@ -81,7 +85,10 @@ const Account = props => {
                         <Grid item xs={12} sm={6}>
                             <FormControl
                                 className={classes.formControl}
-                                error={errors.hasOwnProperty('email')}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('email')
+                                }
                             >
                                 <InputLabel htmlFor="email">
                                     Email{' '}
@@ -95,18 +102,23 @@ const Account = props => {
                                     onChange={handleChange}
                                     fullWidth
                                 />
-                                {errors.hasOwnProperty('email') && (
-                                    <FormHelperText>
-                                        {errors.email}
-                                    </FormHelperText>
-                                )}
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('email') && (
+                                        <FormHelperText>
+                                            {errors.email}
+                                        </FormHelperText>
+                                    )}
                             </FormControl>
                         </Grid>
 
                         <Grid item xs={12} sm={6}>
                             <FormControl
                                 className={classes.formControl}
-                                error={errors.hasOwnProperty('username')}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('username')
+                                }
                             >
                                 <InputLabel htmlFor="username">
                                     Username
@@ -119,11 +131,13 @@ const Account = props => {
                                     onChange={handleChange}
                                     fullWidth
                                 />
-                                {errors.hasOwnProperty('username') && (
-                                    <FormHelperText>
-                                        {errors.username}
-                                    </FormHelperText>
-                                )}
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('username') && (
+                                        <FormHelperText>
+                                            {errors.username}
+                                        </FormHelperText>
+                                    )}
                             </FormControl>
                         </Grid>
                     </Grid>
@@ -145,7 +159,8 @@ const Account = props => {
                                 color="primary"
                                 disabled={
                                     (errors &&
-                                        Object.keys(errors).length > 0) ||
+                                        Object.keys(errors).length > 0 &&
+                                        submitCount > 0) ||
                                     isSubmitting
                                 }
                             >
diff --git a/resources/js/views/__backoffice/users/Forms/Profile.js b/resources/js/views/__backoffice/users/Forms/Profile.js
index 4fc5b4d..47a6668 100644
--- a/resources/js/views/__backoffice/users/Forms/Profile.js
+++ b/resources/js/views/__backoffice/users/Forms/Profile.js
@@ -65,226 +65,236 @@ const Profile = props => {
         >
             {({
                 values,
-                handleChange,
-                setFieldValue,
                 errors,
+                submitCount,
                 isSubmitting,
-            }) => {
-                if (apiErrors && Object.keys(apiErrors).length > 0) {
-                    errors = apiErrors;
-                }
-
-                return (
-                    <Form>
-                        <Typography variant="h6" gutterBottom>
-                            Personal Information
-                        </Typography>
-
-                        <Grid container spacing={24}>
-                            <Grid item xs={12} sm={4}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('firstname')}
-                                >
-                                    <InputLabel htmlFor="firstname">
-                                        Firstname{' '}
-                                        <span className={classes.required}>
-                                            *
-                                        </span>
-                                    </InputLabel>
-
-                                    <Input
-                                        id="firstname"
-                                        name="firstname"
-                                        value={values.firstname}
-                                        onChange={handleChange}
-                                        fullWidth
-                                    />
-
-                                    {errors.hasOwnProperty('firstname') && (
+                handleChange,
+                setFieldValue,
+            }) => (
+                <Form>
+                    <Typography variant="h6" gutterBottom>
+                        Personal Information
+                    </Typography>
+
+                    <Grid container spacing={24}>
+                        <Grid item xs={12} sm={4}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('firstname')
+                                }
+                            >
+                                <InputLabel htmlFor="firstname">
+                                    Firstname{' '}
+                                    <span className={classes.required}>*</span>
+                                </InputLabel>
+
+                                <Input
+                                    id="firstname"
+                                    name="firstname"
+                                    value={values.firstname}
+                                    onChange={handleChange}
+                                    fullWidth
+                                />
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('firstname') && (
                                         <FormHelperText>
                                             {errors.firstname}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
-
-                            <Grid item xs={12} sm={4}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('middlename')}
-                                >
-                                    <InputLabel htmlFor="middlename">
-                                        Middlename
-                                    </InputLabel>
-
-                                    <Input
-                                        id="middlename"
-                                        name="middlename"
-                                        value={values.middlename}
-                                        onChange={handleChange}
-                                        fullWidth
-                                    />
+                            </FormControl>
+                        </Grid>
 
-                                    {errors.hasOwnProperty('middlename') && (
+                        <Grid item xs={12} sm={4}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('middlename')
+                                }
+                            >
+                                <InputLabel htmlFor="middlename">
+                                    Middlename
+                                </InputLabel>
+
+                                <Input
+                                    id="middlename"
+                                    name="middlename"
+                                    value={values.middlename}
+                                    onChange={handleChange}
+                                    fullWidth
+                                />
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('middlename') && (
                                         <FormHelperText>
                                             {errors.middlename}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
-
-                            <Grid item xs={12} sm={4}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('lastname')}
-                                >
-                                    <InputLabel htmlFor="lastname">
-                                        Lastname{' '}
-                                        <span className={classes.required}>
-                                            *
-                                        </span>
-                                    </InputLabel>
-
-                                    <Input
-                                        id="lastname"
-                                        name="lastname"
-                                        value={values.lastname}
-                                        onChange={handleChange}
-                                        fullWidth
-                                    />
+                            </FormControl>
+                        </Grid>
 
-                                    {errors.hasOwnProperty('lastname') && (
+                        <Grid item xs={12} sm={4}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('lastname')
+                                }
+                            >
+                                <InputLabel htmlFor="lastname">
+                                    Lastname{' '}
+                                    <span className={classes.required}>*</span>
+                                </InputLabel>
+
+                                <Input
+                                    id="lastname"
+                                    name="lastname"
+                                    value={values.lastname}
+                                    onChange={handleChange}
+                                    fullWidth
+                                />
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('lastname') && (
                                         <FormHelperText>
                                             {errors.lastname}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
+                            </FormControl>
                         </Grid>
-
-                        <Grid container spacing={24}>
-                            <Grid item xs={12} sm={6}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('gender')}
+                    </Grid>
+
+                    <Grid container spacing={24}>
+                        <Grid item xs={12} sm={6}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('gender')
+                                }
+                            >
+                                <InputLabel htmlFor="gender">Gender</InputLabel>
+
+                                <Select
+                                    id="gender"
+                                    name="gender"
+                                    value={values.gender}
+                                    onChange={handleChange}
+                                    input={<Input fullWidth />}
+                                    autoWidth
                                 >
-                                    <InputLabel htmlFor="gender">
-                                        Gender
-                                    </InputLabel>
-
-                                    <Select
-                                        id="gender"
-                                        name="gender"
-                                        value={values.gender}
-                                        onChange={handleChange}
-                                        input={<Input fullWidth />}
-                                        autoWidth
-                                    >
-                                        <MenuItem value="">
-                                            Please select the gender
-                                        </MenuItem>
-
-                                        <MenuItem value="female">
-                                            Female
-                                        </MenuItem>
-
-                                        <MenuItem value="male">Male</MenuItem>
-                                    </Select>
-
-                                    {errors.hasOwnProperty('gender') && (
+                                    <MenuItem value="">
+                                        Please select the gender
+                                    </MenuItem>
+
+                                    <MenuItem value="female">Female</MenuItem>
+
+                                    <MenuItem value="male">Male</MenuItem>
+                                </Select>
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('gender') && (
                                         <FormHelperText>
                                             {errors.gender}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
+                            </FormControl>
+                        </Grid>
 
-                            <Grid item xs={12} sm={6}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('birthdate')}
-                                >
-                                    <MuiPickersUtilsProvider
-                                        utils={MomentUtils}
-                                    >
-                                        <DatePicker
-                                            id="birthdate"
-                                            name="birthdate"
-                                            label="Birthdate"
-                                            placeholder="Please pick the birthdate"
-                                            value={values.birthdate}
-                                            onChange={date =>
-                                                setFieldValue('birthdate', date)
-                                            }
-                                            format="YYYY-MM-DD"
-                                            maxDate={moment()
-                                                .subtract(10, 'y')
-                                                .subtract(1, 'd')
-                                                .format('YYYY-MM-DD')}
-                                            keyboard
-                                            clearable
-                                            disableFuture
-                                        />
-                                    </MuiPickersUtilsProvider>
-
-                                    {errors.hasOwnProperty('birthdate') && (
+                        <Grid item xs={12} sm={6}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('birthdate')
+                                }
+                            >
+                                <MuiPickersUtilsProvider utils={MomentUtils}>
+                                    <DatePicker
+                                        id="birthdate"
+                                        name="birthdate"
+                                        label="Birthdate"
+                                        placeholder="Please pick the birthdate"
+                                        value={values.birthdate}
+                                        onChange={date =>
+                                            setFieldValue('birthdate', date)
+                                        }
+                                        format="YYYY-MM-DD"
+                                        maxDate={moment()
+                                            .subtract(10, 'y')
+                                            .subtract(1, 'd')
+                                            .format('YYYY-MM-DD')}
+                                        keyboard
+                                        clearable
+                                        disableFuture
+                                    />
+                                </MuiPickersUtilsProvider>
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('birthdate') && (
                                         <FormHelperText>
                                             {errors.birthdate}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
+                            </FormControl>
                         </Grid>
-
-                        <Grid container spacing={24}>
-                            <Grid item xs={12} sm={12}>
-                                <FormControl
-                                    className={classes.formControl}
-                                    error={errors.hasOwnProperty('address')}
-                                >
-                                    <InputLabel htmlFor="address">
-                                        Address
-                                    </InputLabel>
-
-                                    <Input
-                                        id="address"
-                                        name="address"
-                                        value={values.address}
-                                        onChange={handleChange}
-                                        fullWidth
-                                    />
-
-                                    {errors.hasOwnProperty('address') && (
+                    </Grid>
+
+                    <Grid container spacing={24}>
+                        <Grid item xs={12} sm={12}>
+                            <FormControl
+                                className={classes.formControl}
+                                error={
+                                    submitCount > 0 &&
+                                    errors.hasOwnProperty('address')
+                                }
+                            >
+                                <InputLabel htmlFor="address">
+                                    Address
+                                </InputLabel>
+
+                                <Input
+                                    id="address"
+                                    name="address"
+                                    value={values.address}
+                                    onChange={handleChange}
+                                    fullWidth
+                                />
+
+                                {submitCount > 0 &&
+                                    errors.hasOwnProperty('address') && (
                                         <FormHelperText>
                                             {errors.address}
                                         </FormHelperText>
                                     )}
-                                </FormControl>
-                            </Grid>
+                            </FormControl>
                         </Grid>
-
-                        <div className={classes.sectionSpacer} />
-
-                        <Grid container spacing={24} justify="flex-end">
-                            <Grid item>
-                                <Button
-                                    type="submit"
-                                    variant="contained"
-                                    color="primary"
-                                    disabled={
-                                        (errors &&
-                                            Object.keys(errors).length > 0) ||
-                                        isSubmitting
-                                    }
-                                >
-                                    Next
-                                </Button>
-                            </Grid>
+                    </Grid>
+
+                    <div className={classes.sectionSpacer} />
+
+                    <Grid container spacing={24} justify="flex-end">
+                        <Grid item>
+                            <Button
+                                type="submit"
+                                variant="contained"
+                                color="primary"
+                                disabled={
+                                    (errors &&
+                                        Object.keys(errors).length > 0 &&
+                                        submitCount > 0) ||
+                                    isSubmitting
+                                }
+                            >
+                                Next
+                            </Button>
                         </Grid>
-                    </Form>
-                );
-            }}
+                    </Grid>
+                </Form>
+            )}
         </Formik>
     );
 };
diff --git a/resources/js/views/auth/passwords/Request.js b/resources/js/views/auth/passwords/Request.js
index d29a786..883aada 100755
--- a/resources/js/views/auth/passwords/Request.js
+++ b/resources/js/views/auth/passwords/Request.js
@@ -49,12 +49,7 @@ class PasswordRequest extends Component {
                 message: {
                     type: 'success',
                     title: 'Link Sent',
-                    body: (
-                        <Typography>
-                            Check your email to reset your account.
-                            <br /> Thank you.
-                        </Typography>
-                    ),
+                    body: `Check your email to reset your account. Thank you.`,
                     action: () => history.push(`/signin?username=${email}`),
                 },
             });
@@ -65,12 +60,7 @@ class PasswordRequest extends Component {
                     message: {
                         type: 'error',
                         title: 'Something went wrong',
-                        body: (
-                            <Typography>
-                                Oops? Something went wrong here.
-                                <br /> Please try again.
-                            </Typography>
-                        ),
+                        body: `Oops? Something went wrong here. Please try again.`,
                         action: () => window.location.reload(),
                     },
                 });
@@ -126,7 +116,13 @@ class PasswordRequest extends Component {
                         ),
                     })}
                 >
-                    {({ values, handleChange, errors, isSubmitting }) => (
+                    {({
+                        values,
+                        handleChange,
+                        errors,
+                        submitCount,
+                        isSubmitting,
+                    }) => (
                         <Form>
                             <Grid container direction="column">
                                 <Grid item className={classes.formGroup}>
@@ -138,8 +134,12 @@ class PasswordRequest extends Component {
                                         onChange={handleChange}
                                         variant="outlined"
                                         fullWidth
-                                        error={errors.hasOwnProperty('email')}
+                                        error={
+                                            submitCount > 0 &&
+                                            errors.hasOwnProperty('email')
+                                        }
                                         helperText={
+                                            submitCount > 0 &&
                                             errors.hasOwnProperty('email') &&
                                             errors.email
                                         }
@@ -180,7 +180,8 @@ class PasswordRequest extends Component {
                                         disabled={
                                             (errors &&
                                                 Object.keys(errors).length >
-                                                    0) ||
+                                                    0 &&
+                                                submitCount > 0) ||
                                             isSubmitting
                                         }
                                     >
diff --git a/resources/js/views/auth/passwords/Reset.js b/resources/js/views/auth/passwords/Reset.js
index 37444ce..eb76c96 100755
--- a/resources/js/views/auth/passwords/Reset.js
+++ b/resources/js/views/auth/passwords/Reset.js
@@ -72,7 +72,18 @@ class PasswordReset extends Component {
             this.setState({ loading: false });
         } catch (error) {
             if (!error.response) {
-                throw new Error('Unknown error');
+                this.setState({
+                    loading: false,
+                    message: {
+                        type: 'error',
+                        title: 'Something went wrong',
+                        body:
+                            'Oops? Something went wrong here. Please try again.',
+                        action: () => window.location.reload(),
+                    },
+                });
+
+                return;
             }
 
             const { errors } = error.response.data;
@@ -159,7 +170,13 @@ class PasswordReset extends Component {
                             ),
                     })}
                 >
-                    {({ values, handleChange, errors, isSubmitting }) => (
+                    {({
+                        values,
+                        handleChange,
+                        errors,
+                        submitCount,
+                        isSubmitting,
+                    }) => (
                         <Form>
                             <Grid container direction="column">
                                 <Grid item className={classes.formGroup}>
@@ -173,10 +190,12 @@ class PasswordReset extends Component {
                                         onChange={handleChange}
                                         variant="outlined"
                                         fullWidth
-                                        error={errors.hasOwnProperty(
-                                            'password',
-                                        )}
+                                        error={
+                                            submitCount > 0 &&
+                                            errors.hasOwnProperty('password')
+                                        }
                                         helperText={
+                                            submitCount > 0 &&
                                             errors.hasOwnProperty('password') &&
                                             errors.password
                                         }
@@ -216,13 +235,18 @@ class PasswordReset extends Component {
                                         onChange={handleChange}
                                         variant="outlined"
                                         fullWidth
-                                        error={errors.hasOwnProperty(
-                                            'password_confirmation',
-                                        )}
+                                        error={
+                                            submitCount > 0 &&
+                                            errors.hasOwnProperty(
+                                                'password_confirmation',
+                                            )
+                                        }
                                         helperText={
+                                            submitCount > 0 &&
                                             errors.hasOwnProperty(
                                                 'password_confirmation',
-                                            ) && errors.password_confirmation
+                                            ) &&
+                                            errors.password_confirmation
                                         }
                                         InputProps={{
                                             endAdornment: (
@@ -281,7 +305,8 @@ class PasswordReset extends Component {
                                         disabled={
                                             (errors &&
                                                 Object.keys(errors).length >
-                                                    0) ||
+                                                    0 &&
+                                                submitCount > 0) ||
                                             isSubmitting
                                         }
                                     >
diff --git a/resources/js/views/layouts/Auth.js b/resources/js/views/layouts/Auth.js
index 94d06ff..08d8080 100755
--- a/resources/js/views/layouts/Auth.js
+++ b/resources/js/views/layouts/Auth.js
@@ -50,11 +50,7 @@ const Auth = props => (
                                     : props.title}
                             </Typography>
 
-                            <Typography
-                                variant="h6"
-                                component="h4"
-                                color="textSecondary"
-                            >
+                            <Typography color="textSecondary">
                                 {props.message.hasOwnProperty('body')
                                     ? props.message.body
                                     : props.subTitle}