@dynamic-labs/sdk-react-core 4.61.2 → 4.61.3

package/src/lib/widgets/DynamicWidget/views/SetupPasswordEnterView/SetupPasswordEnterView.js

@@ -10,6 +10,7 @@ import { ToggleVisibilityButton } from '../../../../components/ToggleVisibilityB
 import { Typography } from '../../../../components/Typography/Typography.js';
 import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgErrorCircleX } from '../../../../shared/assets/error-circle-x.js';
 import { ReactComponent as SvgPasswordLockIcon } from '../../../../shared/assets/password-lock-icon.js';
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
@@ -25,29 +26,35 @@ const validatePassword = (password) => ({
     symbol: /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(password),
     uppercase: /[A-Z]/.test(password),
 });
-const SetupPasswordEnterView = ({ onContinue, onBack, }) => {
+const SetupPasswordEnterView = ({ onContinue, onBack, title, description, oldPassword, }) => {
     const { t } = useTranslation();
     const [password, setPassword] = useState('');
     const [showPassword, setShowPassword] = useState(false);
+    const [samePasswordError, setSamePasswordError] = useState(false);
     const requirements = validatePassword(password);
     const allValid = Object.values(requirements).every(Boolean);
     const handlePasswordChange = useCallback((e) => {
         setPassword(e.target.value);
+        setSamePasswordError(false);
     }, []);
     const handleToggleVisibility = useCallback((hidden) => {
         setShowPassword(!hidden);
     }, []);
     const handleContinue = useCallback(() => {
-        if (allValid) {
-            onContinue(password);
+        if (!allValid)
+            return;
+        if (oldPassword && password === oldPassword) {
+            setSamePasswordError(true);
+            return;
         }
-    }, [allValid, onContinue, password]);
+        onContinue(password);
+    }, [allValid, onContinue, password, oldPassword]);
     const backButton = (jsx(IconButton, { type: 'button', onClick: onBack, "data-testid": 'setup-password-enter-back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: t('dyn_setup_password.enter.title') }) }), jsx("div", { className: 'setup-password-enter-view', children: jsxs("div", { className: 'setup-password-enter-view__body', children: [jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: t('dyn_setup_password.enter.description') }), jsx(Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
-                            // eslint-disable-next-line react/jsx-wrap-multilines
-                            jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsx(PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsx(PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsx(PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsx(PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsx(PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), jsx("div", { className: 'setup-password-enter-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
-                                    color: 'inherit',
-                                }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.enter.title', children: title !== null && title !== void 0 ? title : t('dyn_setup_password.enter.title') }) }), jsxs("div", { className: 'setup-password-enter-view', children: [jsxs("div", { className: 'setup-password-enter-view__body', children: [jsx("div", { className: 'setup-password-enter-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgPasswordLockIcon, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.enter.description', className: 'setup-password-enter-view__description', children: description !== null && description !== void 0 ? description : t('dyn_setup_password.enter.description') }), jsx(Input, { id: 'setup-password-enter-password-input', type: showPassword ? 'text' : 'password', label: t('dyn_setup_password.enter.label'), placeholder: t('dyn_setup_password.enter.placeholder'), value: password, onChange: handlePasswordChange, variant: 'regular', suffix: 
+                                // eslint-disable-next-line react/jsx-wrap-multilines
+                                jsx(ToggleVisibilityButton, { initialState: true, onClick: handleToggleVisibility }) }), jsxs("div", { className: 'setup-password-enter-view__requirements', children: [jsx(PasswordRequirement, { met: requirements.length, text: t('dyn_setup_password.enter.requirement_length') }), jsx(PasswordRequirement, { met: requirements.uppercase, text: t('dyn_setup_password.enter.requirement_uppercase') }), jsx(PasswordRequirement, { met: requirements.lowercase, text: t('dyn_setup_password.enter.requirement_lowercase') }), jsx(PasswordRequirement, { met: requirements.number, text: t('dyn_setup_password.enter.requirement_number') }), jsx(PasswordRequirement, { met: requirements.symbol, text: t('dyn_setup_password.enter.requirement_symbol') })] }), samePasswordError && (jsxs("div", { className: 'setup-password-enter-view__same-password-error', children: [jsx(Icon, { color: 'text-error', size: 'medium', children: jsx(SvgErrorCircleX, {}) }), jsx(Typography, { variant: 'body_small', color: 'error-1', children: t('dyn_reset_password.enter.same_password_error') })] }))] }), jsx("div", { className: 'setup-password-enter-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-enter-continue-button', onClick: handleContinue, disabled: !allValid, copykey: 'dyn_setup_password.button.continue', buttonVariant: 'brand-primary', typographyProps: {
+                                color: 'inherit',
+                            }, expanded: true, children: t('dyn_setup_password.button.continue') }) })] })] }));
 };
 
 export { SetupPasswordEnterView };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.cjs

