Init

nuxt/pages/account/devices.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+const dayjs = useDayjs();
+const auth = useAuthStore();
+const loading = ref(false);
+const devices = ref([]);
+
+async function fetchData() {
+  loading.value = true;
+
+  const response = await $fetch<any>("devices");
+
+  if (response.ok) {
+    devices.value = response.devices;
+  }
+
+  loading.value = false;
+};
+
+const columns = [
+  {
+    key: "name",
+    label: "Device",
+  },
+  {
+    key: "last_used_at",
+    label: "Last used at",
+    class: "max-w-[9rem] w-[9rem] min-w-[9rem]",
+  },
+  {
+    key: "actions",
+  },
+];
+
+const items = (row: any) => [
+  [
+    {
+      label: "Delete",
+      icon: "i-heroicons-trash-20-solid",
+      click: async () => {
+        await $fetch<any>("devices/disconnect", {
+          method: "POST",
+          body: {
+            hash: row.hash,
+          },
+          async onResponse({ response }) {
+            if (response._data?.ok) {
+              await fetchData();
+              await auth.fetchUser();
+            }
+          }
+        });
+      },
+    },
+  ],
+];
+
+if (process.client) {
+  fetchData();
+}
+</script>
+<template>
+  <UCard :ui="{ body: { padding: 'p-0' } }">
+    <ClientOnly>
+      <UTable :rows="devices" :columns="columns" size="lg" :loading="loading">
+        <template #name-data="{ row }">
+          <div class="font-semibold">
+            {{ row.name }}
+            <UBadge v-if="row.is_current" label="active" color="emerald" variant="soft" size="xs" class="ms-1" />
+          </div>
+          <div class="font-medium text-sm">IP: {{ row.ip }}</div>
+        </template>
+        <template #last_used_at-data="{ row }">
+          {{ dayjs(row.last_used_at).fromNow() }}
+        </template>
+        <template #actions-data="{ row }">
+          <div class="flex justify-end">
+            <UDropdown :items="items(row)">
+              <UButton :disabled="row.is_current" color="gray" variant="ghost"
+                icon="i-heroicons-ellipsis-horizontal-20-solid" />
+            </UDropdown>
+          </div>
+        </template>
+      </UTable>
+    </ClientOnly>
+  </UCard>
+</template>

nuxt/pages/account/general.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup></script>
+<template>
+  <UCard :ui="{ body: { base: 'grid grid-cols-12 gap-6 md:gap-8' } }">
+    <div class="col-span-12 lg:col-span-4">
+      <div class="text-lg font-semibold mb-2">Profile information</div>
+      <div class="text-sm opacity-80">
+        Update your account's profile information and email address.
+      </div>
+    </div>
+    <div class="col-span-12 lg:col-span-8">
+      <AccountUpdateProfile />
+    </div>
+    <UDivider class="col-span-12" />
+    <div class="col-span-12 lg:col-span-4">
+      <div class="text-lg font-semibold mb-2">Update Password</div>
+      <div class="text-sm opacity-80">
+        Ensure your account is using a long, random password to stay secure.
+      </div>
+    </div>
+    <div class="col-span-12 lg:col-span-8">
+      <AccountUpdatePassword />
+    </div>
+  </UCard>
+</template>

nuxt/pages/account/index.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+definePageMeta({
+  redirect: "/account/general",
+});
+</script>
+<template></template>