Edison
95 lines
3.8 KiB
Vue
95 lines
3.8 KiB
Vue
<template>
|
|
<div class="max-w-md mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-8">
|
|
{{ $t('changePasswordTitle') }}
|
|
</h1>
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<form @submit.prevent="handleChangePassword">
|
|
<div v-if="successMessage" class="bg-green-100 text-green-700 p-3 rounded-md text-center mb-4">
|
|
{{ $t(successMessage) }}
|
|
</div>
|
|
<div v-if="errorMessage" class="bg-red-100 text-red-700 p-3 rounded-md text-center mb-4">
|
|
{{ $t(errorMessage) }}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<label for="currentPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{
|
|
$t('currentPassword') }}</label>
|
|
<input type="password" id="currentPassword" v-model="passwords.currentPassword" required
|
|
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
|
|
</div>
|
|
<div>
|
|
<label for="newPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{
|
|
$t('newPassword') }}</label>
|
|
<input type="password" id="newPassword" v-model="passwords.newPassword" required
|
|
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
|
|
</div>
|
|
<div>
|
|
<label for="confirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{
|
|
$t('confirmNewPassword') }}</label>
|
|
<input type="password" id="confirmPassword" v-model="passwords.confirmPassword" required
|
|
class="w-full border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
|
|
</div>
|
|
<button type="submit" :disabled="loading"
|
|
class="w-full py-3 text-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors duration-200 disabled:opacity-50">
|
|
{{ loading ? $t('updating') : $t('updatePassword') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<router-link to="/worker/dashboard"
|
|
class="block text-center mt-6 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white font-medium underline">
|
|
← {{ $t('backToDashboard') }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { apiFetch } from '@/api.js'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const passwords = ref({
|
|
currentPassword: '',
|
|
newPassword: '',
|
|
confirmPassword: '',
|
|
})
|
|
const loading = ref(false)
|
|
const errorMessage = ref('')
|
|
const successMessage = ref('')
|
|
|
|
const handleChangePassword = async () => {
|
|
errorMessage.value = ''
|
|
successMessage.value = ''
|
|
|
|
if (passwords.value.newPassword !== passwords.value.confirmPassword) {
|
|
errorMessage.value = 'passwordsNoMatch'
|
|
return
|
|
}
|
|
if (passwords.value.newPassword.length < 6) {
|
|
errorMessage.value = 'passwordTooShort'
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
await apiFetch('/api/worker/change-password', {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
currentPassword: passwords.value.currentPassword,
|
|
newPassword: passwords.value.newPassword,
|
|
}),
|
|
})
|
|
successMessage.value = 'passwordUpdated'
|
|
passwords.value = { currentPassword: '', newPassword: '', confirmPassword: '' }
|
|
} catch (err) {
|
|
errorMessage.value = err.message || 'passwordUpdateError'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|