From 1ee886db6399c467a9e689ffee6295389bb8c770 Mon Sep 17 00:00:00 2001
From: "D. Berge" <dberge@aaltronav.eu>
Date: Sun, 11 Oct 2020 17:56:32 +0200
Subject: [PATCH] Add login/logout views to frontend

---
 lib/www/client/source/src/router/index.js  | 23 +++++
 lib/www/client/source/src/views/Login.vue  | 98 ++++++++++++++++++++++
 lib/www/client/source/src/views/Logout.vue | 19 +++++
 3 files changed, 140 insertions(+)
 create mode 100644 lib/www/client/source/src/views/Login.vue
 create mode 100644 lib/www/client/source/src/views/Logout.vue

diff --git a/lib/www/client/source/src/router/index.js b/lib/www/client/source/src/router/index.js
index 8d7255a..c1070ea 100644
--- a/lib/www/client/source/src/router/index.js
+++ b/lib/www/client/source/src/router/index.js
@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
+import Login from '../views/Login.vue'
+import Logout from '../views/Logout.vue'
 import Project from '../views/Project.vue'
 import ProjectList from '../views/ProjectList.vue'
 import ProjectSummary from '../views/ProjectSummary.vue'
@@ -31,6 +33,27 @@ Vue.use(VueRouter)
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
+  {
+    pathToRegexpOptions: { strict: true },
+    path: "/login",
+    redirect: "/login/"
+  },
+  {
+    pathToRegexpOptions: { strict: true },
+    name: "Login",
+    path: "/login/",
+    component: Login,
+    meta: {
+//       breadcrumbs: [
+//         { text: "Projects", href: "/projects", disabled: true }
+//       ]
+    }
+  },
+  {
+//     pathToRegexpOptions: { strict: true },
+    path: "/logout",
+    component: Logout,
+  },
   {
     pathToRegexpOptions: { strict: true },
     path: "/projects",
diff --git a/lib/www/client/source/src/views/Login.vue b/lib/www/client/source/src/views/Login.vue
new file mode 100644
index 0000000..8a03df7
--- /dev/null
+++ b/lib/www/client/source/src/views/Login.vue
@@ -0,0 +1,98 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <v-form :disabled="loading">
+          <v-card class="mx-auto" max-width="600" tile>
+            <v-card-title style="word-break: normal;">Login</v-card-title>
+            <v-card-text>
+
+              <v-text-field
+                v-model="credentials.user"
+                label="User"
+                required
+              >
+              </v-text-field>
+              <v-text-field
+                v-model="credentials.password"
+                type="password"
+                label="Password"
+                required
+              >
+              </v-text-field>
+
+
+            </v-card-text>
+            <v-card-actions>
+
+              <v-btn
+                :disabled="!valid"
+                color="success"
+                class="mr-4"
+                @click="submit"
+              >Login
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                color="warning"
+                class="mr-4"
+                @click="reset"
+              >Reset
+              </v-btn>
+
+            </v-card-actions>
+          </v-card>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  name: 'Login',
+
+  components: {
+  },
+
+  data () {
+    return {
+      credentials: {
+        user: null,
+        password: null
+      }
+    };
+  },
+
+  computed: {
+    valid () {
+      return this.credentials.user !== null && this.credentials.password !== null;
+    },
+
+    ...mapGetters(['loading', 'user'])
+  },
+
+  methods: {
+
+    async submit () {
+
+      await this.logout();
+      await this.login(this.credentials);
+
+      if (this.user && !this.user.autologin) {
+        this.$router.replace("/");
+      } else {
+        this.showSnack(["Bad login", "warning"]);
+      }
+    },
+
+    reset () {
+      this.credentials = {user: null, password: null};
+    },
+
+    ...mapActions(["login", "logout", "showSnack"])
+  }
+}
+</script>
diff --git a/lib/www/client/source/src/views/Logout.vue b/lib/www/client/source/src/views/Logout.vue
new file mode 100644
index 0000000..c80fe4f
--- /dev/null
+++ b/lib/www/client/source/src/views/Logout.vue
@@ -0,0 +1,19 @@
+<template>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'Logout',
+
+  methods: {
+    ...mapActions(["logout"])
+  },
+
+  async created () {
+    await this.logout();
+    this.$router.replace("/");
+  }
+}
+</script>