Merge pull request 'Added change password feature' (#9) from dev into main

package-lock.json

@@ -33,7 +33,7 @@
         "prettier": "3.9.5",
         "typescript": "~6.0.0",
         "vite": "^8.1.5",
-        "vite-plugin-pwa": "^1.2.0",
+        "vite-plugin-pwa": "^1.3.0",
         "vite-plugin-vue-devtools": "^8.1.5",
         "vitest": "^4.1.10",
         "vue-eslint-parser": "^10.4.1",
@@ -9563,17 +9563,17 @@
       }
     },
     "node_modules/vite-plugin-pwa": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.2.0.tgz",
-      "integrity": "sha512-a2xld+SJshT9Lgcv8Ji4+srFJL4k/1bVbd1x06JIkvecpQkwkvCncD1+gSzcdm3s+owWLpMJerG3aN5jupJEVw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.3.0.tgz",
+      "integrity": "sha512-c5kMgN+ITrOtHXp8PAtk2uOIEea6XjP/unCGxOWWBzQ6qa65qj/awHg0wf+QF9E/2u9vh86LqxPwzEPNbM2r5A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "debug": "^4.3.6",
         "pretty-bytes": "^6.1.1",
         "tinyglobby": "^0.2.10",
-        "workbox-build": "^7.4.0",
-        "workbox-window": "^7.4.0"
+        "workbox-build": "^7.4.1",
+        "workbox-window": "^7.4.1"
       },
       "engines": {
         "node": ">=16.0.0"
@@ -9583,9 +9583,9 @@
       },
       "peerDependencies": {
         "@vite-pwa/assets-generator": "^1.0.0",
-        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
-        "workbox-build": "^7.4.0",
-        "workbox-window": "^7.4.0"
+        "vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "workbox-build": "^7.4.1",
+        "workbox-window": "^7.4.1"
       },
       "peerDependenciesMeta": {
         "@vite-pwa/assets-generator": {

package.json

@@ -41,7 +41,7 @@
     "prettier": "3.9.5",
     "typescript": "~6.0.0",
     "vite": "^8.1.5",
-    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-vue-devtools": "^8.1.5",
     "vitest": "^4.1.10",
     "vue-eslint-parser": "^10.4.1",

src/api/users.ts

@@ -0,0 +1,10 @@
+import { apiClient } from '@/api/client'
+import { extractErrorMessage } from '@/api/http'
+import type { ChangePasswordPayload } from '@/types/auth'
+
+export async function changePasswordApi(payload: ChangePasswordPayload): Promise<void> {
+  const response = await apiClient.post('/users/password', payload)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to change password'))
+  }
+}

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/components/ChangePasswordModal.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { changePasswordApi } from '@/api/users'
+import { useEscapeKey } from '@/composables/useEscapeKey'
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const passwordInput = ref<HTMLInputElement | null>(null)
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const isSubmitting = ref(false)
+const error = ref('')
+const successMessage = ref('')
+
+useEscapeKey(handleClose)
+
+onMounted(() => {
+  nextTick(() => {
+    passwordInput.value?.focus()
+  })
+})
+
+function handleClose() {
+  emit('close')
+}
+
+async function handleSubmit() {
+  error.value = ''
+  successMessage.value = ''
+
+  if (newPassword.value.length < 8) {
+    error.value = 'New password must be at least 8 characters.'
+    return
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = 'New passwords do not match.'
+    return
+  }
+
+  isSubmitting.value = true
+  try {
+    await changePasswordApi({
+      old_password: currentPassword.value,
+      new_password: newPassword.value,
+    })
+    currentPassword.value = ''
+    newPassword.value = ''
+    confirmPassword.value = ''
+    successMessage.value = 'Password changed successfully.'
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to change password'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="handleClose">
+    <div
+      class="modal-card card"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="change-password-modal-title"
+    >
+      <div class="modal-header">
+        <h3 id="change-password-modal-title">Change password</h3>
+        <button type="button" class="close-btn" aria-label="Close modal" @click="handleClose">
+          ✕
+        </button>
+      </div>
+
+      <p class="modal-description">Enter your current password and choose a new one.</p>
+
+      <form class="password-form" @submit.prevent="handleSubmit">
+        <div class="field">
+          <input
+            ref="passwordInput"
+            v-model="currentPassword"
+            type="password"
+            placeholder="Current password"
+            autocomplete="current-password"
+            :disabled="isSubmitting"
+          />
+        </div>
+        <div class="field">
+          <input
+            v-model="newPassword"
+            type="password"
+            placeholder="New password"
+            autocomplete="new-password"
+            :disabled="isSubmitting"
+          />
+        </div>
+        <div class="field">
+          <input
+            v-model="confirmPassword"
+            type="password"
+            placeholder="Confirm new password"
+            autocomplete="new-password"
+            :disabled="isSubmitting"
+          />
+        </div>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          :disabled="isSubmitting || !currentPassword || !newPassword || !confirmPassword"
+        >
+          Change password
+        </button>
+      </form>
+
+      <p v-if="error" class="banner banner-error">{{ error }}</p>
+      <p v-if="successMessage" class="banner banner-success">{{ successMessage }}</p>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" @click="handleClose">Done</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 100;
+  animation: fadeIn 0.15s ease-out;
+}
+
+.modal-card {
+  width: 100%;
+  max-width: 440px;
+  background-color: var(--c-bg-soft);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.4rem;
+  box-shadow: var(--shadow-md);
+  animation: slideUp 0.15s ease-out;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.modal-header h3 {
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--c-text-soft);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0.2rem 0.4rem;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: var(--c-heading);
+}
+
+.modal-description {
+  font-size: 0.85rem;
+  color: var(--c-text-soft);
+  margin-bottom: 1rem;
+}
+
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.password-form .btn {
+  padding: 0.65rem 1.2rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.modal-footer .btn {
+  width: auto;
+  padding: 0.5rem 1.2rem;
+}
+
+.banner-success {
+  background-color: rgba(52, 211, 153, 0.12);
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  color: var(--c-success);
+  margin-top: 0.75rem;
+}
+
+.banner-error {
+  margin-top: 0.75rem;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+</style>

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/utils/jwt.ts

@@ -0,0 +1,17 @@
+export function decodeJwtPayload<T>(token: string): T | null {
+  const parts = token.split('.')
+  if (parts.length !== 3) return null
+
+  try {
+    const base64 = parts[1]!.replace(/-/g, '+').replace(/_/g, '/')
+    const json = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
+        .join(''),
+    )
+    return JSON.parse(json) as T
+  } catch {
+    return null
+  }
+}

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.
+    <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>