@ttoss/react-auth 1.6.0 → 1.6.2

package/dist/esm/index.js

@@ -76,7 +76,7 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 import { Auth as AmplifyAuth } from "aws-amplify";
 
 // src/AuthCard.tsx
@@ -258,7 +258,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";
+import { Form as Form2, FormFieldInput as FormFieldInput2, FormFieldPassword, useForm as useForm2, yup as yup2, yupResolver as yupResolver2 } from "@ttoss/forms";
 
 // ../cloud-auth/dist/esm/index.js
 var PASSWORD_MINIMUM_LENGTH = 8;
@@ -503,31 +503,6 @@ 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";
@@ -540,11 +515,6 @@ var AuthSignIn = ({
   const {
     intl
   } = useI18n2();
-  const {
-    handleClick,
-    icon,
-    inputType
-  } = useHidePassInput();
   const schema = yup2.object().shape({
     email: yup2.string().required(intl.formatMessage({
       id: "r+QgO+",
@@ -640,11 +610,8 @@ var AuthSignIn = ({
               "value": "Email"
             }]
           })
-        }), /* @__PURE__ */jsx5(FormFieldInput2, {
+        }), /* @__PURE__ */jsx5(FormFieldPassword, {
           name: "password",
-          trailingIcon: icon,
-          onTrailingIconClick: handleClick,
-          type: inputType,
           label: intl.formatMessage({
             id: "PylVqx",
             defaultMessage: [{
@@ -839,7 +806,7 @@ var AuthLogic = () => {
   const {
     setLoading
   } = useNotifications2();
-  const onSignIn = React4.useCallback(async ({
+  const onSignIn = React3.useCallback(async ({
     email,
     password
   }) => {
@@ -861,7 +828,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onSignUp = React4.useCallback(async ({
+  const onSignUp = React3.useCallback(async ({
     email,
     password
   }) => {
@@ -882,7 +849,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onConfirmSignUp = React4.useCallback(async ({
+  const onConfirmSignUp = React3.useCallback(async ({
     email,
     code
   }) => {
@@ -897,7 +864,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onReturnToSignIn = React4.useCallback(() => {
+  const onReturnToSignIn = React3.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -931,7 +898,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React4.useMemo(() => {
+  const withLogoNode = React3.useMemo(() => {
     return /* @__PURE__ */jsx7(LogoProvider, {
       logo,
       children: /* @__PURE__ */jsx7(AuthLogic, {})

package/dist/index.js

@@ -120,7 +120,7 @@ var useAuth = () => {
 };
 
 // src/Auth.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_aws_amplify2 = require("aws-amplify");
 
 // src/AuthCard.tsx
@@ -547,31 +547,6 @@ 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");
@@ -584,11 +559,6 @@ var AuthSignIn = ({
   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+",
@@ -684,11 +654,8 @@ var AuthSignIn = ({
               "value": "Email"
             }]
           })
-        }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldInput, {
+        }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_forms2.FormFieldPassword, {
           name: "password",
-          trailingIcon: icon,
-          onTrailingIconClick: handleClick,
-          type: inputType,
           label: intl.formatMessage({
             id: "PylVqx",
             defaultMessage: [{
@@ -883,7 +850,7 @@ var AuthLogic = () => {
   const {
     setLoading
   } = (0, import_react_notifications2.useNotifications)();
-  const onSignIn = React4.useCallback(async ({
+  const onSignIn = React3.useCallback(async ({
     email,
     password
   }) => {
@@ -905,7 +872,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onSignUp = React4.useCallback(async ({
+  const onSignUp = React3.useCallback(async ({
     email,
     password
   }) => {
@@ -926,7 +893,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onConfirmSignUp = React4.useCallback(async ({
+  const onConfirmSignUp = React3.useCallback(async ({
     email,
     code
   }) => {
@@ -941,7 +908,7 @@ var AuthLogic = () => {
       setLoading(false);
     }
   }, [send, setLoading]);
-  const onReturnToSignIn = React4.useCallback(() => {
+  const onReturnToSignIn = React3.useCallback(() => {
     send({
       type: "RETURN_TO_SIGN_IN"
     });
@@ -975,7 +942,7 @@ var Auth2 = ({
   logo,
   fullScreen = true
 }) => {
-  const withLogoNode = React4.useMemo(() => {
+  const withLogoNode = React3.useMemo(() => {
     return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(LogoProvider, {
       logo,
       children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(AuthLogic, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-auth",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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.1"
+    "@ttoss/forms": "^0.17.3"
   },
   "peerDependencies": {
     "aws-amplify": "^5.0.0",
     "react": ">=16.8.0",
-    "@ttoss/react-notifications": "^1.22.1",
-    "@ttoss/ui": "^1.36.1",
-    "@ttoss/react-i18n": "^1.22.0"
+    "@ttoss/react-i18n": "^1.22.0",
+    "@ttoss/react-notifications": "^1.22.3",
+    "@ttoss/ui": "^1.36.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.5",
@@ -37,9 +37,9 @@
     "@ttoss/config": "^1.30.0",
     "@ttoss/i18n-cli": "^0.5.0",
     "@ttoss/react-i18n": "^1.22.0",
-    "@ttoss/react-notifications": "^1.22.1",
+    "@ttoss/react-notifications": "^1.22.3",
     "@ttoss/test-utils": "^1.23.0",
-    "@ttoss/ui": "^1.36.1"
+    "@ttoss/ui": "^1.36.3"
   },
   "keywords": [
     "React",

package/src/AuthSignIn.tsx

@@ -1,8 +1,14 @@
 import { AuthCard } from './AuthCard';
 import { Button, Flex, Link, Text } from '@ttoss/ui';
-import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+import {
+  Form,
+  FormFieldInput,
+  FormFieldPassword,
+  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';
 
@@ -22,8 +28,6 @@ export const AuthSignIn = ({
 }: AuthSignInProps) => {
   const { intl } = useI18n();
 
-  const { handleClick, icon, inputType } = useHidePassInput();
-
   const schema = yup.object().shape({
     email: yup
       .string()
@@ -105,11 +109,8 @@ export const AuthSignIn = ({
               defaultMessage: 'Email',
             })}
           />
-          <FormFieldInput
+          <FormFieldPassword
             name="password"
-            trailingIcon={icon}
-            onTrailingIconClick={handleClick}
-            type={inputType}
             label={intl.formatMessage({
               description: 'Password label.',
               defaultMessage: 'Password',

package/src/useHidePassInput.ts

@@ -1,26 +0,0 @@
-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,
-  };
-};