@ttoss/react-auth 1.5.0 → 1.6.0

package/dist/index.js

@@ -120,7 +120,7 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_aws_amplify2 = require("aws-amplify");
 
 // src/AuthCard.tsx
@@ -142,7 +142,8 @@ var AuthCard = ({
   children,
   title,
   buttonLabel,
-  links = []
+  extraButton,
+  isValidForm
 }) => {
   const {
     logo
@@ -150,59 +151,54 @@ var AuthCard = ({
   const {
     isLoading
   } = (0, import_react_notifications.useNotifications)();
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui.Box, {
     sx: {
-      maxWidth: "564px"
+      maxWidth: "390px",
+      border: "default",
+      borderColor: "primary",
+      paddingX: "2xl",
+      paddingY: "3xl",
+      backgroundColor: "surface"
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui.Flex, {
+    children: [logo && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Flex, {
       sx: {
-        flexDirection: "column",
-        gap: "md"
+        width: "100%",
+        maxHeight: "90px",
+        justifyContent: "center",
+        marginBottom: "2xl"
       },
-      children: [logo && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Flex, {
-        sx: {
-          width: "100%",
-          justifyContent: "center"
-        },
-        children: logo
-      }), /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Text, {
+      children: logo
+    }), /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui.Flex, {
+      sx: {
+        flexDirection: "column"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Heading, {
+        as: "h2",
+        variant: "h2",
         sx: {
-          alignSelf: "center",
-          marginY: "md",
-          fontSize: "xl"
+          marginBottom: "2xl"
         },
         children: title
-      }), children, /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Flex, {
+      }), children, /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_ui.Flex, {
         sx: {
-          justifyContent: "space-between",
-          marginTop: "md"
+          flexDirection: "column",
+          width: "100%",
+          gap: "xl",
+          marginTop: "2xl"
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Button, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.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__ */(0, import_jsx_runtime2.jsx)(import_ui.Flex, {
-        sx: {
-          justifyContent: "space-between",
-          flexDirection: "column",
-          gap: "sm",
-          marginTop: "md",
-          color: "text"
-        },
-        children: links.map(link => {
-          return link && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui.Link, {
-            onClick: link.onClick,
-            children: link.label
-          }, link.label);
-        })
+        }), extraButton]
       })]
-    })
+    })]
   });
 };
 
@@ -261,6 +257,7 @@ var AuthConfirmSignUp = ({
           "value": "Confirm"
         }]
       }),
