fix: improve validation and submitting on profile page (#1838)

Author: alexdln

app/pages/profile/[identity]/index.vue

@@ -112,7 +112,7 @@ defineOgImageComponent('Default', {
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <!-- Editing Profile -->
-      <div v-if="isEditing" class="flex flex-col flex-wrap gap-4">
+      <form v-if="isEditing" class="flex flex-col flex-wrap gap-4" @submit.prevent="updateProfile">
         <label for="displayName" class="text-sm flex flex-col gap-2">
           {{ $t('profile.display_name') }}
           <input
@@ -145,18 +145,14 @@ defineOgImageComponent('Default', {
         </label>
         <div class="flex gap-4 items-center font-mono text-sm">
           <h2>@{{ profile?.handle }}</h2>
-          <ButtonBase @click="isEditing = false">
+          <ButtonBase @click="isEditing = false" type="button">
             {{ $t('common.cancel') }}
           </ButtonBase>
-          <ButtonBase
-            @click="updateProfile"
-            variant="primary"
-            :disabled="isUpdateProfileActionPending"
-          >
+          <ButtonBase variant="primary" :disabled="isUpdateProfileActionPending" type="submit">
             {{ $t('common.save') }}
           </ButtonBase>
         </div>
-      </div>
+      </form>
 
       <!-- Display Profile -->
       <div v-else class="flex flex-col flex-wrap gap-4">

server/api/social/profile/[identifier]/index.put.ts

@@ -13,7 +13,12 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
 
   await throwOnMissingOAuthScope(oAuthSession, PROFILE_SCOPE)
 
-  const body = parse(ProfileEditBodySchema, await readBody(event))
+  const requestBody = await readBody(event)
+  if (requestBody.website && !URL.canParse(requestBody.website)) {
+    throw createError({ statusCode: 400, statusMessage: 'Invalid website' })
+  }
+
+  const body = parse(ProfileEditBodySchema, requestBody)
   const client = new Client(oAuthSession)
 
   const profile = dev.npmx.actor.profile.$build({