@ttoss/react-auth 1.6.12 → 1.6.14

package/dist/esm/index.js

@@ -109,7 +109,7 @@ var AuthCard = ({
   } = useNotifications();
   return /* @__PURE__ */jsxs(Box, {
     sx: {
-      maxWidth: "390px",
+      width: "100%",
       border: "default",
       borderColor: "primary",
       paddingX: "2xl",
@@ -151,6 +151,7 @@ var AuthCard = ({
             textAlign: "center",
             display: "initial"
           },
+          loading: isLoading,
           children: buttonLabel
         }), extraButton]
       })]
@@ -525,16 +526,16 @@ var AuthSignIn = ({
   }, [setNotifications]);
   const schema = yup2.object().shape({
     email: yup2.string().required(intl.formatMessage({
-      id: "r+QgO+",
+      id: "d1YCuH",
       defaultMessage: [{
         "type": 0,
-        "value": "Email field is required"
+        "value": "Enter your email address"
       }]
     })).email(intl.formatMessage({
-      id: "OhDL0i",
+      id: "9cApwd",
       defaultMessage: [{
         "type": 0,
-        "value": "Invalid email"
+        "value": "Please, insert a valid e-mail"
       }]
     })),
     password: yup2.string().required(intl.formatMessage({
@@ -563,12 +564,17 @@ var AuthSignIn = ({
 
   const formMethods = useForm2({
     defaultValues,
+    mode: "onBlur",
     resolver: yupResolver2(schema)
   });
   const onSubmitForm = data => {
     return onSignIn(data);
   };
   return /* @__PURE__ */jsx5(Form2, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
     ...formMethods,
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */jsxs2(AuthCard, {
@@ -634,6 +640,9 @@ var AuthSignIn = ({
           marginTop: "lg"
         },
         children: /* @__PURE__ */jsx5(Text, {
+          sx: {
+            marginLeft: "auto"
+          },
           as: Link,
           onClick: onForgotPassword,
           children: intl.formatMessage({
@@ -671,10 +680,10 @@ var AuthSignUp = ({
   }, [setNotifications]);
   const schema = yup3.object().shape({
     email: yup3.string().required(intl.formatMessage({
-      id: "r+QgO+",
+      id: "d1YCuH",
       defaultMessage: [{
         "type": 0,
-        "value": "Email field is required"
+        "value": "Enter your email address"
       }]
     })).email(intl.formatMessage({
       id: "OhDL0i",
@@ -703,6 +712,12 @@ var AuthSignUp = ({
       }]
     }, {
       value: PASSWORD_MINIMUM_LENGTH
+    })).oneOf([yup3.ref("confirmPassword")], intl.formatMessage({
+      id: "SPiKja",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Password requirements not met"
+      }]
     })).trim(),
     confirmPassword: yup3.string().required(intl.formatMessage({
       id: "NJ57Qj",
@@ -726,6 +741,10 @@ var AuthSignUp = ({
     return onSignUp(data);
   };
   return /* @__PURE__ */jsx6(Form3, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
     ...formMethods,
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */jsxs3(AuthCard, {
@@ -745,6 +764,9 @@ var AuthSignUp = ({
       }),
       isValidForm: formMethods.formState.isValid,
       extraButton: /* @__PURE__ */jsx6(Text2, {
+        sx: {
+          cursor: "pointer"
+        },
         onClick: onReturnToSignIn,
         as: Link2,
         children: intl.formatMessage({

package/dist/index.js

@@ -153,7 +153,7 @@ var AuthCard = ({
   } = (0, import_react_notifications.useNotifications)();
   return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui.Box, {
     sx: {
-      maxWidth: "390px",
+      width: "100%",
       border: "default",
       borderColor: "primary",
       paddingX: "2xl",
@@ -195,6 +195,7 @@ var AuthCard = ({
             textAlign: "center",
             display: "initial"
           },
+          loading: isLoading,
           children: buttonLabel
         }), extraButton]
       })]
@@ -569,16 +570,16 @@ var AuthSignIn = ({
   }, [setNotifications]);
   const schema = import_forms2.yup.object().shape({
     email: import_forms2.yup.string().required(intl.formatMessage({
-      id: "r+QgO+",
+      id: "d1YCuH",
       defaultMessage: [{
         "type": 0,
-        "value": "Email field is required"
+        "value": "Enter your email address"
       }]
     })).email(intl.formatMessage({
-      id: "OhDL0i",
+      id: "9cApwd",
       defaultMessage: [{
         "type": 0,
-        "value": "Invalid email"
+        "value": "Please, insert a valid e-mail"
       }]
     })),
     password: import_forms2.yup.string().required(intl.formatMessage({
@@ -607,12 +608,17 @@ var AuthSignIn = ({
 
   const formMethods = (0, import_forms2.useForm)({
     defaultValues,
+    mode: "onBlur",
     resolver: (0, import_forms2.yupResolver)(schema)
   });
   const onSubmitForm = data => {
     return onSignIn(data);
   };
   return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.Form, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
     ...formMethods,
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(AuthCard, {
@@ -678,6 +684,9 @@ var AuthSignIn = ({
           marginTop: "lg"
         },
         children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui3.Text, {
+          sx: {
+            marginLeft: "auto"
+          },
           as: import_ui3.Link,
           onClick: onForgotPassword,
           children: intl.formatMessage({
@@ -715,10 +724,10 @@ var AuthSignUp = ({
   }, [setNotifications]);
   const schema = import_forms3.yup.object().shape({
     email: import_forms3.yup.string().required(intl.formatMessage({
-      id: "r+QgO+",
+      id: "d1YCuH",
       defaultMessage: [{
         "type": 0,
-        "value": "Email field is required"
+        "value": "Enter your email address"
       }]
     })).email(intl.formatMessage({
       id: "OhDL0i",
@@ -747,6 +756,12 @@ var AuthSignUp = ({
       }]
     }, {
       value: PASSWORD_MINIMUM_LENGTH
+    })).oneOf([import_forms3.yup.ref("confirmPassword")], intl.formatMessage({
+      id: "SPiKja",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Password requirements not met"
+      }]
     })).trim(),
     confirmPassword: import_forms3.yup.string().required(intl.formatMessage({
       id: "NJ57Qj",
@@ -770,6 +785,10 @@ var AuthSignUp = ({
     return onSignUp(data);
   };
   return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.Form, {
+    sx: {
+      maxWidth: "390px",
+      width: "100%"
+    },
     ...formMethods,
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(AuthCard, {
@@ -789,6 +808,9 @@ var AuthSignUp = ({
       }),
       isValidForm: formMethods.formState.isValid,
       extraButton: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui4.Text, {
+        sx: {
+          cursor: "pointer"
+        },
         onClick: onReturnToSignIn,
         as: import_ui4.Link,
         children: intl.formatMessage({

package/i18n/compiled/en.json

@@ -17,6 +17,24 @@
       "value": "Email"
     }
   ],
+  "5oOshZ": [
+    {
+      "type": 0,
+      "value": "Enter your email address"
+    }
+  ],
+  "6PdOcy": [
+    {
+      "type": 0,
+      "value": "Cancel"
+    }
+  ],
+  "9cApwd": [
+    {
+      "type": 0,
+      "value": "Please, insert a valid e-mail"
+    }
+  ],
   "BtK6KR": [
     {
       "type": 0,
@@ -73,6 +91,24 @@
       "value": " characters"
     }
   ],
+  "S4bbEj": [
+    {
+      "type": 0,
+      "value": "Recovering Password"
+    }
+  ],
+  "SPiKja": [
+    {
+      "type": 0,
+      "value": "Password requirements not met"
+    }
+  ],
+  "SnONhb": [
+    {
+      "type": 0,
+      "value": "Please, insert a valid e-mail"
+    }
+  ],
   "TZ4WUk": [
     {
       "type": 0,
@@ -105,12 +141,24 @@
       "value": "Passwords are not the same"
     }
   ],
+  "XreZg+": [
+    {
+      "type": 0,
+      "value": "Registered Email"
+    }
+  ],
   "cGR2eI": [
     {
       "type": 0,
       "value": "Confirmation"
     }
   ],
+  "d1YCuH": [
+    {
+      "type": 0,
+      "value": "Enter your email address"
+    }
+  ],
   "kdFYba": [
     {
       "type": 0,
@@ -123,16 +171,22 @@
       "value": "Confirm password"
     }
   ],
-  "oayEC3": [
+  "lZvoYL": [
     {
       "type": 0,
-      "value": "Sign up"
+      "value": "Sign up now"
+    }
+  ],
+  "mZzmNV": [
+    {
+      "type": 0,
+      "value": "Recover Password"
     }
   ],
-  "r+QgO+": [
+  "oayEC3": [
     {
       "type": 0,
-      "value": "Email field is required"
+      "value": "Sign up"
     }
   ],
   "rx8HF/": [

package/i18n/lang/en.json

@@ -11,6 +11,18 @@
     "defaultMessage": "Email",
     "description": "Email label."
   },
+  "5oOshZ": {
+    "defaultMessage": "Enter your email address",
+    "description": "Required field."
+  },
+  "6PdOcy": {
+    "defaultMessage": "Cancel",
+    "description": "Cancel"
+  },
+  "9cApwd": {
+    "defaultMessage": "Please, insert a valid e-mail",
+    "description": "Invalid email."
+  },
   "BtK6KR": {
     "defaultMessage": "Forgot password?",
     "description": "Forgot password?"
@@ -43,6 +55,18 @@
     "defaultMessage": "Minimum {value} characters",
     "description": "Minimum {value} characters."
   },
+  "S4bbEj": {
+    "defaultMessage": "Recovering Password",
+    "description": "Recovering Password"
+  },
+  "SPiKja": {
+    "defaultMessage": "Password requirements not met",
+    "description": "Password requirements not met"
+  },
+  "SnONhb": {
+    "defaultMessage": "Please, insert a valid e-mail",
+    "description": "Please, insert a valid e-mail"
+  },
   "TZ4WUk": {
     "defaultMessage": "Password requires {value} characters",
     "description": "Password must be at least {value} characters long."
@@ -59,10 +83,18 @@
     "defaultMessage": "Passwords are not the same",
     "description": "Passwords are not the same"
   },
+  "XreZg+": {
+    "defaultMessage": "Registered Email",
+    "description": "Registered Email"
+  },
   "cGR2eI": {
     "defaultMessage": "Confirmation",
     "description": "Confirmation"
   },
+  "d1YCuH": {
+    "defaultMessage": "Enter your email address",
+    "description": "Email is a required field."
+  },
   "kdFYba": {
     "defaultMessage": "Password field is required",
     "description": "Password is required."
@@ -71,14 +103,18 @@
     "defaultMessage": "Confirm password",
     "description": "Confirm Password label."
   },
+  "lZvoYL": {
+    "defaultMessage": "Sign up now",
+    "description": "Sign up now"
+  },
+  "mZzmNV": {
+    "defaultMessage": "Recover Password",
+    "description": "Recover Password"
+  },
   "oayEC3": {
     "defaultMessage": "Sign up",
     "description": "Title on sign up."
   },
-  "r+QgO+": {
-    "defaultMessage": "Email field is required",
-    "description": "Email is a required field."
-  },
   "rx8HF/": {
     "defaultMessage": "I’m already registered",
     "description": "Link to sign in on sign up."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.6.12",
+  "version": "1.6.14",
   "description": "ttoss authentication module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -19,14 +19,14 @@
   "dependencies": {
     "@xstate/react": "^3.2.2",
     "xstate": "^4.37.2",
-    "@ttoss/forms": "^0.17.10"
+    "@ttoss/forms": "^0.17.12"
   },
   "peerDependencies": {
     "aws-amplify": "^5.0.0",
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^1.22.1",
-    "@ttoss/react-notifications": "^1.22.12",
-    "@ttoss/ui": "^1.36.9"
+    "@ttoss/react-notifications": "^1.22.14",
+    "@ttoss/ui": "^1.36.11"
   },
   "devDependencies": {
     "@types/react": "^18.2.6",
@@ -37,9 +37,9 @@
     "@ttoss/config": "^1.30.0",
     "@ttoss/i18n-cli": "^0.5.0",
     "@ttoss/react-i18n": "^1.22.1",
-    "@ttoss/react-notifications": "^1.22.12",
-    "@ttoss/test-utils": "^1.23.1",
-    "@ttoss/ui": "^1.36.9"
+    "@ttoss/react-notifications": "^1.22.14",
+    "@ttoss/ui": "^1.36.11",
+    "@ttoss/test-utils": "^1.23.1"
   },
   "keywords": [
     "React",

package/src/AuthCard.tsx

@@ -35,7 +35,7 @@ export const AuthCard = ({
   return (
     <Box
       sx={{
-        maxWidth: '390px',
+        width: '100%',
         border: 'default',
         borderColor: 'primary',
         paddingX: '2xl',
@@ -82,6 +82,7 @@ export const AuthCard = ({
             variant="accent"
             disabled={isLoading || !isValidForm}
             sx={{ textAlign: 'center', display: 'initial' }}
+            loading={isLoading}
           >
             {buttonLabel}
           </Button>

package/src/AuthConfirmSignUp.tsx

@@ -3,13 +3,15 @@ import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
 import { useI18n } from '@ttoss/react-i18n';
 import type { OnConfirmSignUp } from './types';
 
+export type AuthConfirmSignUpProps = {
+  email: string;
+  onConfirmSignUp: OnConfirmSignUp;
+};
+
 export const AuthConfirmSignUp = ({
   email,
   onConfirmSignUp,
-}: {
-  email: string;
-  onConfirmSignUp: OnConfirmSignUp;
-}) => {
+}: AuthConfirmSignUpProps) => {
   const { intl } = useI18n();
 
   const schema = yup

package/src/AuthRecoveryPassword.tsx

@@ -0,0 +1,92 @@
+import { AuthCard } from './AuthCard';
+import { Button, Link, Text } from '@ttoss/ui';
+import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+import { NotificationsBox } from '@ttoss/react-notifications';
+import { useI18n } from '@ttoss/react-i18n';
+
+export type AuthRecoveryPasswordProps = {
+  onRecoveryPassword: (email: string) => void;
+};
+
+export const AuthRecoveryPassword = ({
+  onRecoveryPassword,
+}: AuthRecoveryPasswordProps) => {
+  const { intl } = useI18n();
+
+  const schema = yup
+    .object()
+    .shape({
+      email: yup
+        .string()
+        .required(
+          intl.formatMessage({
+            description: 'Required field.',
+            defaultMessage: 'Enter your email address',
+          })
+        )
+        .email(
+          intl.formatMessage({
+            description: 'Please, insert a valid e-mail',
+            defaultMessage: 'Please, insert a valid e-mail',
+          })
+        ),
+    })
+    .required();
+
+  const formMethods = useForm<yup.TypeOf<typeof schema>>({
+    resolver: yupResolver(schema),
+    mode: 'onBlur',
+  });
+
+  return (
+    <Form
+      {...formMethods}
+      sx={{
+        maxWidth: '390px',
+      }}
+      onSubmit={({ email }) => {
+        return onRecoveryPassword(email);
+      }}
+    >
+      <AuthCard
+        buttonLabel={intl.formatMessage({
+          description: 'Recover Password',
+          defaultMessage: 'Recover Password',
+        })}
+        isValidForm={formMethods.formState.isValid}
+        title={intl.formatMessage({
+          description: 'Recovering Password',
+          defaultMessage: 'Recovering Password',
+        })}
+        extraButton={
+          <Button
+            sx={{ textAlign: 'center', display: 'initial' }}
+            variant="secondary"
+          >
+            {intl.formatMessage({
+              description: 'Cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+      >
+        <FormFieldInput
+          name="email"
+          label={intl.formatMessage({
+            description: 'Registered Email',
+            defaultMessage: 'Registered Email',
+          })}
+        />
+
+        <NotificationsBox />
+
+        <Text sx={{ marginTop: 'xl', cursor: 'pointer' }} as={Link}>
+          {intl.formatMessage({
+            description: 'Sign up now',
+            defaultMessage: 'Sign up now',
+          })}
+        </Text>
+      </AuthCard>
+    </Form>
+  );
+};

package/src/AuthSignIn.tsx

@@ -41,13 +41,13 @@ export const AuthSignIn = ({
       .required(
         intl.formatMessage({
           description: 'Email is a required field.',
-          defaultMessage: 'Email field is required',
+          defaultMessage: 'Enter your email address',
         })
       )
       .email(
         intl.formatMessage({
           description: 'Invalid email.',
-          defaultMessage: 'Invalid email',
+          defaultMessage: 'Please, insert a valid e-mail',
         })
       ),
     password: yup
@@ -74,6 +74,7 @@ export const AuthSignIn = ({
 
   const formMethods = useForm<OnSignInInput>({
     defaultValues,
+    mode: 'onBlur',
     resolver: yupResolver(schema),
   });
 
@@ -82,7 +83,11 @@ export const AuthSignIn = ({
   };
 
   return (
-    <Form {...formMethods} onSubmit={onSubmitForm}>
+    <Form
+      sx={{ maxWidth: '390px', width: '100%' }}
+      {...formMethods}
+      onSubmit={onSubmitForm}
+    >
       <AuthCard
         title={intl.formatMessage({
           description: 'Sign in title.',
@@ -135,7 +140,11 @@ export const AuthSignIn = ({
             })}
           /> */}
 
-          <Text as={Link} onClick={onForgotPassword}>
+          <Text
+            sx={{ marginLeft: 'auto' }}
+            as={Link}
+            onClick={onForgotPassword}
+          >
             {intl.formatMessage({
               description: 'Forgot password?',
               defaultMessage: 'Forgot password?',

package/src/AuthSignUp.tsx

@@ -33,7 +33,7 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
       .required(
         intl.formatMessage({
           description: 'Email is a required field.',
-          defaultMessage: 'Email field is required',
+          defaultMessage: 'Enter your email address',
         })
       )
       .email(
@@ -60,6 +60,13 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
           { value: PASSWORD_MINIMUM_LENGTH }
         )
       )
+      .oneOf(
+        [yup.ref('confirmPassword')],
+        intl.formatMessage({
+          description: 'Password requirements not met',
+          defaultMessage: 'Password requirements not met',
+        })
+      )
       .trim(),
     confirmPassword: yup
       .string()
@@ -88,7 +95,11 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
   };
 
   return (
-    <Form {...formMethods} onSubmit={onSubmitForm}>
+    <Form
+      sx={{ maxWidth: '390px', width: '100%' }}
+      {...formMethods}
+      onSubmit={onSubmitForm}
+    >
       <AuthCard
         buttonLabel={intl.formatMessage({
           description: 'Create account.',
@@ -100,7 +111,7 @@ export const AuthSignUp = ({ onSignUp, onReturnToSignIn }: AuthSignUpProps) => {
         })}
         isValidForm={formMethods.formState.isValid}
         extraButton={
-          <Text onClick={onReturnToSignIn} as={Link}>
+          <Text sx={{ cursor: 'pointer' }} onClick={onReturnToSignIn} as={Link}>
             {intl.formatMessage({
               description: 'Link to sign in on sign up.',
               defaultMessage: 'I’m already registered',