From 9386cc320bb1fb445ebf488d28ab1808338f1795 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Sat, 7 Aug 2021 15:12:25 -0800
Subject: [PATCH] refactor(frontend): :construction: Migrate Dashboard to Nuxt

Add API and Functinality for Admin Dashboard. Stills needs to clean-up. See // TODO's
---
 frontend/api/class-interfaces/_base.ts        |  10 +-
 frontend/api/class-interfaces/backups.ts      |  69 +++++++++++
 frontend/api/class-interfaces/debug.ts        |  51 ++++++++
 .../class-interfaces/event-notifications.ts   |   0
 frontend/api/class-interfaces/events.ts       |  49 ++++++++
 frontend/api/class-interfaces/groups.ts       |   4 +-
 frontend/api/class-interfaces/recipes.ts      |   5 +-
 frontend/api/class-interfaces/upload.ts       |   7 ++
 frontend/api/class-interfaces/users.ts        |   4 +-
 frontend/api/index.ts                         |  12 ++
 .../Domain/Admin/AdminBackupDialog.vue        |   4 +-
 .../Domain/Admin/AdminBackupImportDialog.vue  |  16 +--
 .../Domain/Admin/AdminBackupImportOptions.vue |  20 +++-
 .../Domain/Admin/AdminBackupViewer.vue        | 111 ++++++++++++++----
 .../Domain/Admin/AdminEventViewer.vue         |  19 ++-
 .../Domain/Recipe/RecipeCardSection.vue       |   2 +-
 .../components/Domain/Recipe/RecipeChips.vue  |   4 +-
 .../Domain/Recipe/RecipeFavoriteBadge.vue     |   1 -
 .../components/Layout/AppFloatingButton.vue   |  21 +++-
 frontend/components/Layout/TheSnackbar.vue    |  57 +++++++++
 .../components/global/AppButtonUpload.vue     |  31 ++++-
 frontend/components/global/BaseButton.vue     |  12 +-
 frontend/components/global/BaseDialog.vue     |  14 ++-
 frontend/composables/use-backups.ts           |  84 +++++++++++++
 frontend/composables/use-toast.ts             |  65 ++++++++++
 frontend/composables/use-utils.ts             |   3 +
 frontend/layouts/admin.vue                    |   5 +-
 frontend/nuxt.config.js                       |   4 +-
 frontend/pages/admin/dashboard.vue            |  76 +++++++++---
 frontend/pages/index.vue                      |  14 ++-
 frontend/pages/user/login.vue                 |   5 +-
 frontend/pages/user/sign-up.vue               |   5 +-
 32 files changed, 671 insertions(+), 113 deletions(-)
 create mode 100644 frontend/api/class-interfaces/backups.ts
 create mode 100644 frontend/api/class-interfaces/debug.ts
 create mode 100644 frontend/api/class-interfaces/event-notifications.ts
 create mode 100644 frontend/api/class-interfaces/events.ts
 create mode 100644 frontend/api/class-interfaces/upload.ts
 create mode 100644 frontend/components/Layout/TheSnackbar.vue
 create mode 100644 frontend/composables/use-backups.ts
 create mode 100644 frontend/composables/use-toast.ts
 create mode 100644 frontend/composables/use-utils.ts

diff --git a/frontend/api/class-interfaces/_base.ts b/frontend/api/class-interfaces/_base.ts
index ce034f70e8c2..e1ec27f7a3b7 100644
--- a/frontend/api/class-interfaces/_base.ts
+++ b/frontend/api/class-interfaces/_base.ts
@@ -44,15 +44,17 @@ export const crudMixins = <T>(
   return { getAll, getOne, updateOne, patchOne, deleteOne, createOne };
 };
 
