From 77deb525df91e764f2da9f82bd6f5b132ebf4f7e Mon Sep 17 00:00:00 2001
From: Daniel-I-Am <djdecloet@gmail.com>
Date: Thu, 2 Sep 2021 12:40:34 +0200
Subject: [PATCH] Add login page

---
 resources/js/router-app.js   |  2 ++
 resources/js/views/Login.vue | 67 ++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 resources/js/views/Login.vue

diff --git a/resources/js/router-app.js b/resources/js/router-app.js
index 065e683..9f36677 100644
--- a/resources/js/router-app.js
+++ b/resources/js/router-app.js
@@ -5,6 +5,7 @@ import Blog from './views/Blog.vue';
 import BlogArticle from './views/BlogArticle.vue';
 import Snippets from './views/Snippets.vue';
 import Contact from './views/Contact.vue';
+import Login from './views/Login.vue';
 
 import NotFound from './views/NotFound.vue';
 
@@ -14,6 +15,7 @@ const routes = [
     { path: '/blog/:year/:month/:day/:id-:slug', name: 'blog-article', component: BlogArticle, props: true },
     { path: '/snippets', name: 'snippets', component: Snippets },
     { path: '/contact', name: 'contact', component: Contact },
+    { path: '/login', name: 'login', component: Login },
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
 ];
 
diff --git a/resources/js/views/Login.vue b/resources/js/views/Login.vue
new file mode 100644
index 0000000..61ffba7
--- /dev/null
+++ b/resources/js/views/Login.vue
@@ -0,0 +1,67 @@
+<template>
+    <page-header></page-header>
+
+    <container>
+        <p>
+            <span v-if="!!tokenId">Authenticated with token ID {{ tokenId }}</span><br/>
+            Authentication status: {{ status ? 'Valid' : 'Invalid' }}
+            <button @click="checkValidity">Refresh</button>
+        </p>
+    </container>
+</template>
+
+<script>
+import PageHeader from "../components/PageHeader.vue";
+import Container from "../components/Container.vue";
+
+export default {
+    components: {
+        PageHeader,
+        Container,
+    },
+    data() {
+        return {
+            status: false,
+            tokenId: null
+        };
+    },
+    mounted() {
+        if (!this.getCurrentToken()) {
+            this.requestNewToken();
+        } else {
+            this.checkValidity();
+        }
+    },
+    methods: {
+        requestNewToken() {
+            axios.post('/api/auth')
+                .then(res => {
+                    window.localStorage.setItem('authentication-token', JSON.stringify(res.data));
+                    axios.defaults.headers.common.Authorization = res.data.token;
+                    this.tokenId = res.data.id;
+                });
+        },
+        checkValidity() {
+            axios.get('/api/auth')
+                .then(res => {
+                    this.status = res.data.status;
+                });
+        },
+        getCurrentToken() {
+            if (!!axios.defaults.headers.common.Authorization) {
+                return axios.defaults.headers.common.Authorization;
+            }
+
+            if (window.localStorage.getItem('authentication-token')) {
+                const tokenData = JSON.parse(window.localStorage.getItem('authentication-token'));
+
+                if (moment(tokenData.valid_until) > moment()) {
+                    this.tokenId = tokenData.id;
+                    axios.defaults.headers.common.Authorization = tokenData.token;
+                    return tokenData.token;
+                }
+            }
+        }
+    }
+}
+</script>