<script lang="ts">
	import AuthShell from "@zedensix/ui/blocks/auth-shell";
	import NewPasswordFields from "@zedensix/ui/blocks/new-password-fields";
	import { Button } from "@zedensix/ui/button";
	import * as Field from "@zedensix/ui/field";
</script>

<AuthShell
	heading="Set a new password"
	subheading="Pick something you don't use anywhere else."
>
	{#snippet brand()}
		<div class="bg-primary glow size-12 rounded-2xl"></div>
	{/snippet}
	<div class="grid gap-6">
		<Field.Group>
			<NewPasswordFields email="alex@example.com" />
		</Field.Group>
		<Button class="h-11">Save the password</Button>
	</div>
</AuthShell>

import { type Actions, fail } from "@sveltejs/kit";

import { passwordRules } from "@zedensix/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;