159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template>
|
|
<div class="backdrop" @click.self="emit('close')">
|
|
<form class="modal" @submit.prevent="submit">
|
|
<h2>{{ $t('settings-account-update-modal-title') }}</h2>
|
|
<p class="subtitle">{{ $t('settings-account-update-subtitle') }}</p>
|
|
|
|
<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
|
|
|
|
<div class="input-group">
|
|
<label>{{ $t('auth-username') }}</label>
|
|
<input v-model="username" :placeholder="$t('auth-username')" autofocus />
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>{{ $t('auth-email') }}</label>
|
|
<input v-model="email" type="email" :placeholder="$t('auth-email')" />
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>{{ $t('settings-new-password') }}</label>
|
|
<input v-model="password" type="password" :placeholder="$t('settings-new-password')" />
|
|
<input v-model="confirmPassword" type="password" :placeholder="$t('settings-new-password-confirm')" />
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button type="button" @click="emit('close')" class="secondary" :disabled="isSubmitting">
|
|
{{ $t('shared-cancel') }}
|
|
</button>
|
|
|
|
<button type="submit" :disabled="isSubmitting">
|
|
{{ isSubmitting ? $t('shared-updating') : $t('shared-save') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { updateSettings } from '../api/account'
|
|
import { updateLocalUser } from '../store'
|
|
import type { User } from '../types'
|
|
import { useFluent } from 'fluent-vue';
|
|
import { useErrorTranslator } from '../errors';
|
|
|
|
const { $t } = useFluent();
|
|
const { translateError } = useErrorTranslator();
|
|
|
|
const props = defineProps<{ user: User | null }>()
|
|
const emit = defineEmits(['close', 'updated'])
|
|
|
|
const errorMessage = ref('')
|
|
const isSubmitting = ref(false)
|
|
|
|
const username = ref(props.user?.username || '')
|
|
const email = ref(props.user?.email || '')
|
|
const password = ref('')
|
|
const confirmPassword = ref('')
|
|
|
|
async function submit() {
|
|
errorMessage.value = ''
|
|
|
|
if (password.value !== confirmPassword.value) {
|
|
errorMessage.value = $t('auth-error-password-match')
|
|
return
|
|
}
|
|
|
|
// Prevent empty submission
|
|
if (!username.value || !email.value) {
|
|
errorMessage.value = $t('settings-error-required')
|
|
return
|
|
}
|
|
|
|
isSubmitting.value = true
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
const updatedData = await updateSettings(
|
|
username.value.trim(),
|
|
email.value.trim(),
|
|
password.value
|
|
)
|
|
|
|
await updateLocalUser(updatedData, props.user?.uuid)
|
|
|
|
emit('updated')
|
|
emit('close')
|
|
} catch (err: any) {
|
|
errorMessage.value = translateError(err);
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 1.5rem;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
margin-top: -0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.input-group label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.error-message {
|
|
/* background: rgba(255, 0, 0, 0.1); */
|
|
/* border: 1px solid red; */
|
|
/* padding: 0.5rem; */
|
|
/* border-radius: 4px; */
|
|
color: var(--error);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|