Working

app/components/App/UserSettingsForm.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { UpdateUserSchemaType } from '~~/types/types'
+import { UpdateUserSchema, locales } from '~~/types/types'
+import type { FormSubmitEvent } from '#ui/types'
+import type { UserSession } from '#auth-utils'
+
+const props = defineProps<{
+  user: UserSession
+}>()
+
+const state = reactive({
+  name: undefined,
+  username: undefined,
+  email: undefined,
+  private: undefined,
+  description: undefined,
+  language: locales[0],
+  location: undefined,
+})
+
+watchEffect(() => {
+  state.name = props.user.name
+  state.username = props.user.username
+  state.private = props.user.private
+  state.description = props.user.description
+  state.language = locales.find(locale => locale.locale === props.user.language).locale
+  state.location = props.user.location
+  state.email = props.user.email
+})
+
+async function handleUpdate(event: FormSubmitEvent<UpdateUserSchemaType>) {
+  try {
+    await useRequestFetch()(`/api/users/me`, {
+      method: 'PUT',
+      body: JSON.stringify({
+        username: event.data.username,
+        name: event.data.name,
+        description: event.data.description,
+        location: event.data.location,
+        language: event.data.language,
+        private: event.data.private,
+      }),
+    })
+    useSuccessToast('Profile successfully updated!')
+  }
+  catch (error) {
+    useErrorToast('Profile update failed!', error as string)
+  }
+}
+
+const { deleteAvatar, uploadAvatar } = await useUser()
+</script>
+
+<template>
+  <UForm :schema="UpdateUserSchema" :state="state" class="space-y-4 p-1" @submit="handleUpdate">
+    <UFormGroup label="Username" name="username">
+      <UInput v-model="state.username" type="text" />
+    </UFormGroup>
+
+    <UFormGroup label="Name" name="name">
+      <UInput v-model="state.name" type="text" />
+    </UFormGroup>
+
+    <UFormGroup label="Avatar" name="avatar">
+      <UInput type="file" size="sm" accept="image/*" hidden @change="uploadAvatar" />
+    </UFormGroup>
+
+    <UButton
+      v-if="user?.avatar"
+      variant="outline"
+      color="red"
+      label="Delete avatar"
+      size="xs"
+      @click.prevent="deleteAvatar"
+    />
+
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" type="text" disabled />
+    </UFormGroup>
+
+    <UFormGroup label="Description" name="description">
+      <UTextarea v-model="state.description" autoresize :rows="2" />
+    </UFormGroup>
+
+    <UFormGroup label="Language" name="language">
+      <USelect v-model="state.language" :options="locales" option-attribute="label" value-attribute="locale" />
+    </UFormGroup>
+
+    <UFormGroup label="Location" name="location">
+      <UInput v-model="state.location" type="text" />
+    </UFormGroup>
+
+    <UFormGroup label="Page private" name="private" :description="state.private ? 'Your page is private' : 'Your page is public'">
+      <UToggle
+        v-model="state.private"
+        on-icon="i-ph:lock-key-duotone"
+        off-icon="i-ph:users-four-duotone"
+        :model-value="state.private"
+        size="lg"
+        color="red"
+      />
+    </UFormGroup>
+
+    <UButton
+      type="submit"
+      block
+      color="gray"
+      label="Update Profile"
+    />
+  </UForm>
+</template>
+
+<style scoped>
+
+</style>