feat: added change password to about/account view

src/components/BottomNav.vue

@@ -17,8 +17,8 @@ const listsStore = useListsStore()
       }}</span>
     </RouterLink>
     <RouterLink to="/about" class="nav-item" active-class="is-active">
-      <span class="nav-icon">ⓘ</span>
-      <span class="nav-label">About</span>
+      <span class="nav-icon">⚙</span>
+      <span class="nav-label">Account</span>
     </RouterLink>
   </nav>
 </template>
@@ -55,10 +55,6 @@ const listsStore = useListsStore()
   line-height: 1;
 }
 
-.nav-item.is-active {
-  color: var(--c-accent-strong);
-}
-
 .nav-badge {
   position: absolute;
   top: 0.35rem;

src/stores/auth.ts

@@ -1,7 +1,8 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { loginApi, refreshApi, logoutApi, logoutAllApi } from '@/api/auth'
-import type { LoginPayload, TokenPair } from '@/types/auth'
+import type { AccessTokenClaims, LoginPayload, TokenPair } from '@/types/auth'
+import { decodeJwtPayload } from '@/utils/jwt'
 
 export const useAuthStore = defineStore('auth', () => {
   const accessToken = ref<string | null>(localStorage.getItem('access_token'))
@@ -11,6 +12,12 @@ export const useAuthStore = defineStore('auth', () => {
 
   const isAuthenticated = computed(() => !!accessToken.value)
 
+  const currentUser = computed(() =>
+    accessToken.value ? decodeJwtPayload<AccessTokenClaims>(accessToken.value) : null,
+  )
+  const email = computed(() => currentUser.value?.email ?? null)
+  const username = computed(() => currentUser.value?.name ?? null)
+
   function setTokens(tokens: TokenPair) {
     accessToken.value = tokens.access_token
     refreshToken.value = tokens.refresh_token
@@ -89,6 +96,9 @@ export const useAuthStore = defineStore('auth', () => {
     isLoading,
     error,
     isAuthenticated,
+    currentUser,
+    email,
+    username,
     setTokens,
     clearTokens,
     login,

src/types/auth.ts

@@ -11,3 +11,15 @@ export interface TokenPair {
   access_token: string
   refresh_token: string
 }
+
+export interface AccessTokenClaims {
+  user_id: string
+  email: string
+  name: string
+  exp: number
+}
+
+export interface ChangePasswordPayload {
+  old_password: string
+  new_password: string
+}

src/views/AboutView.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useListsStore } from '@/stores/lists'
+import { useAuthStore } from '@/stores/auth'
+import ChangePasswordModal from '@/components/ChangePasswordModal.vue'
 
 const listsStore = useListsStore()
+const authStore = useAuthStore()
+
+const showChangePassword = ref(false)
 
 onMounted(() => {
   listsStore.loadLists()
@@ -11,11 +16,25 @@ onMounted(() => {
 
 <template>
   <main class="page about">
-    <h1>About dttmr</h1>
-    <p>
-      An offline-first progressive web app for shared lists. Every change you make is saved
-      instantly on this device and pushed to the server as soon as you're back online.
-    </p>
+    <h1 v-if="authStore.username">Hi, {{ authStore.username }}</h1>
+    <h1 v-else>Account</h1>
+
+    <section class="card info-card">
+      <h4>Users</h4>
+      <p class="row">
+        <span>Signed in as</span>
+        <strong>{{ authStore.email ?? 'Unknown' }}</strong>
+      </p>
+      <button
+        type="button"
+        class="btn btn-secondary change-password-btn"
+        @click="showChangePassword = true"
+      >
+        Change password
+      </button>
+    </section>
+
+    <h1>Pending changes</h1>
 
     <section class="card info-card">
       <h4>Sync status</h4>
@@ -28,6 +47,8 @@ onMounted(() => {
         <strong>{{ listsStore.isSyncing ? 'Yes' : 'No' }}</strong>
       </p>
     </section>
+
+    <ChangePasswordModal v-if="showChangePassword" @close="showChangePassword = false" />
   </main>
 </template>
 
@@ -47,6 +68,10 @@ onMounted(() => {
   padding: 1rem 1.1rem;
 }
 
+.info-card + .info-card {
+  margin-top: 1rem;
+}
+
 .info-card h4 {
   font-size: 0.85rem;
   margin-bottom: 0.75rem;
@@ -63,4 +88,10 @@ onMounted(() => {
 .row strong {
   color: var(--c-heading);
 }
+
+.change-password-btn {
+  width: auto;
+  margin-top: 0.6rem;
+  padding: 0.5rem 1rem;
+}
 </style>