Fixing refine passwords, adding svelte head.

src/lib/validations/account.ts

@@ -1,11 +1,11 @@
-import { z } from 'zod'
+import type { z } from "zod";
 
-export const refinePasswords = async function (confirm_password: string, password: string, ctx: z.RefinementCtx) {
+export const refinePasswords = async (confirm_password: string, password: string, ctx: z.RefinementCtx) => {
 	comparePasswords(confirm_password, password, ctx)
 	checkPasswordStrength(password, ctx)
 }
 
-const comparePasswords = async function (confirm_password: string, password: string, ctx: z.RefinementCtx) {
+const comparePasswords = async (confirm_password: string, password: string, ctx: z.RefinementCtx) => {
 	if (confirm_password !== password) {
 		ctx.addIssue({
 			code: 'custom',
@@ -15,19 +15,19 @@ const comparePasswords = async function (confirm_password: string, password: str
 	}
 }
 
-const checkPasswordStrength = async function (password: string, ctx: z.RefinementCtx) {
+const checkPasswordStrength = async (password: string, ctx: z.RefinementCtx) => {
 	const minimumLength = password.length < 8
 	const maximumLength = password.length > 128
 	const containsUppercase = (ch: string) => /[A-Z]/.test(ch)
 	const containsLowercase = (ch: string) => /[a-z]/.test(ch)
 	const containsSpecialChar = (ch: string) => /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/.test(ch)
-	let countOfUpperCase = 0,
-		countOfLowerCase = 0,
-		countOfNumbers = 0,
-		countOfSpecialChar = 0
+	let countOfUpperCase = 0;
+	let countOfLowerCase = 0;
+	let countOfNumbers = 0;
+	let countOfSpecialChar = 0;
 	for (let i = 0; i < password.length; i++) {
 		const char = password.charAt(i)
-		if (!isNaN(+char)) {
+		if (!Number.isNaN(+char)) {
 			countOfNumbers++
 		} else if (containsUppercase(char)) {
 			countOfUpperCase++

src/routes/(app)/(protected)/settings/account/update-email-card.svelte

@@ -1,21 +1,22 @@
-<script context="module" lang="ts">
-	import type { SuperValidated, Infer } from 'sveltekit-superforms';
+<script module lang="ts">
+import type { Infer, SuperValidated } from 'sveltekit-superforms';
 
-	interface UpdateEmailCardProps {
-		updateEmailForm: SuperValidated<Infer<typeof updateEmailDto>>;
-		verifyEmailForm: SuperValidated<Infer<typeof verifyEmailDto>>;
-	}
+interface UpdateEmailCardProps {
+  updateEmailForm: SuperValidated<Infer<typeof updateEmailDto>>;
+  verifyEmailForm: SuperValidated<Infer<typeof verifyEmailDto>>;
+}
 </script>
 
 <script lang="ts">
-	import * as Card from '@/components/ui/card';
-	import { Input } from '@/components/ui/input';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Form from '@/components/ui/form';
 	import { superForm } from 'sveltekit-superforms';
 	import * as Dialog from '@/components/ui/dialog';
-	// import PinInput from '$lib/components/pin-input.svelte';
-	import type { updateEmailDto } from '@/server/api/dtos/update-email.dto';
-	import type { verifyEmailDto } from '@/server/api/dtos/verify-email.dto';
+	import * as InputOTP from '$lib/components/ui/input-otp/index.js';
+	import type { updateEmailDto } from '$lib/dtos/update-email.dto';
+	import type { verifyEmailDto } from '$lib/dtos/verify-email.dto';
 
 	/* ---------------------------------- props --------------------------------- */
 	let { updateEmailForm, verifyEmailForm }: UpdateEmailCardProps = $props();
@@ -60,9 +61,11 @@
 	<Card.Content>
 		<form method="POST" action="?/updateEmail" use:updateEmailFormEnhance>
 			<Form.Field form={sf_updateEmailForm} name="email">
-				<Form.Control let:attrs>
-					<Form.Label>Email</Form.Label>
-					<Input {...attrs} bind:value={$updateEmailFormData.email} />
+				<Form.Control>
+					{#snippet children({ props })}
+						<Form.Label>Email</Form.Label>
+						<Input {...props} bind:value={$updateEmailFormData.email} />
+					{/snippet}
 				</Form.Control>
 				<Form.Description />
 				<Form.FieldErrors />
@@ -70,7 +73,9 @@
 		</form>
 	</Card.Content>
 	<Card.Footer class="border-t px-6 py-4">
-		<Form.Button on:click={() => submitEmailForm()}>Submit</Form.Button>
+		<Form.Button>
+			<button onclick={() => submitEmailForm()}>Submit</button>
+		</Form.Button>
 	</Card.Footer>
 </Card.Root>
 
@@ -86,15 +91,27 @@
 		</Dialog.Header>
 		<form method="POST" action="?/verifyEmail" use:verifyEmailFormEnhance>
 			<Form.Field form={sf_verifyEmailForm} name="token">
-				<Form.Control let:attrs>
-					<Form.Label />
-					<!-- <PinInput {...attrs} bind:value={$verifyEmailFormData.token} placeholder="Token..." /> -->
+				<Form.Control>
+						{#snippet children({ props })}
+						<InputOTP.Root maxlength={6} {...props} bind:value={$verifyEmailFormData.token}>
+							{#snippet children({ cells })}
+								<InputOTP.Group>
+									{#each cells as cell}
+										<InputOTP.Slot {cell} />
+									{/each}
+								</InputOTP.Group>
+							{/snippet}
+						</InputOTP.Root>
+					{/snippet}
 				</Form.Control>
 				<Form.FieldErrors />
 			</Form.Field>
 		</form>
 		<Dialog.Footer>
-			<Form.Button on:click={() => verifyEmailFormSubmit()}>Verify</Form.Button>
+			<Button variant="outline">Cancel</Button>
+			<Form.Button onclick={() => verifyEmailFormSubmit()}>
+				Verify
+			</Form.Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>

src/routes/(app)/(public)/privacy-policy/+page.svelte

@@ -1,6 +1,10 @@
 <h1>Privacy Policy</h1>
 <h2>Last Updated: January 2nd, 2025</h2>
 
+<svelte:head>
+	<title>Acme | Privacy Policy</title>
+</svelte:head>
+
 <section>
 	<p>At Acme Inc., we respect your privacy and are committed to protecting your personal information.</p>
 	<p>We collect only the personal information that is necessary for us to provide our services to you.</p>

src/routes/(app)/(public)/terms/+page.svelte

@@ -1,6 +1,10 @@
 <h1>Terms of Use</h1>
 <h2>Last Updated: January 2nd, 2025</h2>
 
+<svelte:head>
+	<title>Acme | Terms of Use</title>
+</svelte:head>
+
 <section>
 	<p>The following terms of user ("Terms") apply to your use of Acme Inc. ("Acme Inc.").</p>
 </section>

src/routes/(auth)/password/reset/+page.svelte

@@ -45,6 +45,10 @@
 	const { form: newPasswordFormData, enhance: newPasswordEnhance } = sf_new_password;
 </script>
 
+<svelte:head>
+	<title>Acme | Reset Password</title>
+</svelte:head>
+
 <Card.Root class="mx-auto max-w-sm">
 	<Card.Header>
 		<Card.Title class="text-2xl">Reset Password</Card.Title>