@homefile/components-v2 1.0.6 → 1.0.8

package/dist/components/inputs/PasswordInput.d.ts

@@ -1,2 +1,2 @@
 import { InputI } from '../../interfaces';
-export declare const PasswordInput: ({ errorMessage, id, handleChange, hasError, placeholder, value, }: InputI) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordInput: ({ errorMessage, id, handleChange, hasError, placeholder, value, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/PasswordInput.js

@@ -1,12 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { InputGroup, Input, InputRightElement, IconButton, FormControl, Text, } from '@chakra-ui/react';
 import { Eye, EyeOff } from '..';
-export const PasswordInput = ({ errorMessage, id, handleChange, hasError, placeholder, value = '', }) => {
+export const PasswordInput = (_a) => {
+    var { errorMessage, id, handleChange, hasError, placeholder, value = '' } = _a, props = __rest(_a, ["errorMessage", "id", "handleChange", "hasError", "placeholder", "value"]);
     const [show, setShow] = useState(false);
     const handleClick = () => setShow(!show);
     const ViewIcon = show ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 });
-    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsxs(InputGroup, { children: [_jsx(Input, { autoCapitalize: "none", autoCorrect: "off", id: id, placeholder: placeholder, type: show ? 'text' : 'password', value: value, onChange: handleChange }), _jsx(InputRightElement, { width: "3rem", children: _jsx(IconButton, { variant: "icon", "aria-label": "Enter password", icon: ViewIcon, onClick: handleClick, _hover: {
+    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsxs(InputGroup, { children: [_jsx(Input, Object.assign({ autoCapitalize: "none", autoCorrect: "off", id: id, placeholder: placeholder, type: show ? 'text' : 'password', value: value, onChange: handleChange }, props)), _jsx(InputRightElement, { width: "3rem", children: _jsx(IconButton, { variant: "icon", "aria-label": "Enter password", icon: ViewIcon, onClick: handleClick, _hover: {
                                 svg: {
                                     fill: 'blue.3',
                                 },

package/dist/components/onboarding/pages/SignIn.js

@@ -15,17 +15,17 @@ import { isEmptyField } from '../../../utils';
 import { useSignIn } from '../../../hooks';
 export const SignIn = ({ isLoading, handleForgotPassword, handleSignIn, handleSignUp, loginError, values = { email: '', password: '' }, }) => {
     const { inputs, handleInputChange, isValidated, setIsValidated } = useSignIn(values);
-    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signin.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Stack, { spacing: "input.sm", children: _jsxs("form", { children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: loginError
-                                                    ? t('forms.errorLogin')
-                                                    : t('forms.email') + ' ' + t('forms.required'), hasError: isValidated && (loginError || isEmptyField(inputs.email)), id: "email", placeholder: t('forms.email'), value: values.email || inputs.email, handleChange: (event) => {
-                                                    values.email = event.target.value;
-                                                    handleInputChange(event);
-                                                } }), _jsx(PasswordInput, { errorMessage: loginError
-                                                    ? t('forms.errorLogin')
-                                                    : t('forms.password') + ' ' + t('forms.required'), hasError: isValidated && (loginError || isEmptyField(inputs.password)), id: "password", placeholder: t('forms.password'), value: values.password || inputs.password, handleChange: (event) => {
-                                                    values.password = event.target.value;
-                                                    handleInputChange(event);
-                                                } })] }) }), _jsxs(Stack, { spacing: 4, children: [_jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signin.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", autoComplete: "username", errorMessage: loginError
+                                                ? t('forms.errorLogin')
+                                                : t('forms.email') + ' ' + t('forms.required'), hasError: isValidated && (loginError || isEmptyField(inputs.email)), id: "email", placeholder: t('forms.email'), value: values.email || inputs.email, handleChange: (event) => {
+                                                values.email = event.target.value;
+                                                handleInputChange(event);
+                                            } }), _jsx(PasswordInput, { autoComplete: "current-password", errorMessage: loginError
+                                                ? t('forms.errorLogin')
+                                                : t('forms.password') + ' ' + t('forms.required'), hasError: isValidated && (loginError || isEmptyField(inputs.password)), id: "password", placeholder: t('forms.password'), value: values.password || inputs.password, handleChange: (event) => {
+                                                values.password = event.target.value;
+                                                handleInputChange(event);
+                                            } })] }), _jsxs(Stack, { spacing: 4, children: [_jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
                                                 setIsValidated(true);
                                                 if (!isEmptyField(inputs.email) &&
                                                     !isEmptyField(inputs.password)) {

package/dist/components/onboarding/pages/SignUp.js

@@ -17,10 +17,10 @@ export const SignUp = ({ isLoading, handleCreateAccount, handleSignIn, showPromo
         handleCreateAccount,
         values,
     });
-    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "input.sm", children: [_jsx(TextInput, { errorMessage: t('forms.firstName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.firstName), id: "firstName", placeholder: t('forms.firstName'), value: inputs.firstName, handleChange: handleInputChange }), _jsx(TextInput, { errorMessage: t('forms.lastName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.lastName), id: "lastName", placeholder: t('forms.lastName'), value: inputs.lastName, handleChange: handleInputChange }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
-                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange }), showPromoCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "promoCode", placeholder: t('forms.promoCode'), value: (_a = inputs.promoCode) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange })), _jsx(Text, { textAlign: "center", variant: "caption", children: t('signup.subtitle') }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated &&
+    return (_jsxs(Box, { w: "container.full", mt: "onboarding.top", zIndex: "2", position: "relative", children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(PageTitle, { title: t('signup.title') }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], mb: 6, children: _jsxs(Stack, { spacing: "base", as: "form", children: [_jsx(TextInput, { errorMessage: t('forms.firstName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.firstName), id: "firstName", placeholder: t('forms.firstName'), value: inputs.firstName, handleChange: handleInputChange, autoComplete: 'given-name' }), _jsx(TextInput, { errorMessage: t('forms.lastName') + ' ' + t('forms.required'), hasError: isValidated && isEmptyField(inputs.lastName), id: "lastName", placeholder: t('forms.lastName'), value: inputs.lastName, handleChange: handleInputChange, autoComplete: 'family-name' }), _jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", errorMessage: t('forms.email') + ' ' + t('forms.required'), hasError: isValidated &&
+                                        (isEmptyField(inputs.email) || !isValidEmail(inputs.email)), id: "email", placeholder: t('forms.email'), value: inputs.email, handleChange: handleInputChange, autoComplete: 'email' }), showPromoCode && (_jsx(TextInput, { autoCapitalize: "none", autoCorrect: "off", id: "promoCode", placeholder: t('forms.promoCode'), value: (_a = inputs.promoCode) !== null && _a !== void 0 ? _a : '', handleChange: handleInputChange, autoComplete: 'off' })), _jsx(Text, { textAlign: "center", variant: "caption", children: t('signup.subtitle') }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(values.password), hasError: isValidated &&
                                         (!isValidPassword(inputs.password) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event) }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(inputs.confirmPassword), hasError: isValidated &&
+                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('forms.password'), value: (_b = inputs.password) !== null && _b !== void 0 ? _b : '', handleChange: (event) => handleInputChange(event), autoComplete: 'new-password' }), _jsx(PasswordInput, { errorMessage: passwordErrorMessage(inputs.confirmPassword), hasError: isValidated &&
                                         (!isValidPassword(inputs.confirmPassword) ||
-                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('forms.passwordConfirm'), value: (_c = inputs.confirmPassword) !== null && _c !== void 0 ? _c : '', handleChange: (event) => handleInputChange(event) }), _jsx(Center, { px: ['container.sm', 'container.md', 'container.lg'], h: "4rem", children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') })] }) }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') })] }) }), _jsx(CardFooter, { title: t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
+                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('forms.passwordConfirm'), value: (_c = inputs.confirmPassword) !== null && _c !== void 0 ? _c : '', handleChange: (event) => handleInputChange(event), autoComplete: 'new-password' }), _jsx(Center, { px: ['container.sm', 'container.md', 'container.lg'], h: "4rem", children: _jsxs(Text, { textAlign: "center", variant: "info", w: "100%", children: [t('signup.terms'), _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') })] }) }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('signup.signupBt') })] }) }), _jsx(CardFooter, { title: t('signup.signin'), buttonLabel: t('signup.signinBt'), handleButtonClick: handleSignIn })] }), _jsx(Footer, {})] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/inputs/PasswordInput.tsx

@@ -17,6 +17,7 @@ export const PasswordInput = ({
   hasError,
   placeholder,
   value = '',
+  ...props
 }: InputI) => {
   const [show, setShow] = useState(false)
   const handleClick = () => setShow(!show)
@@ -32,6 +33,7 @@ export const PasswordInput = ({
           type={show ? 'text' : 'password'}
           value={value}
           onChange={handleChange}
+          {...props}
         />
         <InputRightElement width="3rem">
           <IconButton

package/src/components/onboarding/pages/SignIn.tsx

@@ -31,11 +31,12 @@ export const SignIn = ({
         <PageTitle title={t('signin.title')} />
         <Box px={['container.sm', 'container.md', 'container.lg']} mb={6}>
           <Stack spacing={8}>
-            <Stack spacing="input.sm">
-              <form>
+            <Stack spacing="base" as="form">
+ 
               <TextInput
                 autoCapitalize="none"
                 autoCorrect="off"
+                autoComplete="username"
                 errorMessage={
                   loginError
                     ? t('forms.errorLogin')
@@ -53,6 +54,7 @@ export const SignIn = ({
                 }}
               />
               <PasswordInput
+                autoComplete="current-password"
                 errorMessage={
                   loginError
                     ? t('forms.errorLogin')
@@ -69,7 +71,7 @@ export const SignIn = ({
                   handleInputChange(event)
                 }}
               />
-              </form>
+      
             </Stack>
             <Stack spacing={4}>
               <Button

package/src/components/onboarding/pages/SignUp.tsx

@@ -50,7 +50,7 @@ export const SignUp = ({
         <Logo />
         <PageTitle title={t('signup.title')} />
         <Box px={['container.sm', 'container.md', 'container.lg']} mb={6}>
-          <Stack spacing="input.sm">
+          <Stack spacing="base" as="form">
             <TextInput
               errorMessage={t('forms.firstName') + ' ' + t('forms.required')}
               hasError={isValidated && isEmptyField(inputs.firstName)}
@@ -58,6 +58,7 @@ export const SignUp = ({
               placeholder={t('forms.firstName')}
               value={inputs.firstName}
               handleChange={handleInputChange}
+              autoComplete='given-name'
             />
             <TextInput
               errorMessage={t('forms.lastName') + ' ' + t('forms.required')}
@@ -66,6 +67,7 @@ export const SignUp = ({
               placeholder={t('forms.lastName')}
               value={inputs.lastName}
               handleChange={handleInputChange}
+              autoComplete='family-name'
             />
             <TextInput
               autoCapitalize="none"
@@ -79,6 +81,7 @@ export const SignUp = ({
               placeholder={t('forms.email')}
               value={inputs.email}
               handleChange={handleInputChange}
+              autoComplete='email'
             />
             {showPromoCode && (
               <TextInput
@@ -88,6 +91,7 @@ export const SignUp = ({
                 placeholder={t('forms.promoCode')}
                 value={inputs.promoCode ?? ''}
                 handleChange={handleInputChange}
+                autoComplete='off'
               />
             )}
             <Text textAlign="center" variant="caption">
@@ -104,6 +108,7 @@ export const SignUp = ({
               placeholder={t('forms.password')}
               value={inputs.password ?? ''}
               handleChange={(event) => handleInputChange(event)}
+              autoComplete='new-password' 
             />
             <PasswordInput
               errorMessage={passwordErrorMessage(inputs.confirmPassword)}
@@ -116,6 +121,7 @@ export const SignUp = ({
               placeholder={t('forms.passwordConfirm')}
               value={inputs.confirmPassword ?? ''}
               handleChange={(event) => handleInputChange(event)}
+              autoComplete='new-password'
             />
             <Center
               px={['container.sm', 'container.md', 'container.lg']}