Changeset ae83647 for petify-frontend

Timestamp:

06/26/26 16:32:12 (2 days ago)

Author:

veronika-ils <ilioskaveronika@…>

Branches:

master

Parents:

fa32d0f

Message:

add functionality so that users can change passwords

Location:

petify-frontend/src

Files:

• api/auth.ts (modified) (2 diffs)
• views/LoginView.vue (modified) (9 diffs)
• views/ProfileView.vue (modified) (5 diffs)

petify-frontend/src/api/auth.ts

@@ -24 +24 @@
   }
   message?: string
+}
+
+export interface ChangePasswordRequest {
+  userId: number
+  currentPassword: string
+  newPassword: string
+}
+
+export interface ForgotPasswordRequest {
+  identifier: string
 }
 
@@ -141 +151 @@
   return { message: data.message || "Registration successful" }
 }
+
+export async function changePassword(payload: ChangePasswordRequest, options?: { signal?: AbortSignal }): Promise<void> {
+  await postJson<{ message?: string }>('/api/auth/change-password', payload, options)
+}
+
+export async function forgotPassword(payload: ForgotPasswordRequest, options?: { signal?: AbortSignal }): Promise<string> {
+  const data = await postJson<{ message?: string }>('/api/auth/forgot-password', payload, options)
+  return data.message || 'If an account matches that username or email, a temporary password has been sent.'
+}

petify-frontend/src/views/LoginView.vue

@@ -29 +29 @@
         <div v-if="error" class="alert alert-danger auth-alert" role="alert">
           <strong class="me-1">Oops.</strong>{{ error }}
+        </div>
+        <div v-if="forgotSuccess" class="alert alert-success auth-alert" role="alert">
+          {{ forgotSuccess }}
         </div>
 
@@ -113 +116 @@
           <!-- Remember me -->
           <div class="d-flex justify-content-between align-items-center mt-2 mb-3">
-
-
-            <!-- enable later if you implement route -->
-            <!-- <RouterLink class="link small accent" to="/forgot">Forgot password?</RouterLink> -->
+            <span></span>
+            <button class="link-button small accent" type="button" @click="toggleForgotPassword">
+              Forgot password?
+            </button>
           </div>
 
@@ -123 +126 @@
             <span v-if="loading" class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
             {{ loading ? 'Logging in…' : 'Log in' }}
+          </button>
+        </form>
+
+        <form v-if="showForgotPassword" class="forgot-panel mt-4" @submit.prevent="submitForgotPassword">
+          <label class="form-label" for="forgot-identifier">Username or email</label>
+          <div class="input-group auth-input">
+            <span class="input-group-text">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Zm2.5-.5a.5.5 0 0 0-.5.5v.8l6 3.7 6-3.7v-.8a.5.5 0 0 0-.5-.5h-11Zm11.5 3.6-5.5 3.4a1 1 0 0 1-1 0L6 9.6v7.9a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V9.6Z"
+                  fill="currentColor"
+                  opacity=".85"
+                />
+              </svg>
+            </span>
+            <input
+              id="forgot-identifier"
+              v-model.trim="forgotIdentifier"
+              class="form-control"
+              type="text"
+              autocomplete="username"
+              required
+              placeholder="username or email"
+            />
+          </div>
+          <div v-if="forgotError" class="text-danger small mt-2">{{ forgotError }}</div>
+          <button class="btn btn-outline-primary w-100 mt-3" type="submit" :disabled="forgotLoading">
+            <span v-if="forgotLoading" class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
+            {{ forgotLoading ? 'Sending...' : 'Send temporary password' }}
           </button>
         </form>
@@ -144 +176 @@
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
+import { forgotPassword } from '../api/auth'
 
 const auth = useAuthStore()
@@ -153 +186 @@
 const loading = ref(false)
 const error = ref<string | null>(null)
+const forgotLoading = ref(false)
+const forgotError = ref<string | null>(null)
+const forgotSuccess = ref<string | null>(null)
+const showForgotPassword = ref(false)
+const forgotIdentifier = ref('')
 
 const showPassword = ref(false)
@@ -159 +197 @@
 function togglePassword() {
   showPassword.value = !showPassword.value
+}
+
+function toggleForgotPassword() {
+  showForgotPassword.value = !showForgotPassword.value
+  forgotError.value = null
+  forgotSuccess.value = null
+  if (showForgotPassword.value && !forgotIdentifier.value) {
+    forgotIdentifier.value = username.value
+  }
 }
 
@@ -175 +222 @@
   } finally {
     loading.value = false
+  }
+}
+
+async function submitForgotPassword() {
+  forgotError.value = null
+  forgotSuccess.value = null
+  forgotLoading.value = true
+  try {
+    forgotSuccess.value = await forgotPassword({ identifier: forgotIdentifier.value })
+    showForgotPassword.value = false
+  } catch (e) {
+    forgotError.value = e instanceof Error ? e.message : String(e)
+  } finally {
+    forgotLoading.value = false
   }
 }
