Add Login form and Core

- Added a login page /login
TODO: Add this form too all pages.
- Added Core, an Object which can be accessed from anywhere. Its added to the Vue prototype.

src/App.vue

@@ -13,7 +13,7 @@
 				<div v-if="user">
 					<span>Username: {{ user.username }}</span>
 				</div>
-				<span v-else>Login</span>
+				<router-link class="rl" to="/login" v-else>Login</router-link>
 			</div>
 		</header>
 
@@ -78,7 +78,6 @@
 
 	header .logo {
 		display: inline-block;
-		padding: 0.2em 1em;
 	}
 
 	header .menu-container {
@@ -94,4 +93,15 @@
 		margin-left: 8px;
 		margin-right: 8px;
 	}
+
+	.rl {
+		text-decoration: none;
+		color: #aaa;
+		padding: 0.2em 1em;
+	}
+
+	.rl:hover {
+		color: #ddd;
+		background-color: #333;
+	}
 </style>

src/main.js

@@ -2,9 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import Core from './scripts/core.js'
 
 Vue.config.productionTip = true
 
+const core = new Core(store)
+Vue.prototype.core = core
+
 new Vue({
   router,
   store,

src/router.js

@@ -15,6 +15,10 @@ export default new Router({
 			path: '/',
 			component: load('Mainpage')
 		},
+		{
+			path: '/login',
+			component: load('Login'),
+		},
 		{
 			path: '/impressum',
 			component: load('Impressum')

src/scripts/core.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+export default class {
+	constructor(vuex) {
+		this.vuex = vuex
+	}
+
+	lol(username, password) {
+		alert('Login attempt as user \'' + username + '\' with password \'' + password + '\'')
+	}
+}

src/views/Login.vue

@@ -0,0 +1,74 @@
+<template>
+	<div>
+		<h1>Login</h1>
+
+		<div v-if="!user">
+			<span>Username: </span>
+			<input @keyup.enter="usernameDone()" v-model="username" placeholder="username" ref="username"><br>
+
+			<span>Password: </span>
+			<input @keyup.enter="passwordDone()" v-model="password" placeholder="password" type="password" ref="password"><br>
+
+			<button @click="buttonDone()">Login</button><span class="error">{{ error }}</span><br>
+		</div>
+		<span v-else>You are logged in.</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				error: '',
+				username: '',
+				password: '',
+			}
+		},
+		mounted() {
+			this.$refs.username.focus()
+		},
+		computed: {
+			user() {
+				return this.$store.state.user
+			},
+		},
+		methods: {
+			usernameDone() {
+				if(this.username !== '' || this.validateData()) {
+					this.$refs.password.focus()
+				}
+			},
+			passwordDone() {
+				if(this.validateData()) {
+					this.attemptLogin()
+				}
+			},
+			buttonDone() {
+				if(this.validateData()) {
+					this.attemptLogin()
+				}
+			},
+			validateData() {
+				if(this.username === '') {
+					this.error = 'Please input a username'
+					this.$refs.username.focus()
+				} else if(this.password === '') {
+					this.error = 'Please input a password'
+					this.$refs.password.focus()
+				} else {
+					return true
+				}
+				return false
+			},
+			attemptLogin() {
+				this.core.lol(this.username, this.password)
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.error {
+		color: #d00;
+	}
+</style>