From 266a329e7ebed4960a19ee2fb852c50776d9e0fb Mon Sep 17 00:00:00 2001 From: April Hall Date: Sat, 15 Feb 2025 19:01:17 -0500 Subject: [PATCH] feat: Setup schemas, componentize forms --- src/lib/components/forms/updatePFP.svelte | 12 +++++ .../components/forms/updatePassword.svelte | 44 +++++++++++++++ .../components/forms/updateUsername.svelte | 43 +++++++++++++++ src/lib/types/schema.ts | 23 ++++++++ src/routes/(main)/account/+page.server.ts | 37 ++++++++++++- src/routes/(main)/account/+page.svelte | 53 +++++-------------- 6 files changed, 169 insertions(+), 43 deletions(-) create mode 100644 src/lib/components/forms/updatePFP.svelte create mode 100644 src/lib/components/forms/updatePassword.svelte create mode 100644 src/lib/components/forms/updateUsername.svelte diff --git a/src/lib/components/forms/updatePFP.svelte b/src/lib/components/forms/updatePFP.svelte new file mode 100644 index 0000000..7bc9612 --- /dev/null +++ b/src/lib/components/forms/updatePFP.svelte @@ -0,0 +1,12 @@ + + +
+
+ Upload Profile Image + + +
+
diff --git a/src/lib/components/forms/updatePassword.svelte b/src/lib/components/forms/updatePassword.svelte new file mode 100644 index 0000000..f51e6db --- /dev/null +++ b/src/lib/components/forms/updatePassword.svelte @@ -0,0 +1,44 @@ + + + +
+
+ Update Password +
+ + + {#if $errors.currentPassword}{$errors.currentPassword[0]}{/if} +
+
+ + + {#if $errors.newPassword}{$errors.newPassword[0]}{/if} +
+ + {#if $message}{$message}{/if} +
+
diff --git a/src/lib/components/forms/updateUsername.svelte b/src/lib/components/forms/updateUsername.svelte new file mode 100644 index 0000000..11eeb42 --- /dev/null +++ b/src/lib/components/forms/updateUsername.svelte @@ -0,0 +1,43 @@ + + +
+
+ Update Username +
+ + + {#if $errors.username}{$errors.username[0]}{/if} +
+
+ + + {#if $errors.password}{$errors.password[0]}{/if} +
+ + {#if $message}{$message}{/if} +
+
diff --git a/src/lib/types/schema.ts b/src/lib/types/schema.ts index 4bb83b7..34de724 100644 --- a/src/lib/types/schema.ts +++ b/src/lib/types/schema.ts @@ -32,6 +32,29 @@ export const loginSchema = z.object({ password: z.string().nonempty('Password must not be empty.'), }); +export const changePasswordSchema = z.object({ + currentPassword: z.string().nonempty('Password must not be empty.'), + newPassword: z + .string() + .min(8, 'New password must be at least 8 characters.') + .regex(/(?=.*[A-Z])/gm, 'New password must contain at uppercase letter.') + .regex(/(?=.*[a-z])/gm, 'New password must contain at lowercase letter.') + .regex(/(?=.*\d)/gm, 'New password must contain at least one number.') + .regex(/(?=.*\W)/gm, 'New password must contain at least one special character'), +}); + +export const changeUsernameSchema = z.object({ + username: z + .string() + .min(3, 'Username must be at least 3 characters.') + .max(15, 'Username must be no more than 15 characters.') + .regex(/^(?![A-Z])/gm, 'Username cannot contain uppercase letters') + .regex(/^(?=[a-z0-9-_]+$)/gm, 'Username cannot contain special characters'), + password: z.string().nonempty('Password must not be empty.'), +}); + +export type ChangePasswordSchema = typeof changePasswordSchema; +export type ChangeUsernameSchema = typeof changeUsernameSchema; export type NewChannelSchema = typeof newChannelSchema; export type SignUpSchema = typeof signupSchema; export type LogInSchema = typeof loginSchema; diff --git a/src/routes/(main)/account/+page.server.ts b/src/routes/(main)/account/+page.server.ts index 045674b..a929cff 100644 --- a/src/routes/(main)/account/+page.server.ts +++ b/src/routes/(main)/account/+page.server.ts @@ -1,7 +1,11 @@ -import { auth } from '$lib/server/db/auth'; import { redirect } from '@sveltejs/kit'; +import type { Actions } from '@sveltejs/kit'; +import { fail, message, setError, superValidate } from 'sveltekit-superforms'; +import { zod } from 'sveltekit-superforms/adapters'; +import { auth } from '$lib/server/db/auth'; +import { changeUsernameSchema, changePasswordSchema } from '$lib/types/schema.js'; -export async function load({ request }): Promise { +export async function load({ request }) { const session = await auth.api.getSession({ headers: request.headers, }); @@ -9,4 +13,33 @@ export async function load({ request }): Promise { if (!session) { redirect(307, '/signup'); } + + return { + newuserForm: await superValidate(zod(changeUsernameSchema)), + newpassForm: await superValidate(zod(changePasswordSchema)), + }; } + +export const actions = { + updatePassword: async ({ request }) => { + const newpassForm = await superValidate(request, zod(changePasswordSchema)); + + if (!newpassForm.valid) { + return fail(400, { newpassForm }); + } + + return message(newpassForm, 'Password updated.'); + }, + updateUsername: async ({ request }) => { + const newuserForm = await superValidate(request, zod(changeUsernameSchema)); + + if (!newuserForm.valid) { + return fail(400, { newuserForm }); + } + + return message(newuserForm, 'Password updated.'); + }, + updateProfilePhoto: async () => {}, + deleteAccount: async () => {}, + signOut: async () => {}, +} satisfies Actions; diff --git a/src/routes/(main)/account/+page.svelte b/src/routes/(main)/account/+page.svelte index 1a3c801..1b29110 100644 --- a/src/routes/(main)/account/+page.svelte +++ b/src/routes/(main)/account/+page.svelte @@ -1,52 +1,23 @@
- -
-
- Update Password -
- - -
-
- - -
- -
-
- -
-
- Update Username -
- - -
-
- - -
- -
-
- -
-
- Upload Profile Image - - -
-
+ + + +
@@ -66,10 +37,10 @@ Are you sure absolutely sure? This action cannot be undone. This will permanently delete your account and remove your data from our database. -
+
-
+