login ui starter

frontend/src/components/Login/LoginDialog.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <LoginForm />
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import LoginForm from "./LoginForm";
+export default {
+  components: {
+    LoginForm,
+  },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Login/LoginForm.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <v-card max-width="500px">
+      <v-divider></v-divider>
+      <v-app-bar dark color="primary mt-n1">
+        <v-icon large left>
+          mdi-account
+        </v-icon>
+        <v-toolbar-title class="headline"> Login </v-toolbar-title>
+
+        <v-spacer></v-spacer>
+      </v-app-bar>
+
+      <v-card-text>
+        <v-form>
+          <v-text-field
+            v-if="!options.isLoggingIn"
+            v-model="user.name"
+            light="light"
+            prepend-icon="person"
+            :label="$t('general.name')"
+          ></v-text-field>
+          <v-text-field
+            v-model="user.email"
+            light="light"
+            prepend-icon="mdi-email"
+            :label="$t('login.email')"
+            type="email"
+          ></v-text-field>
+          <v-text-field
+            v-model="user.password"
+            light="light"
+            prepend-icon="mdi-lock"
+            :label="$t('login.password')"
+            type="password"
+          ></v-text-field>
+          <v-checkbox
+            class="mb-2 mt-0"
+            v-if="options.isLoggingIn"
+            v-model="options.shouldStayLoggedIn"
+            light="light"
+            :label="$t('login.stay-logged-in')"
+            hide-details="hide-details"
+          ></v-checkbox>
+          <v-btn
+            v-if="options.isLoggingIn"
+            @click.prevent="login"
+            dark
+            color="primary"
+            block="block"
+            type="submit"
+            >{{ $t("login.sign-in") }}</v-btn
+          >
+          <v-btn
+            v-else
+            block="block"
+            type="submit"
+            @click.prevent="options.isLoggingIn = true"
+            >{{ $t("login.sign-up") }}</v-btn
+          >
+        </v-form>
+      </v-card-text>
+      <!-- <v-card-actions v-if="options.isLoggingIn" class="card-actions">
+        <div>
+          Don't have an account?
+        </div>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="primary"
+          light="light"
+          @click="options.isLoggingIn = false"
+        >
+          Sign up
+        </v-btn>
+      </v-card-actions> -->
+    </v-card>
+  </div>
+</template>
+
+<script>
+import api from "@/api";
+export default {
+  props: {},
+  data() {
+    return {
+      showLogin: false,
+      user: {
+        email: "",
+        password: "",
+      },
+      options: {
+        isLoggingIn: true,
+      },
+    };
+  },
+  mounted() {
+    this.user = { email: "", password: "" };
+  },
+  methods: {
+    async login() {
+      let key = await api.login(this.user.email, this.user.password);
+      console.log(key);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/UI/Menu.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="text-center">
+    <LoginDialog ref="loginDialog" />
     <v-menu
       transition="slide-x-transition"
       bottom
@@ -15,7 +16,13 @@
       </template>
 
       <v-list>
-        <v-list-item v-for="(item, i) in items" :key="i" link :to="item.nav">
+        <v-list-item
+          v-for="(item, i) in filteredItems"
+          :key="i"
+          link
+          :to="item.nav ? item.nav : null"
+          @click="item.login ? openLoginDialog() : null"
+        >
           <v-list-item-icon>
             <v-icon>{{ item.icon }}</v-icon>
           </v-list-item-icon>
@@ -31,36 +38,76 @@
 </template>
 
 <script>
+import LoginDialog from "../Login/LoginDialog";
 export default {
+  components: {
+    LoginDialog,
+  },
   data: function() {
     return {
       items: [
+        {
+          icon: "mdi-account",
+          title: "Login",
+          restricted: false,
+          login: true,
+        },
+        {
+          icon: "mdi-account",
+          title: "Logout",
+          restricted: true,
+          login: true,
+        },
         {
           icon: "mdi-calendar-week",
           title: this.$i18n.t("meal-plan.dinner-this-week"),
           nav: "/meal-plan/this-week",
+          restricted: true,
         },
         {
           icon: "mdi-calendar-today",
           title: this.$i18n.t("meal-plan.dinner-today"),
           nav: "/meal-plan/today",
+          restricted: true,
         },
         {
           icon: "mdi-calendar-multiselect",
           title: this.$i18n.t("meal-plan.planner"),
           nav: "/meal-plan/planner",
+          restricted: true,
         },
         {
           icon: "mdi-cog",
           title: this.$i18n.t("general.settings"),
           nav: "/settings/site",
+          restricted: true,
         },
       ],
     };
   },
+  mounted() {
+    console.log(this.loggedIn);
+  },
+  computed: {
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
+    filteredItems() {
+      if (this.loggedIn) {
+        return this.items.filter(x => x.restricted == true);
+      } else {
+        return this.items.filter(x => x.restricted == false);
+      }
+    },
+  },
+  watch: {
+    loggedIn() {
+      console.log(this.loggedIn);
+    },
+  },
   methods: {
-    navRouter(route) {
+    openLoginDialog() {
-      this.$router.push(route);
+      this.$refs.loginDialog.open();
     },
   },
 };

frontend/src/locales/en.json

@@ -4,8 +4,9 @@
     "take-me-home": "Take me Home"
   },
   "new-recipe": {
-    "from-url": "From URL",
+    "from-url": "Import a Recipe",
     "recipe-url": "Recipe URL",
+    "url-form-hint": "Copy and paste a link from your favorite recipe website",
     "error-message": "Looks like there was an error parsing the URL. Check the log and debug/last_recipe.json to see what went wrong.",
     "bulk-add": "Bulk Add",
     "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Paste in your recipe data. Each line will be treated as an item in a list"

frontend/src/pages/Login.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-row justify="start" height="100%">
+    <v-col align="center">
+      <LoginForm />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import LoginForm from "../components/Login/LoginForm";
+export default {
+  components: {
+    LoginForm,
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/routes.js

@@ -8,12 +8,14 @@ import AllRecipesPage from "./pages/AllRecipesPage";
 import CategoryPage from "./pages/CategoryPage";
 import MeaplPlanPage from "./pages/MealPlanPage";
 import Debug from "./pages/Debug";
+import Login from "./pages/Login";
 import MealPlanThisWeekPage from "./pages/MealPlanThisWeekPage";
 import api from "@/api";
 
 export const routes = [
   { path: "/", component: HomePage },
   { path: "/mealie", component: HomePage },
+  { path: "/login", component: Login },
   { path: "/debug", component: Debug },
   { path: "/search", component: SearchPage },
   { path: "/recipes/all", component: AllRecipesPage },

frontend/src/store/store.js

@@ -20,7 +20,8 @@ const store = new Vuex.Store({
     homePage,
   },
   state: {
-    // Home Page Settings
+    // Auth
+    isLoggedIn: true,
     // Snackbar
     snackActive: false,
     snackText: "",
@@ -33,6 +34,9 @@ const store = new Vuex.Store({
   },
 
   mutations: {
+    setIsLoggedIn(state, payload) {
+      state.isLoggedIn = payload;
+    },
     setSnackBar(state, payload) {
       state.snackText = payload.text;
       state.snackType = payload.type;
@@ -75,6 +79,7 @@ const store = new Vuex.Store({
 
     getRecentRecipes: state => state.recentRecipes,
     getMealPlanCategories: state => state.mealPlanCategories,
+    getIsLoggedIn: state => state.isLoggedIn,
   },
 });