Merge pull request #239 from Perdolique/96-account-page

Account Page
Perdolique · Nov 24, 2024 · 95e2fc0 · 95e2fc0
2 parents 2fc1c8e + af85bd0
commit 95e2fc0
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 117 deletions.
diff --git a/app/components/IconTitle.vue 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
@@ -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
@@ -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
@@ -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
@@ -1,28 +1,19 @@
 <template>
   <div :class="$style.component">
-    <div>
-      Hello, {{ user.userId }}
-    </div>
-
-    <div>
-      Your admin status is: {{ user.isAdmin }}
-    </div>
+    🐕💨
   </div>
 </template>
 
 <script lang="ts" setup>
   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>