New password with a reveal button, a strength meter and the rules it must pass.
- At least 12 characters
- Three of: lowercase, uppercase, digit, symbol
- Doesn't contain your email name
Usage
<script lang="ts">
import NewPasswordFields from "@orochibraru/ui/blocks/new-password-fields";
import * as Field from "@orochibraru/ui/field";
</script>
<Field.Group>
<NewPasswordFields email="alex@example.com" />
</Field.Group>
import { type Actions, fail } from "@sveltejs/kit";
import { passwordRules } from "@orochibraru/ui/password";
export const actions = {
default: async ({ request }) => {
const form = await request.formData();
const password = String(form.get("password") ?? "");
const failed = passwordRules(
password,
String(form.get("email") ?? ""),
).filter((rule) => !rule.passed);
if (failed.length > 0) {
return fail(400, {
errors: { password: failed.map((rule) => rule.label) },
});
}
if (form.get("confirmPassword") !== password) {
return fail(400, {
errors: { confirmPassword: ["The passwords don't match."] },
});
}
return { saved: true };
},
} satisfies Actions;