feat(webapp): style tweaks to authentication pages

packages/webapp/src/containers/Authentication/LoginForm.tsx

@@ -1,89 +1,63 @@
 // @ts-nocheck
-import React from 'react';
-import {
-  Button,
-  InputGroup,
-  Intent,
-  FormGroup,
-  Checkbox,
-} from '@blueprintjs/core';
-import { Form, ErrorMessage, Field } from 'formik';
-import { T } from '@/components';
-import { inputIntent } from '@/utils';
-import { PasswordRevealer } from './components';
+import React, { useState } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { Form } from 'formik';
+import { Tooltip2 } from '@blueprintjs/popover2';
+
+import { FFormGroup, FInputGroup, FCheckbox, T } from '@/components';
+import { AuthSubmitButton } from './_components';
 
 /**
  * Login form.
  */
 export default function LoginForm({ isSubmitting }) {
-  const [passwordType, setPasswordType] = React.useState('password');
+  const [showPassword, setShowPassword] = useState<boolean>(false);
 
   // Handle password revealer changing.
-  const handlePasswordRevealerChange = React.useCallback(
-    (shown) => {
-      const type = shown ? 'text' : 'password';
-      setPasswordType(type);
-    },
-    [setPasswordType],
+  const handleLockClick = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const lockButton = (
+    <Tooltip2 content={`${showPassword ? 'Hide' : 'Show'} Password`}>
+      <Button
+        icon={showPassword ? 'unlock' : 'lock'}
+        intent={Intent.WARNING}
+        minimal={true}
+        onClick={handleLockClick}
+        small={true}
+      />
+    </Tooltip2>
   );
 
   return (
-    <Form className={'authentication-page__form'}>
-      <Field name={'crediential'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'email_or_phone_number'} />}
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'crediential'} />}
-            className={'form-group--crediential'}
-          >
-            <InputGroup
-              intent={inputIntent({ error, touched })}
-              large={true}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </Field>
+    <Form>
+      <FFormGroup name={'crediential'} label={<T id={'email'} />}>
+        <FInputGroup name={'crediential'} large={true} />
+      </FFormGroup>
 
-      <Field name={'password'}>
-        {({ form, field, meta: { error, touched } }) => (
-          <FormGroup
-            label={<T id={'password'} />}
-            labelInfo={
-              <PasswordRevealer onChange={handlePasswordRevealerChange} />
-            }
-            intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage name={'password'} />}
-            className={'form-group--password has-password-revealer'}
-          >
-            <InputGroup
-              large={true}
-              intent={inputIntent({ error, touched })}
-              type={passwordType}
-              {...field}
-            />
-          </FormGroup>
-        )}
-      </Field>
+      <FFormGroup name={'password'} label={<T id={'password'} />}>
+        <FInputGroup
+          name={'password'}
+          large={true}
+          type={showPassword ? 'text' : 'password'}
+          rightElement={lockButton}
+        />
+      </FFormGroup>
 
-      <div className={'login-form__checkbox-section'}>
-        <Checkbox large={true} className={'checkbox--remember-me'}>
-          <T id={'keep_me_logged_in'} />
-        </Checkbox>
-      </div>
+      <FCheckbox name={'keepLoggedIn'}>
+        <T id={'keep_me_logged_in'} />
+      </FCheckbox>
 
-      <div className={'authentication-page__submit-button-wrap'}>
-        <Button
-          type={'submit'}
-          intent={Intent.PRIMARY}
-          fill={true}
-          lang={true}
-          loading={isSubmitting}
-        >
-          <T id={'log_in'} />
-        </Button>
-      </div>
+      <AuthSubmitButton
+        type={'submit'}
+        intent={Intent.PRIMARY}
+        fill={true}
+        large={true}
+        loading={isSubmitting}
+      >
+        <T id={'log_in'} />
+      </AuthSubmitButton>
     </Form>
   );
 }