Edit profile page

app/Actions/Fortify/UpdateUserProfileInformation.php

@@ -2,7 +2,7 @@
 
 namespace App\Actions\Fortify;
 
-use App\Models\Participant;
+use App\Models\SocialMedia;
 use App\Models\User;
 use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Support\Facades\Validator;
@@ -30,9 +30,8 @@ public function update(User $user, array $input): void
             $user->updateProfilePhoto($input['photo']);
         }
 
-        if (isset($input['cv'])) {
-            $participant = Participant::find($user->id);
-            $participant->updateCV($input['cv']);
+        if ($user->isParticipant() && isset($input['cv'])) {
+            $user->usertype->updateCV($input['cv']);
         }
 
         if ($input['email'] !== $user->email &&
@@ -44,6 +43,30 @@ public function update(User $user, array $input): void
                 'email' => $input['email'],
             ])->save();
         }
+
+        $usertypeProps = match ($input['type']) {
+            'company' => [
+                'description' => $input['description'],
+            ],
+            'speaker' => [
+                'title' => $input['title'],
+                'description' => $input['description'],
+                'organization' => $input['organization'],
+            ],
+            default => [],
+        };
+        $user->usertype->update($usertypeProps);
+
+        if ($input['type'] !== 'admin' && isset($input['social_media'])) {
+            $socialMedia = $user->usertype->social_media;
+            if ($socialMedia === null) {
+                $socialMedia = SocialMedia::create($input['social_media']);
+                $user->usertype->socialMedia()->associate($socialMedia);
+                $user->usertype->save();
+            } else {
+                $socialMedia->update($input['social_media']);
+            }
+        }
     }
 
     /**

app/Http/Controllers/UserController.php

@@ -53,4 +53,14 @@ public function show(Request $request)
             'slots' => $slots,
         ]);
     }
+
+    public function edit(Request $request)
+    {
+        $this->validateTwoFactorAuthenticationState($request);
+
+        return Inertia::render('Profile/Edit', [
+            'confirmsTwoFactorAuthentication' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
+            'sessions' => $this->sessions($request)->all(),
+        ]);
+    }
 }

resources/js/Components/ActionMessage.vue

@@ -13,7 +13,7 @@ defineProps<Props>();
             leave-from-class="opacity-100"
             leave-to-class="opacity-0"
         >
-            <div v-show="on" class="text-sm text-gray-600 dark:text-gray-400">
+            <div v-show="on" class="text-sm text-2023-teal">
                 <slot />
             </div>
         </transition>

resources/js/Components/ActionSection.vue

@@ -3,7 +3,7 @@ import SectionTitle from "./SectionTitle.vue";
 </script>
 
 <template>
-    <div class="md:grid md:grid-cols-3 md:gap-6">
+    <div class="flex flex-col">
         <SectionTitle>
             <template #title>
                 <slot name="title" />
@@ -13,12 +13,8 @@ import SectionTitle from "./SectionTitle.vue";
             </template>
         </SectionTitle>
 
-        <div class="mt-5 md:col-span-2 md:mt-0">
-            <div
-                class="bg-white px-4 py-5 shadow dark:bg-gray-800 sm:rounded-lg sm:p-6"
-            >
-                <slot name="content" />
-            </div>
+        <div class="mt-5 bg-2023-bg px-4 py-5 sm:p-6 md:mt-0">
+            <slot name="content" />
         </div>
     </div>
 </template>

resources/js/Components/ConfirmsPassword.vue

@@ -2,7 +2,6 @@
 import { ref, reactive, nextTick } from "vue";
 import DialogModal from "./DialogModal.vue";
 import PrimaryButton from "./PrimaryButton.vue";
-import SecondaryButton from "./SecondaryButton.vue";
 import TextInput from "./TextInput.vue";
 import axios from "axios";
 import route from "ziggy-js";
@@ -100,7 +99,7 @@ const closeModal = () => {
             </template>
 
             <template #footer>
-                <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
+                <PrimaryButton @click="closeModal"> Cancel </PrimaryButton>
 
                 <PrimaryButton
                     class="ml-3"

resources/js/Components/DialogModal.vue

@@ -16,18 +16,16 @@ const close = () => emit("close");
         @close="close"
     >
         <div class="px-6 py-4">
-            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <div class="text-lg font-medium text-2023-red">
                 <slot name="title" />
             </div>
 
-            <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
+            <div class="mt-4 text-sm text-2023-red-dark">
                 <slot name="content" />
             </div>
         </div>
 
-        <div
-            class="flex flex-row justify-end bg-gray-100 px-6 py-4 text-right dark:bg-gray-800"
-        >
+        <div class="flex flex-row justify-end bg-2023-bg px-6 py-4 text-right">
             <slot name="footer" />
         </div>
     </Modal>

resources/js/Components/FormSection.vue

@@ -12,7 +12,7 @@ const hasActions = computed(() => !!useSlots().actions);
 </script>
 
 <template>
-    <div class="md:grid md:grid-cols-3 md:gap-6">
+    <div class="flex flex-col">
         <SectionTitle>
             <template #title>
                 <slot name="title" />
@@ -22,24 +22,17 @@ const hasActions = computed(() => !!useSlots().actions);
             </template>
         </SectionTitle>
 
-        <div class="mt-5 md:col-span-2 md:mt-0">
+        <div class="mt-5 md:mt-0">
             <form @submit.prevent="$emit('submitted')">
-                <div
-                    class="bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6"
-                    :class="
-                        hasActions
-                            ? 'sm:rounded-tl-md sm:rounded-tr-md'
-                            : 'sm:rounded-md'
-                    "
-                >
-                    <div class="grid grid-cols-6 gap-6">
+                <div class="bg-2023-bg px-4 py-5 sm:p-6">
+                    <div class="flex flex-col gap-5">
                         <slot name="form" />
                     </div>
                 </div>
 
                 <div
                     v-if="hasActions"
-                    class="flex items-center justify-end bg-gray-50 px-4 py-3 text-right shadow dark:bg-gray-800 sm:rounded-bl-md sm:rounded-br-md sm:px-6"
+                    class="flex items-center justify-end bg-2023-bg px-4 py-3 text-right sm:px-6"
                 >
                     <slot name="actions" />
                 </div>

resources/js/Components/Modal.vue

@@ -71,9 +71,7 @@ const maxWidthClass = computed(() => {
                         class="fixed inset-0 transform transition-all"
                         @click="close"
                     >
-                        <div
-                            class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900"
-                        />
+                        <div class="absolute inset-0 bg-gray-500 opacity-75" />
                     </div>
                 </transition>
 
@@ -87,7 +85,7 @@ const maxWidthClass = computed(() => {
                 >
                     <div
                         v-show="show"
-                        class="mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all dark:bg-gray-800 sm:mx-auto sm:w-full"
+                        class="mb-6 transform overflow-hidden bg-2023-bg transition-all sm:mx-auto sm:w-full"
                         :class="maxWidthClass"
                     >
                         <slot v-if="show" />

resources/js/Components/Profile/InfoCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { User } from "@/Types/User";
 import "vue-final-modal/style.css";
+import { router } from "@inertiajs/vue3";
+import route from "ziggy-js";
 
 interface Props {
     item: User | undefined;
@@ -87,7 +89,11 @@ const iconColor: Record<string, string> = {
                 </template>
             </div>
         </div>
-        <button v-if="$page.props.auth.user?.id == item?.id" class="self-start">
+        <button
+            v-if="$page.props.auth.user?.id == item?.id"
+            class="self-start"
+            @click="router.get(route('profile.edit'))"
+        >
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 class="w-8 text-2023-teal"

resources/js/Components/SectionTitle.vue

@@ -1,17 +1,13 @@
 <template>
-    <div class="flex justify-between md:col-span-1">
-        <div class="px-4 sm:px-0">
-            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+    <div class="flex justify-between">
+        <section class="px-4 sm:px-0">
+            <h3 class="text-lg font-medium text-2023-teal">
                 <slot name="title" />
             </h3>
 
-            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+            <p class="mt-1 text-sm text-2023-teal-dark">
                 <slot name="description" />
             </p>
-        </div>
-
-        <div class="px-4 sm:px-0">
-            <slot name="aside" />
-        </div>
+        </section>
     </div>
 </template>

resources/js/Pages/Profile/Edit.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import AppLayout from "@/Layouts/AppLayout.vue";
+import DeleteUserForm from "@/Pages/Profile/Partials/DeleteUserForm.vue";
+import LogoutOtherBrowserSessionsForm from "@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue";
+import SectionBorder from "@/Components/SectionBorder.vue";
+import TwoFactorAuthenticationForm from "@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue";
+import UpdatePasswordForm from "@/Pages/Profile/Partials/UpdatePasswordForm.vue";
+import UpdateProfileInformationForm from "@/Pages/Profile/Partials/UpdateProfileInformationForm.vue";
+import type Session from "@/Types/Session";
+
+interface Props {
+    confirmsTwoFactorAuthentication: boolean;
+    sessions: Session[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <AppLayout title="Profile">
+        <div class="mx-auto max-w-3xl py-10 sm:px-6 lg:px-8">
+            <template v-if="$page.props.jetstream.canUpdateProfileInformation">
+                <UpdateProfileInformationForm :user="$page.props.auth.user" />
+
+                <SectionBorder />
+            </template>
+
+            <template v-if="$page.props.jetstream.canUpdatePassword">
+                <UpdatePasswordForm class="mt-10 sm:mt-0" />
+
+                <SectionBorder />
+            </template>
+
+            <template
+                v-if="$page.props.jetstream.canManageTwoFactorAuthentication"
+            >
+                <TwoFactorAuthenticationForm
+                    :requires-confirmation="confirmsTwoFactorAuthentication"
+                    class="mt-10 sm:mt-0"
+                />
+
+                <SectionBorder />
+            </template>
+
+            <LogoutOtherBrowserSessionsForm
+                :sessions="sessions"
+                class="mt-10 sm:mt-0"
+            />
+
+            <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
+                <SectionBorder />
+
+                <DeleteUserForm class="mt-10 sm:mt-0" />
+            </template>
+        </div>
+    </AppLayout>
+</template>

resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -2,11 +2,10 @@
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import ActionSection from "@/Components/ActionSection.vue";
-import DangerButton from "@/Components/DangerButton.vue";
 import DialogModal from "@/Components/DialogModal.vue";
-import SecondaryButton from "@/Components/SecondaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import route from "ziggy-js";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 
 const confirmingUserDeletion = ref(false);
 const passwordInput = ref<HTMLInputElement | null>(null);
@@ -44,16 +43,16 @@ const closeModal = () => {
         <template #description> Permanently delete your account. </template>
 
         <template #content>
-            <div class="max-w-xl text-sm text-gray-600 dark:text-gray-400">
+            <div class="max-w-xl text-sm text-2023-red-dark">
                 Once your account is deleted, all of its resources and data will
                 be permanently deleted. Before deleting your account, please
                 download any data or information that you wish to retain.
             </div>
 
             <div class="mt-5">
-                <DangerButton @click="confirmUserDeletion">
+                <PrimaryButton color="red" @click="confirmUserDeletion">
                     Delete Account
-                </DangerButton>
+                </PrimaryButton>
             </div>
 
             <!-- Delete Account Confirmation Modal -->
@@ -79,18 +78,17 @@ const closeModal = () => {
                 </template>
 
                 <template #footer>
-                    <SecondaryButton @click="closeModal">
-                        Cancel
-                    </SecondaryButton>
+                    <PrimaryButton @click="closeModal"> Cancel </PrimaryButton>
 
-                    <DangerButton
+                    <PrimaryButton
                         class="ml-3"
+                        color="red"
                         :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                         @click="deleteUser"
                     >
                         Delete Account
-                    </DangerButton>
+                    </PrimaryButton>
                 </template>
             </DialogModal>
         </template>