redesigned admin page

frontend/src/components/Admin/AdminSidebar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <v-btn
+      class="mt-9 ml-n1"
+      fixed
+      left
+      bottom
+      fab
+      small
+      color="primary"
+      @click="showSidebar = !showSidebar"
+    >
+      <v-icon>mdi-cog</v-icon></v-btn
+    >
+
+    <v-navigation-drawer
+      :value="mobile ? showSidebar : true"
+      v-model="showSidebar"
+      width="180px"
+      clipped
+      app
+    >
+      <template v-slot:prepend>
+        <v-list-item two-line>
+          <v-list-item-avatar>
+            <img src="https://randomuser.me/api/portraits/women/81.jpg" />
+          </v-list-item-avatar>
+
+          <v-list-item-content>
+            <v-list-item-title>Jane Smith</v-list-item-title>
+            <v-list-item-subtitle>Admin</v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+
+      <v-divider></v-divider>
+
+      <v-list nav dense>
+        <v-list-item
+          v-for="nav in baseLinks"
+          :key="nav.title"
+          link
+          :to="nav.to"
+        >
+          <v-list-item-icon>
+            <v-icon>{{ nav.icon }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ nav.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+
+      <v-divider></v-divider>
+      <v-list nav dense>
+        <v-list-item
+          v-for="nav in superLinks"
+          :key="nav.title"
+          link
+          :to="nav.to"
+        >
+          <v-list-item-icon>
+            <v-icon>{{ nav.icon }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ nav.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showSidebar: false,
+      mobile: false,
+      links: [],
+      superLinks: [
+        {
+          icon: "mdi-account-group",
+          to: "/admin/manage-users",
+          title: "Manage Users",
+        },
+        {
+          icon: "mdi-cog",
+          to: "/admin/settings",
+          title: "Admin Settings",
+        },
+      ],
+      baseLinks: [
+        {
+          icon: "mdi-account",
+          to: "/admin/profile",
+          title: "Profile",
+        },
+        {
+          icon: "mdi-card-bulleted-settings-outline",
+          to: "/admin/general",
+          title: "General",
+        },
+        {
+          icon: "mdi-format-color-fill",
+          to: "/admin/themes",
+          title: "Themes",
+        },
+        {
+          icon: "mdi-food",
+          to: "/admin/meal-planner",
+          title: "Meal Planner",
+        },
+        {
+          icon: "mdi-backup-restore",
+          to: "/admin/backups",
+          title: "Backups",
+        },
+        {
+          icon: "mdi-database-import",
+          to: "/admin/migrations",
+          title: "Migrations",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.mobile = this.viewScale();
+    this.showSidebar = !this.viewScale();
+  },
+
+  methods: {
+    viewScale() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+          return true;
+        case "sm":
+          return true;
+        default:
+          return false;
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Admin/General/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title>
+    <v-card-title class="headline">
       {{ $t("settings.general-settings") }}
       <v-spacer></v-spacer>
       <span>

frontend/src/components/Login/LoginDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-center">
     <v-dialog v-model="dialog" width="500">
-      <LoginForm />
+      <LoginForm @logged-in="dialog = false" />
     </v-dialog>
   </div>
 </template>

frontend/src/components/Login/LoginForm.vue

@@ -3,9 +3,17 @@
     <v-card max-width="500px">
       <v-divider></v-divider>
       <v-app-bar dark color="primary mt-n1">
-        <v-icon large left>
+        <v-icon large left v-if="!loading">
           mdi-account
         </v-icon>
+        <v-progress-circular
+          v-else
+          indeterminate
+          color="white"
+          large
+          class="mr-2"
+        >
+        </v-progress-circular>
         <v-toolbar-title class="headline"> Login </v-toolbar-title>
 
         <v-spacer></v-spacer>
@@ -61,6 +69,9 @@
             >{{ $t("login.sign-up") }}</v-btn
           >
         </v-form>
+        <v-alert v-if="error" outlined class="mt-3 mb-0" type="error">
+          Could Not Validate Credentials
+        </v-alert>
       </v-card-text>
       <!-- <v-card-actions v-if="options.isLoggingIn" class="card-actions">
         <div>
@@ -85,6 +96,8 @@ export default {
   props: {},
   data() {
     return {
+      loading: false,
+      error: false,
       showLogin: false,
       showPassword: false,
       user: {
@@ -97,15 +110,31 @@ export default {
     };
   },
   mounted() {
-    this.user = { email: "", password: "" };
+    this.clear();
   },
   methods: {
+    clear() {
+      this.user = { email: "", password: "" };
+    },
     async login() {
+      this.loading = true;
+      this.error = false;
       let formData = new FormData();
       formData.append("username", this.user.email);
       formData.append("password", this.user.password);
-      let key = await api.users.login(formData);
+      let key;
+      try {
+        key = await api.users.login(formData);
+      } catch {
+        this.error = true;
+      }
+      if (key.status != 200) this.error = true;
+      else {
+        this.$emit("logged-in");
+        this.clear();
+      }
       console.log(key);
+      this.loading = false;
     },
   },
 };

frontend/src/components/UI/SiteMenu.vue

@@ -79,7 +79,7 @@ export default {
         {
           icon: "mdi-cog",
           title: this.$i18n.t("general.settings"),
-          nav: "/settings/site",
+          nav: "/admin",
           restricted: true,
         },
       ],

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <h1>Manage Users</h1>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>

frontend/src/pages/Admin/Profile/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Profile</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

frontend/src/pages/Admin/Settings/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>Admin Settings</h1>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

frontend/src/pages/Admin/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <AdminSidebar />
+    <v-slide-x-transition hide-on-leave>
+      <router-view></router-view>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script>
+import AdminSidebar from "../../components/Admin/AdminSidebar";
+export default {
+  components: {
+    AdminSidebar,
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/pages/SettingsPage.vue

@@ -1,90 +0,0 @@
-<template>
-  <v-container>
-    <v-alert
-      v-if="newVersion"
-      color="green"
-      type="success"
-      outlined
-      v-html="
-        $t('settings.new-version-available', {
-          aContents:
-            'target=\'_blank\' href=\'https://github.com/hay-kot/mealie\' class=\'green--text\'',
-        })
-      "
-    >
-    </v-alert>
-    <General />
-    <Theme class="mt-2" />
-    <Backup class="mt-2" />
-    <MealPlanner class="mt-2" />
-    <Migration class="mt-2" />
-    <p class="text-center my-2">
-      {{ $t("settings.current") }}
-      {{ version }} |
-      {{ $t("settings.latest") }}
-      {{ latestVersion }}
-      ·
-      <a href="https://hay-kot.github.io/mealie/" target="_blank">
-        {{ $t("settings.explore-the-docs") }}
-      </a>
-      ·
-      <a
-        href="https://hay-kot.github.io/mealie/contributors/non-coders/"
-        target="_blank"
-      >
-        {{ $t("settings.contribute") }}
-      </a>
-    </p>
-  </v-container>
-</template>
-
-<script>
-import Backup from "../components/Settings/Backup";
-import General from "../components/Settings/General";
-import MealPlanner from "../components/Settings/MealPlanner";
-import Theme from "../components/Settings/Theme";
-import Migration from "../components/Settings/Migration";
-import api from "@/api";
-import axios from "axios";
-
-export default {
-  components: {
-    Backup,
-    MealPlanner,
-    Theme,
-    Migration,
-    General,
-  },
-  data() {
-    return {
-      latestVersion: null,
-      version: null,
-    };
-  },
-  async mounted() {
-    this.getVersion();
-    let versionData = await api.meta.get_version();
-    this.version = versionData.version;
-  },
-  computed: {
-    newVersion() {
-      if ((this.latestVersion != null) & (this.latestVersion != this.version)) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-  },
-  methods: {
-    async getVersion() {
-      let response = await axios.get(
-        "https://api.github.com/repos/hay-kot/mealie/releases/latest"
-      );
-      this.latestVersion = response.data.tag_name;
-    },
-  },
-};
-</script>
-
-<style>
-</style>