diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts index 48775b0..a6e39d7 100644 --- a/src/i18n/en/translations.ts +++ b/src/i18n/en/translations.ts @@ -345,7 +345,9 @@ export default { confirm_password_placeholder: "Enter the same password", encrypt: "Encrypt", skip: "Skip", - error_match: "Passwords do not match" + error_match: "Passwords do not match", + error_same_as_existingpassword: + "New password must not match existing password" }, decrypt: { title: "Enter your password", diff --git a/src/routes/settings/Encrypt.tsx b/src/routes/settings/Encrypt.tsx index 60350ac..3abd8dd 100644 --- a/src/routes/settings/Encrypt.tsx +++ b/src/routes/settings/Encrypt.tsx @@ -1,5 +1,5 @@ import { createForm } from "@modular-forms/solid"; -import { createSignal, Show } from "solid-js"; +import { createMemo, createSignal, Show } from "solid-js"; import { BackLink, @@ -31,7 +31,7 @@ export default function Encrypt() { const [error, setError] = createSignal(); const [loading, setLoading] = createSignal(false); - const [_encryptPasswordForm, { Form, Field }] = + const [encryptPasswordForm, { Form, Field }] = createForm({ initialValues: { existingPassword: "", @@ -39,11 +39,16 @@ export default function Encrypt() { confirmPassword: "" }, validate: (values) => { + setError(undefined); const errors: Record = {}; if (values.password !== values.confirmPassword) { errors.confirmPassword = i18n.t( "settings.encrypt.error_match" ); + } else if (values.password === values.existingPassword) { + errors.password = i18n.t( + "settings.encrypt.error_same_as_existingpassword" + ); } return errors; } @@ -66,6 +71,14 @@ export default function Encrypt() { } }; + const encryptButtonDisabled = createMemo(() => { + return ( + !encryptPasswordForm.dirty || + encryptPasswordForm.invalid || + !!error() + ); + }); + return ( @@ -145,7 +158,11 @@ export default function Encrypt() {
-