Adds delete and restore for a creator's page

frontend/src/stores/brandingStore.js

@@ -2,7 +2,7 @@
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
 import {ref, watch} from "vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 
 export const useBrandingStore = defineStore(
     'branding',
@@ -17,6 +17,7 @@ export const useBrandingStore = defineStore(
             {writeDefaults: false})
 
         const presentationInfos = ref([])
+        const router = useRouter()
         const route = useRoute()
         watch(
             () => route.params.creator,
@@ -49,7 +50,7 @@ export const useBrandingStore = defineStore(
                 const response = await client.get(`/api/creators/@${creatorAlias}`)
                 return response.data
             } catch (error) {
-                console.error(`Error fetching content: ${error}`)
+                await router.push('/');
             }
         }
 

frontend/src/stores/creatorProfileStore.js

@@ -18,7 +18,7 @@ export const useCreatorProfileStore = defineStore(
                 if (newValue) {
                     await fetchCreatorProfile();
                     if (value.value && value.value.name !== undefined) {
-                        await router.push(`/@${value.value.name}`);
+                        await router.push(`/@${value.value.slug}`);
                     } else {
                         await router.push('/');
                     }
@@ -56,9 +56,31 @@ export const useCreatorProfileStore = defineStore(
             }
         }
 
+        async function removeCreatorPage() {
+            try {
+                await client.delete(`/api/creators/@${value.value.slug}`)
+                await fetchCreatorProfile();
+            }
+            catch(error) {
+                console.error(error);
+            }
+        }
+
+        async function restoreCreatorPage() {
+            try {
+                await client.put(`/api/creators/@${value.value.slug}/restore`, {})
+                await fetchCreatorProfile();
+            }
+            catch(error) {
+                console.error(error);
+            }
+        }
+
         return {
             creator: value,
             hasCreator,
+            removeCreatorPage,
+            restoreCreatorPage,
             fetchCreatorProfile
         };
     });

frontend/src/views/creators/CreatorLayout.vue

@@ -21,6 +21,10 @@ onMounted(async () => {
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
     <div v-else>
+      <div v-if="brandingStore.value.isDeleted" 
+          class="bg-red-500 p-2 m-4 text-center font-semibold">
+        This Creator page is pending deletion. You can revert the action in your profile.
+      </div>
       <banner></banner>
       <router-view></router-view>
       <Footer></Footer>

frontend/src/views/main/SideBar.vue

@@ -70,7 +70,7 @@ function toggleLanguage() {
       <div class="side-menu-items">
 
         <template v-if="authStore.isAuthenticated">
-          <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
+          <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.slug}`">
             <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
               <span class="label">{{ t.myPage }}</span>

frontend/src/views/profile/ProfilePage.vue

@@ -276,6 +276,25 @@ const closeDialog = () => {
 
           </div>
         </div>
+
+        <div class="card">
+          <div class="card-title">Danger Zone</div>
+          <div class="content">
+            <p>
+              CAUTION: This will delete your creator page and suspend all tips and donations.
+            </p>
+            <button v-if="!creatorProfileStore.creator.isDeleted"
+                    class="danger-action"
+                    @click="creatorProfileStore.removeCreatorPage()">
+              DELETE PAGE
+            </button>
+            <button v-else
+                    class="safe-action"
+                    @click="creatorProfileStore.restoreCreatorPage()">
+              RESTORE PAGE
+            </button>
+          </div>
+        </div>
       </template>
 
     </div>
@@ -286,11 +305,24 @@ const closeDialog = () => {
 
 .action {
   @apply p-2 flex items-center w-full mb-2;
+  @apply font-sans text-base;
   @apply rounded-md;
   @apply transition duration-200 ease-in-out;
   @apply hover:bg-hutopyPrimary active:bg-hutopySecondary;
 }
 
+.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;
+}
+
 .label {
   @apply flex-none min-w-40 text-left;
 }