@@ -14,12 +14,12 @@ var checkCircleFilled = require('../../../../shared/assets/check-circle-filled.c
 require('@dynamic-labs/iconic');
 require('../../../../context/ViewContext/ViewContext.cjs');
 
-const SetupPasswordSuccessView = ({ onDone, }) => {
+const SetupPasswordSuccessView = ({ onDone, title, description, }) => {
     const { t } = reactI18next.useTranslation();
     const handleDone = React.useCallback(() => {
         onDone();
     }, [onDone]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-success-view', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__content', children: jsxRuntime.jsxs("div", { className: 'setup-password-success-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(checkCircleFilled.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsxRuntime.jsx("div", { className: 'setup-password-success-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: title !== null && title !== void 0 ? title : t('dyn_setup_password.success.title') }) }), jsxRuntime.jsxs("div", { className: 'setup-password-success-view', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__content', children: jsxRuntime.jsxs("div", { className: 'setup-password-success-view__body', children: [jsxRuntime.jsx("div", { className: 'setup-password-success-view__icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(checkCircleFilled.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: description !== null && description !== void 0 ? description : t('dyn_setup_password.success.description') })] }) }), jsxRuntime.jsx("div", { className: 'setup-password-success-view__actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
                                 color: 'inherit',
                             }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
 };

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.d.ts

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 export type SetupPasswordSuccessViewProps = {
     onDone: () => void;
+    title?: string;
+    description?: string;
 };
 export declare const SetupPasswordSuccessView: FC<SetupPasswordSuccessViewProps>;

package/src/lib/widgets/DynamicWidget/views/SetupPasswordSuccessView/SetupPasswordSuccessView.js

@@ -10,12 +10,12 @@ import { ReactComponent as SvgCheckCircleFilled } from '../../../../shared/asset
 import '@dynamic-labs/iconic';
 import '../../../../context/ViewContext/ViewContext.js';
 
-const SetupPasswordSuccessView = ({ onDone, }) => {
+const SetupPasswordSuccessView = ({ onDone, title, description, }) => {
     const { t } = useTranslation();
     const handleDone = useCallback(() => {
         onDone();
     }, [onDone]);
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: t('dyn_setup_password.success.title') }) }), jsxs("div", { className: 'setup-password-success-view', children: [jsx("div", { className: 'setup-password-success-view__content', children: jsxs("div", { className: 'setup-password-success-view__body', children: [jsx("div", { className: 'setup-password-success-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgCheckCircleFilled, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: t('dyn_setup_password.success.description') })] }) }), jsx("div", { className: 'setup-password-success-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_setup_password.success.title', children: title !== null && title !== void 0 ? title : t('dyn_setup_password.success.title') }) }), jsxs("div", { className: 'setup-password-success-view', children: [jsx("div", { className: 'setup-password-success-view__content', children: jsxs("div", { className: 'setup-password-success-view__body', children: [jsx("div", { className: 'setup-password-success-view__icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgCheckCircleFilled, { width: 64, height: 64 }) }) }), jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_setup_password.success.description', className: 'setup-password-success-view__description', children: description !== null && description !== void 0 ? description : t('dyn_setup_password.success.description') })] }) }), jsx("div", { className: 'setup-password-success-view__actions', children: jsx(TypographyButton, { dataTestId: 'setup-password-success-done-button', onClick: handleDone, copykey: 'dyn_setup_password.button.done', buttonVariant: 'brand-primary', typographyProps: {
                                 color: 'inherit',
                             }, expanded: true, children: t('dyn_setup_password.button.done') }) })] })] }));
 };