172 lines
4.6 KiB
Vue
172 lines
4.6 KiB
Vue
<template>
|
|
<div class="p-6">
|
|
<h2 class="kestrel-page-heading mb-4">
|
|
Account
|
|
</h2>
|
|
|
|
<section class="mb-8">
|
|
<h3 class="kestrel-section-label">
|
|
Profile
|
|
</h3>
|
|
<div class="kestrel-card p-4">
|
|
<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>
|
|
|
|
<section
|
|
v-if="user?.auth_provider === 'local'"
|
|
class="mb-8"
|
|
>
|
|
<h3 class="kestrel-section-label">
|
|
Change password
|
|
</h3>
|
|
<div class="kestrel-card p-4">
|
|
<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="kestrel-label"
|
|
>Current password</label>
|
|
<input
|
|
id="account-current-password"
|
|
v-model="currentPassword"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
class="kestrel-input"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="account-new-password"
|
|
class="kestrel-label"
|
|
>New password</label>
|
|
<input
|
|
id="account-new-password"
|
|
v-model="newPassword"
|
|
type="password"
|
|
autocomplete="new-password"
|
|
class="kestrel-input"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="account-confirm-password"
|
|
class="kestrel-label"
|
|
>Confirm new password</label>
|
|
<input
|
|
id="account-confirm-password"
|
|
v-model="confirmPassword"
|
|
type="password"
|
|
autocomplete="new-password"
|
|
class="kestrel-input"
|
|
>
|
|
</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>
|