From 4185834eaf0cbc2c05590772c0efb15ba8426bf7 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Sun, 20 Dec 2020 21:14:14 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/About.vue     |  5 ---
 web/src/views/Dashboard.vue | 13 +++++++
 web/src/views/Home.vue      | 31 ++++++++++-------
 web/src/views/Login.vue     | 67 +++++++++++++++++++++++++++++++++++++
 4 files changed, 99 insertions(+), 17 deletions(-)
 delete mode 100644 web/src/views/About.vue
 create mode 100644 web/src/views/Dashboard.vue
 create mode 100644 web/src/views/Login.vue

diff --git a/web/src/views/About.vue b/web/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/web/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/web/src/views/Dashboard.vue b/web/src/views/Dashboard.vue
new file mode 100644
index 0000000..5e7df46
--- /dev/null
+++ b/web/src/views/Dashboard.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+name: "Dashboard"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 5016ce2..1a942ff 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,18 +1,25 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
+  <section class="hero is-light is-fullheight">
+    <div class="hero-body">
+      <div class="container">
+        <figure class="image is-5by3">
+          <img src="../assets/undraw_fitness_stats_sht6.svg">
+        </figure>
+        <h1 class="title">
+          Unleash your potential with ichnaea.
+        </h1>
+        <p class="subtitle">Metrics and live monitoring for your athletes. The future is IoT.</p>
+        <button class="button is-link is-rounded">
+          <router-link class="has-text-white" to="/login">Login</router-link>
+        </button>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+import {Vue} from 'vue-class-component';
 
-@Options({
-  components: {
-    HelloWorld,
-  },
-})
-export default class Home extends Vue {}
+export default class Home extends Vue {
+}
 </script>
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
new file mode 100644
index 0000000..5ff3b92
--- /dev/null
+++ b/web/src/views/Login.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="hero is-fullheight">
+    <div class="hero-body">
+      <div class="container">
+        <figure class="image is-5by3">
+          <img src="../assets/undraw_authentication_fsn5.svg">
+        </figure>
+        <h1 class="is-size-1">Login</h1>
+        <form @submit.prevent="login">
+          <div class="field">
+            <p class="control has-icons-left has-icons-right">
+              <input class="input" placeholder="Username" type="text" v-model="username">
+              <span class="icon is-small is-left">
+      <i class="fas fa-user"></i>
+    </span> <span class="icon is-small is-right">
+      <i class="fas fa-check"></i></span>
+            </p>
+          </div>
+          <div class="field">
+            <p class="control has-icons-left">
+              <input class="input" placeholder="Password" type="password" v-model="password">
+              <span class="icon is-small is-left">
+      <i class="fas fa-lock"></i></span>
+            </p>
+          </div>
+          <div class="field">
+            <p class="control">
+              <button type="submit" class="button is-success">
+                Login
+              </button>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+    <div class="hero-foot">
+      <footer class="footer">
+        <div class="content has-text-centered">
+          <p>
+            <span class="tag is-primary">Tip:</span> You can also register here!
+          </p>
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue} from 'vue-class-component';
+
+export default class Login extends Vue {
+  private username = '';
+  private password = '';
+
+  private login() {
+    let email = this.username
+    let password = this.password
+
+    this.$store.dispatch('login', {email, password})
+        .then(() => this.$router.push('/dashboard'))
+        .catch((err: Error) => {
+          console.log(err)
+          this.$router.push('/login')
+        })
+  }
+}
+</script>