refactor(frontend): ♻️ split user profile/management (#670)

* refactor(frontend): ♻️ major rewrite/improvement of use-profile pages

* refactor(frontend): ♻️ split webhooks into their own page

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

frontend/pages/user/group/cookbooks.vue

@@ -1,6 +1,13 @@
 <template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="Cookbooks"> </BaseCardSectionTitle>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')"></v-img>
+      </template>
+      <template #title> Cookbooks </template>
+      Arrange and edit your cookbooks here.
+    </BasePageTitle>
+
     <BaseButton create @click="actions.createOne()" />
     <v-expansion-panels class="mt-2">
       <draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
@@ -48,7 +55,6 @@ import draggable from "vuedraggable";
 
 export default defineComponent({
   components: { draggable },
-  layout: "admin",
   setup() {
     const { cookbooks, actions } = useCookbooks();
 
@@ -62,6 +68,6 @@ export default defineComponent({
     
 <style>
 .my-border {
-  border-left: 5px solid var(--v-primary-base);
+  border-left: 5px solid var(--v-primary-base) !important;
 }
 </style>

frontend/pages/user/group/index.vue

@@ -1,17 +1,23 @@
 <template>
-  <v-container fluid>
-    <section>
-      <BaseCardSectionTitle title="Group Settings">
-        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
-        earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
-        praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
-        distinctio illum nemo. Dicta, doloremque!
-      </BaseCardSectionTitle>
-      <div v-if="categories" class="d-flex">
-        <DomainRecipeCategoryTagSelector v-model="categories" class="mt-5 mr-5" />
-        <BaseButton save class="mt-auto mb-3" @click="actions.updateAll()" />
-      </div>
-    </section>
+  <v-container>
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="100" max-width="100" :src="require('~/static/svgs/manage-group-settings.svg')"></v-img>
+      </template>
+      <template #title> Group Settings </template>
+      These items are shared within your group. Editing one of them will change it for the whole group!
+    </BasePageTitle>
+    <v-card tag="section" outlined>
+      <v-card-text>
+        <BaseCardSectionTitle title="Mealplan Categories">
+          Set the categories below for the ones that you want to be included in your mealplan random generation.
+          <div class="mt-2">
+            <BaseButton save @click="actions.updateAll()" />
+          </div>
+        </BaseCardSectionTitle>
+        <DomainRecipeCategoryTagSelector v-if="categories" v-model="categories" />
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
     
@@ -20,7 +26,6 @@ import { defineComponent } from "@nuxtjs/composition-api";
 import { useGroup } from "~/composables/use-groups";
 
 export default defineComponent({
-  layout: "admin",
   setup() {
     const { categories, actions } = useGroup();
 
@@ -32,5 +37,3 @@ export default defineComponent({
 });
 </script>
     
-<style scoped>
-</style>

frontend/pages/user/group/webhooks.vue

@@ -1,11 +1,14 @@
 <template>
-  <v-container fluid>
-    <BaseCardSectionTitle title="MealPlan Webhooks">
-      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias error provident, eveniet, laboriosam assumenda
-      earum amet quaerat vel consequatur molestias sed enim. Adipisci a consequuntur dolor culpa expedita voluptatem
-      praesentium optio iste atque, ea reiciendis iure non aut suscipit modi ducimus ratione, quam numquam quaerat
-      distinctio illum nemo. Dicta, doloremque!
-    </BaseCardSectionTitle>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-webhooks.svg')"></v-img>
+      </template>
+      <template #title> Webhooks </template>
+      The webhooks defined below will be executed when a meal is defined for the day. At the scheduled time the webhooks
+      will be sent with the data from the recipe that is scheduled for the day
+    </BasePageTitle>
+
     <BaseButton create @click="actions.createOne()" />
     <v-expansion-panels class="mt-2">
       <v-expansion-panel v-for="(webhook, index) in webhooks" :key="index" class="my-2 my-border rounded">
@@ -53,16 +56,13 @@ import { defineComponent } from "@nuxtjs/composition-api";
 import { useGroupWebhooks } from "~/composables/use-group-webhooks";
 
 export default defineComponent({
-  layout: "admin",
   setup() {
     const { actions, webhooks } = useGroupWebhooks();
+
     return {
-      actions,
       webhooks,
+      actions,
     };
   },
 });
-</script>
-    
-<style scoped>
-</style>
+</script>

frontend/pages/user/profile.vue

@@ -1,31 +0,0 @@
-<template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12" sm="12" md="12" lg="6">
-        <UserProfileCard :user="user" class="mt-14" @refresh="$auth.fetchUser()" />
-      </v-col>
-      <v-col cols="12" sm="12" md="12" lg="6">
-        <UserAPITokenCard :tokens="user.tokens" class="mt-14" @refresh="$auth.fetchUser()" />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-    
-<script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
-import UserProfileCard from "~/components/Domain/User/UserProfileCard.vue";
-import UserAPITokenCard from "~/components/Domain/User/UserAPITokenCard.vue";
-
-export default defineComponent({
-  components: { UserProfileCard, UserAPITokenCard },
-  layout: "admin",
-  setup() {
-    const user = computed(() => {
-      return useContext().$auth.user;
-    });
-
-    return { user };
-  },
-});
-</script>
-    

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

@@ -0,0 +1,131 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="200px" max-width="200px" :src="require('~/static/svgs/manage-api-tokens.svg')"></v-img>
+      </template>
+      <template #title> API Tokens </template>
+      You have {{ user.tokens.length }} active tokens.
+    </BasePageTitle>
+    <section class="d-flex justify-center">
+      <v-card class="mt-4" width="500px">
+        <v-card-text>
+          <v-form ref="domNewTokenForm" @submit.prevent>
+            <v-text-field v-model="name" :label="$t('settings.token.token-name')"> </v-text-field>
+          </v-form>
+
+          <template v-if="createdToken != ''">
+            <v-textarea
+              v-model="createdToken"
+              class="mb-0 pb-0"
+              :label="$t('settings.token.api-token')"
+              readonly
+              :append-outer-icon="$globals.icons.contentCopy"
+              @click="copyToken"
+              @click:append-outer="copyToken"
+            >
+            </v-textarea>
+            <v-subheader class="text-center">
+              {{
+                $t(
+                  "settings.token.copy-this-token-for-use-with-an-external-application-this-token-will-not-be-viewable-again"
+                )
+              }}
+            </v-subheader>
+          </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>
+    </section>
+    <BaseCardSectionTitle class="mt-10" title="Active Tokens"> </BaseCardSectionTitle>
+    <section class="d-flex flex-column align-center justify-center">
+      <div v-for="(token, index) in $auth.user.tokens" :key="index" class="d-flex my-2">
+        <v-card outlined width="500px">
+          <v-list-item>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ token.name }}
+              </v-list-item-title>
+              <v-list-item-subtitle> Created on: {{ $d(token.created_at) }} </v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-action>
+              <BaseButton delete small @click="deleteToken(token.id)"></BaseButton>
+            </v-list-item-action>
+          </v-list-item>
+        </v-card>
+      </div>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { computed, defineComponent, useContext, ref } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+export default defineComponent({
+  setup() {
+    const nuxtContext = useContext();
+
+    const user = computed(() => {
+      return nuxtContext.$auth.user;
+    });
+
+    const api = useApiSingleton();
+
+    const domNewTokenForm = ref<VForm | null>(null);
+
+    const createdToken = ref("");
+    const name = ref("");
+    const loading = ref(false);
+
+    function resetCreate() {
+      createdToken.value = "";
+      loading.value = false;
+      name.value = "";
+      nuxtContext.$auth.fetchUser();
+    }
+
+    async function createToken(name: string) {
+      if (loading.value) {
+        resetCreate();
+        return;
+      }
+
+      loading.value = true;
+
+      if (domNewTokenForm?.value?.validate()) {
+        console.log("Created");
+        return;
+      }
+
+      const { data } = await api.users.createAPIToken({ name });
+
+      if (data) {
+        createdToken.value = data.token;
+      }
+    }
+
+    async function deleteToken(id: string | number) {
+      const { data } = await api.users.deleteAPIToken(id);
+      nuxtContext.$auth.fetchUser();
+      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 };
+  },
+});
+</script>
+    

frontend/pages/user/profile/edit.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-container class="narrow-container">
+    <BasePageTitle divider>
+      <template #header>
+        <v-img max-height="200" max-width="200" class="mb-2" :src="require('~/static/svgs/manage-profile.svg')"></v-img>
+      </template>
+      <template #title> Your Profile Settings </template>
+      Some text here...
+    </BasePageTitle>
+    <section>
+      <ToggleState tag="article">
+        <template #activator="{ toggle, state }">
+          <v-btn v-if="!state" text color="info" class="mt-2 mb-n3" @click="toggle">
+            <v-icon left>{{ $globals.icons.lock }}</v-icon>
+            {{ $t("settings.change-password") }}
+          </v-btn>
+          <v-btn v-else text color="info" class="mt-2 mb-n3" @click="toggle">
+            <v-icon left>{{ $globals.icons.user }}</v-icon>
+            {{ $t("settings.profile") }}
+          </v-btn>
+        </template>
+
+        <template #default="{ state }">
+          <v-slide-x-transition group mode="in" hide-on-leave>
+            <div v-if="!state" key="personal-info">
+              <BaseCardSectionTitle class="mt-10" title="Personal Information"> </BaseCardSectionTitle>
+              <v-card tag="article" outlined>
+                <v-card-text class="pb-0">
+                  <v-form ref="userUpdate">
+                    <v-text-field v-model="userCopy.username" :label="$t('user.username')" required validate-on-blur>
+                    </v-text-field>
+                    <v-text-field v-model="userCopy.fullName" :label="$t('user.full-name')" required validate-on-blur>
+                    </v-text-field>
+                    <v-text-field v-model="userCopy.email" :label="$t('user.email')" validate-on-blur required>
+                    </v-text-field>
+                  </v-form>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <BaseButton update @click="updateUser" />
+                </v-card-actions>
+              </v-card>
+            </div>
+            <div v-if="state" key="change-password">
+              <BaseCardSectionTitle class="mt-10" :title="$t('settings.change-password')"> </BaseCardSectionTitle>
+              <v-card outlined>
+                <v-card-text class="pb-0">
+                  <v-form ref="passChange">
+                    <v-text-field
+                      v-model="password.current"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.current-password')"
+                      validate-on-blur
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.current = !showPassword.current"
+                    ></v-text-field>
+                    <v-text-field
+                      v-model="password.newOne"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.new-password')"
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.newOne = !showPassword.newOne"
+                    ></v-text-field>
+                    <v-text-field
+                      v-model="password.newTwo"
+                      :prepend-icon="$globals.icons.lock"
+                      :label="$t('user.confirm-password')"
+                      :rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
+                      validate-on-blur
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword.newTwo = !showPassword.newTwo"
+                    ></v-text-field>
+                  </v-form>
+                </v-card-text>
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <BaseButton update @click="updateUser" />
+                </v-card-actions>
+              </v-card>
+            </div>
+          </v-slide-x-transition>
+        </template>
+      </ToggleState>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { ref, reactive, defineComponent, computed, useContext, watch } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+export default defineComponent({
+  setup() {
+    const nuxtContext = useContext();
+    const user = computed(() => nuxtContext.$auth.user);
+
+    watch(user, () => {
+      userCopy.value = { ...user.value };
+    });
+
+    const userCopy = ref({ ...user.value });
+
+    const api = useApiSingleton();
+
+    const domUpdatePassword = ref<VForm | null>(null);
+    const password = reactive({
+      current: "",
+      newOne: "",
+      newTwo: "",
+    });
+
+    async function updateUser() {
+      // @ts-ignore
+      const { response } = await api.users.updateOne(userCopy.value.id, userCopy.value);
+      if (response?.status === 200) {
+        nuxtContext.$auth.fetchUser();
+      }
+    }
+
+    async function updatePassword() {
+      if (!userCopy.value?.id) {
+        return;
+      }
+      // @ts-ignore
+      const { response } = await api.users.changePassword(userCopy.value.id, {
+        currentPassword: password.current,
+        newPassword: password.newOne,
+      });
+
+      if (response?.status === 200) {
+        console.log("Password Changed");
+      }
+    }
+
+    return { updateUser, updatePassword, userCopy, password, domUpdatePassword };
+  },
+  data() {
+    return {
+      hideImage: false,
+      passwordLoading: false,
+      showPassword: false,
+      loading: false,
+    };
+  },
+
+  methods: {
+    async changePassword() {
+      // @ts-ignore
+      this.paswordLoading = true;
+      const data = {
+        currentPassword: this.password.current,
+        newPassword: this.password.newOne,
+      };
+
+      // @ts-ignore
+      if (this.$refs.passChange.validate()) {
+        // @ts-ignore
+        if (await api.users.changePassword(this.user.id, data)) {
+          this.$emit("refresh");
+        }
+      }
+
+      // @ts-ignore
+      this.paswordLoading = false;
+    },
+  },
+});
+</script>
+    

frontend/pages/user/profile/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-container v-if="user">
+    <section class="d-flex flex-column align-center">
+      <v-avatar color="primary" size="75" class="mb-2">
+        <v-img :src="require(`~/static/account.png`)" />
+      </v-avatar>
+      <h2 class="headline">👋 Welcome, {{ user.fullName }}</h2>
+      <p class="subtitle-1 mb-0">
+        Manage your profile, recipes, and group settings.
+        <a href="https://hay-kot.github.io/mealie/" target="_blank"> Learn More </a>
+      </p>
+    </section>
+    <section>
+      <div>
+        <h3 class="headline">Personal</h3>
+        <p>These are settings that are personal to you. Changes here won't affect other users</p>
+      </div>
+      <v-row tag="section">
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage User Profile', to: '/user/profile/edit' }"
+            :image="require('~/static/svgs/manage-profile.svg')"
+          >
+            <template #title> User Profile </template>
+            Manage your preferences, change your password, and update your email
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Your API Tokens', to: '/user/profile/api-tokens' }"
+            :image="require('~/static/svgs/manage-api-tokens.svg')"
+          >
+            <template #title> API Tokens </template>
+            Manage your API Tokens for access from external applications
+          </UserProfileLinkCard>
+        </v-col>
+      </v-row>
+    </section>
+    <v-divider class="my-7"></v-divider>
+    <section>
+      <div>
+        <h3 class="headline">Group</h3>
+        <p>These items are shared within your group. Editing one of them will change it for the whole group!</p>
+      </div>
+      <v-row tag="section">
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Group Settings', to: '/user/group' }"
+            :image="require('~/static/svgs/manage-group-settings.svg')"
+          >
+            <template #title> Group Settings </template>
+            Manage your common group settings like mealplan and privacy settings.
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Cookbooks', to: '/user/group/cookbooks' }"
+            :image="require('~/static/svgs/manage-cookbooks.svg')"
+          >
+            <template #title> Cookbooks </template>
+            Manage a collection of recipe categories and generate pages for them.
+          </UserProfileLinkCard>
+        </v-col>
+        <v-col cols="12" sm="12" md="6">
+          <UserProfileLinkCard
+            :link="{ text: 'Manage Webhooks', to: '/user/group/webhooks' }"
+            :image="require('~/static/svgs/manage-webhooks.svg')"
+          >
+            <template #title> Webhooks </template>
+            Setup webhooks that trigger on days that you have have mealplan scheduled.
+          </UserProfileLinkCard>
+        </v-col>
+      </v-row>
+    </section>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import UserProfileLinkCard from "@/components/Domain/User/UserProfileLinkCard.vue";
+
+export default defineComponent({
+  components: {
+    UserProfileLinkCard,
+  },
+  setup() {
+    const user = computed(() => useContext().$auth.user);
+
+    return { user };
+  },
+});
+</script>
+