From 909bc85205c21110734b8295a86fc7ac3af819db Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 30 Oct 2021 15:46:44 -0800
Subject: [PATCH] Chore/general UI cleanup (#764)

* unify look and feel + button validators

* Fixes #741

* add github script to mealei-next

* feat(frontend): :lipstick: 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>
---
 dev/scripts/github_get_release_issues.py      | 32 ++++++++++
 docs/docs/changelog/v1.0.0.md                 | 13 +++-
 frontend/api/admin/admin-about.ts             |  1 +
 .../Recipe/RecipeCategoryTagSelector.vue      |  1 +
 .../Domain/Recipe/RecipeIngredientEditor.vue  | 59 ++++++++++++++-----
 .../Recipe/RecipeIngredientFoodDialog.vue     | 38 ------------
 .../Recipe/RecipeIngredientUnitDialog.vue     | 40 -------------
 frontend/components/Layout/AppSidebar.vue     | 12 +---
 .../global/BaseCardSectionTitle.vue           |  2 +-
 frontend/layouts/admin.vue                    |  5 --
 frontend/pages/admin/dashboard.vue            |  2 +-
 frontend/pages/admin/site-settings.vue        | 54 +++++++++++++----
 frontend/pages/admin/toolbox/organize.vue     | 24 --------
 frontend/pages/recipe/create.vue              | 33 +++++++++--
 frontend/pages/user/profile/api-tokens.vue    | 28 ++++-----
 frontend/pages/user/profile/index.vue         |  2 +-
 mealie/routes/about/events.py                 |  3 +-
 17 files changed, 177 insertions(+), 172 deletions(-)
 create mode 100644 dev/scripts/github_get_release_issues.py
 delete mode 100644 frontend/components/Domain/Recipe/RecipeIngredientFoodDialog.vue
 delete mode 100644 frontend/components/Domain/Recipe/RecipeIngredientUnitDialog.vue
 delete mode 100644 frontend/pages/admin/toolbox/organize.vue

diff --git a/dev/scripts/github_get_release_issues.py b/dev/scripts/github_get_release_issues.py
new file mode 100644
index 00000000..5cc5fca7
--- /dev/null
+++ b/dev/scripts/github_get_release_issues.py
@@ -0,0 +1,32 @@
+import json
+
+import requests
+from pydantic import BaseModel
+
+
+class GithubIssue(BaseModel):
+    url: str
+    number: int
+    title: str
+
+
+def get_issues_by_label(label="fixed-pending-release") -> list[GithubIssue]:
+
+    issues_url = f"https://api.github.com/repos/hay-kot/mealie/issues?labels={label}"
+
+    response = requests.get(issues_url)
+    issues = json.loads(response.text)
+    return [GithubIssue(**issue) for issue in issues]
+
+
+def format_markdown_list(issues: list[GithubIssue]) -> str:
+    return "\n".join(f"- [{issue.number}]({issue.url}) - {issue.title}" for issue in issues)
+
+
+def main() -> None:
+    issues = get_issues_by_label()
+    print(format_markdown_list(issues))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/docs/docs/changelog/v1.0.0.md b/docs/docs/changelog/v1.0.0.md
index 4310de28..a3a226ec 100644
--- a/docs/docs/changelog/v1.0.0.md
+++ b/docs/docs/changelog/v1.0.0.md
@@ -15,7 +15,11 @@
 - Mealie has gone through a big redesign and has tried to standardize it's look a feel a bit more across the board.
 - User/Group settings are now completely separated from the Administration page.
 - All settings and configurations pages now have some sort of self-documenting help text. Additional text or descriptions are welcome from PRs
-- Site settings now has status on whether or not some ENV variables have been configured correctly. 
+- Site settings now has status on whether or not some ENV variables have been configured correctly.
+    - Server Side Bare URL will let you know if the BASE_URL env variable has been set
+    - Secure Site let's you know if you're serving via HTTPS or accessing by localhost. accessing without a secure site will render some of the features unusable. 
+    - Email Configuration Status will let you know if all the email settings have been provided and offer a way to send test emails.
+
 
 ### 👨‍👩‍👧‍👦 Users and Groups
 - Recipes are now only viewable by group members
@@ -33,10 +37,17 @@
 - Add Recipes or Notes to a specific day
 
 ### 🥙 Recipes
+- You can now import multiple URLs at a time pre-tagged using the bulk importer. This task runs in the background so no need to wait for it to finish. 
 - Foods/Units for Ingredients are now supported (toggle inside your recipe settings)
+- You can no use Natural Language Processing (NLP) to process ingredients and attempt to parse them into amounts, units, and foods. There additional is a "Brute Force" processor that can be used to use a pattern matching parser to try and determine ingredients. **Note** if you are processing a Non-English language you will have terrible results with the NLP and will likely need to use the Bruce Force processor.
 - Common Food and Units come pre-packaged with Mealie
 - Recipes can now scale when Food/Units are properly defined
 - Landscape and Portrait views is now available
+- Users with the advanced flag turned on will not be able to manage recipe data in bulk and perform the following actions:
+    - Set Categories
+    - Set Tags
+    - Delete Recipes
+    - Export Recipes
 
 ### ⚠️ Other things to know...
 - Themes have been depreciated for specific users. You can still set specific themes for your site through ENV variables. This approach should yield much better results for performance and some weirdness users have experienced.
diff --git a/frontend/api/admin/admin-about.ts b/frontend/api/admin/admin-about.ts
index 8d54032b..01517f7e 100644
--- a/frontend/api/admin/admin-about.ts
+++ b/frontend/api/admin/admin-about.ts
@@ -30,6 +30,7 @@ export interface AdminStatistics {
 export interface CheckAppConfig {
   emailReady: boolean;
   baseUrlSet: boolean;
+  isSiteSecure: boolean;
 }
 
 export class AdminAboutAPI extends BaseAPI {
diff --git a/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue b/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
index c7874b4a..96d2314c 100644
--- a/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
+++ b/frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue
@@ -15,6 +15,7 @@
     :hint="hint"
     :solo="solo"
     :return-object="returnObject"
+    :prepend-inner-icon="$globals.icons.tags"
     :flat="flat"
     v-bind="$attrs"
     @input="emitChange"
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index 2b7a1519..c6fd9924 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -5,7 +5,7 @@
       v-model="value.title"
       dense
       hide-details
-      class="mx-1 mb-4"
+      class="mx-1 mt-3 mb-4"
       placeholder="Section Title"
       style="max-width: 500px"
     >
@@ -29,6 +29,7 @@
       <v-col v-if="!disableAmount && units" sm="12" md="3" cols="12">
         <v-autocomplete
           v-model="value.unit"
+          :search-input.sync="unitSearch"
           hide-details
           dense
           solo
@@ -38,14 +39,19 @@
           class="mx-1"
           placeholder="Choose Unit"
         >
-          <template #no-data>
-            <RecipeIngredientUnitDialog class="mx-2" block small />
+          <template #append-item>
+            <div class="px-2">
+              <BaseButton block small @click="createAssignUnit()"></BaseButton>
+            </div>
           </template>
         </v-autocomplete>
       </v-col>
+
+      <!-- Foods Input -->
       <v-col v-if="!disableAmount && foods" m="12" md="3" cols="12" class="">
         <v-autocomplete
           v-model="value.food"
+          :search-input.sync="foodSearch"
           hide-details
           dense
           solo
@@ -55,8 +61,10 @@
           class="mx-1 py-0"
           placeholder="Choose Food"
         >
-          <template #no-data>
-            <RecipeIngredientFoodDialog class="mx-2" block small />
+          <template #append-item>
+            <div class="px-2">
+              <BaseButton block small @click="createAssignFood()"></BaseButton>
+            </div>
           </template>
         </v-autocomplete>
       </v-col>
@@ -86,15 +94,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
-import RecipeIngredientUnitDialog from "./RecipeIngredientUnitDialog.vue";
-import RecipeIngredientFoodDialog from "./RecipeIngredientFoodDialog.vue";
+import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
 import { useFoods } from "~/composables/use-recipe-foods";
 import { useUnits } from "~/composables/use-recipe-units";
 import { validators } from "~/composables/use-validators";
 
 export default defineComponent({
-  components: { RecipeIngredientUnitDialog, RecipeIngredientFoodDialog },
   props: {
     value: {
       type: Object,
@@ -108,8 +113,28 @@ export default defineComponent({
   setup(props) {
     const { value } = props;
 
-    const { foods } = useFoods();
+    // ==================================================
+    // Foods
+    const { foods, workingFoodData, actions: foodActions } = useFoods();
+    const foodSearch = ref("");
+
+    async function createAssignFood() {
+      workingFoodData.name = foodSearch.value;
+      await foodActions.createOne();
+      value.food = foods.value?.find((food) => food.name === foodSearch.value);
+    }
+
+    // ==================================================
+    // Units
     const { units, workingUnitData, actions: unitActions } = useUnits();
+    const unitSearch = ref("");
+
+    async function createAssignUnit() {
+      workingUnitData.name = unitSearch.value;
+      await unitActions.createOne();
+      value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
+      console.log(value.unit);
+    }
 
     const state = reactive({
       showTitle: false,
@@ -126,13 +151,17 @@ export default defineComponent({
     }
 
     return {
-      workingUnitData,
-      unitActions,
-      validators,
-      foods,
-      units,
       ...toRefs(state),
+      createAssignFood,
+      createAssignUnit,
+      foods,
+      foodSearch,
       toggleTitle,
+      unitActions,
+      units,
+      unitSearch,
+      validators,
+      workingUnitData,
     };
   },
 });
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientFoodDialog.vue b/frontend/components/Domain/Recipe/RecipeIngredientFoodDialog.vue
deleted file mode 100644
index b14c0cb6..00000000
--- a/frontend/components/Domain/Recipe/RecipeIngredientFoodDialog.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <BaseDialog
-    title="Create Food"
-    :icon="$globals.icons.foods"
-    :keep-open="!validForm"
-    @submit="actions.createOne(domCreateFoodForm)"
-  >
-    <v-card-text>
-      <v-form ref="domCreateFoodForm">
-        <v-text-field v-model="workingFoodData.name" label="Name" :rules="[validators.required]"></v-text-field>
-        <v-text-field v-model="workingFoodData.description" label="Description"></v-text-field>
-      </v-form>
-    </v-card-text>
-    <template #activator="{ open }">
-      <BaseButton
-        v-bind="$attrs"
-        @click="
-          actions.resetWorking();
-          open();
-        "
-      ></BaseButton>
-    </template>
-  </BaseDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { useFoods } from "~/composables/use-recipe-foods";
-import { validators } from "~/composables/use-validators";
-export default defineComponent({
-  setup() {
-    const domCreateFoodForm = ref(null);
-    const { workingFoodData, actions, validForm } = useFoods();
-    return { validators, workingFoodData, actions, domCreateFoodForm, validForm };
-  },
-});
-</script>
-
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientUnitDialog.vue b/frontend/components/Domain/Recipe/RecipeIngredientUnitDialog.vue
deleted file mode 100644
index 47471451..00000000
--- a/frontend/components/Domain/Recipe/RecipeIngredientUnitDialog.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <BaseDialog
-    title="Create Unit"
-    :icon="$globals.icons.units"
-    :keep-open="!validForm"
-    @submit="actions.createOne(domCreateUnitForm)"
-  >
-    <v-card-text>
-      <v-form ref="domCreateUnitForm">
-        <v-text-field v-model="workingUnitData.name" label="Name" :rules="[validators.required]"></v-text-field>
-        <v-text-field v-model="workingUnitData.abbreviation" label="Abbreviation"></v-text-field>
-        <v-text-field v-model="workingUnitData.description" label="Description"></v-text-field>
-        <v-switch v-model="workingUnitData.fraction" label="Display as Fraction"></v-switch>
-      </v-form>
-    </v-card-text>
-    <template #activator="{ open }">
-      <BaseButton
-        v-bind="$attrs"
-        @click="
-          actions.resetWorking();
-          open();
-        "
-      ></BaseButton>
-    </template>
-  </BaseDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api";
-import { useUnits } from "~/composables/use-recipe-units";
-import { validators } from "~/composables/use-validators";
-export default defineComponent({
-  setup() {
-    const domCreateUnitForm = ref(null);
-    const { workingUnitData, actions, validForm } = useUnits();
-    return { validators, workingUnitData, actions, validForm, domCreateUnitForm };
-  },
-});
-</script>
-
diff --git a/frontend/components/Layout/AppSidebar.vue b/frontend/components/Layout/AppSidebar.vue
index c16e0b6a..632664cd 100644
--- a/frontend/components/Layout/AppSidebar.vue
+++ b/frontend/components/Layout/AppSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer :value="value" clipped app width="240px">
+  <v-navigation-drawer class="d-flex flex-column" :value="value" clipped app width="240px">
     <!-- User Profile -->
     <template v-if="$auth.user">
       <v-list-item two-line to="/user/profile" exact>
@@ -101,8 +101,8 @@
     </template>
 
     <!-- Bottom Navigation Links -->
-    <template v-if="bottomLinks">
-      <v-list class="fixedBottom" nav dense>
+    <template v-if="bottomLinks" #append>
+      <v-list nav dense>
         <v-list-item-group v-model="bottomSelected" color="primary">
           <template v-for="nav in bottomLinks">
             <v-list-item
@@ -175,12 +175,6 @@ export default defineComponent({
 </script>
   
 <style>
-.fixedBottom {
-  position: fixed !important;
-  bottom: 0 !important;
-  width: 100%;
-}
-
 @media print {
   .no-print {
     display: none;
diff --git a/frontend/components/global/BaseCardSectionTitle.vue b/frontend/components/global/BaseCardSectionTitle.vue
index c36000a0..de132ae2 100644
--- a/frontend/components/global/BaseCardSectionTitle.vue
+++ b/frontend/components/global/BaseCardSectionTitle.vue
@@ -6,7 +6,7 @@
       </v-icon>
       {{ title }}
     </v-card-title>
-    <v-card-text class="pt-2">
+    <v-card-text v-if="$slots.default" class="pt-2">
       <p class="pb-0 mb-0">
         <slot />
       </p>
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index c21fcc05..875812a2 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -86,11 +86,6 @@ export default defineComponent({
             to: "/admin/toolbox/tags",
             title: i18n.t("sidebar.categories"),
           },
-          {
-            icon: $globals.icons.broom,
-            to: "/admin/toolbox/organize",
-            title: i18n.t("settings.organize"),
-          },
         ],
       },
       {
diff --git a/frontend/pages/admin/dashboard.vue b/frontend/pages/admin/dashboard.vue
index 1b5a7b35..8269be72 100644
--- a/frontend/pages/admin/dashboard.vue
+++ b/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();
       }
     }
 
diff --git a/frontend/pages/admin/site-settings.vue b/frontend/pages/admin/site-settings.vue
index 013a13ed..0884a696 100644
--- a/frontend/pages/admin/site-settings.vue
+++ b/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,
diff --git a/frontend/pages/admin/toolbox/organize.vue b/frontend/pages/admin/toolbox/organize.vue
deleted file mode 100644
index b51217b3..00000000
--- a/frontend/pages/admin/toolbox/organize.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/recipe/create.vue
index bf004b3d..aa8041b7 100644
--- a/frontend/pages/recipe/create.vue
+++ b/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>
diff --git a/frontend/pages/user/profile/api-tokens.vue b/frontend/pages/user/profile/api-tokens.vue
index 50502a27..a5ef38d2 100644
--- a/frontend/pages/user/profile/api-tokens.vue
+++ b/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 {
diff --git a/frontend/pages/user/profile/index.vue b/frontend/pages/user/profile/index.vue
index c42a3ad2..3d281d07 100644
--- a/frontend/pages/user/profile/index.vue
+++ b/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')"
diff --git a/mealie/routes/about/events.py b/mealie/routes/about/events.py
index f8ebf217..8e521eb1 100644
--- a/mealie/routes/about/events.py
+++ b/mealie/routes/about/events.py
@@ -24,7 +24,8 @@ async def get_events(session: Session = Depends(generate_session)):
 async def delete_events(session: Session = Depends(generate_session)):
     """ Get event from the Database """
     db = get_database(session)
-    return db.events.delete_all()
+    db.events.delete_all()
+    return {"message": "All events deleted"}
 
 
 @router.delete("/{id}")