package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

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>
 
@@ -31,15 +31,20 @@
 	export default {
 		data () {
 			return {
-				user: null,
 				menu_entries: {
 					'Startpage': '/',
 					'Applications': '/applications',
 					'Development Blog': '/devblog',
-				}
+				},
 			}
 		},
 
+		computed: {
+			user() {
+				return this.$store.state.user
+			},
+		},
+
 		components: {
 			MenuContainer
 		},
@@ -73,7 +78,6 @@
 
 	header .logo {
 		display: inline-block;
-		padding: 0.2em 1em;
 	}
 
 	header .menu-container {
@@ -89,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,50 @@
+import axios from "axios";
+
+export default class {
+	constructor(vuex) {
+		this.vuex = vuex
+	}
+
+	commit(method, data)
+	{
+		this.vuex.commit(method, data)
+	}
+
+	post(path, data)
+	{
+		return axios
+				.post('https://live.ecconia.de' + path, data)
+				.catch((error) => {
+					console.error('Error: ', error)
+				})
+	}
+
+	get(path)
+	{
+		return axios
+				.get('https://live.ecconia.de' + path)
+				.catch((error) => {
+					console.error('Error: ', error)
+				})
+	}
+
+	lol(username, password) {
+		//TODO: return promise somehow
+		//alert('Login attempt as user \'' + username + '\' with password \'' + password + '\'')
+
+		/*
+		this.get('/soos')
+			.then(function (response) {
+				console.log('Response: ', response.data)
+			})
+		*/
+
+		this.post('/login', {
+			username: username,
+			password: password,
+		}).then((response) => {
+			console.log('Response: ', response.data)
+			this.commit('setUser', response.data)
+		})
+	}
+}

src/store.js

@@ -4,13 +4,16 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
+	strict: process.env.NODE_ENV !== 'production',
+	state: {
+		user: null,
+	},
+	mutations: {
+		setUser(state, user) {
+			state.user = user
+		}
+	},
+	actions: {
 
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
+	}
 })

src/views/Applications.vue

@@ -3,6 +3,11 @@
 		<h1>Applications:</h1>
 		<p>This area is basically the first big GOAL of the final product. Creating and Judging apps. The path to get here is quite long though, many other issues have to be solved first.</p>
 
+		<div v-if="getUser && getUser.rank === undefined">
+			<router-link to="/myapp" v-if="getUser.appstate === 0">Create application.</router-link>
+			<router-link to="/myapp" v-else-if="getUser.appstate === 1">Edit application.</router-link>
+		</div>
+
 		<div class="app-container">
 			<router-link class="app-entry" :to="{ name: 'application', params: { id: app.id }}" v-for="app in apps" :key="app.id">
 				<p>Name: {{ app.playername }} </p>
@@ -52,6 +57,11 @@
 		},
 		created () {
 		},
+		computed: {
+			getUser() {
+				return this.$store.state.user
+			},
+		},
 		methods: {
 			readableTime(timestamp) {
 				let date = new Date(timestamp * 1000)

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>