Adds delete and restore for a creator's page

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;
 }