refactor(frontend): 🔥 rewrite backup UI for new page base components

Removed old split code and used the composition api to to re-write the import/export functionality of mealie.

frontend/components/Domain/User/UserAPITokenCard.vue

@@ -0,0 +1,159 @@
+<template>
+  <BaseStatCard :icon="$globals.icons.api" color="accent">
+    <template #after-heading>
+      <div class="ml-auto text-right">
+        <h2 class="body-3 grey--text font-weight-light">
+          {{ $t("settings.token.api-tokens") }}
+        </h2>
+        <h3 class="display-2 font-weight-light text--primary">
+          <small> {{ tokens.length }} </small>
+        </h3>
+      </div>
+    </template>
+    <template #bottom>
+      <v-subheader class="mb-n2">{{ $t("settings.token.active-tokens") }}</v-subheader>
+      <v-virtual-scroll height="210" item-height="70" :items="tokens" class="mt-2">
+        <template #default="{ item }">
+          <v-divider></v-divider>
+          <v-list-item @click.prevent>
+            <v-list-item-avatar>
+              <v-icon large dark color="accent">
+                {{ $globals.icons.api }}
+              </v-icon>
+            </v-list-item-avatar>
+
+            <v-list-item-content>
+              <v-list-item-title v-text="item.name"></v-list-item-title>
+            </v-list-item-content>
+
+            <v-list-item-action class="ml-auto">
+              <v-btn large icon @click.stop="deleteToken(item.id)">
+                <v-icon color="accent">{{ $globals.icons.delete }}</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+          <v-divider></v-divider>
+        </template>
+      </v-virtual-scroll>
+
+      <v-divider></v-divider>
+      <v-card-actions class="pb-1 pt-3">
+        <v-spacer></v-spacer>
+        <BaseDialog
+          :title="$t('settings.token.create-an-api-token')"
+          :title-icon="$globals.icons.api"
+          :submit-text="buttonText"
+          :loading="loading"
+          @submit="createToken(name)"
+        >
+          <v-card-text>
+            <v-form ref="domNewTokenForm" @submit.prevent>
+              <v-text-field v-model="name" :label="$t('settings.token.token-name')" required> </v-text-field>
+            </v-form>
+
+            <div v-if="createdToken != ''">
+              <v-textarea
+                v-model="createdToken"
+                class="mb-0 pb-0"
+                :label="$t('settings.token.api-token')"
+                readonly
+                :append-outer-icon="$globals.icons.contentCopy"
+                @click="copyToken"
+                @click:append-outer="copyToken"
+              >
+              </v-textarea>
+              <v-subheader class="text-center">
+                {{
+                  $t(
+                    "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
+                  )
+                }}
+              </v-subheader>
+            </div>
+          </v-card-text>
+
+          <template #activator="{ open }">
+            <BaseButton create @click="open" />
+          </template>
+        </BaseDialog>
+      </v-card-actions>
+    </template>
+  </BaseStatCard>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+const REFRESH_EVENT = "refresh";
+
+export default defineComponent({
+  props: {
+    tokens: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(_, context) {
+    const api = useApiSingleton();
+
+    const domNewTokenForm = ref<VForm | null>(null);
+
+    const createdToken = ref("");
+    const name = ref("");
+    const loading = ref(false);
+
+    function resetCreate() {
+      createdToken.value = "";
+      loading.value = false;
+      name.value = "";
+      context.emit(REFRESH_EVENT);
+    }
+
+    async function createToken(name: string) {
+      if (loading.value) {
+        resetCreate();
+        return;
+      }
+
+      loading.value = true;
+
+      if (domNewTokenForm?.value?.validate()) {
+        console.log("Created");
+        return;
+      }
+
+      const { data } = await api.users.createAPIToken({ name });
+
+      if (data) {
+        createdToken.value = data.token;
+      }
+    }
+
+    async function deleteToken(id: string | number) {
+      const { data } = await api.users.deleteAPIToken(id);
+      context.emit(REFRESH_EVENT);
+      return data;
+    }
+
+    function copyToken() {
+      navigator.clipboard.writeText(createdToken.value).then(
+        () => console.log("Copied", createdToken.value),
+        () => console.log("Copied Failed", createdToken.value)
+      );
+    }
+
+    return { createToken, deleteToken, copyToken, createdToken, loading, name };
+  },
+  computed: {
+    buttonText(): any {
+      if (this.createdToken === "") {
+        return this.$t("general.create");
+      } else {
+        return this.$t("general.close");
+      }
+    },
+  },
+});
+</script>
+