From 0ae5a31dd6c39ae3cd0483e54c391377651873f8 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Wed, 19 Feb 2025 19:35:20 +0100
Subject: [PATCH] feat(app): improve settings (#108)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 app/_components/HelpSlideover.vue             | 138 -----------
 .../settings/DeleteAccountModal.vue           |  52 ----
 app/_components/settings/MembersForm.vue      |  71 ------
 app/_components/settings/MembersList.vue      |  76 ------
 app/_pages/settings.vue                       |  40 ----
 app/_pages/settings/index.vue                 | 223 ------------------
 app/_pages/settings/members.vue               |  60 -----
 app/components/settings/MembersList.vue       |  59 +++++
 app/layouts/default.vue                       |   3 +
 app/pages/settings.vue                        |  12 +-
 app/pages/settings/[slug].vue                 |   3 -
 app/pages/settings/index.vue                  | 158 +++++++++++++
 app/pages/settings/members.vue                |  45 ++++
 .../settings/notifications.vue                |  48 ++--
 app/pages/settings/security.vue               |  68 ++++++
 server/api/members.ts                         |  31 +--
 16 files changed, 377 insertions(+), 710 deletions(-)
 delete mode 100644 app/_components/HelpSlideover.vue
 delete mode 100644 app/_components/settings/DeleteAccountModal.vue
 delete mode 100644 app/_components/settings/MembersForm.vue
 delete mode 100644 app/_components/settings/MembersList.vue
 delete mode 100644 app/_pages/settings.vue
 delete mode 100644 app/_pages/settings/index.vue
 delete mode 100644 app/_pages/settings/members.vue
 create mode 100644 app/components/settings/MembersList.vue
 delete mode 100644 app/pages/settings/[slug].vue
 create mode 100644 app/pages/settings/index.vue
 create mode 100644 app/pages/settings/members.vue
 rename app/{_pages => pages}/settings/notifications.vue (57%)
 create mode 100644 app/pages/settings/security.vue

diff --git a/app/_components/HelpSlideover.vue b/app/_components/HelpSlideover.vue
deleted file mode 100644
index 5b9de30..0000000
--- a/app/_components/HelpSlideover.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import type { ButtonColor } from '#ui/types'
-
-const { isHelpSlideoverOpen } = useDashboard()
-const { metaSymbol } = useShortcuts()
-
-const shortcuts = ref(false)
-const query = ref('')
-
-const links = [{
-  label: 'Shortcuts',
-  icon: 'i-heroicons-key',
-  trailingIcon: 'i-heroicons-arrow-right-20-solid',
-  color: 'gray' as ButtonColor,
-  onClick: () => {
-    shortcuts.value = true
-  }
-}, {
-  label: 'Documentation',
-  icon: 'i-heroicons-book-open',
-  to: 'https://ui.nuxt.com/pro/getting-started',
-  target: '_blank',
-  color: 'white' as ButtonColor
-}, {
-  label: 'GitHub repository',
-  icon: 'i-simple-icons-github',
-  to: 'https://github.com/nuxt-ui-pro/dashboard',
-  target: '_blank',
-  color: 'white' as ButtonColor
-}, {
-  label: 'Buy Nuxt UI Pro',
-  icon: 'i-heroicons-credit-card',
-  to: 'https://ui.nuxt.com/pro/purchase',
-  target: '_blank',
-  color: 'white' as ButtonColor
-}]
-
-const categories = computed(() => [{
-  title: 'General',
-  items: [
-    { shortcuts: [metaSymbol.value, 'K'], name: 'Command menu' },
-    { shortcuts: ['N'], name: 'Notifications' },
-    { shortcuts: ['?'], name: 'Help & Support' },
-    { shortcuts: ['/'], name: 'Search' }
-  ]
-}, {
-  title: 'Navigation',
-  items: [
-    { shortcuts: ['G', 'H'], name: 'Go to Home' },
-    { shortcuts: ['G', 'I'], name: 'Go to Inbox' },
-    { shortcuts: ['G', 'U'], name: 'Go to Users' },
-    { shortcuts: ['G', 'S'], name: 'Go to Settings' }
-  ]
-}, {
-  title: 'Inbox',
-  items: [
-    { shortcuts: ['↑'], name: 'Prev notification' },
-    { shortcuts: ['↓'], name: 'Next notification' }
-  ]
-}])
-
-const filteredCategories = computed(() => {
-  return categories.value.map(category => ({
-    title: category.title,
-    items: category.items.filter((item) => {
-      return item.name.search(new RegExp(query.value, 'i')) !== -1
-    })
-  })).filter(category => !!category.items.length)
-})
-</script>
-
-<template>
-  <UDashboardSlideover v-model="isHelpSlideoverOpen">
-    <template #title>
-      <UButton
-        v-if="shortcuts"
-        color="gray"
-        variant="ghost"
-        size="sm"
-        icon="i-heroicons-arrow-left-20-solid"
-        @click="shortcuts = false"
-      />
-
-      {{ shortcuts ? 'Shortcuts' : 'Help & Support' }}
-    </template>
-
-    <div
-      v-if="shortcuts"
-      class="space-y-6"
-    >
-      <UInput
-        v-model="query"
-        icon="i-heroicons-magnifying-glass"
-        placeholder="Search..."
-        autofocus
-        color="gray"
-      />
-
-      <div
-        v-for="(category, index) in filteredCategories"
-        :key="index"
-      >
-        <p class="mb-3 text-sm text-gray-900 dark:text-white font-semibold">
-          {{ category.title }}
-        </p>
-
-        <div class="space-y-2">
-          <div
-            v-for="(item, i) in category.items"
-            :key="i"
-            class="flex items-center justify-between"
-          >
-            <span class="text-sm text-gray-500 dark:text-gray-400">{{ item.name }}</span>
-
-            <div class="flex items-center justify-end flex-shrink-0 gap-0.5">
-              <UKbd
-                v-for="(shortcut, j) in item.shortcuts"
-                :key="j"
-              >
-                {{ shortcut }}
-              </UKbd>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-else
-      class="flex flex-col gap-y-3"
-    >
-      <UButton
-        v-for="(link, index) in links"
-        :key="index"
-        v-bind="link"
-      />
-    </div>
-  </UDashboardSlideover>
-</template>
diff --git a/app/_components/settings/DeleteAccountModal.vue b/app/_components/settings/DeleteAccountModal.vue
deleted file mode 100644
index f02e459..0000000
--- a/app/_components/settings/DeleteAccountModal.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-const model = defineModel({
-  type: Boolean
-})
-
-const toast = useToast()
-
-const loading = ref(false)
-
-function onDelete() {
-  loading.value = true
-
-  setTimeout(() => {
-    loading.value = false
-    toast.add({ icon: 'i-heroicons-check-circle', title: 'Your account has been deleted', color: 'red' })
-    model.value = false
-  }, 2000)
-}
-</script>
-
-<template>
-  <UDashboardModal
-    v-model="model"
-    title="Delete account"
-    description="Are you sure you want to delete your account?"
-    icon="i-heroicons-exclamation-circle"
-    prevent-close
-    :close-button="null"
-    :ui="{
-      icon: {
-        base: 'text-red-500 dark:text-red-400'
-      } as any,
-      footer: {
-        base: 'ml-16'
-      } as any
-    }"
-  >
-    <template #footer>
-      <UButton
-        color="red"
-        label="Delete"
-        :loading="loading"
-        @click="onDelete"
-      />
-      <UButton
-        color="white"
-        label="Cancel"
-        @click="model = false"
-      />
-    </template>
-  </UDashboardModal>
-</template>
diff --git a/app/_components/settings/MembersForm.vue b/app/_components/settings/MembersForm.vue
deleted file mode 100644
index ceae767..0000000
--- a/app/_components/settings/MembersForm.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '#ui/types'
-
-const emit = defineEmits(['close'])
-
-const state = reactive({
-  role: 'member',
-  email: undefined
-})
-
-// https://ui.nuxt.com/components/form
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) errors.push({ path: 'email', message: 'Please enter an email.' })
-  return errors
-}
-
-async function onSubmit(event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-
-  emit('close')
-}
-</script>
-
-<template>
-  <UForm
-    :validate="validate"
-    :validate-on="['submit']"
-    :state="state"
-    class="space-y-4"
-    @submit="onSubmit"
-  >
-    <UFormGroup
-      label="Email"
-      name="email"
-    >
-      <UInput
-        v-model="state.email"
-        type="email"
-        placeholder="john.doe@example.com"
-        autofocus
-      />
-    </UFormGroup>
-
-    <UFormGroup
-      label="Role"
-      name="role"
-    >
-      <USelectMenu
-        v-model="state.role"
-        :options="['member', 'owner']"
-        :ui-menu="{ select: 'capitalize', option: { base: 'capitalize' } }"
-      />
-    </UFormGroup>
-
-    <div class="flex justify-end gap-3">
-      <UButton
-        label="Cancel"
-        color="gray"
-        variant="ghost"
-        @click="emit('close')"
-      />
-      <UButton
-        type="submit"
-        label="Save"
-        color="black"
-      />
-    </div>
-  </UForm>
-</template>
diff --git a/app/_components/settings/MembersList.vue b/app/_components/settings/MembersList.vue
deleted file mode 100644
index ae9f112..0000000
--- a/app/_components/settings/MembersList.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import type { Member } from '~/types'
-
-defineProps({
-  members: {
-    type: Array as PropType<Member[]>,
-    default: () => []
-  }
-})
-
-function getItems(member: Member) {
-  return [[{
-    label: 'Edit member',
-    click: () => console.log('Edit', member)
-  }, {
-    label: 'Remove member',
-    labelClass: 'text-red-500 dark:text-red-400',
-    click: () => console.log('Remove', member)
-  }]]
-}
-
-function onRoleChange(member: Member, role: string) {
-  // Do something with data
-  console.log(member.username, role)
-}
-</script>
-
-<template>
-  <ul
-    role="list"
-    class="divide-y divide-gray-200 dark:divide-gray-800"
-  >
-    <li
-      v-for="(member, index) in members"
-      :key="index"
-      class="flex items-center justify-between gap-3 py-3 px-4 sm:px-6"
-    >
-      <div class="flex items-center gap-3 min-w-0">
-        <UAvatar
-          v-bind="member.avatar"
-          size="md"
-        />
-
-        <div class="text-sm min-w-0">
-          <p class="text-gray-900 dark:text-white font-medium truncate">
-            {{ member.name }}
-          </p>
-          <p class="text-gray-500 dark:text-gray-400 truncate">
-            {{ member.username }}
-          </p>
-        </div>
-      </div>
-
-      <div class="flex items-center gap-3">
-        <USelectMenu
-          :model-value="member.role"
-          :options="['member', 'owner']"
-          color="white"
-          :ui-menu="{ select: 'capitalize', option: { base: 'capitalize' } }"
-          @update:model-value="onRoleChange(member, $event)"
-        />
-
-        <UDropdown
-          :items="getItems(member)"
-          position="bottom-end"
-        >
-          <UButton
-            icon="i-heroicons-ellipsis-vertical"
-            color="gray"
-            variant="ghost"
-          />
-        </UDropdown>
-      </div>
-    </li>
-  </ul>
-</template>
diff --git a/app/_pages/settings.vue b/app/_pages/settings.vue
deleted file mode 100644
index b48900b..0000000
--- a/app/_pages/settings.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-const links = [[{
-  label: 'General',
-  icon: 'i-heroicons-user-circle',
-  to: '/settings',
-  exact: true
-}, {
-  label: 'Members',
-  icon: 'i-heroicons-user-group',
-  to: '/settings/members'
-}, {
-  label: 'Notifications',
-  icon: 'i-heroicons-bell',
-  to: '/settings/notifications'
-}], [{
-  label: 'Documentation',
-  icon: 'i-heroicons-book-open',
-  to: 'https://ui.nuxt.com/pro',
-  target: '_blank'
-}, {
-  label: 'Buy now',
-  icon: 'i-heroicons-credit-card',
-  to: 'https://ui.nuxt.com/pro/purchase',
-  target: '_blank'
-}]]
-</script>
-
-<template>
-  <UDashboardPage>
-    <UDashboardPanel grow>
-      <UDashboardNavbar title="Settings" />
-
-      <UDashboardToolbar class="py-0 px-1.5 overflow-x-auto">
-        <UHorizontalNavigation :links="links" />
-      </UDashboardToolbar>
-
-      <NuxtPage />
-    </UDashboardPanel>
-  </UDashboardPage>
-</template>
diff --git a/app/_pages/settings/index.vue b/app/_pages/settings/index.vue
deleted file mode 100644
index 5104f49..0000000
--- a/app/_pages/settings/index.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<script setup lang="ts">
-import type { FormError, FormSubmitEvent } from '#ui/types'
-
-const fileRef = ref<HTMLInputElement>()
-const isDeleteAccountModalOpen = ref(false)
-
-const state = reactive({
-  name: 'Benjamin Canac',
-  email: 'ben@nuxtlabs.com',
-  username: 'benjamincanac',
-  avatar: '',
-  bio: '',
-  password_current: '',
-  password_new: ''
-})
-
-const toast = useToast()
-
-function validate(state: any): FormError[] {
-  const errors = []
-  if (!state.name) errors.push({ path: 'name', message: 'Please enter your name.' })
-  if (!state.email) errors.push({ path: 'email', message: 'Please enter your email.' })
-  if ((state.password_current && !state.password_new) || (!state.password_current && state.password_new)) errors.push({ path: 'password', message: 'Please enter a valid password.' })
-  return errors
-}
-
-function onFileChange(e: Event) {
-  const input = e.target as HTMLInputElement
-
-  if (!input.files?.length) {
-    return
-  }
-
-  state.avatar = URL.createObjectURL(input.files[0])
-}
-
-function onFileClick() {
-  fileRef.value?.click()
-}
-
-async function onSubmit(event: FormSubmitEvent<any>) {
-  // Do something with data
-  console.log(event.data)
-
-  toast.add({ title: 'Profile updated', icon: 'i-heroicons-check-circle' })
-}
-</script>
-
-<template>
-  <UDashboardPanelContent class="pb-24">
-    <UDashboardSection
-      title="Theme"
-      description="Customize the look and feel of your dashboard."
-    >
-      <template #links>
-        <UColorModeSelect color="gray" />
-      </template>
-    </UDashboardSection>
-
-    <UDivider class="mb-4" />
-
-    <UForm
-      :state="state"
-      :validate="validate"
-      :validate-on="['submit']"
-      @submit="onSubmit"
-    >
-      <UDashboardSection
-        title="Profile"
-        description="This information will be displayed publicly so be careful what you share."
-      >
-        <template #links>
-          <UButton
-            type="submit"
-            label="Save changes"
-            color="black"
-          />
-        </template>
-
-        <UFormGroup
-          name="name"
-          label="Name"
-          description="Will appear on receipts, invoices, and other communication."
-          required
-          class="grid grid-cols-2 gap-2 items-center"
-          :ui="{ container: '' }"
-        >
-          <UInput
-            v-model="state.name"
-            autocomplete="off"
-            icon="i-heroicons-user"
-            size="md"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          name="email"
-          label="Email"
-          description="Used to sign in, for email receipts and product updates."
-          required
-          class="grid grid-cols-2 gap-2"
-          :ui="{ container: '' }"
-        >
-          <UInput
-            v-model="state.email"
-            type="email"
-            autocomplete="off"
-            icon="i-heroicons-envelope"
-            size="md"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          name="username"
-          label="Username"
-          description="Your unique username for logging in and your profile URL."
-          required
-          class="grid grid-cols-2 gap-2"
-          :ui="{ container: '' }"
-        >
-          <UInput
-            v-model="state.username"
-            type="username"
-            autocomplete="off"
-            size="md"
-            input-class="ps-[77px]"
-          >
-            <template #leading>
-              <span class="text-gray-500 dark:text-gray-400 text-sm">nuxt.com/</span>
-            </template>
-          </UInput>
-        </UFormGroup>
-
-        <UFormGroup
-          name="avatar"
-          label="Avatar"
-          class="grid grid-cols-2 gap-2"
-          help="JPG, GIF or PNG. 1MB Max."
-          :ui="{ container: 'flex flex-wrap items-center gap-3', help: 'mt-0' }"
-        >
-          <UAvatar
-            :src="state.avatar"
-            :alt="state.name"
-            size="lg"
-          />
-
-          <UButton
-            label="Choose"
-            color="white"
-            size="md"
-            @click="onFileClick"
-          />
-
-          <input
-            ref="fileRef"
-            type="file"
-            class="hidden"
-            accept=".jpg, .jpeg, .png, .gif"
-            @change="onFileChange"
-          >
-        </UFormGroup>
-
-        <UFormGroup
-          name="bio"
-          label="Bio"
-          description="Brief description for your profile. URLs are hyperlinked."
-          class="grid grid-cols-2 gap-2"
-          :ui="{ container: '' }"
-        >
-          <UTextarea
-            v-model="state.bio"
-            :rows="5"
-            autoresize
-            size="md"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-          name="password"
-          label="Password"
-          description="Confirm your current password before setting a new one."
-          class="grid grid-cols-2 gap-2"
-          :ui="{ container: '' }"
-        >
-          <UInput
-            id="password"
-            v-model="state.password_current"
-            type="password"
-            placeholder="Current password"
-            size="md"
-          />
-          <UInput
-            id="password_new"
-            v-model="state.password_new"
-            type="password"
-            placeholder="New password"
-            size="md"
-            class="mt-2"
-          />
-        </UFormGroup>
-      </UDashboardSection>
-    </UForm>
-
-    <UDivider class="mb-4" />
-
-    <UDashboardSection
-      title="Account"
-      description="No longer want to use our service? You can delete your account here. This action is not reversible. All information related to this account will be deleted permanently."
-    >
-      <div>
-        <UButton
-          color="red"
-          label="Delete account"
-          size="md"
-          @click="isDeleteAccountModalOpen = true"
-        />
-      </div>
-    </UDashboardSection>
-
-    <!-- ~/components/settings/DeleteAccountModal.vue -->
-    <SettingsDeleteAccountModal v-model="isDeleteAccountModalOpen" />
-  </UDashboardPanelContent>
-</template>
diff --git a/app/_pages/settings/members.vue b/app/_pages/settings/members.vue
deleted file mode 100644
index 6f03c38..0000000
--- a/app/_pages/settings/members.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import type { Member } from '~/types'
-
-const { data: members } = await useFetch<Member[]>('/api/members', { default: () => [] })
-
-const q = ref('')
-const isInviteModalOpen = ref(false)
-
-const filteredMembers = computed(() => {
-  return members.value.filter((member) => {
-    return member.name.search(new RegExp(q.value, 'i')) !== -1 || member.username.search(new RegExp(q.value, 'i')) !== -1
-  })
-})
-</script>
-
-<template>
-  <UDashboardPanelContent class="pb-24">
-    <UDashboardSection
-      title="Manage access"
-      description="Invite new members by email address."
-      orientation="horizontal"
-      :ui="{ container: 'lg:sticky top-2' }"
-    >
-      <template #links>
-        <UButton
-          label="Invite people"
-          color="black"
-          @click="isInviteModalOpen = true"
-        />
-      </template>
-
-      <UCard
-        :ui="{ header: { padding: 'p-4 sm:px-6' }, body: { padding: '' } }"
-        class="min-w-0"
-      >
-        <template #header>
-          <UInput
-            v-model="q"
-            icon="i-heroicons-magnifying-glass"
-            placeholder="Search members"
-            autofocus
-          />
-        </template>
-
-        <!-- ~/components/settings/MembersList.vue -->
-        <SettingsMembersList :members="filteredMembers" />
-      </UCard>
-    </UDashboardSection>
-
-    <UDashboardModal
-      v-model="isInviteModalOpen"
-      title="Invite people"
-      description="Invite new members by email address"
-      :ui="{ width: 'sm:max-w-md' }"
-    >
-      <!-- ~/components/settings/MembersForm.vue -->
-      <SettingsMembersForm @close="isInviteModalOpen = false" />
-    </UDashboardModal>
-  </UDashboardPanelContent>
-</template>
diff --git a/app/components/settings/MembersList.vue b/app/components/settings/MembersList.vue
new file mode 100644
index 0000000..be9871a
--- /dev/null
+++ b/app/components/settings/MembersList.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Member } from '~/types'
+
+defineProps<{
+  members: Member[]
+}>()
+
+const items = [{
+  label: 'Edit member',
+  onSelect: () => console.log('Edit member')
+}, {
+  label: 'Remove member',
+  color: 'error' as const,
+  onSelect: () => console.log('Remove member')
+}]
+</script>
+
+<template>
+  <ul role="list" class="divide-y divide-(--ui-border)">
+    <li
+      v-for="(member, index) in members"
+      :key="index"
+      class="flex items-center justify-between gap-3 py-3 px-4 sm:px-6"
+    >
+      <div class="flex items-center gap-3 min-w-0">
+        <UAvatar
+          v-bind="member.avatar"
+          size="md"
+        />
+
+        <div class="text-sm min-w-0">
+          <p class="text-(--ui-text-highlighted) font-medium truncate">
+            {{ member.name }}
+          </p>
+          <p class="text-(--ui-text-muted) truncate">
+            {{ member.username }}
+          </p>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <USelect
+          :model-value="member.role"
+          :items="['member', 'owner']"
+          color="neutral"
+          :ui="{ value: 'capitalize', item: 'capitalize' }"
+        />
+
+        <UDropdownMenu :items="items" :content="{ align: 'end' }">
+          <UButton
+            icon="i-lucide-ellipsis-vertical"
+            color="neutral"
+            variant="ghost"
+          />
+        </UDropdownMenu>
+      </div>
+    </li>
+  </ul>
+</template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 65752d1..0d02ec9 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -30,6 +30,9 @@ const links = [[{
   }, {
     label: 'Notifications',
     to: '/settings/notifications'
+  }, {
+    label: 'Security',
+    to: '/settings/security'
   }]
 }], [{
   label: 'Feedback',
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 44b0cce..4dd361b 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -12,6 +12,10 @@ const links = [[{
   label: 'Notifications',
   icon: 'i-lucide-bell',
   to: '/settings/notifications'
+}, {
+  label: 'Security',
+  icon: 'i-lucide-shield',
+  to: '/settings/security'
 }], [{
   label: 'Documentation',
   icon: 'i-lucide-book-open',
@@ -26,7 +30,7 @@ const links = [[{
 </script>
 
 <template>
-  <UDashboardPanel id="settings">
+  <UDashboardPanel id="settings" :ui="{ body: 'lg:py-12' }">
     <template #header>
       <UDashboardNavbar title="Settings">
         <template #leading>
@@ -35,13 +39,15 @@ const links = [[{
       </UDashboardNavbar>
 
       <UDashboardToolbar>
-        <!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollpase` button here. -->
+        <!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
         <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
       </UDashboardToolbar>
     </template>
 
     <template #body>
-      <NuxtPage />
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+        <NuxtPage />
+      </div>
     </template>
   </UDashboardPanel>
 </template>
diff --git a/app/pages/settings/[slug].vue b/app/pages/settings/[slug].vue
deleted file mode 100644
index 04d85e1..0000000
--- a/app/pages/settings/[slug].vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div />
-</template>
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
new file mode 100644
index 0000000..8e3c0df
--- /dev/null
+++ b/app/pages/settings/index.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const fileRef = ref<HTMLInputElement>()
+
+const profileSchema = z.object({
+  name: z.string().min(2, 'Too short'),
+  email: z.string().email('Invalid email'),
+  username: z.string().min(2, 'Too short'),
+  avatar: z.string().optional(),
+  bio: z.string().optional()
+})
+
+type ProfileSchema = z.output<typeof profileSchema>
+
+const profile = reactive<Partial<ProfileSchema>>({
+  name: 'Benjamin Canac',
+  email: 'ben@nuxtlabs.com',
+  username: 'benjamincanac',
+  avatar: undefined,
+  bio: undefined
+})
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<ProfileSchema>) {
+  toast.add({
+    title: 'Success',
+    description: 'Your settings have been updated.',
+    icon: 'i-lucide-check',
+    color: 'success'
+  })
+  console.log(event.data)
+}
+
+function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  if (!input.files?.length) {
+    return
+  }
+
+  profile.avatar = URL.createObjectURL(input.files[0])
+}
+
+function onFileClick() {
+  fileRef.value?.click()
+}
+</script>
+
+<template>
+  <UForm
+    id="settings"
+    :schema="profileSchema"
+    :state="profile"
+    @submit="onSubmit"
+  >
+    <UPageCard
+      title="Profile"
+      description="These informations will be displayed publicly."
+      variant="naked"
+      orientation="horizontal"
+      class="mb-4"
+    >
+      <UButton
+        form="settings"
+        label="Save changes"
+        color="neutral"
+        type="submit"
+        class="w-fit lg:ms-auto"
+      />
+    </UPageCard>
+
+    <UPageCard variant="subtle">
+      <UFormField
+        name="name"
+        label="Name"
+        description="Will appear on receipts, invoices, and other communication."
+        required
+        class="flex max-sm:flex-col justify-between items-start gap-4"
+      >
+        <UInput
+          v-model="profile.name"
+          autocomplete="off"
+        />
+      </UFormField>
+      <USeparator />
+      <UFormField
+        name="email"
+        label="Email"
+        description="Used to sign in, for email receipts and product updates."
+        required
+        class="flex max-sm:flex-col justify-between items-start gap-4"
+      >
+        <UInput
+          v-model="profile.email"
+          type="email"
+          autocomplete="off"
+        />
+      </UFormField>
+      <USeparator />
+      <UFormField
+        name="username"
+        label="Username"
+        description="Your unique username for logging in and your profile URL."
+        required
+        class="flex max-sm:flex-col justify-between items-start gap-4"
+      >
+        <UInput
+          v-model="profile.username"
+          type="username"
+          autocomplete="off"
+        />
+      </UFormField>
+      <USeparator />
+      <UFormField
+        name="avatar"
+        label="Avatar"
+        description="JPG, GIF or PNG. 1MB Max."
+        class="flex max-sm:flex-col justify-between sm:items-center gap-4"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <UAvatar
+            :src="profile.avatar"
+            :alt="profile.name"
+            size="lg"
+          />
+          <UButton
+            label="Choose"
+            color="neutral"
+            @click="onFileClick"
+          />
+          <input
+            ref="fileRef"
+            type="file"
+            class="hidden"
+            accept=".jpg, .jpeg, .png, .gif"
+            @change="onFileChange"
+          >
+        </div>
+      </UFormField>
+      <USeparator />
+      <UFormField
+        name="bio"
+        label="Bio"
+        description="Brief description for your profile. URLs are hyperlinked."
+        class="flex max-sm:flex-col justify-between items-start gap-4"
+        :ui="{ container: 'w-full' }"
+      >
+        <UTextarea
+          v-model="profile.bio"
+          :rows="5"
+          autoresize
+          class="w-full"
+        />
+      </UFormField>
+    </UPageCard>
+  </UForm>
+</template>
diff --git a/app/pages/settings/members.vue b/app/pages/settings/members.vue
new file mode 100644
index 0000000..5f57d83
--- /dev/null
+++ b/app/pages/settings/members.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { Member } from '~/types'
+
+const { data: members } = await useFetch<Member[]>('/api/members', { default: () => [] })
+
+const q = ref('')
+
+const filteredMembers = computed(() => {
+  return members.value.filter((member) => {
+    return member.name.search(new RegExp(q.value, 'i')) !== -1 || member.username.search(new RegExp(q.value, 'i')) !== -1
+  })
+})
+</script>
+
+<template>
+  <div>
+    <UPageCard
+      title="Members"
+      description="Invite new members by email address."
+      variant="naked"
+      orientation="horizontal"
+      class="mb-4"
+    >
+      <UButton
+        label="Invite people"
+        color="neutral"
+        class="w-fit lg:ms-auto"
+      />
+    </UPageCard>
+
+    <UPageCard variant="subtle" :ui="{ container: 'p-0 sm:p-0 gap-y-0', header: 'p-4 mb-0 border-b border-(--ui-border)' }">
+      <template #header>
+        <UInput
+          v-model="q"
+          icon="i-lucide-search"
+          placeholder="Search members"
+          autofocus
+          class="w-full"
+        />
+      </template>
+
+      <SettingsMembersList :members="filteredMembers" />
+    </UPageCard>
+  </div>
+</template>
diff --git a/app/_pages/settings/notifications.vue b/app/pages/settings/notifications.vue
similarity index 57%
rename from app/_pages/settings/notifications.vue
rename to app/pages/settings/notifications.vue
index fa23a29..86d3c75 100644
--- a/app/_pages/settings/notifications.vue
+++ b/app/pages/settings/notifications.vue
@@ -44,32 +44,28 @@ async function onChange() {
 </script>
 
 <template>
-  <UDashboardPanelContent class="p-0 pb-24 divide-y divide-gray-200 dark:divide-gray-800">
-    <UDashboardSection
-      v-for="(section, index) in sections"
-      :key="index"
+  <div v-for="(section, index) in sections" :key="index">
+    <UPageCard
       :title="section.title"
       :description="section.description"
-      orientation="horizontal"
-      class="px-4 py-6"
-    >
-      <UCard :ui="{ body: { base: 'divide-y divide-gray-200 dark:divide-gray-800 gap-4 flex flex-col' } }">
-        <UFormGroup
-          v-for="field in section.fields"
-          :key="field.name"
-          :name="field.name"
-          :label="field.label"
-          :description="field.description"
-          class="flex items-center justify-between pt-4 first:pt-0 gap-2"
-          :ui="{ container: 'flex' }"
-        >
-          <UToggle
-            v-model="state[field.name]"
-            size="md"
-            @update:model-value="onChange"
-          />
-        </UFormGroup>
-      </UCard>
-    </UDashboardSection>
-  </udashboardpanelcontent>
+      variant="naked"
+      class="mb-4"
+    />
+
+    <UPageCard variant="subtle" :ui="{ container: 'divide-y divide-(--ui-border)' }">
+      <UFormField
+        v-for="field in section.fields"
+        :key="field.name"
+        :name="field.name"
+        :label="field.label"
+        :description="field.description"
+        class="flex items-center justify-between not-last:pb-4 gap-2"
+      >
+        <USwitch
+          v-model="state[field.name]"
+          @update:model-value="onChange"
+        />
+      </UFormField>
+    </UPageCard>
+  </div>
 </template>
diff --git a/app/pages/settings/security.vue b/app/pages/settings/security.vue
new file mode 100644
index 0000000..3a8ab68
--- /dev/null
+++ b/app/pages/settings/security.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormError } from '#ui/types'
+
+const passwordSchema = z.object({
+  current: z.string().min(8, 'Must be at least 8 characters'),
+  new: z.string().min(8, 'Must be at least 8 characters')
+})
+
+type PasswordSchema = z.output<typeof passwordSchema>
+
+const password = reactive<Partial<PasswordSchema>>({
+  current: undefined,
+  new: undefined
+})
+
+const validate = (state: PasswordSchema): FormError[] => {
+  const errors = []
+  if (state.current === state.new)
+    errors.push({ name: 'new', message: 'Passwords must be different' })
+  return errors
+}
+</script>
+
+<template>
+  <UPageCard
+    title="Password"
+    description="Confirm your current password before setting a new one."
+    variant="subtle"
+  >
+    <UForm
+      :schema="passwordSchema"
+      :state="password"
+      :validate="validate"
+      class="flex flex-col gap-4 max-w-xs"
+    >
+      <UFormField name="current">
+        <UInput
+          v-model="password.current"
+          type="password"
+          placeholder="Current password"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField name="new">
+        <UInput
+          v-model="password.new"
+          type="password"
+          placeholder="New password"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UButton label="Update" class="w-fit" type="submit" />
+    </UForm>
+  </UPageCard>
+
+  <UPageCard
+    title="Account"
+    description="No longer want to use our service? You can delete your account here. This action is not reversible. All information related to this account will be deleted permanently."
+    class="bg-gradient-to-tl from-(--ui-error)/10 from-5% to-(--ui-bg)"
+  >
+    <template #footer>
+      <UButton label="Delete account" color="error" />
+    </template>
+  </UPageCard>
+</template>
diff --git a/server/api/members.ts b/server/api/members.ts
index e614ed5..8d4a00f 100644
--- a/server/api/members.ts
+++ b/server/api/members.ts
@@ -4,14 +4,14 @@ const members = [{
   role: 'member',
   avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/antfu' }
 }, {
-  name: 'Sébastien Chopin',
-  username: 'Atinux',
-  role: 'owner',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
+  name: 'Baptiste Leproux',
+  username: 'larbish',
+  role: 'member',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/larbish' }
 }, {
   name: 'Benjamin Canac',
   username: 'benjamincanac',
-  role: 'member',
+  role: 'owner',
   avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/benjamincanac' }
 }, {
   name: 'Céline Dumerc',
@@ -34,15 +34,10 @@ const members = [{
   role: 'member',
   avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/FerdinandCoumau' }
 }, {
-  name: 'Florent Delerue',
-  username: 'Flosciante',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/Flosciante' }
-}, {
-  name: 'Baptiste Leproux',
-  username: 'larbish',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/larbish' }
+  name: 'Hugo Richard',
+  username: 'hugorcd',
+  role: 'owner',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/hugorcd' }
 }, {
   name: 'Pooya Parsa',
   username: 'pi0',
@@ -54,10 +49,10 @@ const members = [{
   role: 'member',
   avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/SarahM19' }
 }, {
-  name: 'Sylvain Marroufin',
-  username: 'smarroufin',
-  role: 'member',
-  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/smarroufin' }
+  name: 'Sébastien Chopin',
+  username: 'Atinux',
+  role: 'owner',
+  avatar: { src: 'https://ipx.nuxt.com/f_auto,s_192x192/gh_avatar/atinux' }
 }]
 
 export default eventHandler(async () => {