From beba244ea3c28aed4c7cf09b77377b55a5960daa Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Wed, 14 Sep 2022 19:11:34 +0200
Subject: Add signin page

---
 components/VHeader.vue        |  2 +-
 nuxt.config.js                |  2 +-
 package-lock.json             | 15 +++++++++
 package.json                  |  1 +
 pages/signin.vue              | 73 +++++++++++++++++++++++++++++++++++++++++++
 plugins/vue-toastification.js |  8 +++++
 store/auth.js                 |  5 ++-
 7 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 pages/signin.vue
 create mode 100644 plugins/vue-toastification.js

diff --git a/components/VHeader.vue b/components/VHeader.vue
index 2af549a..a9b85ff 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -34,7 +34,7 @@
                 a#user-menu-item-1.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Settings
                 a#user-menu-item-2.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Sign out
           .absolute.inset-y-0.right-0.flex.items-center.pr-2(class="sm:static sm:inset-auto sm:ml-6 sm:pr-0" v-else)
-            a
+            a(href="/signin")
               button.text-white Entra
       #mobile-menu(class="sm:hidden" v-if="boxInfo")
         .space-y-1.px-2.pt-2.pb-3
diff --git a/nuxt.config.js b/nuxt.config.js
index 0e259bf..d85fdc0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -24,7 +24,7 @@ export default {
   css: [],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [],
+  plugins: ["~plugins/vue-toastification.js"],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
diff --git a/package-lock.json b/package-lock.json
index b4da6b2..bcf3768 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "vue": "^2.6.14",
         "vue-server-renderer": "^2.6.14",
         "vue-template-compiler": "^2.6.14",
+        "vue-toastification": "^1.7.14",
         "webpack": "^4.46.0"
       },
       "devDependencies": {
@@ -18802,6 +18803,14 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "node_modules/vue-toastification": {
+      "version": "1.7.14",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
+      "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -34621,6 +34630,12 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-toastification": {
+      "version": "1.7.14",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
+      "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
+      "requires": {}
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
diff --git a/package.json b/package.json
index d13a735..01a1623 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",
     "vue-template-compiler": "^2.6.14",
+    "vue-toastification": "^1.7.14",
     "webpack": "^4.46.0"
   },
   "devDependencies": {
diff --git a/pages/signin.vue b/pages/signin.vue
new file mode 100644
index 0000000..66d09f0
--- /dev/null
+++ b/pages/signin.vue
@@ -0,0 +1,73 @@
+<template lang="pug">
+  div
+    VHeader
+    main
+      .mx-auto.max-w-7xl.py-6(class="sm:px-6 lg:px-8")
+        .flex.min-h-full.items-center.justify-center.py-12.px-4(class="sm:px-6 lg:px-8")
+          .w-full.max-w-md.space-y-8
+            div
+              h2.mt-6.text-center.text-3xl.font-bold.tracking-tight.text-gray-900 Sign in
+              p.mt-2.text-center.text-sm.text-gray-600 Or 
+                a.font-medium.text-indigo-600(class="hover:text-indigo-500" href="/signup") create a new account
+            form.mt-8.space-y-6(method="POST")
+              input(type="hidden" name="remember" value="true")
+              .-space-y-px.rounded-md.shadow-sm
+                div
+                  label.sr-only(for="username") Username
+                  input#username.relative.block.w-full.appearance-none.rounded-none.rounded-t-md.border.border-gray-300.px-3.py-2.text-gray-900.placeholder-gray-500(name="text" type="text" autocomplete="username" required class="focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Username" v-model="form.username")
+                div
+                  label.sr-only(for="password") Password
+                  input#password.relative.block.w-full.appearance-none.rounded-none.rounded-b-md.border.border-gray-300.px-3.py-2.text-gray-900.placeholder-gray-500(name="password" type="password" autocomplete="current-password" required class="focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Password" v-model="form.password")
+              .flex.items-center.justify-between
+                .flex.items-center
+                  input#remember-me.h-4.w-4.rounded.border-gray-300.text-indigo-600(name="remember-me" type="checkbox" class="focus:ring-indigo-500")
+                  label.ml-2.block.text-sm.text-gray-900(for="remember-me") Remember me
+              div
+                button.group.relative.flex.w-full.justify-center.rounded-md.border.border-transparent.bg-indigo-600.py-2.px-4.text-sm.font-medium.text-white(type="submit" class="hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="save")
+                  span.absolute.inset-y-0.left-0.flex.items-center.pl-3
+                    // Heroicon name: mini/lock-closed
+                    svg.h-5.w-5.text-indigo-500(class="group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true")
+                      path(fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd")
+                  | Sign in
+
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "IndexPage",
+  head: {
+    title: "Signin · Verden",
+  },
+  computed: {
+    ...mapGetters("auth", ["isLogged", "me"]),
+  },
+  created() {
+    if (this.isLogged) window.location.href = "/";
+  },
+  data() {
+    return {
+      form: {},
+    };
+  },
+  methods: {
+    save(event) {
+      event.preventDefault();
+
+      const f = this.form;
+      if (!(f.username && f.password)) return;
+      this.$store.dispatch("auth/login", f).then((response) => {
+        if (response.status != 200) {
+          this.$toast.error(response.data.error);
+        } else {
+          this.$toast.success("Logged successfully");
+          setTimeout(() => {
+            window.location.href = "/";
+          }, 1000);
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/plugins/vue-toastification.js b/plugins/vue-toastification.js
new file mode 100644
index 0000000..a37fcfa
--- /dev/null
+++ b/plugins/vue-toastification.js
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import Toast from "vue-toastification";
+
+import "vue-toastification/dist/index.css";
+
+const options = {};
+
+Vue.use(Toast, options);
diff --git a/store/auth.js b/store/auth.js
index 55126dc..dbf989f 100644
--- a/store/auth.js
+++ b/store/auth.js
@@ -17,7 +17,7 @@ export const getters = {
 
 export const mutations = {
   saveAccessToken: (state, value) => {
-    localStorage.setItem("access_token", key);
+    localStorage.setItem("access_token", value);
     state.token = value;
   },
   // Remove access_token and credentials from the browser data
@@ -48,8 +48,7 @@ export const actions = {
         res.data = await response.json();
         res.status = response.status;
         if (res.status == 200) {
-          // This is usefull if the login is called by `keepAccess`
-          commit("saveUserInfo", res.data);
+          commit("saveAccessToken", res.data.access_token);
         } else {
           commit("logout");
         }
-- 
cgit v1.2.3-18-g5258