Change design when email forgot-password has been sent

packages/strapi-plugin-graphql/package.json

@@ -48,4 +48,4 @@
     "npm": ">= 5.3.0"
   },
   "license": "MIT"
-}
+}

packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js

@@ -92,6 +92,8 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
   }
 
   renderButton = () => {
+    const { match: { params: { authType } }, submitSuccess } = this.props;
+
     if (this.props.match.params.authType === 'login') {
       return (
         <div className={cn('col-md-6', styles.loginButton)}>
@@ -99,13 +101,16 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
         </div>
       );
     }
-    const label = this.props.match.params.authType === 'forgot-password' && this.props.submitSuccess ? 'users-permissions.Auth.form.button.forgot-password.success' : `users-permissions.Auth.form.button.${this.props.match.params.authType}`;
+    const isEmailForgotSent = authType === 'forgot-password' && submitSuccess;
+    const label = isEmailForgotSent ? 'users-permissions.Auth.form.button.forgot-password.success' : `users-permissions.Auth.form.button.${this.props.match.params.authType}`;
+  
     return (
       <div className={cn('col-md-12', styles.buttonContainer)}>
         <Button
+          className={cn(isEmailForgotSent && styles.buttonForgotSuccess)}
           label={label}
           style={{ width: '100%' }}
-          primary
+          primary={!isEmailForgotSent}
           type="submit"
         />
       </div>
@@ -133,15 +138,36 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
     return <div />;
   }
 
+  renderInputs = () => {
+    const { match: { params: { authType } } } = this.props;
+    const inputs = get(form, ['form', authType]);
+
+    return map(inputs, (input, key) => (
+      <Input
+        autoFocus={key === 0}
+        customBootstrapClass={get(input, 'customBootstrapClass')}
+        didCheckErrors={this.props.didCheckErrors}
+        errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', input.name]), 'errors'])}
+        key={get(input, 'name')}
+        label={authType === 'forgot-password' && this.props.submitSuccess? { id: 'users-permissions.Auth.form.forgot-password.email.label.success' } : get(input, 'label')}
+        name={get(input, 'name')}
+        onChange={this.props.onChangeInput}
+        placeholder={get(input, 'placeholder')}
+        type={get(input, 'type')}
+        validations={{ required: true }}
+        value={get(this.props.modifiedData, get(input, 'name'), get(input, 'value'))}
+        noErrorsDescription={this.props.noErrorsDescription}
+      />
+    ));
+  }
+
   render() {
-    const inputs = get(form, ['form', this.props.match.params.authType]);
+    const { match: { params: { authType } }, modifiedData, submitSuccess } = this.props;
-    const divStyle = this.props.match.params.authType === 'register' ? { marginTop: '3.2rem' } : { marginTop: '.9rem' };
+    let divStyle = authType === 'register' ? { marginTop: '3.2rem' } : { marginTop: '.9rem' };
-    const withLogo = this.props.match.params.authType === 'register' ? (
+
-      <div className={styles.logoContainer}><img src={LogoStrapi} alt="logo" /></div>
+    if (authType === 'forgot-password' && submitSuccess) {
-    ) : '';
+      divStyle = { marginTop: '.9rem', minHeight: '18.2rem' };
-    const headerDescription = this.props.match.params.authType === 'register' ?
+    }
-      <FormattedMessage id="users-permissions.Auth.header.register.description" />
-      : <span />;
 
     return (
       <div className={styles.authPage}>
@@ -154,10 +180,16 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
             )}
           </div>
           <div className={styles.headerDescription}>
-            {headerDescription}
+            {authType === 'register' && <FormattedMessage id="users-permissions.Auth.header.register.description" />}
           </div>
 
-          <div className={styles.formContainer} style={divStyle}>
+          <div
+            className={cn(
+              styles.formContainer,
+              authType === 'forgot-password' && submitSuccess ? styles.borderedSuccess : styles.bordered,
+            )}
+            style={divStyle}
+          >
             <form onSubmit={this.handleSubmit}>
               <div className="container-fluid">
                 {this.props.noErrorsDescription && !isEmpty(get(this.props.formErrors, ['0', 'errors', '0', 'id']))? (
@@ -166,23 +198,14 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
                   </div>
                 ): ''}
                 <div className="row" style={{ textAlign: 'start' }}>
-                  {map(inputs, (input, key) => (
+                  {!submitSuccess && this.renderInputs()}
-                    <Input
+                  { authType === 'forgot-password' && submitSuccess && (
-                      autoFocus={key === 0}
+                    <div className={styles.forgotSuccess}>
-                      customBootstrapClass={get(input, 'customBootstrapClass')}
+                      <FormattedMessage id="users-permissions.Auth.form.forgot-password.email.label.success" />
-                      didCheckErrors={this.props.didCheckErrors}
+                      <br />
-                      errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', input.name]), 'errors'])}
+                      <p>{get(modifiedData, 'email', '')}</p>
-                      key={get(input, 'name')}
+                    </div>
-                      label={this.props.match.params.authType === 'forgot-password' && this.props.submitSuccess? { id: 'users-permissions.Auth.form.forgot-password.email.label.success' } : get(input, 'label')}
+                  )}
-                      name={get(input, 'name')}
-                      onChange={this.props.onChangeInput}
-                      placeholder={get(input, 'placeholder')}
-                      type={get(input, 'type')}
-                      validations={{ required: true }}
-                      value={get(this.props.modifiedData, get(input, 'name'), get(input, 'value'))}
-                      noErrorsDescription={this.props.noErrorsDescription}
-                    />
-                  ))}
                   {this.renderButton()}
                 </div>
               </div>
@@ -192,7 +215,7 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
             {this.renderLink()}
           </div>
         </div>
-        {withLogo}
+        {authType === 'register' && <div className={styles.logoContainer}><img src={LogoStrapi} alt="logo" /></div>}
       </div>
     );
   }

packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/styles.scss

@@ -51,7 +51,6 @@
   margin-bottom: 0;
   padding: 3.9rem 1.5rem 1.5rem 1.5rem;
   border-radius: 2px;
-  border-top: 2px solid #1C5DE7;
   background-color: #FFFFFF;
   box-shadow: 0 2px 4px 0 #E3E9F3;
 }
@@ -82,6 +81,13 @@
   }
 }
 
+.bordered {
+  border-top: 2px solid #1C5DE7;
+}
+
+.borderedSuccess {
+  border-top: 2px solid #5A9E06;
+}
 
 .logoContainer {
   position: absolute;
@@ -91,3 +97,22 @@
     height: 34px;
   }
 }
+
+.buttonForgotSuccess {
+  border: 1px solid #5A9E06;
+  color: #5A9E06;
+}
+
+.forgotSuccess {
+  width: 100%;
+  // margin-top: -2px;
+  text-align: center;
+  color: #5A9E06;
+  font-size: 13px;
+  font-weight: 500;
+  > p {
+    margin-top: 17px;
+    margin-bottom: 18px;
+    color: #333740;
+  }
+}