feat: Update authentication and profile components

frontend/src/views/profile/ProfilePage.vue

@@ -18,9 +18,9 @@ import Linkedin from "@/views/svg/Linkedin.vue";
 import Tiktok from "@/views/svg/Tiktok.vue";
 import Instagram from "@/views/svg/Instagram.vue";
 import Facebook from "@/views/svg/Facebook.vue";
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';
 
-const { t } = useI18n();
+const {t} = useI18n();
 const userProfileStore = useUserProfileStore()
 
 // ### Fullname
@@ -116,63 +116,6 @@ function handleDelete() {
 <template>
 
   <div class="min-h-screen w-full">
-
-    <v-dialog v-model="dialogEditFullnameShown">
-      <fullname-dialog
-          :firstname="userProfileStore.user.firstname"
-          :lastname="userProfileStore.user.lastname"
-          @close="handleCloseEditFullname"
-          @save="handleSaveEditFullname"
-      ></fullname-dialog>
-    </v-dialog>
-    <v-dialog v-model="dialogEditAliasShown">
-      <alias-dialog
-          :alias="userProfileStore.user.alias"
-          @close="handleCloseEditAlias"
-          @save="handleSaveEditAlias"
-      ></alias-dialog>
-    </v-dialog>
-    <v-dialog v-model="dialogShown">
-      <component
-          :is="currentComponent"
-          :creator="creatorProfileStore.creator"
-          :email="userProfileStore.user.email"
-          @closeRequested="closeDialog"
-      ></component>
-    </v-dialog>
-    <v-dialog v-model="restoreDialogShown">
-      <div class="card dialog">
-        <div class="card-title">{{ t('restoreCreatorPage') }}</div>
-        <div class="card-content">
-          <p>{{ t('restoreWarning') }}</p>
-          <div class="card-actions">
-            <button class="secondary" @click="restoreDialogShown = false">
-              {{ t('cancel') }}
-            </button>
-            <button class="primary" @click="handleRestore">
-              {{ t('accept') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </v-dialog>
-    <v-dialog v-model="deleteDialogShown">
-      <div class="card dialog">
-        <div class="card-title">{{ t('deleteCreatorPage') }}</div>
-        <div class="card-content">
-          <p>{{ t('deleteWarning') }}</p>
-          <div class="card-actions">
-            <button class="secondary" @click="deleteDialogShown = false">
-              {{ t('cancel') }}
-            </button>
-            <button class="primary danger-action" @click="handleDelete">
-              {{ t('accept') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </v-dialog>
-
     <div class="flex flex-col items-center gap-4 m-4">
 
       <div class="card">
@@ -231,12 +174,12 @@ function handleDelete() {
             </button>
 
             <!-- NAME -->
-            <button class="action"  @click="openDialog('ChangeNameDialog')">
+            <button class="action" @click="openDialog('ChangeNameDialog')">
               <span class="label">{{ t('name') }}</span>
               <span class="value">{{ creatorProfileStore.creator.name }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
-            
+
             <!-- TITLE -->
             <button class="action" @click="openDialog('ChangeTitleDialog')">
               <span class="label">{{ t('title') }}</span>
@@ -258,8 +201,7 @@ function handleDelete() {
           <div class="card-title">
             {{ t('socialNetworks') }}
           </div>
-
-          <div>
+          <div class="content">
 
             <button class="action" @click="openDialog('SocialsDialog')">
               <span class="label">
@@ -292,7 +234,7 @@ function handleDelete() {
               <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
-            
+
             <button class="action" @click="openDialog('SocialsDialog')">
               <span class="label">
                 <tiktok class="social-icon"></tiktok>
@@ -329,36 +271,97 @@ function handleDelete() {
         </div>
 
         <div class="card">
-          <div class="card-title">{{ t('dangerZone') }}</div>
+          <div class="card-title">
+            {{ t('dangerZone') }}
+          </div>
           <div class="content">
-            <p>
+            <span class="p-2">
               {{ t('dangerZoneWarning') }}
-            </p>
-            <button v-if="!creatorProfileStore.creator.isDeleted"
-                    class="primary danger-action"
-                    @click="deleteDialogShown = true">
-              {{ t('deleteCreatorPage') }}
-            </button>
-            <button v-else
-                    class="primary safe-action"
-                    @click="restoreDialogShown = true">
-              {{ t('restoreCreatorPage') }}
-            </button>
+            </span>
+            <div class="p-2">
+              <button v-if="!creatorProfileStore.creator.isDeleted"
+                      class="primary danger-action"
+                      @click="deleteDialogShown = true">
+                {{ t('deleteCreatorPage') }}
+              </button>
+              <button v-else
+                      class="primary safe-action"
+                      @click="restoreDialogShown = true">
+                {{ t('restoreCreatorPage') }}
+              </button>
+            </div>
           </div>
         </div>
       </template>
 
     </div>
   </div>
+
+  <v-dialog v-model="dialogEditFullnameShown">
+    <FullnameDialog
+        :firstname="userProfileStore.user.firstname"
+        :lastname="userProfileStore.user.lastname"
+        @close="handleCloseEditFullname"
+        @save="handleSaveEditFullname"
+    />
+  </v-dialog>
+  <v-dialog v-model="dialogEditAliasShown">
+    <alias-dialog
+        :alias="userProfileStore.user.alias"
+        @close="handleCloseEditAlias"
+        @save="handleSaveEditAlias"
+    ></alias-dialog>
+  </v-dialog>
+  <v-dialog v-model="dialogShown">
+    <component
+        :is="currentComponent"
+        :creator="creatorProfileStore.creator"
+        :email="userProfileStore.user.email"
+        @closeRequested="closeDialog"
+    ></component>
+  </v-dialog>
+  <v-dialog v-model="restoreDialogShown">
+    <div class="card dialog">
+      <div class="card-title">{{ t('restoreCreatorPage') }}</div>
+      <div class="card-content">
+        <p>{{ t('restoreWarning') }}</p>
+        <div class="card-actions">
+          <button class="secondary" @click="restoreDialogShown = false">
+            {{ t('cancel') }}
+          </button>
+          <button class="primary" @click="handleRestore">
+            {{ t('accept') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </v-dialog>
+  <v-dialog v-model="deleteDialogShown">
+    <div class="card dialog">
+      <div class="card-title">{{ t('deleteCreatorPage') }}</div>
+      <div class="card-content">
+        <p>{{ t('deleteWarning') }}</p>
+        <div class="card-actions">
+          <button class="secondary" @click="deleteDialogShown = false">
+            {{ t('cancel') }}
+          </button>
+          <button class="primary danger-action" @click="handleDelete">
+            {{ t('accept') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </v-dialog>
+
 </template>
 
 <style scoped>
 .card {
-  @apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
+  @apply rounded-lg p-4 w-full max-w-2xl;
 }
 
 .card-title {
-  @apply text-hOnBackground text-lg font-bold mb-4;
+  @apply text-hOnBackground text-lg font-bold;
 }
 
 .content {
@@ -366,25 +369,30 @@ function handleDelete() {
 }
 
 .action {
-  @apply flex flex-row items-center justify-between w-full p-2 rounded-lg;
+  @apply flex flex-row items-center w-full p-3 rounded-lg;
   @apply hover:bg-hSurface;
+  @apply transition-colors duration-500;
 }
 
 .label {
-  @apply text-hOnBackground;
+  @apply text-hOnBackground w-[200px] text-left;
+  @apply flex items-center justify-start;
 }
 
 .value {
-  @apply text-hOnBackground opacity-70;
+  @apply text-hOnBackground flex-1 text-center;
+  @apply flex items-center justify-center;
 }
 
 .chevron {
-  @apply text-hOnBackground opacity-70;
+  @apply text-hOnBackground w-[40px] text-right;
+  @apply flex items-center justify-end;
 }
 
 .social-icon {
   @apply fill-current w-6 h-6;
   @apply text-hOnBackground;
+  @apply mr-2;
 }
 
 .danger-action {