bitstream/fuel-price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Profile settings view with name/email form and delete account modal

Browse Source
This commit is contained in:
Ovidiu U
2026-04-11 13:09:40 +01:00
parent 5bf8868124
commit 00e99044f6
1 changed files with 163 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
resources/js/views/dashboard/settings/Profile.vue
View File

@@ -1 +1,163 @@
<template><div></div></template>
<template>
<div class="space-y-6 max-w-lg">
<!-- Profile form -->
<form @submit.prevent="saveProfile" class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-5">
<h2 class="text-lg font-black text-[#4a3f3b]">Profile information</h2>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Full name</label>
<input
v-model="profileForm.name"
type="text"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
:class="profileErrors.name ? 'border-red-400' : 'border-[#e5ded7]'"
/>
<p v-if="profileErrors.name" class="text-xs text-red-600">{{ profileErrors.name[0] }}</p>
</div>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Email address</label>
<input
v-model="profileForm.email"
type="email"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
:class="profileErrors.email ? 'border-red-400' : 'border-[#e5ded7]'"
/>
<p v-if="profileErrors.email" class="text-xs text-red-600">{{ profileErrors.email[0] }}</p>
</div>
<p v-if="profileNetworkError" class="text-sm text-red-600">{{ profileNetworkError }}</p>
<div class="flex items-center gap-4">
<button
type="submit"
:disabled="profileSaving"
class="px-8 py-3 bg-[#bb5b3e] text-white rounded-xl font-bold hover:bg-[#a34a31] transition-all disabled:opacity-50"
>
{{ profileSaving ? 'Saving…' : 'Save changes' }}
</button>
<p v-if="profileSaved" class="text-sm font-bold text-green-600">Saved!</p>
</div>
</form>
<!-- Delete account -->
<div class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-4">
<h2 class="text-lg font-black text-[#4a3f3b]">Delete account</h2>
<p class="text-sm text-[#89726c]">Permanently delete your account and all associated data. This cannot be undone.</p>
<button
@click="deleteModalOpen = true"
class="px-6 py-2.5 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
>
Delete my account
</button>
</div>
<!-- Delete account modal -->
<div
v-if="deleteModalOpen"
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
@click.self="closeDeleteModal"
>
<div class="bg-white rounded-2xl p-6 w-full max-w-md mx-4 space-y-5">
<h3 class="text-lg font-black text-[#4a3f3b]">Are you sure?</h3>
<p class="text-sm text-[#89726c]">Enter your password to confirm account deletion.</p>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Password</label>
<input
v-model="deletePassword"
type="password"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-red-400"
:class="deleteError ? 'border-red-400' : 'border-[#e5ded7]'"
/>
<p v-if="deleteError" class="text-xs text-red-600">{{ deleteError }}</p>
</div>
<div class="flex gap-3">
<button
@click="closeDeleteModal"
class="flex-1 py-3 border border-[#e5ded7] rounded-xl text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] transition-colors"
>
Cancel
</button>
<button
@click="confirmDelete"
:disabled="deleting"
class="flex-1 py-3 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors disabled:opacity-50"
>
{{ deleting ? 'Deleting…' : 'Delete account' }}
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuth } from '../../../composables/useAuth.js'
const { user, updateProfile, deleteAccount } = useAuth()
const router = useRouter()
const profileForm = ref({ name: '', email: '' })
const profileErrors = ref({})
const profileNetworkError = ref('')
const profileSaving = ref(false)
const profileSaved = ref(false)
onMounted(() => {
profileForm.value.name = user.value?.name ?? ''
profileForm.value.email = user.value?.email ?? ''
})
async function saveProfile() {
profileSaving.value = true
profileSaved.value = false
profileErrors.value = {}
profileNetworkError.value = ''
try {
await updateProfile(profileForm.value)
profileSaved.value = true
setTimeout(() => { profileSaved.value = false }, 3000)
} catch (err) {
if (err.response?.status === 422) {
profileErrors.value = err.response.data.errors ?? {}
} else {
profileNetworkError.value = 'Something went wrong. Please try again.'
}
} finally {
profileSaving.value = false
}
}
const deleteModalOpen = ref(false)
const deletePassword = ref('')
const deleteError = ref('')
const deleting = ref(false)
function closeDeleteModal() {
deleteModalOpen.value = false
deletePassword.value = ''
deleteError.value = ''
}
async function confirmDelete() {
deleting.value = true
deleteError.value = ''
try {
await deleteAccount(deletePassword.value)
router.push('/')
} catch (err) {
if (err.response?.status === 422) {
deleteError.value = err.response.data.errors?.password?.[0] ?? 'Incorrect password.'
} else {
deleteError.value = 'Something went wrong. Please try again.'
}
deletePassword.value = ''
} finally {
deleting.value = false
}
}
</script>