feat: ✨ add user recipe export functionality (#845)

* feat(frontend): ✨ add user recipe export functionality

* remove depreciated folders

* change/remove depreciated folders

* add testing variable in config

* add GUID support for group_id

* improve testing feedback on 422 errors

* remove/cleanup files/folders

* initial user export support

* delete unused css

* update backup page UI

* remove depreciated settings

* feat: ✨ export download links

* fix #813

* remove top level statements

* show footer

* add export purger to scheduler

* update purge glob

* fix meal-planner lockout

* feat: ✨ add bulk delete/purge exports

* style(frontend): 💄 update UI for site settings

* feat: ✨ add version checker

* update documentation

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/pages/admin/backups.vue

@@ -2,7 +2,7 @@
 <template>
   <v-container fluid>
     <section>
-      <BaseCardSectionTitle title="Mealie Backups"> </BaseCardSectionTitle>
+      <BaseCardSectionTitle title="Site Backups"> </BaseCardSectionTitle>
 
       <!-- Delete Dialog -->
       <BaseDialog
@@ -25,7 +25,6 @@
         :submit-text="$t('general.import')"
         @submit="importBackup()"
       >
-        <!-- <v-card-subtitle v-if="date" class="mb-n3 mt-3"> {{ $d(new Date(date), "medium") }} </v-card-subtitle> -->
         <v-divider></v-divider>
         <v-card-text>
           <AdminBackupImportOptions v-model="selected.options" class="mt-5 mb-2" :import-backup="true" />
@@ -34,73 +33,74 @@
         <v-divider></v-divider>
       </BaseDialog>
 
-      <v-toolbar flat color="background" class="justify-between">
-        <BaseButton class="mr-2" @click="createBackup(null)" />
-        <!-- Backup Creation Dialog -->
-        <BaseDialog
-          v-model="createDialog"
-          :title="$t('settings.backup.create-heading')"
-          :icon="$globals.icons.database"
-          :submit-text="$t('general.create')"
-          @submit="createBackup"
-        >
-          <template #activator="{ open }">
-            <BaseButton secondary @click="open"> {{ $t("general.custom") }}</BaseButton>
-          </template>
-
-          <v-divider></v-divider>
+      <v-card outlined>
+        <v-card-title class="py-2"> {{ $t("settings.backup.create-heading") }} </v-card-title>
+        <v-divider class="mx-2"></v-divider>
+        <v-form @submit.prevent="createBackup()">
           <v-card-text>
-            <v-text-field v-model="backupOptions.tag" :label="$t('settings.backup.backup-tag')"> </v-text-field>
-            <AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
-            <v-divider class="my-3"></v-divider>
-            <p class="text-uppercase">Templates</p>
-            <v-checkbox
-              v-for="(template, index) in backups.templates"
-              :key="index"
-              v-model="backupOptions.templates"
-              :value="template"
-              :label="template"
-            ></v-checkbox>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores molestiae alias incidunt fugiat!
+            Recusandae natus numquam iusto voluptates deserunt quia? Sed voluptate rem facilis tempora, perspiciatis
+            corrupti dolore obcaecati laudantium!
+            <div style="max-width: 300px">
+              <v-text-field
+                v-model="backupOptions.tag"
+                class="mt-4"
+                :label="$t('settings.backup.backup-tag') + ' (optional)'"
+              >
+              </v-text-field>
+              <AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
+              <v-divider class="my-3"></v-divider>
+            </div>
+            <v-card-actions>
+              <BaseButton type="submit"> </BaseButton>
+            </v-card-actions>
           </v-card-text>
-        </BaseDialog>
-      </v-toolbar>
+        </v-form>
+      </v-card>
 
-      <v-data-table
-        :headers="headers"
-        :items="backups.imports || []"
-        class="elevation-0"
-        hide-default-footer
-        disable-pagination
-        :search="search"
-        @click:row="setSelected"
-      >
-        <template #item.date="{ item }">
-          {{ $d(Date.parse(item.date), "medium") }}
-        </template>
-        <template #item.actions="{ item }">
-          <BaseButton
-            small
-            class="mx-1"
-            delete
-            @click.stop="
-              deleteDialog = true;
-              deleteTarget = item.name;
-            "
-          />
-          <BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop />
-        </template>
-      </v-data-table>
-      <v-divider></v-divider>
-      <div class="mt-4 d-flex justify-end">
-        <AppButtonUpload
-          :text-btn="false"
-          class="mr-4"
-          url="/api/backups/upload"
-          accept=".zip"
-          color="info"
-          @uploaded="refreshBackups()"
-        />
-      </div>
+      <section class="mt-5">
+        <BaseCardSectionTitle title="Backups"></BaseCardSectionTitle>
+        <v-data-table
+          :headers="headers"
+          :items="backups.imports || []"
+          class="elevation-0"
+          hide-default-footer
+          disable-pagination
+          :search="search"
+          @click:row="setSelected"
+        >
+          <template #item.date="{ item }">
+            {{ $d(Date.parse(item.date), "medium") }}
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn
+              icon
+              class="mx-1"
+              color="error"
+              @click.stop="
+                deleteDialog = true;
+                deleteTarget = item.name;
+              "
+            >
+              <v-icon> {{ $globals.icons.delete }} </v-icon>
+            </v-btn>
+            <BaseButton small download :download-url="backupsFileNameDownload(item.name)" @click.stop />
+          </template>
+        </v-data-table>
+        <v-divider></v-divider>
+        <div class="d-flex justify-end mt-6">
+          <div>
+            <AppButtonUpload
+              :text-btn="false"
+              class="mr-4"
+              url="/api/backups/upload"
+              accept=".zip"
+              color="info"
+              @uploaded="refreshBackups()"
+            />
+          </div>
+        </div>
+      </section>
     </section>
   </v-container>
 </template>

frontend/pages/admin/site-settings.vue

@@ -10,64 +10,49 @@
     <section>
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General Configuration">
       </BaseCardSectionTitle>
-      <v-card v-for="(check, idx) in simpleChecks" :key="idx" class="mb-4">
-        <v-list-item>
-          <v-list-item-avatar>
-            <v-icon :color="getColor(check.status)">
-              {{ check.status ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
-            </v-icon>
-          </v-list-item-avatar>
-          <v-list-item-content>
-            <v-list-item-title :class="getTextClass(check.status)"> {{ check.text }} </v-list-item-title>
-            <v-list-item-subtitle :class="getTextClass(check.status)">
-              {{ check.status ? check.successText : check.errorText }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </v-card>
+
+      <v-alert
+        v-for="(check, idx) in simpleChecks"
+        :key="idx"
+        border="left"
+        colored-border
+        :type="getColor(check.status, check.warning)"
+        elevation="2"
+      >
+        <div class="font-weight-medium">{{ check.text }}</div>
+        <div>
+          {{ check.status ? check.successText : check.errorText }}
+        </div>
+      </v-alert>
     </section>
     <section>
-      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.email" title="Email Configuration">
-      </BaseCardSectionTitle>
-      <v-card>
-        <v-card-text>
-          <v-list-item>
-            <v-list-item-avatar>
-              <v-icon :color="getColor(appConfig.emailReady)">
-                {{ appConfig.emailReady ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
-              </v-icon>
-            </v-list-item-avatar>
-            <v-list-item-content>
-              <v-list-item-title :class="getTextClass(appConfig.emailReady)">
-                Email Configuration Status
-              </v-list-item-title>
-              <v-list-item-subtitle :class="getTextClass(appConfig.emailReady)">
-                {{ appConfig.emailReady ? "Ready" : "Not Ready - Check Env Variables" }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-          <v-card-actions>
-            <v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
-            </v-text-field>
-            <BaseButton
-              color="info"
-              :disabled="!appConfig.emailReady || !validEmail"
-              :loading="loading"
-              @click="testEmail"
-            >
-              <template #icon> {{ $globals.icons.email }} </template>
-              {{ $t("general.test") }}
-            </BaseButton>
-          </v-card-actions>
-        </v-card-text>
-        <template v-if="tested">
-          <v-divider class="my-x"></v-divider>
-          <v-card-text>
-            Email Test Result: {{ success ? "Succeeded" : "Failed" }}
-            <div>Errors: {{ error }}</div>
-          </v-card-text>
-        </template>
-      </v-card>
+      <BaseCardSectionTitle class="pt-2" :icon="$globals.icons.email" title="Email Configuration" />
+      <v-alert :key="idx" border="left" colored-border :type="getColor(appConfig.emailReady)" elevation="2">
+        <div class="font-weight-medium">Email Configuration Status</div>
+        <div>
+          {{ appConfig.emailReady ? "Ready" : "Not Ready - Check Environmental Variables" }}
+        </div>
+        <div>
+          <v-text-field v-model="address" class="mr-4" :label="$t('user.email')" :rules="[validators.email]">
+          </v-text-field>
+          <BaseButton
+            color="info"
+            :disabled="!appConfig.emailReady || !validEmail"
+            :loading="loading"
+            @click="testEmail"
+          >
+            <template #icon> {{ $globals.icons.email }} </template>
+            {{ $t("general.test") }}
+          </BaseButton>
+          <template v-if="tested">
+            <v-divider class="my-x"></v-divider>
+            <v-card-text>
+              Email Test Result: {{ success ? "Succeeded" : "Failed" }}
+              <div>Errors: {{ error }}</div>
+            </v-card-text>
+          </template>
+        </div>
+      </v-alert>
     </section>
     <section class="mt-4">
       <BaseCardSectionTitle class="pb-0" :icon="$globals.icons.cog" title="General About"> </BaseCardSectionTitle>
@@ -101,7 +86,7 @@ import {
   useAsync,
   useContext,
 } from "@nuxtjs/composition-api";
-import { CheckAppConfig } from "~/api/admin/admin-about";
+import { AdminAboutInfo, CheckAppConfig } from "~/api/admin/admin-about";
 import { useAdminApi, useUserApi } from "~/composables/api";
 import { validators } from "~/composables/use-validators";
 import { useAsyncKey } from "~/composables/use-utils";
@@ -128,6 +113,7 @@ export default defineComponent({
       emailReady: false,
       baseUrlSet: false,
       isSiteSecure: false,
+      isUpToDate: false,
       ldapReady: false,
     });
 
@@ -151,22 +137,34 @@ export default defineComponent({
     const simpleChecks = computed<SimpleCheck[]>(() => {
       return [
         {
-          status: appConfig.value.baseUrlSet,
-          text: "Server Side Base URL",
-          errorText: "`BASE_URL` still default on API Server",
-          successText: "Server Side URL does not match the default",
+          status: appConfig.value.isUpToDate,
+          text: "Application Version",
+          errorText: `Your current version (${rawAppInfo.value.version}) does not match the latest release. Considering updating to the latest version (${rawAppInfo.value.versionLatest}).`,
+          successText: "Mealie is up to date",
+          warning: true,
         },
         {
           status: appConfig.value.isSiteSecure,
           text: "Secure Site",
-          errorText: "Serve via localhost or secure with https.",
+          errorText: "Serve via localhost or secure with https. Clipboard and additional browser APIs may not work.",
           successText: "Site is accessed by localhost or https",
+          warning: false,
+        },
+        {
+          status: appConfig.value.baseUrlSet,
+          text: "Server Side Base URL",
+          errorText:
+            "`BASE_URL` is still the default value on API Server. This will cause issues with notifications links generated on the server for emails, etc.",
+          successText: "Server Side URL does not match the default",
+          warning: false,
         },
         {
           status: appConfig.value.ldapReady,
           text: "LDAP Ready",
-          errorText: "Not all LDAP Values are configured",
+          errorText:
+            "Not all LDAP Values are configured. This can be ignored if you are not using LDAP Authentication.",
           successText: "Required LDAP variables are all set.",
+          warning: true,
         },
       ];
     });
@@ -201,23 +199,30 @@ export default defineComponent({
       return false;
     });
 
-    function getTextClass(booly: boolean | any) {
-      return booly ? "success--text" : "error--text";
-    }
-    function getColor(booly: boolean | any) {
-      return booly ? "success" : "error";
+    function getColor(booly: boolean | any, warning = false) {
+      const falsey = warning ? "warning" : "error";
+      return booly ? "success" : falsey;
     }
 
     // ============================================================
     // General About Info
+
     // @ts-ignore
     const { $globals, i18n } = useContext();
 
+    // @ts-ignore
+    const rawAppInfo = ref<AdminAboutInfo>({
+      version: "null",
+      versionLatest: "null",
+    });
+
     function getAppInfo() {
       const statistics = useAsync(async () => {
         const { data } = await adminApi.about.about();
 
         if (data) {
+          rawAppInfo.value = data;
+
           const prettyInfo = [
             {
               name: i18n.t("about.version"),
@@ -275,7 +280,6 @@ export default defineComponent({
     return {
       simpleChecks,
       getColor,
-      getTextClass,
       appConfig,
       validEmail,
       validators,