@ttoss/react-auth 1.5.0 → 1.6.0

package/src/AuthSignIn.tsx

@@ -1,12 +1,15 @@
 import { AuthCard } from './AuthCard';
+import { Button, Flex, Link, Text } from '@ttoss/ui';
 import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
 import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
+import { useHidePassInput } from './useHidePassInput';
 import { useI18n } from '@ttoss/react-i18n';
 import type { OnSignIn, OnSignInInput } from './types';
 
 export type AuthSignInProps = {
   onSignIn: OnSignIn;
   onSignUp: () => void;
+  onForgotPassword?: () => void;
   defaultValues?: Partial<OnSignInInput>;
   urlLogo?: string;
 };
@@ -15,9 +18,12 @@ export const AuthSignIn = ({
   onSignIn,
   onSignUp,
   defaultValues,
+  onForgotPassword,
 }: AuthSignInProps) => {
   const { intl } = useI18n();
 
+  const { handleClick, icon, inputType } = useHidePassInput();
+
   const schema = yup.object().shape({
     email: yup
       .string()
@@ -52,6 +58,7 @@ export const AuthSignIn = ({
         )
       )
       .trim(),
+    // remember: yup.boolean(),
   });
 
   const formMethods = useForm<OnSignInInput>({
@@ -68,43 +75,65 @@ export const AuthSignIn = ({
       <AuthCard
         title={intl.formatMessage({
           description: 'Sign in title.',
-          defaultMessage: 'Login',
+          defaultMessage: 'Log in',
         })}
         buttonLabel={intl.formatMessage({
           description: 'Button label.',
-          defaultMessage: 'Login',
+          defaultMessage: 'Log in',
         })}
-        links={[
-          {
-            onClick: onSignUp,
-            label: intl.formatMessage({
-              description: 'Link to retrieve password.',
-              defaultMessage: 'Do you forgot your password?',
-            }),
-          },
-          {
-            onClick: onSignUp,
-            label: intl.formatMessage({
-              description: 'Link to sign up.',
-              defaultMessage: "Don't have an account? Sign up",
-            }),
-          },
-        ]}
+        isValidForm={formMethods.formState.isValid}
+        extraButton={
+          <Button
+            type="button"
+            variant="secondary"
+            sx={{ textAlign: 'center', display: 'initial' }}
+            onClick={onSignUp}
+            aria-label="sign-up"
+          >
+            {intl.formatMessage({
+              description: 'Sign up',
+              defaultMessage: 'Sign up',
+            })}
+          </Button>
+        }
       >
-        <FormFieldInput
-          name="email"
-          label={intl.formatMessage({
-            description: 'Email label.',
-            defaultMessage: 'Email',
-          })}
-        />
-        <FormFieldInput
-          name="password"
-          label={intl.formatMessage({
-            description: 'Password label.',
-            defaultMessage: 'Password',
-          })}
-        />
+        <Flex sx={{ flexDirection: 'column', gap: 'xl' }}>
+          <FormFieldInput
+            name="email"
+            label={intl.formatMessage({
+              description: 'Email label.',
+              defaultMessage: 'Email',
+            })}
+          />
+          <FormFieldInput
+            name="password"
+            trailingIcon={icon}
+            onTrailingIconClick={handleClick}
+            type={inputType}
+            label={intl.formatMessage({
+              description: 'Password label.',
+              defaultMessage: 'Password',
+            })}
+          />
+        </Flex>
+
+        <Flex sx={{ justifyContent: 'space-between', marginTop: 'lg' }}>
+          {/* TODO: temporally commented */}
+          {/* <FormFieldCheckbox
+            name="remember"
+            label={intl.formatMessage({
+              description: 'Remember',
+              defaultMessage: 'Remember',
+            })}
+          /> */}
+
+          <Text as={Link} onClick={onForgotPassword}>
+            {intl.formatMessage({
+              description: 'Forgot password?',
+              defaultMessage: 'Forgot password?',
+            })}
+          </Text>
+        </Flex>
       </AuthCard>
     </Form>
   );

package/src/AuthSignUp.tsx

@@ -1,5 +1,6 @@
 import { AuthCard } from './AuthCard';
 import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+import { Link, Text } from '@ttoss/ui';
 import { PASSWORD_MINIMUM_LENGTH } from '@ttoss/cloud-auth';
 import { useI18n } from '@ttoss/react-i18n';
 import type { OnSignUp, OnSignUpInput } from './types';
@@ -67,15 +68,15 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
           description: 'Title on sign up.',
           defaultMessage: 'Register',
         })}
-        links={[
-          {
-            label: intl.formatMessage({
+        isValidForm={formMethods.formState.isValid}
+        extraButton={
+          <Text onClick={onReturnToSignIn} as={Link}>
+            {intl.formatMessage({
               description: 'Link to sign in on sign up.',
               defaultMessage: 'Do you already have an account? Sign in',
-            }),
-            onClick: onReturnToSignIn,
-          },
-        ]}
+            })}
+          </Text>
+        }
       >
         <FormFieldInput
           name="email"
@@ -86,6 +87,7 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
         />
         <FormFieldInput
           name="password"
+          type="password"
           label={intl.formatMessage({
             description: 'Password label.',
             defaultMessage: 'Password',

package/src/useHidePassInput.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React.useState<boolean>(
+    Boolean(defaultValue)
+  );
+
+  const { icon, inputType } = React.useMemo(() => {
+    return {
+      icon: hidePass ? 'view-off' : 'view-on',
+      inputType: hidePass ? 'password' : 'text',
+    };
+  }, [hidePass]);
+
+  const handleClick = () => {
+    setHidePass((prev) => {
+      return !prev;
+    });
+  };
+
+  return {
+    handleClick,
+    icon,
+    inputType,
+  };
+};