+      isValidForm: formMethods.formState.isValid,
       title: intl.formatMessage({
         id: "cGR2eI",
         defaultMessage: [{
@@ -304,6 +301,7 @@ var AuthFullScreen = ({
 };
 
 // src/AuthSignIn.tsx
+var import_ui3 = require("@ttoss/ui");
 var import_forms2 = require("@ttoss/forms");
 
 // ../cloud-auth/dist/esm/index.js
@@ -549,17 +547,48 @@ createAuthTemplate.CognitoUserPoolLogicalId = CognitoUserPoolLogicalId;
 createAuthTemplate.CognitoUserPoolClientLogicalId = CognitoUserPoolClientLogicalId;
 createAuthTemplate.CognitoIdentityPoolLogicalId = CognitoIdentityPoolLogicalId;
 
+// src/useHidePassInput.ts
+var React3 = __toESM(require("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
 var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var AuthSignIn = ({
   onSignIn,
   onSignUp,
-  defaultValues
+  defaultValues,
+  onForgotPassword
 }) => {
   const {
     intl
   } = (0, import_react_i18n2.useI18n)();
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput();
   const schema = import_forms2.yup.object().shape({
     email: import_forms2.yup.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -595,7 +624,9 @@ var AuthSignIn = ({
     }, {
       value: PASSWORD_MINIMUM_LENGTH
     })).trim()
+    // remember: yup.boolean(),
   });
+
   const formMethods = (0, import_forms2.useForm)({
     defaultValues,
     resolver: (0, import_forms2.yupResolver)(schema)
@@ -608,55 +639,79 @@ var AuthSignIn = ({
     onSubmit: onSubmitForm,
     children: /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(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__ */(0, import_jsx_runtime5.jsx)(import_ui3.Button, {
+        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__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldInput, {
-        name: "email",
-        label: intl.formatMessage({
-          id: "5E12mO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Email"
-          }]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldInput, {
-        name: "password",
-        label: intl.formatMessage({
-          id: "PylVqx",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Password"
-          }]
+      }),
+      children: [/* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui3.Flex, {
+        sx: {
+          flexDirection: "column",
+          gap: "xl"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldInput, {
+          name: "email",
+          label: intl.formatMessage({
+            id: "5E12mO",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Email"
+            }]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldInput, {
+          name: "password",
+          trailingIcon: icon,
+          onTrailingIconClick: handleClick,
+          type: inputType,
+          label: intl.formatMessage({
+            id: "PylVqx",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Password"
+            }]
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui3.Flex, {
+        sx: {
+          justifyContent: "space-between",
+          marginTop: "lg"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui3.Text, {
+          as: import_ui3.Link,
+          onClick: onForgotPassword,
+          children: intl.formatMessage({
+            id: "BtK6KR",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Forgot password?"
+            }]
+          })
         })
       })]
     })
@@ -665,6 +720,7 @@ var AuthSignIn = ({
 
 // src/AuthSignUp.tsx
 var import_forms3 = require("@ttoss/forms");
+var import_ui4 = require("@ttoss/ui");
 var import_react_i18n3 = require("@ttoss/react-i18n");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var AuthSignUp = ({
@@ -734,16 +790,18 @@ var AuthSignUp = ({
           "value": "Register"
         }]
       }),
-      links: [{
-        label: intl.formatMessage({
+      isValidForm: formMethods.formState.isValid,
+      extraButton: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui4.Text, {
+        onClick: onReturnToSignIn,
+        as: import_ui4.Link,
+        children: intl.formatMessage({
           id: "LU2ddR",
           defaultMessage: [{
             "type": 0,
             "value": "Do you already have an account? Sign in"
           }]
-        }),
-        onClick: onReturnToSignIn
-      }],
+        })
+      }),
       children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldInput, {
         name: "email",
         label: intl.formatMessage({
@@ -755,6 +813,7 @@ var AuthSignUp = ({
         })
       }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_forms3.FormFieldInput, {
         name: "password",
+        type: "password",
         label: intl.formatMessage({
           id: "PylVqx",
           defaultMessage: [{
@@ -824,7 +883,7 @@ var AuthLogic = () => {
   const {
     setLoading
   } = (0, import_react_notifications2.useNotifications)();
-  const onSignIn = React3.useCallback(async ({
+  const onSignIn = React4.useCallback(async ({
     email,
     password
   }) => {
@@ -846,7 +905,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onSignUp = React3.useCallback(async ({
+  const onSignUp = React4.useCallback(async ({
     email,
     password
   }) => {
@@ -867,7 +926,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onConfirmSignUp = React3.useCallback(async ({
+  const onConfirmSignUp = React4.useCallback(async ({
     email,
     code
   }) => {
@@ -882,7 +941,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onReturnToSignIn = React3.useCallback(() => {
+  const onReturnToSignIn = React4.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -916,7 +975,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React3.useMemo(() => {
+  const withLogoNode = React4.useMemo(() => {
     return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(LogoProvider, {
       logo,
       children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(AuthLogic, {})

package/i18n/lang/en.json

@@ -1,20 +1,32 @@
 {
+  "/J+02x": {
+    "defaultMessage": "Log in",
+    "description": "Button label."
+  },
   "0XOzcH": {
     "defaultMessage": "Required field",
     "description": "Required field."
   },
-  "0cVgsc": {
-    "defaultMessage": "Login",
-    "description": "Button label."
-  },
   "5E12mO": {
     "defaultMessage": "Email",
     "description": "Email label."
   },
+  "BtK6KR": {
+    "defaultMessage": "Forgot password?",
+    "description": "Forgot password?"
+  },
   "EXZxA0": {
     "defaultMessage": "Register",
     "description": "Title on sign up."
   },
+  "EZ3YF2": {
+    "defaultMessage": "Sign up",
+    "description": "Sign up"
+  },
+  "F2iS37": {
+    "defaultMessage": "Log in",
+    "description": "Sign in title."
+  },
   "KY2T6J": {
     "defaultMessage": "Code",
     "description": "Sign up confirmation code"
@@ -35,10 +47,6 @@
     "defaultMessage": "Password",
     "description": "Password label."
   },
-  "R1rFNQ": {
-    "defaultMessage": "Login",
-    "description": "Sign in title."
-  },
   "S3pjKw": {
     "defaultMessage": "Minimum {value} characters",
     "description": "Minimum {value} characters."
@@ -51,10 +59,6 @@
     "defaultMessage": "Confirm",
     "description": "Confirm"
   },
-  "XC1w2U": {
-    "defaultMessage": "Don't have an account? Sign up",
-    "description": "Link to sign up."
-  },
   "cGR2eI": {
     "defaultMessage": "Confirmation",
     "description": "Confirmation"
@@ -66,9 +70,5 @@
   "r+QgO+": {
     "defaultMessage": "Email field is required",
     "description": "Email is a required field."
-  },
-  "z5s0vm": {
-    "defaultMessage": "Do you forgot your password?",
-    "description": "Link to retrieve password."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "ttoss authentication module for React apps.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -14,38 +14,32 @@
     "i18n",
     "src"
   ],
-  "scripts": {
-    "prebuild": "pnpm i18n",
-    "build": "tsup",
-    "i18n": "ttoss-i18n --no-compile",
-    "test": "jest"
-  },
   "sideEffects": false,
   "typings": "./dist/index.d.ts",
   "dependencies": {
-    "@ttoss/forms": "^0.17.0",
     "@xstate/react": "^3.2.2",
-    "xstate": "^4.37.2"
+    "xstate": "^4.37.2",
+    "@ttoss/forms": "^0.17.1"
   },
   "peerDependencies": {
-    "@ttoss/react-i18n": "^",
-    "@ttoss/react-notifications": "^",
-    "@ttoss/ui": "^",
     "aws-amplify": "^5.0.0",
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "@ttoss/react-notifications": "^1.22.1",
+    "@ttoss/ui": "^1.36.1",
+    "@ttoss/react-i18n": "^1.22.0"
   },
   "devDependencies": {
+    "@types/react": "^18.2.5",
+    "aws-amplify": "^5.0.25",
+    "jest": "^29.5.0",
+    "tsup": "^6.7.0",
     "@ttoss/cloud-auth": "^0.9.1",
     "@ttoss/config": "^1.30.0",
     "@ttoss/i18n-cli": "^0.5.0",
     "@ttoss/react-i18n": "^1.22.0",
-    "@ttoss/react-notifications": "^1.22.0",
+    "@ttoss/react-notifications": "^1.22.1",
     "@ttoss/test-utils": "^1.23.0",
-    "@ttoss/ui": "^1.36.0",
-    "@types/react": "^18.2.5",
-    "aws-amplify": "^5.0.25",
-    "jest": "^29.5.0",
-    "tsup": "^6.7.0"
+    "@ttoss/ui": "^1.36.1"
   },
   "keywords": [
     "React",
@@ -54,5 +48,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2b412ebe0b92fbccb102636f843f84bd7616b43b"
-}
+  "scripts": {
+    "prebuild": "pnpm i18n",
+    "build": "tsup",
+    "i18n": "ttoss-i18n --no-compile",
+    "test": "jest"
+  }
+}

package/src/AuthCard.tsx

@@ -1,5 +1,5 @@
 import * as React 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';
 
 export type LogoContextProps = {
@@ -13,68 +13,80 @@ export const LogoProvider = ({ children, ...values }: LogoContextProps) => {
   return <LogoContext.Provider value={values}>{children}</LogoContext.Provider>;
 };
 
-type LinkProps = {
-  label: string;
-  onClick: () => void;
-};
-
 type AuthCardProps = {
   children: React.ReactNode;
   title: string;
   buttonLabel: string;
-  links?: LinkProps[];
+  extraButton?: React.ReactNode;
+  isValidForm?: boolean;
 };
 
 export const AuthCard = ({
   children,
   title,
   buttonLabel,
-  links = [],
+  extraButton,
+  isValidForm,
 }: AuthCardProps) => {
   const { logo } = React.useContext(LogoContext);
 
   const { isLoading } = useNotifications();
 
   return (
-    <Box sx={{ maxWidth: '564px' }}>
-      <Flex sx={{ flexDirection: 'column', gap: 'md' }}>
-        {logo && (
-          <Flex sx={{ width: '100%', justifyContent: 'center' }}>{logo}</Flex>
-        )}
-        <Text sx={{ alignSelf: 'center', marginY: 'md', fontSize: 'xl' }}>
+    <Box
+      sx={{
+        maxWidth: '390px',
+        border: 'default',
+        borderColor: 'primary',
+        paddingX: '2xl',
+        paddingY: '3xl',
+        backgroundColor: 'surface',
+      }}
+    >
+      {logo && (
+        <Flex
+          sx={{
+            width: '100%',
+            maxHeight: '90px',
+            justifyContent: 'center',
+            marginBottom: '2xl',
+          }}
+        >
+          {logo}
+        </Flex>
+      )}
+      <Flex sx={{ flexDirection: 'column' }}>
+        <Heading
+          as="h2"
+          variant="h2"
+          sx={{
+            marginBottom: '2xl',
+          }}
+        >
           {title}
-        </Text>
+        </Heading>
+
         {children}
-        <Flex sx={{ justifyContent: 'space-between', marginTop: 'md' }}>
-          <Button
-            type="submit"
-            aria-label="submit-login"
-            variant="cta"
-            disabled={isLoading}
-            sx={{ width: '100%' }}
-          >
-            {buttonLabel}
-          </Button>
-        </Flex>
 
         <Flex
           sx={{
-            justifyContent: 'space-between',
             flexDirection: 'column',
-            gap: 'sm',
-            marginTop: 'md',
-            color: 'text',
+            width: '100%',
+            gap: 'xl',
+            marginTop: '2xl',
           }}
         >
-          {links.map((link) => {
-            return (
-              link && (
-                <Link key={link.label} onClick={link.onClick}>
-                  {link.label}
-                </Link>
-              )
-            );
-          })}
+          <Button
+            type="submit"
+            aria-label="submit-button"
+            variant="accent"
+            disabled={isLoading || !isValidForm}
+            sx={{ textAlign: 'center', display: 'initial' }}
+          >
+            {buttonLabel}
+          </Button>
+
+          {extraButton}
         </Flex>
       </Flex>
     </Box>

package/src/AuthConfirmSignUp.tsx

@@ -52,6 +52,7 @@ export const AuthConfirmSignUp = ({
           description: 'Confirm',
           defaultMessage: 'Confirm',
         })}
+        isValidForm={formMethods.formState.isValid}
         title={intl.formatMessage({
           description: 'Confirmation',
           defaultMessage: 'Confirmation',