From 983099069b081dbb3a2e764447fec384bb69e2b1 Mon Sep 17 00:00:00 2001
From: Pier Dolique <perdgit.uieog@slmail.me>
Date: Sat, 23 Nov 2024 23:40:36 +0200
Subject: [PATCH] Account page

Fixes #96
---
 app/components/IconTitle.vue       |  44 +++++++++
 app/components/PageHeader.vue      |   7 ++
 app/components/PerdCard.vue        |  14 +++
 app/pages/account.vue              | 148 +++++++++++++++++++++++++++++
 app/pages/index.vue                |  17 +---
 server/api/account/index.delete.ts |  15 +++
 server/database/schema.ts          |   2 +-
 7 files changed, 233 insertions(+), 14 deletions(-)
 create mode 100644 app/components/IconTitle.vue
 create mode 100644 app/components/PerdCard.vue
 create mode 100644 app/pages/account.vue
 create mode 100644 server/api/account/index.delete.ts

diff --git a/app/components/IconTitle.vue b/app/components/IconTitle.vue
new file mode 100644
index 0000000..ab2ff7e
--- /dev/null
+++ b/app/components/IconTitle.vue
@@ -0,0 +1,44 @@
+<template>
+  <div :class="$style.component">
+    <div :class="$style.iconWrapper">
+      <Icon
+        :name="icon"
+        size="20px"
+      />
+    </div>
+
+    <PerdHeading :level="level">
+      <slot />
+    </PerdHeading>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import PerdHeading from '~/components/PerdHeading.vue'
+
+  interface Props {
+    readonly icon: string;
+    readonly level: InstanceType<typeof PerdHeading>['level'];
+  }
+
+  defineProps<Props>()
+</script>
+
+<style module>
+  .component {
+    display: flex;
+    align-items: center;
+    column-gap: var(--spacing-12);
+  }
+
+  .iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius-12);
+    background: var(--secondary-100);
+    color: var(--secondary-500);
+  }
+</style>
diff --git a/app/components/PageHeader.vue b/app/components/PageHeader.vue
index 97ac976..7ce8abf 100644
--- a/app/components/PageHeader.vue
+++ b/app/components/PageHeader.vue
@@ -26,6 +26,13 @@
         </button>
       </template>
 
+      <OptionButton
+        icon="tabler:user-circle"
+        @click="navigateTo('/account')"
+      >
+        Account
+      </OptionButton>
+
       <OptionButton
         icon="tabler:logout"
         @click="removeAuthSession"
