Moved things around

2026-01-21 17:18:58 -05:00
parent a47df7171c
commit a0a059472b
160 changed files with 100 additions and 17 deletions
--- a/frontend/vue-app/src/components/profile/UserProfile.vue
+++ b/frontend/vue-app/src/components/profile/UserProfile.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="profile-view">
+    <h2>User Profile</h2>
+    <form class="profile-form" @submit.prevent>
+      <div class="group">
+        <label for="child-image">Image</label>
+        <ImagePicker
+          id="child-image"
+          v-model="selectedImageId"
+          :image-type="1"
+          @add-image="onAddImage"
+        />
+      </div>
+      <div class="group">
+        <label for="first-name">First Name</label>
+        <input id="first-name" v-model="firstName" type="text" disabled />
+      </div>
+      <div class="group">
+        <label for="last-name">Last Name</label>
+        <input id="last-name" v-model="lastName" type="text" disabled />
+      </div>
+      <div class="group">
+        <label for="email">Email Address</label>
+        <input id="email" v-model="email" type="email" disabled />
+      </div>
+      <div>
+        <button type="button" class="btn-link" @click="resetPassword" :disabled="resetting">
+          {{ resetting ? 'Sending...' : 'Reset Password' }}
+        </button>
+      </div>
+      <div v-if="successMsg" class="success-message" aria-live="polite">{{ successMsg }}</div>
+      <div v-if="errorMsg" class="error-message" aria-live="polite">{{ errorMsg }}</div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import ImagePicker from '@/components/utils/ImagePicker.vue'
+import { getCachedImageUrl } from '@/common/imageCache'
+import '@/assets/edit-forms.css'
+import '@/assets/actions-shared.css'
+import '@/assets/button-shared.css'
+
+const firstName = ref('')
+const lastName = ref('')
+const email = ref('')
+const avatarId = ref<string | null>(null)
+const avatarUrl = ref('/static/avatar-default.png')
+const selectedImageId = ref<string | null>(null)
+const localImageFile = ref<File | null>(null)
+const errorMsg = ref('')
+const successMsg = ref('')
+const resetting = ref(false)
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/api/user/profile')
+    if (!res.ok) throw new Error('Failed to load profile')
+    const data = await res.json()
+    firstName.value = data.first_name || ''
+    lastName.value = data.last_name || ''
+    email.value = data.email || ''
+    avatarId.value = data.image_id || null
+    selectedImageId.value = data.image_id || null
+
+    // Use imageCache to get avatar URL
+    if (avatarId.value) {
+      avatarUrl.value = await getCachedImageUrl(avatarId.value)
+    } else {
+      avatarUrl.value = '/static/avatar-default.png'
+    }
+  } catch {
+    errorMsg.value = 'Could not load user profile.'
+  }
+})
+
+// Watch for avatarId changes (e.g., after updating avatar)
+watch(avatarId, async (id) => {
+  if (id) {
+    avatarUrl.value = await getCachedImageUrl(id)
+  } else {
+    avatarUrl.value = '/static/avatar-default.png'
+  }
+})
+
+function onAddImage({ id, file }: { id: string; file: File }) {
+  if (id === 'local-upload') {
+    localImageFile.value = file
+  } else {
+    localImageFile.value = null
+    selectedImageId.value = id
+    updateAvatar(id)
+  }
+}
+
+async function updateAvatar(imageId: string) {
+  errorMsg.value = ''
+  successMsg.value = ''
+  try {
+    const res = await fetch('/api/user/avatar', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ image_id: imageId }),
+    })
+    if (!res.ok) throw new Error('Failed to update avatar')
+    // Update avatarId, which will trigger the watcher to update avatarUrl
+    avatarId.value = imageId
+    successMsg.value = 'Avatar updated!'
+  } catch {
+    errorMsg.value = 'Failed to update avatar.'
+  }
+}
+
+// If uploading a new image file
+watch(localImageFile, async (file) => {
+  if (!file) return
+  errorMsg.value = ''
+  successMsg.value = ''
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('type', '2')
+  formData.append('permanent', 'true')
+  try {
+    const resp = await fetch('/api/image/upload', {
+      method: 'POST',
+      body: formData,
+    })
+    if (!resp.ok) throw new Error('Image upload failed')
+    const data = await resp.json()
+    selectedImageId.value = data.id
+    await updateAvatar(data.id)
+  } catch {
+    errorMsg.value = 'Failed to upload avatar image.'
+  }
+})
+
+async function resetPassword() {
+  resetting.value = true
+  errorMsg.value = ''
+  successMsg.value = ''
+  try {
+    const res = await fetch('/api/request-password-reset', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email.value }),
+    })
+    if (!res.ok) throw new Error('Failed to send reset email')
+    successMsg.value =
+      'If this email is registered, you will receive a password reset link shortly.'
+  } catch {
+    errorMsg.value = 'Failed to send password reset email.'
+  } finally {
+    resetting.value = false
+  }
+}
+</script>
+
+<style scoped>
+.success-message {
+  color: var(--success, #16a34a);
+  font-size: 1rem;
+}
+.error-message {
+  color: var(--error, #e53e3e);
+  font-size: 0.98rem;
+  margin-top: 0.4rem;
+}
+</style>