-export abstract class BaseAPIClass<T, U> implements CrudAPIInterface {
+export abstract class BaseAPI {
   requests: ApiRequestInstance;
 
-  abstract baseRoute: string;
-  abstract itemRoute(itemId: string | number): string;
-
   constructor(requests: ApiRequestInstance) {
     this.requests = requests;
   }
+}
+
+export abstract class BaseCRUDAPI<T, U> extends BaseAPI implements CrudAPIInterface {
+  abstract baseRoute: string;
+  abstract itemRoute(itemId: string | number): string;
 
   async getAll(start = 0, limit = 9999) {
     return await this.requests.get<T[]>(this.baseRoute, {
diff --git a/frontend/api/class-interfaces/backups.ts b/frontend/api/class-interfaces/backups.ts
new file mode 100644
index 000000000000..b1d645ed3c41
--- /dev/null
+++ b/frontend/api/class-interfaces/backups.ts
@@ -0,0 +1,69 @@
+import { BaseAPI } from "./_base";
+
+export interface BackupOptions {
+  recipes?: boolean;
+  settings?: boolean;
+  pages?: boolean;
+  themes?: boolean;
+  groups?: boolean;
+  users?: boolean;
+  notifications?: boolean;
+}
+
+export interface ImportBackup extends BackupOptions {
+  name: string;
+}
+
+export interface BackupJob {
+  tag?: string;
+  options: BackupOptions;
+  templates?: string[];
+}
+
+export interface BackupFile {
+  name: string;
+  date: string;
+}
+
+export interface AllBackups {
+  imports: BackupFile[];
+  templates: string[];
+}
+
+const prefix = "/api";
+
+const routes = {
+  backupsAvailable: `${prefix}/backups/available`,
+  backupsExportDatabase: `${prefix}/backups/export/database`,
+  backupsUpload: `${prefix}/backups/upload`,
+
+  backupsFileNameDownload: (fileName: string) => `${prefix}/backups/${fileName}/download`,
+  backupsFileNameImport: (fileName: string) => `${prefix}/backups/${fileName}/import`,
+  backupsFileNameDelete: (fileName: string) => `${prefix}/backups/${fileName}/delete`,
+};
+
+export class BackupAPI extends BaseAPI {
+  /** Returns a list of avaiable .zip files for import into Mealie.
+   */
+  async getAll() {
+    return await this.requests.get<AllBackups>(routes.backupsAvailable);
+  }
+
+  /** Generates a backup of the recipe database in json format.
+   */
+  async createOne(payload: BackupJob) {
+    return await this.requests.post(routes.backupsExportDatabase, payload);
+  }
+
+  /** Import a database backup file generated from Mealie.
+   */
+  async restoreDatabase(fileName: string, payload: BackupOptions) {
+    return await this.requests.post(routes.backupsFileNameImport(fileName), payload);
+  }
+
+  /** Removes a database backup from the file system
+   */
+  async deleteOne(fileName: string) {
+    return await this.requests.delete(routes.backupsFileNameDelete(fileName));
+  }
+}
diff --git a/frontend/api/class-interfaces/debug.ts b/frontend/api/class-interfaces/debug.ts
new file mode 100644
index 000000000000..3bc0450dfdc3
--- /dev/null
+++ b/frontend/api/class-interfaces/debug.ts
@@ -0,0 +1,51 @@
+import { BaseAPI } from "./_base";
+
+export interface AppStatistics {
+  totalRecipes: number;
+  totalUsers: number;
+  totalGroups: number;
+  uncategorizedRecipes: number;
+  untaggedRecipes: number;
+}
+
+const prefix = "/api";
+
+const routes = {
+  debugVersion: `${prefix}/debug/version`,
+  debug: `${prefix}/debug`,
+  debugStatistics: `${prefix}/debug/statistics`,
+  debugLastRecipeJson: `${prefix}/debug/last-recipe-json`,
+  debugLog: `${prefix}/debug/log`,
+
+  debugLogNum: (num: number) => `${prefix}/debug/log/${num}`,
+};
+
+export class DebugAPI extends BaseAPI {
+  /** Returns the current version of mealie
+   */
+  async getMealieVersion() {
+    return await this.requests.get(routes.debugVersion);
+  }
+
+  /** Returns general information about the application for debugging
+   */
+  async getDebugInfo() {
+    return await this.requests.get(routes.debug);
+  }
+
+  async getAppStatistics() {
+    return await this.requests.get<AppStatistics>(routes.debugStatistics);
+  }
+
+  /** Doc Str
+   */
+  async getLog(num: number) {
+    return await this.requests.get(routes.debugLogNum(num));
+  }
+
+  /** Returns a token to download a file
+   */
+  async getLogFile() {
+    return await this.requests.get(routes.debugLog);
+  }
+}
diff --git a/frontend/api/class-interfaces/event-notifications.ts b/frontend/api/class-interfaces/event-notifications.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/frontend/api/class-interfaces/events.ts b/frontend/api/class-interfaces/events.ts
new file mode 100644
index 000000000000..c7c45e093150
--- /dev/null
+++ b/frontend/api/class-interfaces/events.ts
@@ -0,0 +1,49 @@
+import { BaseAPI } from "./_base";
+
+export type EventCategory = "general" | "recipe" | "backup" | "scheduled" | "migration" | "group" | "user";
+
+export interface Event {
+  id?: number;
+  title: string;
+  text: string;
+  timeStamp?: string;
+  category?: EventCategory & string;
+}
+
+export interface EventsOut {
+  total: number;
+  events: Event[];
+}
+
+const prefix = "/api";
+
+const routes = {
+  aboutEvents: `${prefix}/about/events`,
+  aboutEventsNotifications: `${prefix}/about/events/notifications`,
+  aboutEventsNotificationsTest: `${prefix}/about/events/notifications/test`,
+
+  aboutEventsId: (id: number) => `${prefix}/about/events/${id}`,
+  aboutEventsNotificationsId: (id: number) => `${prefix}/about/events/notifications/${id}`,
+};
+
+export class EventsAPI extends BaseAPI {
+  /** Get event from the Database
+   */
+  async getEvents() {
+    return await this.requests.get<EventsOut>(routes.aboutEvents);
+  }
+
+  /** Get event from the Database
+   */
+  async deleteEvents() {
+    return await this.requests.delete(routes.aboutEvents);
+  }
+
+  /** Delete event from the Database
+   */
+  async deleteEvent(id: number) {
+    return await this.requests.delete(routes.aboutEventsId(id));
+  }
+  /** Get all event_notification from the Database
+   */
+}
diff --git a/frontend/api/class-interfaces/groups.ts b/frontend/api/class-interfaces/groups.ts
index fb846fc351b4..87f6660b59c4 100644
--- a/frontend/api/class-interfaces/groups.ts
+++ b/frontend/api/class-interfaces/groups.ts
@@ -1,5 +1,5 @@
 import { requests } from "../requests";
-import { BaseAPIClass } from "./_base";
+import { BaseCRUDAPI } from "./_base";
 import { GroupInDB } from "~/types/api-types/user";
 
 const prefix = "/api";
@@ -15,7 +15,7 @@ export interface CreateGroup {
   name: string;
 }
 
-export class GroupAPI extends BaseAPIClass<GroupInDB, CreateGroup> {
+export class GroupAPI extends BaseCRUDAPI<GroupInDB, CreateGroup> {
   baseRoute = routes.groups;
   itemRoute = routes.groupsId;
   /** Returns the Group Data for the Current User
diff --git a/frontend/api/class-interfaces/recipes.ts b/frontend/api/class-interfaces/recipes.ts
index 147204f84cc4..061c2c5edfe6 100644
--- a/frontend/api/class-interfaces/recipes.ts
+++ b/frontend/api/class-interfaces/recipes.ts
@@ -1,4 +1,4 @@
-import { BaseAPIClass } from "./_base";
+import { BaseCRUDAPI } from "./_base";
 import { Recipe } from "~/types/api-types/admin";
 import { CreateRecipe } from "~/types/api-types/recipe";
 
@@ -18,7 +18,7 @@ const routes = {
   recipesRecipeSlugAssets: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/assets`,
 };
 
-export class RecipeAPI extends BaseAPIClass<Recipe, CreateRecipe> {
+export class RecipeAPI extends BaseCRUDAPI<Recipe, CreateRecipe> {
   baseRoute: string = routes.recipesBase;
   itemRoute = routes.recipesRecipeSlug;
 
@@ -31,6 +31,7 @@ export class RecipeAPI extends BaseAPIClass<Recipe, CreateRecipe> {
   updateImage(slug: string, fileObject: File) {
     const formData = new FormData();
     formData.append("image", fileObject);
+    // @ts-ignore
     formData.append("extension", fileObject.name.split(".").pop());
 
     return this.requests.put<any>(routes.recipesRecipeSlugImage(slug), formData);
diff --git a/frontend/api/class-interfaces/upload.ts b/frontend/api/class-interfaces/upload.ts
new file mode 100644
index 000000000000..01433803c6e3
--- /dev/null
+++ b/frontend/api/class-interfaces/upload.ts
@@ -0,0 +1,7 @@
+import { BaseAPI } from "./_base";
+
+export class UploadFile extends BaseAPI {
+  file(url: string, fileObject: any) {
+    return this.requests.post(url, fileObject);
+  }
+}
diff --git a/frontend/api/class-interfaces/users.ts b/frontend/api/class-interfaces/users.ts
index f0cd63772906..eb48026c5870 100644
--- a/frontend/api/class-interfaces/users.ts
+++ b/frontend/api/class-interfaces/users.ts
@@ -1,4 +1,4 @@
-import { BaseAPIClass } from "./_base";
+import { BaseCRUDAPI } from "./_base";
 import { UserIn, UserOut } from "~/types/api-types/user";
 
 // Interfaces
@@ -31,7 +31,7 @@ const routes = {
   usersApiTokensTokenId: (token_id: string) => `${prefix}/users/api-tokens/${token_id}`,
 };
 
-export class UserApi extends BaseAPIClass<UserOut, UserIn> {
+export class UserApi extends BaseCRUDAPI<UserOut, UserIn> {
   baseRoute: string = routes.users;
   itemRoute = (itemid: string) => routes.usersId(itemid);
 
diff --git a/frontend/api/index.ts b/frontend/api/index.ts
index ea134cdb45bb..1fc08199f2e4 100644
--- a/frontend/api/index.ts
+++ b/frontend/api/index.ts
@@ -1,6 +1,10 @@
 import { RecipeAPI } from "./class-interfaces/recipes";
 import { UserApi } from "./class-interfaces/users";
 import { GroupAPI } from "./class-interfaces/groups";
+import { DebugAPI } from "./class-interfaces/debug";
+import { EventsAPI } from "./class-interfaces/events";
+import { BackupAPI } from "./class-interfaces/backups";
+import { UploadFile } from "./class-interfaces/upload";
 import { ApiRequestInstance } from "~/types/api";
 
 class Api {
@@ -8,6 +12,10 @@ class Api {
   public recipes: RecipeAPI;
   public users: UserApi;
   public groups: GroupAPI;
+  public debug: DebugAPI;
+  public events: EventsAPI;
+  public backups: BackupAPI;
+  public upload: UploadFile;
 
   constructor(requests: ApiRequestInstance) {
     if (Api.instance instanceof Api) {
@@ -17,6 +25,10 @@ class Api {
     this.recipes = new RecipeAPI(requests);
     this.users = new UserApi(requests);
     this.groups = new GroupAPI(requests);
+    this.debug = new DebugAPI(requests);
+    this.events = new EventsAPI(requests);
+    this.backups = new BackupAPI(requests);
+    this.upload = new UploadFile(requests);
 
     Object.freeze(this);
     Api.instance = this;
diff --git a/frontend/components/Domain/Admin/AdminBackupDialog.vue b/frontend/components/Domain/Admin/AdminBackupDialog.vue
index 54bb6ad65347..fb21bd899051 100644
--- a/frontend/components/Domain/Admin/AdminBackupDialog.vue
+++ b/frontend/components/Domain/Admin/AdminBackupDialog.vue
@@ -25,7 +25,7 @@
             <v-row>
               <v-col sm="4">
                 <p>{{ $t("general.options") }}</p>
-                <AdminBackupImportOptions class="mt-5" @update-options="updateOptions" />
+                <AdminBackupImportOptions v-model="updateOptions" class="mt-5" />
               </v-col>
               <v-col>
                 <p>{{ $t("general.templates") }}</p>
@@ -47,11 +47,9 @@
 </template>
 
 <script>
-import { api } from "@/api";
 import AdminBackupImportOptions from "./AdminBackupImportOptions";
 export default {
   components: {
-    BaseDialog,
     AdminBackupImportOptions,
   },
   props: {
diff --git a/frontend/components/Domain/Admin/AdminBackupImportDialog.vue b/frontend/components/Domain/Admin/AdminBackupImportDialog.vue
index b4b6908c6d31..20cd65a69ece 100644
--- a/frontend/components/Domain/Admin/AdminBackupImportDialog.vue
+++ b/frontend/components/Domain/Admin/AdminBackupImportDialog.vue
@@ -1,3 +1,5 @@
+// TODO: Fix Download Links
+
 <template>
   <div class="text-center">
     <BaseDialog
@@ -39,7 +41,6 @@
 </template>
 
 <script>
-import { api } from "@/api";
 import AdminBackupImportOptions from "./AdminBackupImportOptions";
 const IMPORT_EVENT = "import";
 export default {
@@ -86,7 +87,7 @@ export default {
     close() {
       this.dialog = false;
     },
-    async raiseEvent() {
+    raiseEvent() {
       const eventData = {
         name: this.name,
         force: this.forceImport,
@@ -99,18 +100,9 @@ export default {
         notifications: this.options.notifications,
       };
       this.loading = true;
-      const importData = await this.importBackup(eventData);
-
-      this.$emit(IMPORT_EVENT, importData);
+      this.$emit(IMPORT_EVENT, eventData);
       this.loading = false;
     },
-    async importBackup(data) {
-      this.loading = true;
-      const response = await api.backups.import(data.name, data);
-      if (response) {
-        return response.data;
-      }
-    },
   },
 };
 </script>
diff --git a/frontend/components/Domain/Admin/AdminBackupImportOptions.vue b/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
index 4795a619a90e..fe73d2a9b082 100644
--- a/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
+++ b/frontend/components/Domain/Admin/AdminBackupImportOptions.vue
@@ -9,12 +9,28 @@
       :label="option.text"
       @change="emitValue()"
     ></v-checkbox>
+    <template v-if="importBackup">
+      <v-divider class="my-3"></v-divider>
+      <v-checkbox
+        v-model="forceImport"
+        class="mb-n4"
+        dense
+        :label="$t('settings.remove-existing-entries-matching-imported-entries')"
+        @change="emitValue()"
+      ></v-checkbox>
+    </template>
   </div>
 </template>
 
 <script>
-const UPDATE_EVENT = "update-options";
+const UPDATE_EVENT = "input";
 export default {
+  props: {
+    importBackup: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       options: {
@@ -47,6 +63,7 @@ export default {
           text: this.$t("events.notification"),
         },
       },
+      forceImport: false,
     };
   },
   mounted() {
@@ -62,6 +79,7 @@ export default {
         users: this.options.users.value,
         groups: this.options.groups.value,
         notifications: this.options.notifications.value,
+        forceImport: this.forceImport,
       });
     },
   },
diff --git a/frontend/components/Domain/Admin/AdminBackupViewer.vue b/frontend/components/Domain/Admin/AdminBackupViewer.vue
index 43ab2ff8f3f0..362990d9f092 100644
--- a/frontend/components/Domain/Admin/AdminBackupViewer.vue
+++ b/frontend/components/Domain/Admin/AdminBackupViewer.vue
@@ -1,22 +1,34 @@
 
 <template>
   <div>
-    <ImportSummaryDialog ref="report" />
-    <AdminBackupImportDialog
-      ref="import_dialog"
-      :name="selectedName"
-      :date="selectedDate"
-      @import="importBackup"
-      @delete="deleteBackup"
-    />
     <BaseDialog
-      ref="deleteBackupConfirm"
+      ref="refImportDialog"
+      :title="selectedBackup.name"
+      :icon="$globals.icons.database"
+      :submit-text="$t('general.import')"
+      :loading="loading"
+      @submit="restoreBackup"
+    >
+      <v-card-subtitle v-if="selectedBackup.date" class="mb-n3 mt-3">
+        {{ $d(new Date(selectedBackup.date), "medium") }}
+      </v-card-subtitle>
+      <v-divider></v-divider>
+      <v-card-text>
+        <AdminBackupImportOptions v-model="importOptions" import-backup class="mt-5 mb-2" />
+      </v-card-text>
+    </BaseDialog>
+
+    <BaseDialog
+      ref="refDeleteConfirmation"
       :title="$t('settings.backup.delete-backup')"
-      :message="$t('general.confirm-delete-generic')"
       color="error"
       :icon="$globals.icons.alertCircle"
-      @confirm="emitDelete()"
-    />
+      @confirm="deleteBackup(selectedBackup.name)"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
     <BaseStatCard :icon="$globals.icons.backupRestore" :color="color">
       <template #after-heading>
         <div class="ml-auto text-right">
@@ -30,7 +42,7 @@
         </div>
       </template>
       <div class="d-flex row py-3 justify-end">
-        <AppButtonUpload url="/api/backups/upload" @uploaded="getAvailableBackups">
+        <AppButtonUpload url="/api/backups/upload" @uploaded="refreshBackups">
           <template #default="{ isSelecting, onButtonClick }">
             <v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
               <v-icon left> {{ $globals.icons.upload }} </v-icon> {{ $t("general.upload") }}
@@ -39,7 +51,7 @@
         </AppButtonUpload>
         <AdminBackupDialog :color="color" />
 
-        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup">
+        <v-btn :loading="loading" class="mx-2" small color="success" @click="createBackup(null)">
           <v-icon left> {{ $globals.icons.create }} </v-icon> {{ $t("general.create") }}
         </v-btn>
       </div>
@@ -75,34 +87,83 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-import AdminBackupImportDialog from "./AdminBackupImportDialog.vue";
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import AdminBackupImportOptions from "./AdminBackupImportOptions.vue";
+import AdminBackupDialog from "./AdminBackupDialog.vue";
+import { BackupFile } from "~/api/class-interfaces/backups";
+import { useBackups } from "~/composables/use-backups";
 
 const IMPORT_EVENT = "import";
 const DELETE_EVENT = "delete";
 
+type EVENTS = "import" | "delete";
+
 export default defineComponent({
-  components: { AdminBackupImportDialog },
-  layout: "admin",
+  components: { AdminBackupImportOptions, AdminBackupDialog },
+  props: {
+    availableBackups: {
+      type: Array,
+      required: true,
+    },
+    templates: {
+      type: Array,
+      required: true,
+    },
+  },
   setup() {
-    return {};
+    const refImportDialog = ref();
+    const refDeleteConfirmation = ref();
+
+    const { refreshBackups, importBackup, createBackup, deleteBackup } = useBackups();
+
+    return {
+      btnEvent: { IMPORT_EVENT, DELETE_EVENT },
+      refImportDialog,
+      refDeleteConfirmation,
+      refreshBackups,
+      importBackup,
+      createBackup,
+      deleteBackup,
+    };
   },
   data() {
     return {
       color: "accent",
-      selectedName: "",
-      selectedDate: "",
       loading: false,
-      events: [],
-      availableBackups: [],
-      btnEvent: { IMPORT_EVENT, DELETE_EVENT },
+      selectedBackup: {
+        name: "",
+        date: "",
+      },
+      importOptions: {},
     };
   },
   computed: {
-    total() {
+    total(): number {
       return this.availableBackups.length || 0;
     },
   },
+  methods: {
+    openDialog(backup: BackupFile, event: EVENTS) {
+      this.selectedBackup = backup;
+
+      switch (event) {
+        case IMPORT_EVENT:
+          this.refImportDialog.open();
+          break;
+        case DELETE_EVENT:
+          this.refDeleteConfirmation.open();
+          break;
+      }
+    },
+    async restoreBackup() {
+      const payload = {
+        name: this.selectedBackup.name,
+        ...this.importOptions,
+      };
+
+      await this.importBackup(this.selectedBackup.name, payload);
+    },
+  },
 });
 </script>
 
diff --git a/frontend/components/Domain/Admin/AdminEventViewer.vue b/frontend/components/Domain/Admin/AdminEventViewer.vue
index 5a13affc348d..b22a8b82e310 100644
--- a/frontend/components/Domain/Admin/AdminEventViewer.vue
+++ b/frontend/components/Domain/Admin/AdminEventViewer.vue
@@ -1,3 +1,5 @@
+// TODO: Fix date/time Localization
+
 <template>
   <div>
     <!-- <BaseDialog
@@ -21,7 +23,7 @@
         </div>
       </template>
       <div class="d-flex row py-3 justify-end">
-        <v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
+        <v-btn class="mx-2" small color="error lighten-1" @click="$emit('delete-all')">
           <v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
         </v-btn>
       </div>
@@ -45,7 +47,7 @@
               </v-list-item-content>
 
               <v-list-item-action class="ml-auto">
-                <v-btn large icon @click="openDialog(item)">
+                <v-btn large icon @click="$emit('delete-item', item.id)">
                   <v-icon color="error">{{ $globals.icons.delete }}</v-icon>
                 </v-btn>
               </v-list-item-action>
@@ -62,15 +64,20 @@ import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   layout: "admin",
-  setup() {
-    return {};
+  props: {
+    events: {
+      type: Array,
+      required: true,
+    },
+    total: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
       color: "accent",
-      total: 0,
       selectedId: "",
-      events: [],
       icons: {
         general: {
           icon: this.$globals.icons.information,
diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 168948831b69..cf1d9b16da1f 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -57,7 +57,7 @@
     </v-app-bar>
     <div v-if="recipes" class="mt-2">
       <v-row v-if="!viewScale">
-        <v-col v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
+        <v-col v-for="recipe in recipes" :key="recipe.name" :sm="6" :md="6" :lg="4" :xl="3">
           <v-lazy>
             <RecipeCard
               :name="recipe.name"
diff --git a/frontend/components/Domain/Recipe/RecipeChips.vue b/frontend/components/Domain/Recipe/RecipeChips.vue
index a553a64413ae..229e274c4959 100644
--- a/frontend/components/Domain/Recipe/RecipeChips.vue
+++ b/frontend/components/Domain/Recipe/RecipeChips.vue
@@ -50,10 +50,10 @@ export default {
   },
   computed: {
     allCategories() {
-      return this.$store.getters.getAllCategories;
+      return this.$store.getters.getAllCategories || [];
     },
     allTags() {
-      return this.$store.getters.getAllTags;
+      return this.$store.getters.getAllTags || [];
     },
     urlParam() {
       return this.isCategory ? "category" : "tag";
diff --git a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
index be4a95756d5d..34025bf02790 100644
--- a/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
+++ b/frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import { api } from "@/api";
 import { defineComponent } from "@nuxtjs/composition-api";
 import { useApiSingleton } from "~/composables/use-api";
 export default defineComponent({
diff --git a/frontend/components/Layout/AppFloatingButton.vue b/frontend/components/Layout/AppFloatingButton.vue
index 5fde521a2884..9b3422792fc9 100644
--- a/frontend/components/Layout/AppFloatingButton.vue
+++ b/frontend/components/Layout/AppFloatingButton.vue
@@ -204,12 +204,14 @@ export default defineComponent({
       set(recipe_import_url: string) {
         this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
       },
-      get(): string {
+      get(): string | (string | null)[] {
         return this.$route.query.recipe_import_url || "";
       },
     },
     fileName(): string {
+      // @ts-ignore
       if (this.uploadData?.file?.name) {
+        // @ts-ignore
         return this.uploadData.file.name;
       }
       return "";
@@ -243,22 +245,31 @@ export default defineComponent({
     },
     async uploadZip() {
       const formData = new FormData();
+
+      // @ts-ignore
       formData.append(this.uploadData.fileName, this.uploadData.file);
 
-      const response = await this.api.utils.uploadFile("/api/recipes/create-from-zip", formData);
+      const { response, data } = await this.api.upload.file("/api/recipes/create-from-zip", formData);
 
-      this.$router.push(`/recipe/${response.data.slug}`);
+      if (response && response.status === 201) {
+        // @ts-ignore
+        this.$router.push(`/recipe/${data.slug}`);
+      }
     },
     async manualCreateRecipe() {
       await this.api.recipes.createOne({ name: this.createRecipeData.form.name });
     },
     async createOnByUrl() {
       this.error = false;
-      console.log(this.domImportFromUrlForm?.validate());
 
       if (this.domImportFromUrlForm?.validate()) {
         this.processing = true;
-        const response = await this.api.recipes.createOneByUrl(this.recipeURL);
+
+        let response;
+        if (typeof this.recipeURL === "string") {
+          response = await this.api.recipes.createOneByUrl(this.recipeURL);
+        }
+
         this.processing = false;
         if (response) {
           this.addRecipe = false;
diff --git a/frontend/components/Layout/TheSnackbar.vue b/frontend/components/Layout/TheSnackbar.vue
new file mode 100644
index 000000000000..c4bddb950aaa
--- /dev/null
+++ b/frontend/components/Layout/TheSnackbar.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="text-center">
+    <v-snackbar v-model="toastAlert.open" top :color="toastAlert.color" timeout="1500" @input="toastAlert.open = false">
+      <v-icon dark left>
+        {{ icon }}
+      </v-icon>
+
+      {{ toastAlert.title }}
+      {{ toastAlert.text }}
+
+      <template #action="{ attrs }">
+        <v-btn text v-bind="attrs" @click="toastAlert.open = false"> Close </v-btn>
+      </template>
+    </v-snackbar>
+    <v-snackbar
+      content-class="py-2"
+      dense
+      bottom
+      right
+      :value="toastLoading.open"
+      :timeout="-1"
+      :color="toastLoading.color"
+      @input="toastLoading.open = false"
+    >
+      <div class="d-flex flex-column align-center justify-start" @click="toastLoading.open = false">
+        <div class="mb-2 mt-0 text-subtitle-1 text-center">
+          {{ toastLoading.text }}
+        </div>
+        <v-progress-linear indeterminate color="white darken-2"></v-progress-linear>
+      </div>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import { toastAlert, toastLoading } from "~/composables/use-toast";
+
+export default {
+  setup() {
+    return { toastAlert, toastLoading };
+  },
+  computed: {
+    icon() {
+      switch (this.toastAlert.color) {
+        case "error":
+          return "mdi-alert";
+        case "success":
+          return "mdi-check-bold";
+        case "info":
+          return "mdi-information-outline";
+        default:
+          return "mdi-alert";
+      }
+    },
+  },
+};
+</script>
diff --git a/frontend/components/global/AppButtonUpload.vue b/frontend/components/global/AppButtonUpload.vue
index 25b92848936e..22ec19febce5 100644
--- a/frontend/components/global/AppButtonUpload.vue
+++ b/frontend/components/global/AppButtonUpload.vue
@@ -11,25 +11,44 @@
 </template>
 
 <script>
-import { api } from "@/api";
+import { useApiSingleton } from "~/composables/use-api";
 const UPLOAD_EVENT = "uploaded";
 export default {
   props: {
     small: {
+      type: Boolean,
       default: false,
     },
     post: {
       type: Boolean,
       default: true,
     },
-    url: String,
-    text: String,
-    icon: { default: null },
-    fileName: { default: "archive" },
+    url: {
+      type: String,
+      default: "",
+    },
+    text: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    fileName: {
+      type: String,
+      default: "archive",
+    },
     textBtn: {
+      type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const api = useApiSingleton();
+
+    return { api };
+  },
   data: () => ({
     file: null,
     isSelecting: false,
@@ -58,7 +77,7 @@ export default {
         const formData = new FormData();
         formData.append(this.fileName, this.file);
 
-        const response = await api.utils.uploadFile(this.url, formData);
+        const response = await this.api.upload.file(this.url, formData);
 
         if (response) {
           this.$emit(UPLOAD_EVENT, response);
diff --git a/frontend/components/global/BaseButton.vue b/frontend/components/global/BaseButton.vue
index 078ffce08dfb..bbfb57594f6d 100644
--- a/frontend/components/global/BaseButton.vue
+++ b/frontend/components/global/BaseButton.vue
@@ -86,32 +86,32 @@ export default {
       buttonOptions: {
         create: {
           text: "Create",
-          icon: "mdi-plus",
+          icon: this.$globals.icons.createAlt,
           color: "success",
         },
         update: {
           text: "Update",
-          icon: "mdi-edit",
+          icon: this.$globals.icons.edit,
           color: "success",
         },
         save: {
           text: "Save",
-          icon: "mdi-save",
+          icon: this.$globals.icons.save,
           color: "success",
         },
         edit: {
           text: "Edit",
-          icon: "mdi-square-edit-outline",
+          icon: this.$globals.icons.edit,
           color: "info",
         },
         delete: {
           text: "Delete",
-          icon: "mdi-delete",
+          icon: this.$globals.icons.delete,
           color: "error",
         },
         cancel: {
           text: "Cancel",
-          icon: "mdi-close",
+          icon: this.$globals.icons.cancel,
           color: "grey",
         },
       },
diff --git a/frontend/components/global/BaseDialog.vue b/frontend/components/global/BaseDialog.vue
index 7286d45a2079..88cbfa60c931 100644
--- a/frontend/components/global/BaseDialog.vue
+++ b/frontend/components/global/BaseDialog.vue
@@ -32,7 +32,15 @@
             <v-spacer></v-spacer>
 
             <BaseButton v-if="$listeners.delete" delete secondary @click="deleteEvent" />
-            <BaseButton v-if="$listeners.confirm" :color="color" type="submit" @click="$emit('confirm')">
+            <BaseButton
+              v-if="$listeners.confirm"
+              :color="color"
+              type="submit"
+              @click="
+                $emit('confirm');
+                dialog = false;
+              "
+            >
               <template #icon>
                 {{ $globals.icons.check }}
               </template>
@@ -97,10 +105,10 @@ export default defineComponent({
     };
   },
   computed: {
-    determineClose() {
+    determineClose(): Boolean {
       return this.submitted && !this.loading && !this.keepOpen;
     },
-    displayicon() {
+    displayicon(): Boolean {
       return this.icon || this.$globals.icons.user;
     },
   },
diff --git a/frontend/composables/use-backups.ts b/frontend/composables/use-backups.ts
new file mode 100644
index 000000000000..ec0baefcbcd5
--- /dev/null
+++ b/frontend/composables/use-backups.ts
@@ -0,0 +1,84 @@
+import { useAsync, ref } from "@nuxtjs/composition-api";
+import { set } from "@vueuse/core";
+import { toastLoading, loader } from "./use-toast";
+import { AllBackups, ImportBackup, BackupJob } from "~/api/class-interfaces/backups";
+import { useApiSingleton } from "~/composables/use-api";
+
+const backups = ref<AllBackups>({
+  imports: [],
+  templates: [],
+});
+
+function setBackups(newBackups: AllBackups | null) {
+  if (newBackups) {
+    set(backups, newBackups);
+  }
+}
+
+export const useBackups = function (fetch = true) {
+  const api = useApiSingleton();
+
+  function getBackups() {
+    const backups = useAsync(async () => {
+      const { data } = await api.backups.getAll();
+      return data;
+    });
+    return backups;
+  }
+
+  async function refreshBackups() {
+    const { data } = await api.backups.getAll();
+    if (data) {
+      setBackups(data);
+    }
+  }
+
+  async function createBackup(payload: BackupJob | null = null) {
+    if (payload === null) {
+      payload = {
+        tag: "",
+        templates: [],
+        options: {
+          recipes: true,
+          settings: true,
+          themes: true,
+          pages: true,
+          users: true,
+          groups: true,
+          notifications: true,
+        },
+      };
+    }
+    loader.info("Creating Backup...");
+
+    const { response } = await api.backups.createOne(payload);
+    if (response && response.status === 201) {
+      refreshBackups();
+      toastLoading.open = false;
+    }
+  }
+
+  async function deleteBackup(fileName: string) {
+    const { response } = await api.backups.deleteOne(fileName);
+
+    if (response && response.status === 200) {
+      refreshBackups();
+    }
+  }
+
+  async function importBackup(fileName: string, payload: ImportBackup) {
+    loader.info("Import Backup...");
+    const { response } = await api.backups.restoreDatabase(fileName, payload);
+
+    if (response && response.status === 200) {
+      refreshBackups();
+      loader.close();
+    }
+  }
+
+  if (fetch) {
+    refreshBackups();
+  }
+
+  return { getBackups, refreshBackups, deleteBackup, backups, importBackup, createBackup };
+};
diff --git a/frontend/composables/use-toast.ts b/frontend/composables/use-toast.ts
new file mode 100644
index 000000000000..96cfb5746ed8
--- /dev/null
+++ b/frontend/composables/use-toast.ts
@@ -0,0 +1,65 @@
+import { reactive } from "@nuxtjs/composition-api";
+
+interface Toast {
+  open: boolean;
+  text: string;
+  title: string | null;
+  color: string;
+}
+
+export const toastAlert = reactive<Toast>({
+  open: false,
+  title: null,
+  text: "Hello From The Store",
+  color: "info",
+});
+
+export const toastLoading = reactive<Toast>({
+  open: false,
+  title: null,
+  text: "Importing Backup",
+  color: "success",
+});
+
+function setToast(toast: Toast, text: string, title: string | null, color: string) {
+  toast.open = true;
+  toast.text = text;
+  toast.title = title;
+  toast.color = color;
+}
+
+export const loader = {
+  info(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "info");
+  },
+  success(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "success");
+  },
+  error(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "error");
+  },
+  warning(text: string, title: string | null = null) {
+    setToast(toastLoading, text, title, "warning");
+  },
+  close() {
+    toastLoading.open = false;
+  },
+};
+
+export const alert = {
+  info(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "info");
+  },
+  success(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "success");
+  },
+  error(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "error");
+  },
+  warning(text: string, title: string | null = null) {
+    setToast(toastAlert, text, title, "warning");
+  },
+  close() {
+    toastAlert.open = false;
+  },
+};
diff --git a/frontend/composables/use-utils.ts b/frontend/composables/use-utils.ts
new file mode 100644
index 000000000000..1dc929abaef3
--- /dev/null
+++ b/frontend/composables/use-utils.ts
@@ -0,0 +1,3 @@
+export const useAsyncKey = function () {
+  return String(Date.now());
+};
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index b04a8ebefe25..d12513520351 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -13,6 +13,8 @@
       @input="sidebar = !sidebar"
     />
 
+    <TheSnackbar />
+
     <AppHeader>
       <v-btn icon @click.stop="sidebar = !sidebar">
         <v-icon> {{ $globals.icons.menu }}</v-icon>
@@ -31,9 +33,10 @@
 import { defineComponent } from "@nuxtjs/composition-api";
 import AppHeader from "@/components/Layout/AppHeader.vue";
 import AppSidebar from "@/components/Layout/AppSidebar.vue";
+import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
 
 export default defineComponent({
-  components: { AppHeader, AppSidebar },
+  components: { AppHeader, AppSidebar, TheSnackbar },
   middleware: "auth",
   auth: true,
   setup() {
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index f1ec1d68c9f8..6f329951f195 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -212,7 +212,7 @@ export default {
           accent: "#00457A",
           secondary: "#973542",
           success: "#43A047",
-          info: "#4990BA",
+          info: "#1976d2",
           warning: "#FF4081",
           error: "#EF5350",
         },
@@ -221,7 +221,7 @@ export default {
           accent: "#00457A",
           secondary: "#973542",
           success: "#43A047",
-          info: "#4990BA",
+          info: "#1976d2",
           warning: "#FF4081",
           error: "#EF5350",
         },
diff --git a/frontend/pages/admin/dashboard.vue b/frontend/pages/admin/dashboard.vue
index 132aef481ffe..8a4220b9c42c 100644
--- a/frontend/pages/admin/dashboard.vue
+++ b/frontend/pages/admin/dashboard.vue
@@ -1,6 +1,8 @@
+// TODO: Possibly add confirmation dialog? I'm not sure that it's really requried for events...
+
 <template>
   <v-container class="mt-10">
-    <v-row>
+    <v-row v-if="statistics">
       <v-col cols="12" sm="12" md="4">
         <BaseStatCard :icon="$globals.icons.primary">
           <template #after-heading>
@@ -76,10 +78,16 @@
     </v-row>
     <v-row class="mt-10" align-content="stretch">
       <v-col cols="12" sm="12" lg="6">
-        <AdminEventViewer />
+        <AdminEventViewer
+          v-if="events"
+          :events="events.events"
+          :total="events.total"
+          @delete-all="deleteEvents"
+          @delete-item="deleteEvent"
+        />
       </v-col>
       <v-col cols="12" sm="12" lg="6">
-        <AdminBackupViewer />
+        <AdminBackupViewer v-if="backups" :available-backups="backups.imports" :templates="backups.templates" />
       </v-col>
     </v-row>
   </v-container>
@@ -87,26 +95,62 @@
 
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import AdminEventViewer from "@/components/Domain/Admin/AdminEventViewer.vue";
 import AdminBackupViewer from "@/components/Domain/Admin/AdminBackupViewer.vue";
+import { useApiSingleton } from "~/composables/use-api";
+import { useBackups } from "~/composables/use-backups";
+import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
   components: { AdminEventViewer, AdminBackupViewer },
   layout: "admin",
   setup() {
-    return {};
-  },
-  data() {
-    return {
-      statistics: {
-        totalGroups: 0,
-        totalRecipes: 0,
-        totalUsers: 0,
-        uncategorizedRecipes: 0,
-        untaggedRecipes: 0,
-      },
-    };
+    const api = useApiSingleton();
+
+    function getStatistics() {
+      const statistics = useAsync(async () => {
+        const { data } = await api.debug.getAppStatistics();
+        return data;
+      }, useAsyncKey());
+
+      return statistics;
+    }
+
+    function getEvents() {
+      const events = useAsync(async () => {
+        const { data } = await api.events.getEvents();
+        return data;
+      });
+      return events;
+    }
+
+    async function refreshEvents() {
+      const { data } = await api.events.getEvents();
+      events.value = data;
+    }
+
+    async function deleteEvent(id: number) {
+      const { response } = await api.events.deleteEvent(id);
+
+      if (response && response.status === 200) {
+        refreshEvents();
+      }
+    }
+
+    async function deleteEvents() {
+      const { response } = await api.events.deleteEvents();
+
+      if (response && response.status === 200) {
+        events.value = { events: [], total: 0 };
+      }
+    }
+
+    const { backups } = useBackups();
+    const events = getEvents();
+    const statistics = getStatistics();
+
+    return { statistics, events, deleteEvents, deleteEvent, backups };
   },
 });
 </script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 02a91fee0418..224cfd96afa9 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -9,22 +9,26 @@
 </template>
   
   <script lang="ts">
-import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
 import { useApiSingleton } from "~/composables/use-api";
-import { Recipe } from "~/types/api-types/admin";
 
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
     const api = useApiSingleton();
 
-    const recipes = ref<Recipe[] | null>([]);
-    onMounted(async () => {
+    const recipes = useAsync(async () => {
       const { data } = await api.recipes.getAll();
-      recipes.value = data;
+      return data;
     });
 
+    // const recipes = ref<Recipe[] | null>([]);
+    // onMounted(async () => {
+    //   const { data } = await api.recipes.getAll();
+    //   recipes.value = data;
+    // });
+
     return { api, recipes };
   },
 });
diff --git a/frontend/pages/user/login.vue b/frontend/pages/user/login.vue
index 61e1756081c3..4eb2c90d1780 100644
--- a/frontend/pages/user/login.vue
+++ b/frontend/pages/user/login.vue
@@ -216,11 +216,8 @@ export default defineComponent({
       formData.append("username", this.form.email);
       formData.append("password", this.form.password);
 
-      const response = await this.$auth.loginWith("local", { data: formData });
-      console.log(response);
+      await this.$auth.loginWith("local", { data: formData });
       this.loggingIn = false;
-
-      console.log(this.$auth.user);
     },
   },
 });
diff --git a/frontend/pages/user/sign-up.vue b/frontend/pages/user/sign-up.vue
index c234c6995a37..6446b96a3d83 100644
--- a/frontend/pages/user/sign-up.vue
+++ b/frontend/pages/user/sign-up.vue
@@ -105,11 +105,8 @@ export default defineComponent({
       formData.append("username", this.form.email);
       formData.append("password", this.form.password);
 
-      const response = await this.$auth.loginWith("local", { data: formData });
-      console.log(response);
+      await this.$auth.loginWith("local", { data: formData });
       this.loggingIn = false;
-
-      console.log(this.$auth.user);
     },
   },
 });