diff --git a/app/components/PerdCard.vue b/app/components/PerdCard.vue
new file mode 100644
index 0000000..48be3b6
--- /dev/null
+++ b/app/components/PerdCard.vue
@@ -0,0 +1,14 @@
+<template>
+  <div :class="$style.component">
+    <slot />
+  </div>
+</template>
+
+<style module>
+  .component {
+    background-color: var(--background-50);
+    border-radius: var(--border-radius-16);
+    padding: var(--spacing-24);
+    border: 1px solid var(--background-100);
+  }
+</style>
diff --git a/app/pages/account.vue b/app/pages/account.vue
new file mode 100644
index 0000000..1fd0268
--- /dev/null
+++ b/app/pages/account.vue
@@ -0,0 +1,148 @@
+<template>
+  <PageContent page-title="Account">
+    <div :class="$style.content">
+      <PerdCard :class="$style.card">
+        <IconTitle
+          icon="tabler:user"
+          :level="2"
+        >
+          Profile Information
+        </IconTitle>
+
+        <div :class="$style.infoBlock">
+          <div :class="$style.infoItem">
+            <span :class="$style.label">
+              User ID
+            </span>
+
+            <span :class="$style.value">
+              {{ user.userId }}
+            </span>
+          </div>
+
+          <div :class="$style.infoItem">
+            <span :class="$style.label">
+              Role
+            </span>
+
+            <span :class="$style.value">
+              {{ role }}
+            </span>
+          </div>
+        </div>
+      </PerdCard>
+
+      <PerdCard :class="$style.card">
+        <IconTitle
+          icon="tabler:alert-triangle"
+          :level="2"
+        >
+          Danger Zone
+        </IconTitle>
+
+        <PerdButton
+          secondary
+          icon="tabler:trash"
+          @click="onDeleteClick"
+        >
+          Delete Account
+        </PerdButton>
+      </PerdCard>
+    </div>
+
+    <ConfirmationDialog
+      v-model="showDeleteModal"
+      header-text="Delete account"
+      confirm-button-text="Delete account"
+      @confirm="handleDeleteAccount"
+    >
+      Are you sure you want to delete your account? This action cannot be undone.
+    </ConfirmationDialog>
+  </PageContent>
+</template>
+
+<script lang="ts" setup>
+  import ConfirmationDialog from '~/components/dialogs/ConfirmationDialog.vue'
+  import IconTitle from '~/components/IconTitle.vue'
+  import PageContent from '~/components/layout/PageContent.vue'
+  import PerdButton from '~/components/PerdButton.vue'
+  import PerdCard from '~/components/PerdCard.vue'
+
+  definePageMeta({
+    layout: 'page'
+  })
+
+  const { user, resetAuthentication } = useUserStore()
+  const { showErrorToast } = useApiErrorToast()
+  const { addToast } = useToaster()
+  const showDeleteModal = ref(false)
+  const isDeleting = ref(false)
+  const role = computed(() => user.value.isAdmin ? 'Admin' : 'User')
+
+  function onDeleteClick() {
+    showDeleteModal.value = true
+  }
+
+  async function handleDeleteAccount() {
+    if (isDeleting.value) {
+      return
+    }
+
+    try {
+      isDeleting.value = true
+
+      await $fetch('/api/account', {
+        method: 'DELETE'
+      })
+
+      addToast({
+        title: 'Account deleted',
+        message: 'Bye! 👋'
+      })
+
+      resetAuthentication()
+
+      await navigateTo({
+        path: '/login'
+      })
+    } catch (error) {
+      showErrorToast(error, 'Failed to delete account')
+    } finally {
+      isDeleting.value = false
+    }
+  }
+</script>
+
+<style module>
+  .content {
+    display: grid;
+    row-gap: var(--spacing-24);
+  }
+
+  .card {
+    display: grid;
+    row-gap: var(--spacing-24);
+    justify-content: start;
+  }
+
+  .infoBlock {
+    display: grid;
+    row-gap: var(--spacing-16);
+  }
+
+  .infoItem {
+    display: grid;
+    row-gap: var(--spacing-8);
+    justify-content: start;
+  }
+
+  .label {
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .value {
+    font-size: var(--font-size-14);
+    color: var(--text-color-secondary);
+  }
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 72eb43d..2feba6b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div :class="$style.component">
-    <div>
-      Hello, {{ user.userId }}
-    </div>
-
-    <div>
-      Your admin status is: {{ user.isAdmin }}
-    </div>
+    🐕💨
   </div>
 </template>
 
@@ -14,15 +8,12 @@
   definePageMeta({
     layout: 'page'
   })
-
-  const { user } = useUserStore()
 </script>
 
 <style module>
   .component {
-    display: grid;
-    justify-content: center;
-    gap: var(--spacing-16);
-    padding-top: var(--spacing-32);
+    text-align: center;
+    font-size: 64px;
+    padding-top: 32px;
   }
 </style>
diff --git a/server/api/account/index.delete.ts b/server/api/account/index.delete.ts
new file mode 100644
index 0000000..12646a5
--- /dev/null
+++ b/server/api/account/index.delete.ts
@@ -0,0 +1,15 @@
+import { and, eq } from 'drizzle-orm'
+
+export default defineEventHandler(async (event) => {
+  const userId = await validateSessionUser(event)
+
+  await event.context.db
+    .delete(tables.users)
+    .where(
+      and(
+        eq(tables.users.id, userId)
+      )
+    )
+
+  setResponseStatus(event, 204)
+})
diff --git a/server/database/schema.ts b/server/database/schema.ts
index 0760318..05d0e10 100644
--- a/server/database/schema.ts
+++ b/server/database/schema.ts
@@ -281,7 +281,7 @@ export const equipment = pgTable('equipment', {
   check(
     'equipment_description_check',
     sql.raw(`char_length(description) <= ${limits.maxEquipmentDescriptionLength}`)
-  ),
+  )
 ])
 
 /**