@ttoss/react-auth 1.5.0 → 1.6.0

package/dist/esm/index.js

@@ -76,12 +76,12 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { Auth as AmplifyAuth } from "aws-amplify";
 
 // src/AuthCard.tsx
 import * as React2 from "react";
-import { Box, Button, Flex, Link, Text } from "@ttoss/ui";
+import { Box, Button, Flex, Heading } from "@ttoss/ui";
 import { useNotifications } from "@ttoss/react-notifications";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var LogoContext = /*#__PURE__*/React2.createContext({});
@@ -98,7 +98,8 @@ var AuthCard = ({
   children,
   title,
   buttonLabel,
-  links = []
+  extraButton,
+  isValidForm
 }) => {
   const {
     logo
@@ -106,59 +107,54 @@ var AuthCard = ({
   const {
     isLoading
   } = useNotifications();
-  return /* @__PURE__ */jsx2(Box, {
+  return /* @__PURE__ */jsxs(Box, {
     sx: {
-      maxWidth: "564px"
+      maxWidth: "390px",
+      border: "default",
+      borderColor: "primary",
+      paddingX: "2xl",
+      paddingY: "3xl",
+      backgroundColor: "surface"
     },
-    children: /* @__PURE__ */jsxs(Flex, {
+    children: [logo && /* @__PURE__ */jsx2(Flex, {
       sx: {
-        flexDirection: "column",
-        gap: "md"
+        width: "100%",
+        maxHeight: "90px",
+        justifyContent: "center",
+        marginBottom: "2xl"
       },
-      children: [logo && /* @__PURE__ */jsx2(Flex, {
-        sx: {
-          width: "100%",
-          justifyContent: "center"
-        },
-        children: logo
-      }), /* @__PURE__ */jsx2(Text, {
+      children: logo
+    }), /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */jsx2(Heading, {
+        as: "h2",
+        variant: "h2",
         sx: {
-          alignSelf: "center",
-          marginY: "md",
-          fontSize: "xl"
+          marginBottom: "2xl"
         },
         children: title
-      }), children, /* @__PURE__ */jsx2(Flex, {
+      }), children, /* @__PURE__ */jsxs(Flex, {
         sx: {
-          justifyContent: "space-between",
-          marginTop: "md"
+          flexDirection: "column",
+          width: "100%",
+          gap: "xl",
+          marginTop: "2xl"
         },
-        children: /* @__PURE__ */jsx2(Button, {
+        children: [/* @__PURE__ */jsx2(Button, {
           type: "submit",
-          "aria-label": "submit-login",
-          variant: "cta",
-          disabled: isLoading,
+          "aria-label": "submit-button",
+          variant: "accent",
+          disabled: isLoading || !isValidForm,
           sx: {
-            width: "100%"
+            textAlign: "center",
+            display: "initial"
           },
           children: buttonLabel
-        })
-      }), /* @__PURE__ */jsx2(Flex, {
-        sx: {
-          justifyContent: "space-between",
-          flexDirection: "column",
-          gap: "sm",
-          marginTop: "md",
-          color: "text"
-        },
-        children: links.map(link => {
-          return link && /* @__PURE__ */jsx2(Link, {
-            onClick: link.onClick,
-            children: link.label
-          }, link.label);
-        })
+        }), extraButton]
       })]
-    })
+    })]
   });
 };
 
@@ -217,6 +213,7 @@ var AuthConfirmSignUp = ({
           "value": "Confirm"
         }]
       }),
+      isValidForm: formMethods.formState.isValid,
       title: intl.formatMessage({
         id: "cGR2eI",
         defaultMessage: [{
@@ -260,6 +257,7 @@ var AuthFullScreen = ({
 };
 
 // src/AuthSignIn.tsx
+import { Button as Button2, Flex as Flex3, Link, Text } from "@ttoss/ui";
 import { Form as Form2, FormFieldInput as FormFieldInput2, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
 
 // ../cloud-auth/dist/esm/index.js
@@ -505,17 +503,48 @@ createAuthTemplate.CognitoUserPoolLogicalId = CognitoUserPoolLogicalId;
 createAuthTemplate.CognitoUserPoolClientLogicalId = CognitoUserPoolClientLogicalId;
 createAuthTemplate.CognitoIdentityPoolLogicalId = CognitoIdentityPoolLogicalId;
 
+// src/useHidePassInput.ts
+import * as React3 from "react";
+var useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React3.useState(Boolean(defaultValue));
+  const {
+    icon,
+    inputType
+  } = React3.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = () => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  };
+  return {
+    handleClick,
+    icon,
+    inputType
+  };
+};
+
 // src/AuthSignIn.tsx
 import { useI18n as useI18n2 } from "@ttoss/react-i18n";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var AuthSignIn = ({
   onSignIn,
   onSignUp,
-  defaultValues
+  defaultValues,
+  onForgotPassword
 }) => {
   const {
     intl
   } = useI18n2();
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput();
   const schema = yup2.object().shape({
     email: yup2.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -551,7 +580,9 @@ var AuthSignIn = ({
     }, {
       value: PASSWORD_MINIMUM_LENGTH
     })).trim()
+    // remember: yup.boolean(),
   });
+
   const formMethods = useForm2({
     defaultValues,
     resolver: yupResolver2(schema)
@@ -564,55 +595,79 @@ var AuthSignIn = ({
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */jsxs2(AuthCard, {
       title: intl.formatMessage({
-        id: "R1rFNQ",
+        id: "F2iS37",
         defaultMessage: [{
           "type": 0,
-          "value": "Login"
+          "value": "Log in"
         }]
       }),
       buttonLabel: intl.formatMessage({
-        id: "0cVgsc",
+        id: "/J+02x",
         defaultMessage: [{
           "type": 0,
-          "value": "Login"
+          "value": "Log in"
         }]
       }),
-      links: [{
-        onClick: onSignUp,
-        label: intl.formatMessage({
-          id: "z5s0vm",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Do you forgot your password?"
-          }]
-        })
-      }, {
+      isValidForm: formMethods.formState.isValid,
+      extraButton: /* @__PURE__ */jsx5(Button2, {
+        type: "button",
+        variant: "secondary",
+        sx: {
+          textAlign: "center",
+          display: "initial"
+        },
         onClick: onSignUp,
-        label: intl.formatMessage({
-          id: "XC1w2U",
+        "aria-label": "sign-up",
+        children: intl.formatMessage({
+          id: "EZ3YF2",
           defaultMessage: [{
             "type": 0,
-            "value": "Don't have an account? Sign up"
+            "value": "Sign up"
           }]
         })
-      }],
-      children: [/* @__PURE__ */jsx5(FormFieldInput2, {
-        name: "email",
-        label: intl.formatMessage({
-          id: "5E12mO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Email"
-          }]
-        })
-      }), /* @__PURE__ */jsx5(FormFieldInput2, {
-        name: "password",
-        label: intl.formatMessage({
-          id: "PylVqx",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Password"
-          }]
+      }),
+      children: [/* @__PURE__ */jsxs2(Flex3, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */jsx5(FormFieldInput2, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */jsx5(FormFieldInput2, {
+          name: "password",
+          trailingIcon: icon,
+          onTrailingIconClick: handleClick,
+          type: inputType,
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        })]
+      }), /* @__PURE__ */jsx5(Flex3, {
+        sx: {
+          justifyContent: "space-between",
+          marginTop: "lg"
+        },
+        children: /* @__PURE__ */jsx5(Text, {
+          as: Link,
+          onClick: onForgotPassword,
+          children: intl.formatMessage({
+            id: "BtK6KR",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Forgot password?"
+            }]
+          })
         })
       })]
     })
@@ -621,6 +676,7 @@ var AuthSignIn = ({
 
 // src/AuthSignUp.tsx
 import { Form as Form3, FormFieldInput as FormFieldInput3, useForm as useForm3, yup as yup3, yupResolver as yupResolver3 } from "@ttoss/forms";
+import { Link as Link2, Text as Text2 } from "@ttoss/ui";
 import { useI18n as useI18n3 } from "@ttoss/react-i18n";
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var AuthSignUp = ({
@@ -690,16 +746,18 @@ var AuthSignUp = ({
           "value": "Register"
         }]
       }),
-      links: [{
-        label: intl.formatMessage({
+      isValidForm: formMethods.formState.isValid,
+      extraButton: /* @__PURE__ */jsx6(Text2, {
+        onClick: onReturnToSignIn,
+        as: Link2,
+        children: intl.formatMessage({
           id: "LU2ddR",
           defaultMessage: [{
             "type": 0,
             "value": "Do you already have an account? Sign in"
           }]
-        }),
-        onClick: onReturnToSignIn
-      }],
+        })
+      }),
       children: [/* @__PURE__ */jsx6(FormFieldInput3, {
         name: "email",
         label: intl.formatMessage({
@@ -711,6 +769,7 @@ var AuthSignUp = ({
         })
       }), /* @__PURE__ */jsx6(FormFieldInput3, {
         name: "password",
+        type: "password",
         label: intl.formatMessage({
           id: "PylVqx",
           defaultMessage: [{
@@ -780,7 +839,7 @@ var AuthLogic = () => {
   const {
     setLoading
   } = useNotifications2();
-  const onSignIn = React3.useCallback(async ({
+  const onSignIn = React4.useCallback(async ({
     email,
     password
   }) => {
@@ -802,7 +861,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onSignUp = React3.useCallback(async ({
+  const onSignUp = React4.useCallback(async ({
     email,
     password
   }) => {
@@ -823,7 +882,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onConfirmSignUp = React3.useCallback(async ({
+  const onConfirmSignUp = React4.useCallback(async ({
     email,
     code
   }) => {
@@ -838,7 +897,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onReturnToSignIn = React3.useCallback(() => {
+  const onReturnToSignIn = React4.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -872,7 +931,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React3.useMemo(() => {
+  const withLogoNode = React4.useMemo(() => {
     return /* @__PURE__ */jsx7(LogoProvider, {
       logo,
       children: /* @__PURE__ */jsx7(AuthLogic, {})