From 00e99044f6b67e1207a3499a82df0a115966ec2f Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Sat, 11 Apr 2026 13:09:40 +0100
Subject: [PATCH] feat: add Profile settings view with name/email form and
 delete account modal

---
 .../js/views/dashboard/settings/Profile.vue   | 164 +++++++++++++++++-
 1 file changed, 163 insertions(+), 1 deletion(-)

diff --git a/resources/js/views/dashboard/settings/Profile.vue b/resources/js/views/dashboard/settings/Profile.vue
index 0ada1d8..0b26110 100644
--- a/resources/js/views/dashboard/settings/Profile.vue
+++ b/resources/js/views/dashboard/settings/Profile.vue
@@ -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>