feat: validate create profile form fields

frontend/src/lib/components/modals/auth/forms/profile_create.svelte

@@ -11,6 +11,8 @@
   let errors = $state<Record<string, string> | undefined>();
   let pending = $state(false);
 
+  let invalid_username = $derived(errors?.detail?.toLowerCase().includes('username'));
+
   const handle_submit: SubmitFunction = async () => {
     pending = true;
 
@@ -35,20 +37,25 @@
 </script>
 
 <div class="flex flex-col gap-4">
-  <div class="flex flex-col items-center justify-center gap-4">
-    <div class="flex items-center gap-2">
+  <div class="flex flex-col items-center justify-center gap-1">
+    <div class="mb-3 flex items-center gap-2">
       <QuibbleLogo class="size-7" />
       <QuibbleTextLogo class="h-7 w-auto" />
     </div>
     <p class="text-center font-medium">Let's create new one!</p>
+    <p class="text-center text-xs">You can edit this profile from settings page later.</p>
   </div>
   <form
     method="POST"
     action="/settings/profile?/create"
     use:enhance={handle_submit}
     class="flex flex-col gap-3"
+    novalidate
   >
-    <label class="input input-bordered flex items-center gap-2">
+    <label
+      class="input input-bordered flex items-center gap-2"
+      class:input-error={invalid_username}
+    >
       <coreicons-shape-at-sign class="size-4"></coreicons-shape-at-sign>
       <input
         type="text"
@@ -79,5 +86,4 @@
       {/if}
     </button>
   </form>
-  <p class="text-center text-xs">You can do more things from settings page later.</p>
 </div>

frontend/src/lib/components/modals/auth/index.svelte

@@ -5,9 +5,9 @@
   import type { FormsState, FormSubmitData, Forms } from './types';
 
   let _form = $state<Forms>('join');
+  let prev_form_history = $state<Forms[]>(['join']);
 
   let current_form = $derived(forms[_form]);
-  let prev_form_history = $state<Forms[]>(['join']);
 
   const initial_forms_state = Object.fromEntries(
     Object.keys(forms).map((key) => [key, {}])

frontend/src/lib/zod_schemas/auth.ts

@@ -11,3 +11,11 @@ export const auth_schema = z.object({
 });
 
 export type AuthSchema = z.infer<typeof auth_schema>;
+
+export const profile_create_schema = z.object({
+  username: zod_required_string({ field_name: 'Username' }).min(3, {
+    message: 'Username must contain atleast 3 chararcters'
+  })
+});
+
+export type ProfileCreateSchema = z.infer<typeof profile_create_schema>;

frontend/src/routes/(app)/settings/profile/+page.server.ts

@@ -1,26 +1,41 @@
 import { dev } from '$app/environment';
 import client from '$lib/clients/v1/client';
+import { profile_create_schema } from '$lib/zod_schemas/auth';
 import type { Actions } from './$types';
 import { fail } from '@sveltejs/kit';
 
 export const actions = {
   create: async ({ request, cookies }) => {
     const form_data = await request.formData();
 
-    const { data, error, response } = await client.POST('/api/v1/users/me/profiles/', {
+    const {
+      data: parse_data,
+      error: parse_error,
+      success: parse_success
+    } = profile_create_schema.safeParse({
+      username: form_data.get('username')
+    });
+
+    if (!parse_success) {
+      return fail(400, { detail: parse_error.flatten().fieldErrors.username?.[0] });
+    }
+
+    const {
+      data: api_data,
+      error: api_error,
+      response: api_response
+    } = await client.POST('/api/v1/users/me/profiles/', {
       headers: {
         Authorization: `Bearer ${cookies.get('auth_token')}`
       },
       // @ts-expect-error: only requires username for POST req
-      body: {
-        username: String(form_data.get('username'))
-      }
+      body: { ...parse_data }
     });
 
-    if (response.ok && data) {
-      return data;
-    } else if (error) {
-      return fail(response.status, error.errors[0]);
+    if (api_response.ok && api_data) {
+      return api_data;
+    } else if (api_error) {
+      return fail(api_response.status, api_error.errors[0]);
     }
   },
   select: async ({ request, cookies }) => {