Chore/general UI cleanup (#764)

* unify look and feel + button validators

* Fixes #741

* add github script to mealei-next

* feat(frontend): 💄 improve user-flow for creating ingredients and units in editor

Creating a unit/food in the recipe editor will not automatically assign that to the auto-complete element on the ingredient. It also no longer needs a dialog and will show at the bottom of the menu at all times.

* fix whitespace issue with slot

* add security check to properties

* fix event refresh on delete

* remove depreciated page

* improve API token flow

* hide recipe data if not advanced user

* misc adds

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

frontend/pages/admin/dashboard.vue

@@ -137,7 +137,7 @@ export default defineComponent({
       const { response } = await api.events.deleteEvents();
 
       if (response && response.status === 200) {
-        events.value = { events: [], total: 0 };
+        refreshEvents();
       }
     }
 

frontend/pages/admin/site-settings.vue

@@ -2,29 +2,25 @@
   <v-container fluid class="narrow-container">
     <BasePageTitle divider>
       <template #header>
-        <v-img
-          max-height="200"
-          max-width="150"
-          class="mb-2"
-          :src="require('~/static/svgs/admin-site-settings.svg')"
-        ></v-img>
+        <v-img max-height="200" max-width="150" :src="require('~/static/svgs/admin-site-settings.svg')"></v-img>
       </template>
       <template #title> {{ $t("settings.site-settings") }} </template>
     </BasePageTitle>
 
     <section>
-      <BaseCardSectionTitle :icon="$globals.icons.cog" title="General Configuration"> </BaseCardSectionTitle>
-      <v-card class="mb-4">
+      <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(appConfig.baseUrlSet)">
-              {{ appConfig.baseUrlSet ? $globals.icons.checkboxMarkedCircle : $globals.icons.close }}
+            <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(appConfig.baseUrlSet)"> Server Side Base URL </v-list-item-title>
-            <v-list-item-subtitle :class="getTextClass(appConfig.baseUrlSet)">
-              {{ appConfig.baseUrlSet ? "Ready" : "Not Ready - `BASE_URL` still default on API Server" }}
+            <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>
@@ -82,6 +78,13 @@ import { CheckAppConfig } from "~/api/admin/admin-about";
 import { useAdminApi, useApiSingleton } from "~/composables/use-api";
 import { validators } from "~/composables/use-validators";
 
+interface SimpleCheck {
+  status: boolean;
+  text: string;
+  successText: string;
+  errorText: string;
+}
+
 export default defineComponent({
   layout: "admin",
   setup() {
@@ -96,6 +99,7 @@ export default defineComponent({
     const appConfig = ref<CheckAppConfig>({
       emailReady: false,
       baseUrlSet: false,
+      isSiteSecure: false,
     });
 
     const api = useApiSingleton();
@@ -107,6 +111,29 @@ export default defineComponent({
       if (data) {
         appConfig.value = data;
       }
+
+      appConfig.value.isSiteSecure = isLocalhostorHttps();
+    });
+
+    function isLocalhostorHttps() {
+      return window.location.hostname === "localhost" || window.location.protocol === "https:";
+    }
+
+    const simpleChecks = computed<SimpleCheck[]>(() => {
+      return [
+        {
+          status: appConfig.value.baseUrlSet,
+          text: "Server Side Base URL",
+          errorText: "Error - `BASE_URL` still default on API Server",
+          successText: "Server Side URL does not match the default",
+        },
+        {
+          status: appConfig.value.isSiteSecure,
+          text: "Secure Site",
+          errorText: "Error - Serve via localhost or secure with https.",
+          successText: "Site is accessed by localhost or https",
+        },
+      ];
     });
 
     async function testEmail() {
@@ -147,6 +174,7 @@ export default defineComponent({
     }
 
     return {
+      simpleChecks,
       getColor,
       getTextClass,
       appConfig,

frontend/pages/admin/toolbox/organize.vue

@@ -1,24 +0,0 @@
-<template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="Organize Recipes"> </BaseCardSectionTitle>
-  </v-container>
-</template>
-    
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
-
-export default defineComponent({
-  layout: "admin",
-  setup() {
-    return {};
-  },
-  head() {
-    return {
-      title: this.$t("settings.organize") as string,
-    };
-  },
-});
-</script>
-    
-<style scoped>
-</style>

frontend/pages/recipe/create.vue

@@ -27,6 +27,7 @@
                   <v-text-field
                     v-model="recipeUrl"
                     :label="$t('new-recipe.recipe-url')"
+                    :prepend-inner-icon="$globals.icons.link"
                     validate-on-blur
                     autofocus
                     filled
@@ -40,7 +41,7 @@
                 </v-card-text>
                 <v-card-actions class="justify-center">
                   <div style="width: 250px">
-                    <BaseButton rounded block type="submit" :loading="loading" />
+                    <BaseButton :disabled="recipeUrl === null" rounded block type="submit" :loading="loading" />
                   </div>
                 </v-card-actions>
               </v-card>
@@ -86,6 +87,7 @@
                   <v-text-field
                     v-model="newRecipeName"
                     :label="$t('recipe.recipe-name')"
+                    :prepend-inner-icon="$globals.icons.primary"
                     validate-on-blur
                     autofocus
                     filled
@@ -100,7 +102,13 @@
               </v-card-text>
               <v-card-actions class="justify-center">
                 <div style="width: 250px">
-                  <BaseButton rounded block :loading="loading" @click="createByName(newRecipeName)" />
+                  <BaseButton
+                    :disabled="newRecipeName === ''"
+                    rounded
+                    block
+                    :loading="loading"
+                    @click="createByName(newRecipeName)"
+                  />
                 </div>
               </v-card-actions>
             </v-card>
@@ -131,7 +139,14 @@
                 </v-card-text>
                 <v-card-actions class="justify-center">
                   <div style="width: 250px">
-                    <BaseButton large rounded block :loading="loading" @click="createByZip" />
+                    <BaseButton
+                      :disabled="newRecipeZip === null"
+                      large
+                      rounded
+                      block
+                      :loading="loading"
+                      @click="createByZip"
+                    />
                   </div>
                 </v-card-actions>
               </v-card>
@@ -142,7 +157,7 @@
           <v-tab-item value="debug" eager>
             <v-form ref="domUrlForm" @submit.prevent="debugUrl(recipeUrl)">
               <v-card flat>
-                <v-card-title class="headline"> Recipe Importer </v-card-title>
+                <v-card-title class="headline"> Recipe Debugger </v-card-title>
                 <v-card-text>
                   Grab the URL of the recipe you want to debug and paste it here. The URL will be scraped by the recipe
                   scraper and the results will be displayed. If you don't see any data returned, the site you are trying
@@ -151,6 +166,7 @@
                     v-model="recipeUrl"
                     :label="$t('new-recipe.recipe-url')"
                     validate-on-blur
+                    :prepend-inner-icon="$globals.icons.link"
                     autofocus
                     filled
                     clearable
@@ -163,7 +179,14 @@
                 </v-card-text>
                 <v-card-actions class="justify-center">
                   <div style="width: 250px">
-                    <BaseButton rounded block type="submit" color="info" :loading="loading">
+                    <BaseButton
+                      :disabled="recipeUrl === null"
+                      rounded
+                      block
+                      type="submit"
+                      color="info"
+                      :loading="loading"
+                    >
                       <template #icon>
                         {{ $globals.icons.robot }}
                       </template>

frontend/pages/user/profile/api-tokens.vue

@@ -20,9 +20,7 @@
               class="mb-0 pb-0"
               :label="$t('settings.token.api-token')"
               readonly
-              :append-outer-icon="$globals.icons.contentCopy"
-              @click="copyToken"
-              @click:append-outer="copyToken"
+              rows="3"
             >
             </v-textarea>
             <v-subheader class="text-center">
@@ -34,13 +32,14 @@
             </v-subheader>
           </template>
         </v-card-text>
-        <v-expand-transition>
-          <v-card-actions v-show="name != ''">
-            <v-spacer></v-spacer>
-            <BaseButton v-if="createdToken" cancel @click="resetCreate()"> Close </BaseButton>
-            <BaseButton v-else :cancel="false" @click="createToken(name)"> Generate </BaseButton>
-          </v-card-actions>
-        </v-expand-transition>
+        <v-card-actions>
+          <BaseButton v-if="createdToken" cancel @click="resetCreate()"> Close </BaseButton>
+          <v-spacer></v-spacer>
+          <AppButtonCopy v-if="createdToken" :icon="false" color="info" :copy-text="createdToken"> </AppButtonCopy>
+          <BaseButton v-else key="generate-button" :disabled="name == ''" @click="createToken(name)">
+            Generate
+          </BaseButton>
+        </v-card-actions>
       </v-card>
     </section>
     <BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
@@ -117,14 +116,7 @@ export default defineComponent({
       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, user, resetCreate };
+    return { createToken, deleteToken, createdToken, loading, name, user, resetCreate };
   },
   head() {
     return {

frontend/pages/user/profile/index.vue

@@ -108,7 +108,7 @@
             See who's in your group and manage their permissions.
           </UserProfileLinkCard>
         </v-col>
-        <v-col cols="12" sm="12" md="6">
+        <v-col v-if="user.advanced" cols="12" sm="12" md="6">
           <UserProfileLinkCard
             :link="{ text: 'Manage Recipe Data', to: '/user/group/recipe-data' }"
             :image="require('~/static/svgs/manage-recipes.svg')"