fix(ui) - reset password message (#1098)

frontend/app/components/ForgotPassword/ForgotPassword.js

@@ -9,6 +9,7 @@ import { withRouter } from 'react-router-dom';
 import { validateEmail } from 'App/validate';
 import cn from 'classnames';
 import stl from './forgotPassword.module.css';
+import Copyright from 'Shared/Copyright';
 
 const LOGIN = loginRoute();
 const recaptchaRef = React.createRef();
@@ -145,7 +146,7 @@ export default class ForgotPassword extends React.PureComponent {
                         <label>{'Email Address'}</label>
                         <Input
                           autoFocus={true}
-                          autocomplete="email"
+                          autoComplete="email"
                           type="email"
                           placeholder="Email"
                           name="email"
@@ -172,7 +173,7 @@ export default class ForgotPassword extends React.PureComponent {
                           <label>{'New password'}</label>
                           {/* <i className={stl.inputIconPassword} /> */}
                           <Input
-                            autocomplete="new-password"
+                            autoComplete="new-password"
                             type="password"
                             placeholder="Type here..."
                             name="password"
@@ -188,7 +189,7 @@ export default class ForgotPassword extends React.PureComponent {
                         <Form.Field>
                         <label>{'Cofirm password'}</label>
                           <Input
-                            autocomplete="new-password"
+                            autoComplete="new-password"
                             type="password"
                             placeholder="Re-enter your new password"
                             name="passwordRepeat"
@@ -207,19 +208,19 @@ export default class ForgotPassword extends React.PureComponent {
                   </div>
                 </Loader>
                 <div className="mt-4">
-                  {errors && (
-                    <div className={stl.errors}>
-                      {errors.map((error) => (
-                        <span>
-                          {error}
-                          <br />
-                        </span>
-                      ))}
+                  {errors && errors.map((error, i) => (
+                    <div className="flex items-center flex-col text-center" key={i}>
+                      <div className="w-16 h-16 rounded-full bg-red-lightest flex items-center justify-center mb-2">
+                        <Icon name="envelope-x" size="30" color="red" />
+                      </div>
+                      {error}
                     </div>
-                  )}
-                  <div data-hidden={!updated} className={stl.success}>
-                    <Icon name="check" size="30" color="green" />
-                    {'Your password has been updated sucessfully.'}
+                  ))}
+                  <div data-hidden={!updated} className="flex items-center flex-col text-center">
+                    <div className="w-10 h-10 bg-tealx-lightest rounded-full flex items-center justify-center mb-3">
+                      <Icon name="check" size="30" color="tealx" />
+                    </div>
+                    <span>{'Your password has been updated sucessfully.'}</span>
                   </div>
                 </div>
 

frontend/app/components/Login/Login.js

@@ -12,6 +12,7 @@ import { setJwt } from 'Duck/user';
 import LoginBg from '../../svg/login-illustration.svg';
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
 import { fetchTenants } from 'Duck/user';
+import Copyright from 'Shared/Copyright';
 
 const FORGOT_PASSWORD = forgotPassword();
 const SIGNUP_ROUTE = signup();

frontend/app/svg/icons/envelope-x.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-envelope-x" viewBox="0 0 16 16">
+  <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2H2Zm3.708 6.208L1 11.105V5.383l4.708 2.825ZM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2-7-4.2Z"/>
+  <path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-4.854-1.354a.5.5 0 0 0 0 .708l.647.646-.647.646a.5.5 0 0 0 .708.708l.646-.647.646.647a.5.5 0 0 0 .708-.708l-.647-.646.647-.646a.5.5 0 0 0-.708-.708l-.646.647-.646-.647a.5.5 0 0 0-.708 0Z"/>
+</svg>