Adds some confirmation dialogs for delete / restoring page

frontend/src/locales/en.json

@@ -10,6 +10,7 @@
   "label": "Label",
   "confirm": "Confirm",
   "close": "Close",
+  "accept": "Accept",
   
   // Common status
   "loading": "Loading...",

frontend/src/locales/es.json

@@ -6,7 +6,8 @@
   "create": "Crear",
   "apply": "Aplicar",
   "preview": "Vista previa",
-  "label": "Etiqueta",
+  "label": "Etiqueta", 
+  "accept": "Aceptar",
   "confirm": "Confirmar",
   "close": "Cerrar",
   "loading": "Cargando...",

frontend/src/locales/fr.json

@@ -9,6 +9,7 @@
   "label": "Étiquette",
   "confirm": "Confirmer",
   "close": "Fermer",
+  "accept": "Accepter",
   "loading": "Chargement...",
   "error": "Erreur",
   "success": "Succès",

frontend/src/views/profile/ProfilePage.vue

@@ -75,6 +75,8 @@ const creatorProfileStore = useCreatorProfileStore();
 
 const dialogShown = ref(false);
 const currentComponent = ref('');
+const restoreDialogShown = ref(false);
+const deleteDialogShown = ref(false);
 
 const componentsMap = {
   EmailDialog: markRaw(EmailDialog),
@@ -99,6 +101,16 @@ const closeDialog = () => {
   currentComponent.value = null;
   dialogShown.value = false;
 };
+
+function handleRestore() {
+  creatorProfileStore.restoreCreatorPage();
+  restoreDialogShown.value = false;
+}
+
+function handleDelete() {
+  creatorProfileStore.removeCreatorPage();
+  deleteDialogShown.value = false;
+}
 </script>
 
 <template>
@@ -128,6 +140,38 @@ const closeDialog = () => {
           @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">
 
@@ -288,16 +332,16 @@ const closeDialog = () => {
           <div class="card-title">{{ t('dangerZone') }}</div>
           <div class="content">
             <p>
-              {{ t('deleteWarning') }}
+              {{ t('dangerZoneWarning') }}
             </p>
             <button v-if="!creatorProfileStore.creator.isDeleted"
-                    class="danger-action"
-                    @click="creatorProfileStore.removeCreatorPage()">
+                    class="primary danger-action"
+                    @click="deleteDialogShown = true">
               {{ t('deleteCreatorPage') }}
             </button>
             <button v-else
-                    class="safe-action"
-                    @click="creatorProfileStore.restoreCreatorPage()">
+                    class="primary safe-action"
+                    @click="restoreDialogShown = true">
               {{ t('restoreCreatorPage') }}
             </button>
           </div>
@@ -344,14 +388,10 @@ const closeDialog = () => {
 }
 
 .danger-action {
-  @apply action;
-  @apply mt-4;
   @apply bg-red-800 hover:bg-red-700 active:bg-red-600;
 }
 
 .safe-action {
-  @apply action;
-  @apply mt-4;
   @apply bg-green-800 hover:bg-green-700 active:bg-green-600;
 }
 </style>
@@ -366,8 +406,11 @@ const closeDialog = () => {
     "email": "Email",
     "creatorInfo": "Creator Information",
     "dangerZone": "Danger Zone",
+    "dangerZoneWarning": "The actions below can have significant impacts on your creator page. Please proceed with caution.",
     "deleteWarning": "Are you sure you want to delete your creator page? This action cannot be undone.",
-    "restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again."
+    "restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again.",
+    "deleteCreatorPage": "Delete Creator Page",
+    "restoreCreatorPage": "Restore Creator Page"
   },
   "fr": {
     "personalInfo": "Informations Personnelles",
@@ -377,8 +420,11 @@ const closeDialog = () => {
     "email": "Email",
     "creatorInfo": "Informations du Créateur",
     "dangerZone": "Zone de Danger",
+    "dangerZoneWarning": "Les actions ci-dessous peuvent avoir des impacts significatifs sur votre page de créateur. Veuillez procéder avec précaution.",
     "deleteWarning": "Êtes-vous sûr de vouloir supprimer votre page de créateur ? Cette action est irréversible.",
-    "restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible."
+    "restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible.",
+    "deleteCreatorPage": "Supprimer la Page Créateur",
+    "restoreCreatorPage": "Restaurer la Page Créateur"
   },
   "es": {
     "personalInfo": "Información Personal",
@@ -388,8 +434,11 @@ const closeDialog = () => {
     "email": "Correo Electrónico",
     "creatorInfo": "Información del Creador",
     "dangerZone": "Zona de Peligro",
+    "dangerZoneWarning": "Las acciones a continuación pueden tener impactos significativos en tu página de creador. Por favor, procede con precaución.",
     "deleteWarning": "¿Estás seguro de que quieres eliminar tu página de creador? Esta acción no se puede deshacer.",
-    "restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente."
+    "restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente.",
+    "deleteCreatorPage": "Eliminar Página de Creador",
+    "restoreCreatorPage": "Restaurar Página de Creador"
   }
 }
 </i18n>