change(ui) - login, create password pages

frontend/app/components/ForgotPassword/ForgotPassword.js

@@ -114,22 +114,18 @@ export default class ForgotPassword extends React.PureComponent {
             <img src="/assets/logo.svg" width={200} />
           </div>
           <div className="border rounded bg-white" style={{ width: '350px' }}>
-            <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">
-              { resetting ? "Create Password" : "Reset Password" }
-            </h2>
+            {!resetting && <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">Reset Password</h2>}
+            {resetting && <h2 className="text-center text-lg font-medium mb-6 border-b p-5 w-full">
+              Welcome, join your organization by <br/> setting a new password
+              </h2>
+            }
 
             <div className="px-8">
-              {resetting && <div className="my-6">Provide your email address, so we can send you a link to reset your password.</div> }
               <Form
                 onSubmit={this.onSubmit}
                 style={{ minWidth: '50%' }}
                 className="flex flex-col items-center justify-center"
               >
-                {/* <div className="mb-8">
-                  <h2 className="text-center text-3xl mb-6">{`${
-                    resetting ? 'Create' : 'Reset'
-                  } Password`}</h2>
-                </div> */}
                 <Loader loading={loading}>
                   <div data-hidden={updated} className="w-full">
                     {CAPTCHA_ENABLED && (
@@ -172,28 +168,31 @@ export default class ForgotPassword extends React.PureComponent {
                     {resetting && (
                       <React.Fragment>
                         <Form.Field>
-                          <i className={stl.inputIconPassword} />
+                          <label>{'Set a password'}</label>
+                          {/* <i className={stl.inputIconPassword} /> */}
                           <Input
                             autocomplete="new-password"
                             type="password"
-                            placeholder="Password"
+                            placeholder="Type here..."
                             name="password"
                             onChange={this.write}
                             className="w-full"
+                            icon="key"
                           />
                         </Form.Field>
                         <div className={stl.passwordPolicy} data-hidden={!this.shouldShouwPolicy()}>
                           {PASSWORD_POLICY}
                         </div>
                         <Form.Field>
-                          <i className={stl.inputIconPassword} />
+                        <label>{'Cofirm password'}</label>
                           <Input
                             autocomplete="new-password"
                             type="password"
-                            placeholder="Confirm Password"
+                            placeholder="Re-enter your new password"
                             name="passwordRepeat"
                             onChange={this.write}
                             className="w-full"
+                            icon="key"
                           />
                         </Form.Field>
                       </React.Fragment>

frontend/app/components/Login/Login.js

@@ -98,7 +98,7 @@ class Login extends React.Component {
                   />
                 )}
                 <div style={{ width: '350px' }} className="px-8">
-                  <div className="mb-6">
+                  <Form.Field>
                     <label>Email Address</label>
                     <Input
                       data-test-id={"login"}
@@ -111,8 +111,8 @@ class Login extends React.Component {
                       required
                       icon="envelope"
                     />
-                  </div>
-                  <div className="mb-6">
+                  </Form.Field>
+                  <Form.Field>
                     <label className="mb-2">Password</label>
                     <Input
                       data-test-id={"password"}
@@ -122,9 +122,9 @@ class Login extends React.Component {
                       name="password"
                       onChange={this.write}
                       required
-                      icon="lock-alt"
+                      icon="key"
                     />
-                  </div>
+                  </Form.Field>
                 </div>
               </Loader>
               {errors && errors.length ? (
@@ -153,12 +153,10 @@ class Login extends React.Component {
             </Form>
 
             <div className={cn(stl.sso, 'py-2 flex flex-col items-center')}>
-              <div className="mb-4">or</div>
-
               {authDetails.sso ? (
                 <a href="/api/sso/saml2" rel="noopener noreferrer">
-                  <Button variant="outline" type="submit">
-                    {`Login with SSO ${
+                  <Button variant="text-primary" type="submit">
+                    {`Login with enterprise account ${
                       authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
                     }`}
                   </Button>
@@ -170,12 +168,12 @@ class Login extends React.Component {
                   placement="top"
                 >
                   <Button
-                    variant="outline"
+                    variant="text-primary"
                     type="submit"
                     className="pointer-events-none opacity-30"
                   >
-                    {`Login with SSO ${
-                      authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : ''
+                    {`Login with enterprise account ${
+                      authDetails.ssoProvider ? `(${authDetails.ssoProvider})` : '(SSO)'
                     }`}
                   </Button>
                 </Tooltip>