kestrelos/app/pages/account.vue

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