@homefile/components-v2 2.61.0 → 2.62.0

package/dist/assets/locales/en/index.json

@@ -689,7 +689,8 @@
   "newPassword": {
     "confirm": "Confirm Password",
     "create": "Create Password",
-    "title": "Please enter your new password."
+    "title": "Please enter your new password.",
+    "support": "Still stuck? Email"
   },
   "notifications": {
     "noNotifications": "You currently have no notifications.",

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

@@ -4,5 +4,5 @@ import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/reac
 import { Logo, ButtonLoader, BasePageWrapper } from '../../../components';
 import { Confirmation } from '../../../assets/images';
 export const EmailValidation = ({ email, isLoading = false, handleResendBt, }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(chakra.span, { color: "gray.3", children: t('validation.title2') })] }), _jsx(Center, { children: _jsx(Image, { src: Confirmation, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendBt') }) })] }) }));
 };

package/dist/components/onboarding/pages/NewPassword.d.ts

@@ -1,2 +1,2 @@
 import { NewPasswordI } from '../../../interfaces';
-export declare const NewPassword: ({ isLoading, handleReset, userEmail, }: NewPasswordI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewPassword: ({ isLoading, handleReset, userEmail, errorMessage, errorActionText, handleErrorAction, supportEmail, }: NewPasswordI) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,15 +4,17 @@ import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react';
 import { Logo, Footer, ButtonLoader, PasswordInput, BasePageWrapper, } from '../../../components';
 import { isValidPassword, passwordMatch } from '../../../utils';
 import { useNewPassword } from '../../../hooks';
-export const NewPassword = ({ isLoading, handleReset, userEmail, }) => {
+export const NewPassword = ({ isLoading, handleReset, userEmail, errorMessage, errorActionText, handleErrorAction, supportEmail, }) => {
     const { inputs, handleInputChange, handleSubmit, isValidated } = useNewPassword(handleReset);
-    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "blue.2", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
-                                                ? t('forms.errorPasswordLength')
-                                                : t('forms.errorPasswordMatch'), hasError: isValidated &&
-                                                (!isValidPassword(inputs.password) ||
-                                                    !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('newPassword.create'), value: inputs.password || '', handleChange: handleInputChange }), _jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.confirmPassword)
-                                                ? t('forms.errorPasswordLength')
-                                                : t('forms.errorPasswordMatch'), hasError: isValidated &&
-                                                (!isValidPassword(inputs.confirmPassword) ||
-                                                    !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] }), _jsx(Footer, {})] }));
+    return (_jsxs(BasePageWrapper, { children: [_jsxs(Container, { size: "onboarding", boxShadow: "lg", children: [_jsx(Logo, {}), _jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsxs(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: [_jsx(chakra.span, { color: "gray.3", children: t('welcome.greeting2') }), _jsx(chakra.span, { color: "gray.3", children: userEmail }), _jsx(chakra.span, { color: "gray.3", children: "," })] }) }), _jsx(Box, { px: ['container.sm', 'container.md', 'container.lg'], pb: "container.lg", mb: 6, children: _jsxs(Stack, { spacing: 8, children: [_jsxs(Stack, { spacing: errorMessage ? 'base' : 8, children: [_jsx(Text, { textAlign: "center", variant: "info", children: t('newPassword.title') }), Boolean(errorMessage) && (
+                                        // Faint magenta box behind the whole message (Matt, 2026-10-06).
+                                        _jsxs(Stack, { spacing: 2, align: "center", bg: "status.errorBg", borderRadius: "sm", px: 4, py: 3, children: [_jsx(Text, { variant: "error", textAlign: "center", children: errorMessage }), Boolean(errorActionText) && handleErrorAction && (_jsx(Button, { variant: "text", fontSize: "xs", lineHeight: "13px", h: "auto", onClick: handleErrorAction, children: errorActionText })), Boolean(supportEmail) && (_jsxs(Text, { textAlign: "center", variant: "hint", children: [t('newPassword.support'), ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] }))] })), _jsxs(Stack, { spacing: 3, children: [_jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.password)
+                                                        ? t('forms.errorPasswordLength')
+                                                        : t('forms.errorPasswordMatch'), hasError: isValidated &&
+                                                        (!isValidPassword(inputs.password) ||
+                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "password", placeholder: t('newPassword.create'), value: inputs.password || '', handleChange: handleInputChange }), _jsx(PasswordInput, { errorMessage: !isValidPassword(inputs.confirmPassword)
+                                                        ? t('forms.errorPasswordLength')
+                                                        : t('forms.errorPasswordMatch'), hasError: isValidated &&
+                                                        (!isValidPassword(inputs.confirmPassword) ||
+                                                            !passwordMatch(inputs.password, inputs.confirmPassword)), id: "confirmPassword", placeholder: t('newPassword.confirm'), value: inputs.confirmPassword || '', handleChange: handleInputChange })] })] }), _jsx(Button, { isLoading: isLoading, spinner: _jsx(ButtonLoader, {}), onClick: handleSubmit, children: t('reset.resetBt') })] }) })] }), _jsx(Footer, {})] }));
 };

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

