initial commit

app/pages/account.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="p-6">
+    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+      Account
+    </h2>
+
+    <!-- Profile -->
+    <section class="mb-8">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+        Profile
+      </h3>
+      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+        <template v-if="user">
+          <dl class="space-y-2 text-sm">
+            <div>
+              <dt class="text-kestrel-muted">
+                Identifier
+              </dt>
+              <dd class="mt-0.5 font-medium text-kestrel-text">
+                {{ user.identifier }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-kestrel-muted">
+                Role
+              </dt>
+              <dd class="mt-0.5 font-medium text-kestrel-text">
+                {{ user.role }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-kestrel-muted">
+                Sign-in method
+              </dt>
+              <dd class="mt-0.5 font-medium text-kestrel-text">
+                {{ user.auth_provider === 'oidc' ? 'OIDC' : 'Local' }}
+              </dd>
+            </div>
+          </dl>
+          <p class="mt-3 text-xs text-kestrel-muted">
+            Admins can manage all users on the Members page.
+          </p>
+        </template>
+        <p
+          v-else
+          class="text-sm text-kestrel-muted"
+        >
+          Sign in to see your profile.
+        </p>
+      </div>
+    </section>
+
+    <!-- Change password (local only) -->
+    <section
+      v-if="user?.auth_provider === 'local'"
+      class="mb-8"
+    >
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+        Change password
+      </h3>
+      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+        <p
+          v-if="passwordSuccess"
+          class="mb-3 text-sm text-green-400"
+        >
+          Password updated.
+        </p>
+        <p
+          v-if="passwordError"
+          class="mb-3 text-sm text-red-400"
+        >
+          {{ passwordError }}
+        </p>
+        <form
+          class="space-y-3"
+          @submit.prevent="onChangePassword"
+        >
+          <div>
+            <label
+              for="account-current-password"
+              class="mb-1 block text-xs text-kestrel-muted"
+            >
+              Current password
+            </label>
+            <input
+              id="account-current-password"
+              v-model="currentPassword"
+              type="password"
+              autocomplete="current-password"
+              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            >
+          </div>
+          <div>
+            <label
+              for="account-new-password"
+              class="mb-1 block text-xs text-kestrel-muted"
+            >
+              New password
+            </label>
+            <input
+              id="account-new-password"
+              v-model="newPassword"
+              type="password"
+              autocomplete="new-password"
+              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            >
+          </div>
+          <div>
+            <label
+              for="account-confirm-password"
+              class="mb-1 block text-xs text-kestrel-muted"
+            >
+              Confirm new password
+            </label>
+            <input
+              id="account-confirm-password"
+              v-model="confirmPassword"
+              type="password"
+              autocomplete="new-password"
+              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            >
+          </div>
+          <button
+            type="submit"
+            class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90 disabled:opacity-50"
+            :disabled="passwordLoading"
+          >
+            {{ passwordLoading ? 'Updating…' : 'Update password' }}
+          </button>
+        </form>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { user } = useUser()
+
+const currentPassword = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+const passwordLoading = ref(false)
+const passwordSuccess = ref(false)
+const passwordError = ref('')
+
+async function onChangePassword() {
+  passwordError.value = ''
+  passwordSuccess.value = false
+  if (newPassword.value !== confirmPassword.value) {
+    passwordError.value = 'New password and confirmation do not match.'
+    return
+  }
+  if (newPassword.value.length < 1) {
+    passwordError.value = 'New password cannot be empty.'
+    return
+  }
+  passwordLoading.value = true
+  try {
+    await $fetch('/api/me/password', {
+      method: 'PUT',
+      body: {
+        currentPassword: currentPassword.value,
+        newPassword: newPassword.value,
+      },
+      credentials: 'include',
+    })
+    currentPassword.value = ''
+    newPassword.value = ''
+    confirmPassword.value = ''
+    passwordSuccess.value = true
+  }
+  catch (e) {
+    passwordError.value = e.data?.message ?? e.message ?? 'Failed to update password.'
+  }
+  finally {
+    passwordLoading.value = false
+  }
+}
+</script>