@@ -276 +337 @@
 }
 
+.forgot-panel {
+  border-top: 1px solid rgba(31, 41, 55, 0.1);
+  padding-top: 1rem;
+}
+
 /* Input styling */
 .auth-input .input-group-text {
@@ -371 +437 @@
 }
 
+.link-button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  text-decoration: none;
+}
+
+.link-button.accent {
+  color: #ff7a18;
+  font-weight: 600;
+}
+
+.link-button.accent:hover {
+  color: #e76610;
+}
+
 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {

petify-frontend/src/views/ProfileView.vue

@@ -94 +94 @@
               </button>
             </li>
+            <li class="nav-item" role="presentation">
+              <button
+                class="nav-link"
+                :class="{ active: activeTab === 'account' }"
+                @click="activeTab = 'account'"
+                type="button"
+                role="tab"
+              >
+                <i class="bi bi-shield-lock-fill"></i> Account
+              </button>
+            </li>
           </ul>
+
+          <!-- Account Tab -->
+          <div v-if="activeTab === 'account'" class="tab-content-section">
+            <h2 class="section-title">Account</h2>
+            <form class="password-form" @submit.prevent="submitPasswordChange">
+              <div v-if="passwordSuccess" class="alert alert-success" role="alert">
+                {{ passwordSuccess }}
+              </div>
+              <div v-if="passwordError" class="alert alert-danger" role="alert">
+                {{ passwordError }}
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" for="current-password">Current password</label>
+                <input
+                  id="current-password"
+                  v-model="passwordForm.currentPassword"
+                  class="form-control"
+                  type="password"
+                  autocomplete="current-password"
+                  required
+                />
+              </div>
+
+              <div class="mb-3">
+                <label class="form-label" for="new-password">New password</label>
+                <input
+                  id="new-password"
+                  v-model="passwordForm.newPassword"
+                  class="form-control"
+                  type="password"
+                  autocomplete="new-password"
+                  minlength="8"
+                  required
+                />
+              </div>
+
+              <div class="mb-4">
+                <label class="form-label" for="confirm-new-password">Confirm new password</label>
+                <input
+                  id="confirm-new-password"
+                  v-model="passwordForm.confirmPassword"
+                  class="form-control"
+                  type="password"
+                  autocomplete="new-password"
+                  minlength="8"
+                  required
+                />
+              </div>
+
+              <button class="btn btn-primary" type="submit" :disabled="isPasswordSubmitting">
+                <span v-if="isPasswordSubmitting" class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
+                {{ isPasswordSubmitting ? 'Changing...' : 'Change password' }}
+              </button>
+            </form>
+          </div>
 
           <!-- Listings Tab -->
@@ -746 +813 @@
   type Review,
 } from '../api/reviews'
+import { changePassword } from '../api/auth'
 
 const router = useRouter()
 const auth = useAuthStore()
 
-const activeTab = ref<'listings' | 'pets' | 'create-listing' | 'favorites' | 'appointments'>('listings')
+const activeTab = ref<'listings' | 'pets' | 'create-listing' | 'favorites' | 'appointments' | 'account'>('listings')
 const listings = ref<any[]>([])
 const pets = ref<any[]>([])
@@ -782 +850 @@
 const petPhotoFile = ref<File | null>(null)
 const petPhotoPreview = ref('')
+const isPasswordSubmitting = ref(false)
+const passwordError = ref('')
+const passwordSuccess = ref('')
+
+const passwordForm = ref({
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
 
 const newListing = ref({
@@ -859 +936 @@
   // Fall back to petNameMap (from pets list)
   return petNameMap.value[animalId] || 'Unknown Pet'
+}
+
+async function submitPasswordChange() {
+  passwordError.value = ''
+  passwordSuccess.value = ''
+
+  if (!auth.user?.userId) {
+    passwordError.value = 'You need to be logged in to change your password.'
+    return
+  }
+  if (passwordForm.value.newPassword.length < 8) {
+    passwordError.value = 'New password must be at least 8 characters long.'
+    return
+  }
+  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
+    passwordError.value = 'New passwords do not match.'
+    return
+  }
+
+  isPasswordSubmitting.value = true
+  try {
+    await changePassword({
+      userId: auth.user.userId,
+      currentPassword: passwordForm.value.currentPassword,
+      newPassword: passwordForm.value.newPassword,
+    })
+    passwordForm.value = {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    }
+    passwordSuccess.value = 'Password changed successfully.'
+  } catch (error: any) {
+    passwordError.value = error?.message || 'Failed to change password.'
+  } finally {
+    isPasswordSubmitting.value = false
+  }
 }
 
@@ -1670 +1784 @@
 }
 
+.password-form {
+  max-width: 520px;
+}
+
 @keyframes fadeIn {
   from {