From 63ebb6c5bb290d6a49ecb69930f05c133b714e75 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Tue, 4 May 2021 13:08:38 -0800
Subject: [PATCH] new user card

---
 Caddyfile.dev                                 |   9 +
 frontend/src/components/UI/CardSection.vue    |  66 +++---
 .../Dashboard => components/UI}/StatCard.vue  |  28 +--
 .../pages/Admin/Dashboard/BackupViewer.vue    |   2 +-
 .../src/pages/Admin/Dashboard/EventViewer.vue |   2 +-
 frontend/src/pages/Admin/Dashboard/index.vue  |   2 +-
 frontend/src/pages/Admin/Profile/UserCard.vue | 205 ++++++++++++++++++
 frontend/src/pages/Admin/Profile/index.vue    | 202 +----------------
 frontend/src/pages/HomePage.vue               |   1 +
 frontend/src/pages/Recipes/AllRecipes.vue     |   1 +
 10 files changed, 269 insertions(+), 249 deletions(-)
 create mode 100644 Caddyfile.dev
 rename frontend/src/{pages/Admin/Dashboard => components/UI}/StatCard.vue (72%)
 create mode 100644 frontend/src/pages/Admin/Profile/UserCard.vue

diff --git a/Caddyfile.dev b/Caddyfile.dev
new file mode 100644
index 000000000..f8d99bb39
--- /dev/null
+++ b/Caddyfile.dev
@@ -0,0 +1,9 @@
+{
+  admin off
+}
+
+localhost {
+  handle /mealie/* {
+    reverse_proxy http://127.0.0.1:9090 
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 6a5530a70..6bb57e4d2 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -1,39 +1,30 @@
 <template>
-  <div class="mt-n5" v-if="recipes">
-    <v-card flat class="transparent" height="60px">
-      <v-card-text>
-        <v-row v-if="title != null">
-          <v-col>
-            <v-btn-toggle group>
-              <v-btn text>
-                {{ title.toUpperCase() }}
-              </v-btn>
-            </v-btn-toggle>
-          </v-col>
-          <v-spacer></v-spacer>
-          <v-col align="end">
-            <v-menu offset-y v-if="sortable">
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn-toggle group>
-                  <v-btn text v-bind="attrs" v-on="on">
-                    {{ $t("general.sort") }}
-                  </v-btn>
-                </v-btn-toggle>
-              </template>
-              <v-list>
-                <v-list-item @click="$emit('sort-recent')">
-                  <v-list-item-title>{{ $t("general.recent") }}</v-list-item-title>
-                </v-list-item>
-                <v-list-item @click="$emit('sort')">
-                  <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-    <div v-if="recipes">
+  <div v-if="recipes">
+    <v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
+      <v-icon large left v-if="title">
+        {{ titleIcon }}
+      </v-icon>
+      <v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-menu offset-y v-if="$listeners.sortRecent || $listeners.sort">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn-toggle group>
+            <v-btn text v-bind="attrs" v-on="on">
+              {{ $t("general.sort") }}
+            </v-btn>
+          </v-btn-toggle>
+        </template>
+        <v-list>
+          <v-list-item @click="$emit('sortRecent')">
+            <v-list-item-title>{{ $t("general.recent") }}</v-list-item-title>
+          </v-list-item>
+          <v-list-item @click="$emit('sort')">
+            <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-app-bar>
+    <div v-if="recipes" class="mt-2">
       <v-row v-if="!viewScale">
         <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
           <RecipeCard
@@ -91,9 +82,12 @@ export default {
     MobileRecipeCard,
   },
   props: {
-    sortable: {
+    disableToolbar: {
       default: false,
     },
+    titleIcon: {
+      default: "mdi-tag-multiple-outline",
+    },
     title: {
       default: null,
     },
diff --git a/frontend/src/pages/Admin/Dashboard/StatCard.vue b/frontend/src/components/UI/StatCard.vue
similarity index 72%
rename from frontend/src/pages/Admin/Dashboard/StatCard.vue
rename to frontend/src/components/UI/StatCard.vue
index f79cc8289..2c580a342 100644
--- a/frontend/src/pages/Admin/Dashboard/StatCard.vue
+++ b/frontend/src/components/UI/StatCard.vue
@@ -1,17 +1,19 @@
 w<template>
   <v-card v-bind="$attrs" :class="classes" class="v-card--material pa-3">
     <div class="d-flex grow flex-wrap">
-      <v-sheet
-        :color="color"
-        :max-height="icon ? 90 : undefined"
-        :width="icon ? 'auto' : '100%'"
-        elevation="6"
-        class="text-start v-card--material__heading mb-n6 mt-n10 pa-7"
-        dark
-      >
-        <v-icon v-if="icon" size="40" v-text="icon" />
-        <div v-if="text" class="headline font-weight-thin" v-text="text" />
-      </v-sheet>
+      <slot name="avatar">
+        <v-sheet
+          :color="color"
+          :max-height="icon ? 90 : undefined"
+          :width="icon ? 'auto' : '100%'"
+          elevation="6"
+          class="text-start v-card--material__heading mb-n6 mt-n10 pa-7"
+          dark
+        >
+          <v-icon v-if="icon" size="40" v-text="icon" />
+          <div v-if="text" class="headline font-weight-thin" v-text="text" />
+        </v-sheet>
+      </slot>
 
       <div v-if="$slots['after-heading']" class="ml-auto">
         <slot name="after-heading" />
@@ -21,7 +23,7 @@ w<template>
     <slot />
 
     <template v-if="$slots.actions">
-      <v-divider class="mt-2" />
+      <v-divider class="mt-2" v-if="!$slots.bottom" />
 
       <v-card-actions class="pb-0">
         <slot name="actions" />
@@ -29,7 +31,7 @@ w<template>
     </template>
 
     <template v-if="$slots.bottom">
-      <v-divider class="mt-2" />
+      <v-divider class="mt-2" v-if="!$slots.actions" />
 
       <div class="pb-0">
         <slot name="bottom" />
diff --git a/frontend/src/pages/Admin/Dashboard/BackupViewer.vue b/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
index 26762433c..cda4e95df 100644
--- a/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
+++ b/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
@@ -67,7 +67,7 @@
 import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
 import ImportSummaryDialog from "@/components/ImportSummaryDialog";
 import { api } from "@/api";
-import StatCard from "./StatCard";
+import StatCard from "@/components/UI/StatCard";
 import BackupDialog from "@/components/UI/Dialogs/BackupDialog";
 import ImportDialog from "@/components/UI/Dialogs/ImportDialog";
 export default {
diff --git a/frontend/src/pages/Admin/Dashboard/EventViewer.vue b/frontend/src/pages/Admin/Dashboard/EventViewer.vue
index e03186f94..417fe1a17 100644
--- a/frontend/src/pages/Admin/Dashboard/EventViewer.vue
+++ b/frontend/src/pages/Admin/Dashboard/EventViewer.vue
@@ -49,7 +49,7 @@
 
 <script>
 import { api } from "@/api";
-import StatCard from "./StatCard";
+import StatCard from "@/components/UI/StatCard";
 export default {
   components: { StatCard },
   data() {
diff --git a/frontend/src/pages/Admin/Dashboard/index.vue b/frontend/src/pages/Admin/Dashboard/index.vue
index 771cc4da0..1cdffc27b 100644
--- a/frontend/src/pages/Admin/Dashboard/index.vue
+++ b/frontend/src/pages/Admin/Dashboard/index.vue
@@ -82,7 +82,7 @@
 
 <script>
 import { api } from "@/api";
-import StatCard from "./StatCard";
+import StatCard from "@/components/UI/StatCard";
 import EventViewer from "./EventViewer";
 import BackupViewer from "./BackupViewer";
 export default {
diff --git a/frontend/src/pages/Admin/Profile/UserCard.vue b/frontend/src/pages/Admin/Profile/UserCard.vue
new file mode 100644
index 000000000..d20e833a7
--- /dev/null
+++ b/frontend/src/pages/Admin/Profile/UserCard.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="mt-10">
+    <v-row>
+      <v-col cols="12" sm="12" md="6">
+        <StatCard icon="mdi-account">
+          <template v-slot:avatar>
+            <v-avatar color="accent" size="120" class="white--text headline mt-n12">
+              <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
+              <div v-else>
+                {{ initials }}
+              </div>
+            </v-avatar>
+          </template>
+          <template v-slot:after-heading>
+            <div class="ml-auto text-right">
+              <div
+                class="body-3 grey--text font-weight-light"
+                v-text="$t('user.user-id-with-value', { id: user.id })"
+              />
+
+              <h3 class="display-2 font-weight-light text--primary">
+                <small> {{ $t("group.group") }}: {{ user.group }} </small>
+              </h3>
+            </div>
+          </template>
+          <template v-slot:actions>
+            <TheUploadBtn
+              icon="mdi-image-area"
+              :text="$t('user.upload-photo')"
+              :url="userProfileImage"
+              file-name="profile_image"
+            />
+
+            <v-spacer></v-spacer>
+
+            <BaseDialog
+              :title="$t('user.reset-password')"
+              title-icon="mdi-lock"
+              :submit-text="$t('settings.change-password')"
+              @submit="changePassword"
+              :loading="loading"
+              :top="true"
+            >
+              <template v-slot:open="{ open }">
+                <v-btn color="primary" class="mr-1" small @click="open">
+                  <v-icon left>mdi-lock</v-icon>
+                  Change Password
+                </v-btn>
+              </template>
+
+              <v-card-text>
+                <v-form ref="passChange">
+                  <v-text-field
+                    v-model="password.current"
+                    prepend-icon="mdi-lock"
+                    :label="$t('user.current-password')"
+                    :rules="[existsRule]"
+                    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="mdi-lock"
+                    :label="$t('user.new-password')"
+                    :rules="[minRule]"
+                    :type="showPassword ? 'text' : 'password'"
+                    @click:append="showPassword.newOne = !showPassword.newOne"
+                  ></v-text-field>
+                  <v-text-field
+                    v-model="password.newTwo"
+                    prepend-icon="mdi-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>
+            </BaseDialog>
+
+            <v-btn color="success" small class="mr-2" @click="updateUser">
+              <v-icon left> mdi-content-save </v-icon>
+              {{ $t("general.update") }}
+            </v-btn>
+          </template>
+          <template v-slot:bottom>
+            <v-card-text>
+              <v-form>
+                <v-text-field
+                  :label="$t('user.full-name')"
+                  required
+                  v-model="user.fullName"
+                  :rules="[existsRule]"
+                  validate-on-blur
+                >
+                </v-text-field>
+                <v-text-field
+                  :label="$t('user.email')"
+                  :rules="[emailRule]"
+                  validate-on-blur
+                  required
+                  v-model="user.email"
+                >
+                </v-text-field>
+              </v-form>
+            </v-card-text>
+          </template>
+        </StatCard>
+      </v-col>
+      <v-col cols="12" sm="12" md="6"> </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
+import StatCard from "@/components/UI/StatCard";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
+import { api } from "@/api";
+import { validators } from "@/mixins/validators";
+import { initials } from "@/mixins/initials";
+export default {
+  components: {
+    BaseDialog,
+    TheUploadBtn,
+    StatCard,
+  },
+  mixins: [validators, initials],
+  data() {
+    return {
+      hideImage: false,
+      passwordLoading: false,
+      password: {
+        current: "",
+        newOne: "",
+        newTwo: "",
+      },
+      showPassword: false,
+      loading: false,
+      user: {
+        fullName: "",
+        email: "",
+        group: "",
+        admin: false,
+        id: 0,
+      },
+    };
+  },
+
+  computed: {
+    userProfileImage() {
+      this.resetImage();
+      return `api/users/${this.user.id}/image`;
+    },
+  },
+
+  async mounted() {
+    this.refreshProfile();
+  },
+
+  methods: {
+    resetImage() {
+      this.hideImage = false;
+    },
+    async refreshProfile() {
+      this.user = await api.users.self();
+    },
+    openAvatarPicker() {
+      this.showAvatarPicker = true;
+    },
+    selectAvatar(avatar) {
+      this.user.avatar = avatar;
+    },
+    async updateUser() {
+      this.loading = true;
+
+      const response = await api.users.update(this.user);
+      if (response) {
+        this.$store.commit("setToken", response.data.access_token);
+        this.refreshProfile();
+        this.loading = false;
+        this.$store.dispatch("requestUserData");
+      }
+    },
+    async changePassword() {
+      this.paswordLoading = true;
+      let data = {
+        currentPassword: this.password.current,
+        newPassword: this.password.newOne,
+      };
+
+      if (this.$refs.passChange.validate()) {
+        if (await api.users.changePassword(this.user.id, data)) {
+          this.$emit("refresh");
+        }
+      }
+      this.paswordLoading = false;
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index 106d4b989..c32026b04 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -1,206 +1,14 @@
 <template>
-  <v-row dense>
-    <v-col cols="12" md="8" sm="12">
-      <v-card>
-        <v-card-title class="headline">
-          <span>
-            <v-progress-circular v-if="loading" indeterminate color="primary" large class="mr-2"> </v-progress-circular>
-          </span>
-          {{ $t("settings.profile") }}
-          <v-spacer></v-spacer>
-          {{ $t("user.user-id-with-value", { id: user.id }) }}
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-card-text>
-          <v-row>
-            <v-col cols="12" md="3" align="center" justify="center">
-              <v-avatar color="accent" size="120" class="white--text headline mr-2">
-                <img :src="userProfileImage" v-if="!hideImage" @error="hideImage = true" />
-                <div v-else>
-                  {{ initials }}
-                </div>
-              </v-avatar>
-            </v-col>
-            <v-col cols="12" md="9">
-              <v-form>
-                <v-text-field
-                  :label="$t('user.full-name')"
-                  required
-                  v-model="user.fullName"
-                  :rules="[existsRule]"
-                  validate-on-blur
-                >
-                </v-text-field>
-                <v-text-field
-                  :label="$t('user.email')"
-                  :rules="[emailRule]"
-                  validate-on-blur
-                  required
-                  v-model="user.email"
-                >
-                </v-text-field>
-                <v-text-field
-                  :label="$t('group.group')"
-                  readonly
-                  v-model="user.group"
-                  persistent-hint
-                  :hint="$t('group.groups-can-only-be-set-by-administrators')"
-                >
-                </v-text-field>
-              </v-form>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-card-actions>
-          <TheUploadBtn
-            icon="mdi-image-area"
-            :text="$t('user.upload-photo')"
-            :url="userProfileImage"
-            file-name="profile_image"
-          />
-
-          <v-spacer></v-spacer>
-          <v-btn color="success" class="mr-2" @click="updateUser">
-            <v-icon left> mdi-content-save </v-icon>
-            {{ $t("general.save") }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-col>
-    <v-col cols="12" md="4" sm="12">
-      <v-card height="100%">
-        <v-card-title class="headline">
-          {{ $t("user.reset-password") }}
-          <v-spacer></v-spacer>
-        </v-card-title>
-        <v-divider></v-divider>
-        <v-card-text>
-          <v-form ref="passChange">
-            <v-text-field
-              v-model="password.current"
-              prepend-icon="mdi-lock"
-              :label="$t('user.current-password')"
-              :rules="[existsRule]"
-              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="mdi-lock"
-              :label="$t('user.new-password')"
-              :rules="[minRule]"
-              :type="showPassword ? 'text' : 'password'"
-              @click:append="showPassword.newOne = !showPassword.newOne"
-            ></v-text-field>
-            <v-text-field
-              v-model="password.newTwo"
-              prepend-icon="mdi-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-btn icon @click="showPassword = !showPassword" :loading="passwordLoading">
-            <v-icon v-if="!showPassword">mdi-eye-off</v-icon>
-            <v-icon v-else> mdi-eye </v-icon>
-          </v-btn>
-          <v-spacer></v-spacer>
-          <v-btn color="accent" class="mr-2" @click="changePassword">
-            <v-icon left> mdi-lock </v-icon>
-            {{ $t("settings.change-password") }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-col>
-  </v-row>
+  <div class="mt-10">
+    <UserCard />
+  </div>
 </template>
 
 <script>
-// import AvatarPicker from '@/components/AvatarPicker'
-import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
-import { api } from "@/api";
-import { validators } from "@/mixins/validators";
-import { initials } from "@/mixins/initials";
+import UserCard from "./UserCard";
 export default {
   components: {
-    TheUploadBtn,
-  },
-  mixins: [validators, initials],
-  data() {
-    return {
-      hideImage: false,
-      passwordLoading: false,
-      password: {
-        current: "",
-        newOne: "",
-        newTwo: "",
-      },
-      showPassword: false,
-      loading: false,
-      user: {
-        fullName: "",
-        email: "",
-        group: "",
-        admin: false,
-        id: 0,
-      },
-    };
-  },
-
-  computed: {
-    userProfileImage() {
-      this.resetImage();
-      return `api/users/${this.user.id}/image`;
-    },
-  },
-
-  async mounted() {
-    this.refreshProfile();
-  },
-
-  methods: {
-    resetImage() {
-      this.hideImage = false;
-    },
-    async refreshProfile() {
-      this.user = await api.users.self();
-    },
-    openAvatarPicker() {
-      this.showAvatarPicker = true;
-    },
-    selectAvatar(avatar) {
-      this.user.avatar = avatar;
-    },
-    async updateUser() {
-      this.loading = true;
-      const response = await api.users.update(this.user);
-      if (response) {
-        this.$store.commit("setToken", response.data.access_token);
-        this.refreshProfile();
-        this.loading = false;
-        this.$store.dispatch("requestUserData");
-      }
-    },
-    async changePassword() {
-      this.paswordLoading = true;
-      let data = {
-        currentPassword: this.password.current,
-        newPassword: this.password.newOne,
-      };
-
-      if (this.$refs.passChange.validate()) {
-        if (await api.users.changePassword(this.user.id, data)) {
-          this.$emit("refresh");
-        }
-      }
-      this.paswordLoading = false;
-    },
+    UserCard,
   },
 };
 </script>
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index abc1f7d52..f8d0b5cd1 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -1,6 +1,7 @@
 <template>
   <v-container>
     <CardSection
+      title-icon=""
       v-if="siteSettings.showRecent"
       :title="$t('page.recent')"
       :recipes="recentRecipes"
diff --git a/frontend/src/pages/Recipes/AllRecipes.vue b/frontend/src/pages/Recipes/AllRecipes.vue
index 6acace75a..7f258763b 100644
--- a/frontend/src/pages/Recipes/AllRecipes.vue
+++ b/frontend/src/pages/Recipes/AllRecipes.vue
@@ -2,6 +2,7 @@
   <v-container>
     <v-progress-linear v-if="loading" indeterminate color="primary"></v-progress-linear>
     <CardSection
+      title-icon=""
       :sortable="true"
       :title="$t('page.all-recipes')"
       :recipes="allRecipes"