File size: 3,129 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <template>
<div class="card">
<div class="border-b border-gray-100 px-6 py-4 dark:border-dark-700">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
{{ t('profile.changePassword') }}
</h2>
</div>
<div class="px-6 py-6">
<form @submit.prevent="handleChangePassword" class="space-y-4">
<div>
<label for="old_password" class="input-label">
{{ t('profile.currentPassword') }}
</label>
<input
id="old_password"
v-model="form.old_password"
type="password"
required
autocomplete="current-password"
class="input"
/>
</div>
<div>
<label for="new_password" class="input-label">
{{ t('profile.newPassword') }}
</label>
<input
id="new_password"
v-model="form.new_password"
type="password"
required
autocomplete="new-password"
class="input"
/>
<p class="input-hint">
{{ t('profile.passwordHint') }}
</p>
</div>
<div>
<label for="confirm_password" class="input-label">
{{ t('profile.confirmNewPassword') }}
</label>
<input
id="confirm_password"
v-model="form.confirm_password"
type="password"
required
autocomplete="new-password"
class="input"
/>
<p
v-if="form.new_password && form.confirm_password && form.new_password !== form.confirm_password"
class="input-error-text"
>
{{ t('profile.passwordsNotMatch') }}
</p>
</div>
<div class="flex justify-end pt-4">
<button type="submit" :disabled="loading" class="btn btn-primary">
{{ loading ? t('profile.changingPassword') : t('profile.changePasswordButton') }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'
import { userAPI } from '@/api'
const { t } = useI18n()
const appStore = useAppStore()
const loading = ref(false)
const form = ref({
old_password: '',
new_password: '',
confirm_password: ''
})
const handleChangePassword = async () => {
if (form.value.new_password !== form.value.confirm_password) {
appStore.showError(t('profile.passwordsNotMatch'))
return
}
if (form.value.new_password.length < 8) {
appStore.showError(t('profile.passwordTooShort'))
return
}
loading.value = true
try {
await userAPI.changePassword(form.value.old_password, form.value.new_password)
form.value = { old_password: '', new_password: '', confirm_password: '' }
appStore.showSuccess(t('profile.passwordChangeSuccess'))
} catch (error: any) {
appStore.showError(error.response?.data?.detail || t('profile.passwordChangeFailed'))
} finally {
loading.value = false
}
}
</script>
|