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

Example.svelte
<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>
+page.server.ts
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;