@@ -4,5 +4,5 @@ import { chakra, Container, Text, Image, Center, Button, } from '@chakra-ui/reac
 import { BasePageWrapper, ButtonLoader, Logo } from '../../../components';
 import { ResendPassword } from '../../../assets/images';
 export const ResendResetPassword = ({ email, isLoading = false, handleResendBt, handleBack }) => {
-    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "blue.2", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
+    return (_jsx(BasePageWrapper, { children: _jsxs(Container, { size: "validation", boxShadow: "lg", children: [_jsxs(Container, { variant: "secondary", children: [_jsx(Logo, {}), _jsxs(Text, { variant: "title", textAlign: "center", px: ['container.sm', 'container.xl'], pb: 6, minH: "6rem", children: [_jsx(chakra.span, { color: "gray.3", children: t('validation.title1') }), _jsx(chakra.span, { color: "gray.3", children: email }), _jsx(Text, { variant: "title", children: t('validation.title3') })] }), _jsx(Center, { children: _jsx(Image, { src: ResendPassword, alt: "Activate account", h: ['100px', '145px'], w: "auto" }) })] }), _jsx(Text, { variant: "info", px: ['container.md', 'container.lg'], py: "2rem", textAlign: "center", children: t('validation.alert1') }), _jsx(Center, { children: _jsx(Button, { mb: handleBack ? 5 : 10, mx: 4, variant: "secondary", onClick: handleResendBt, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.resendResetBt') }) }), handleBack && (_jsx(Center, { children: _jsx(Button, { mb: 10, mx: 4, variant: "primary", onClick: handleBack, isLoading: isLoading, spinner: _jsx(ButtonLoader, { isOutlined: true }), size: "onboarding", children: t('validation.backToLogin') }) }))] }) }));
 };

package/dist/interfaces/pages/NewPassword.interface.d.ts

@@ -6,4 +6,11 @@ export interface NewPasswordI {
     isLoading: boolean;
     handleReset: (form: NewPasswordFormI) => void;
     userEmail: string;
+    /** Shown above the password fields, in the same error style as sign-in. */
+    errorMessage?: string;
+    /** Optional button under the error line (for example "Send a new link"). */
+    errorActionText?: string;
+    handleErrorAction?: () => void;
+    /** Optional support address under the error line, shown as an email link. */
+    supportEmail?: string;
 }

package/dist/stories/onboarding/pages/NewPassword.stories.d.ts

@@ -9,3 +9,22 @@ export declare const NewPasswordPage: {
         userEmail: string;
     };
 };
+export declare const NewPasswordLinkExpired: {
+    (args: NewPasswordI): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isLoading: boolean;
+        userEmail: string;
+        errorMessage: string;
+        errorActionText: string;
+        handleErrorAction: () => void;
+    };
+};
+export declare const NewPasswordNoAnswer: {
+    (args: NewPasswordI): import("react/jsx-runtime").JSX.Element;
+    args: {
+        isLoading: boolean;
+        userEmail: string;
+        errorMessage: string;
+        supportEmail: string;
+    };
+};

package/dist/stories/onboarding/pages/NewPassword.stories.js

@@ -11,3 +11,20 @@ NewPasswordPage.args = {
     isLoading: true,
     userEmail: 'user@user.com',
 };
+// The reset link was refused (expired, already used, or too many tries).
+export const NewPasswordLinkExpired = (args) => (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
+NewPasswordLinkExpired.args = {
+    isLoading: false,
+    userEmail: 'user@user.com',
+    errorMessage: 'This link has expired.',
+    errorActionText: 'Send a new link',
+    handleErrorAction: () => { },
+};
+// The request got no answer (offline, or the server didn't respond).
+export const NewPasswordNoAnswer = (args) => (_jsx(CloudsAnimation, { children: _jsx(NewPassword, Object.assign({}, args)) }));
+NewPasswordNoAnswer.args = {
+    isLoading: false,
+    userEmail: 'user@user.com',
+    errorMessage: "We couldn't reach Homefile. Check your connection, then press Reset Password.",
+    supportEmail: 'support@homefile.com',
+};

package/package.json

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