From efb0088ebfb689eede394a71e72531432868e88b Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Thu, 6 Sep 2018 20:15:49 +0200
Subject: [PATCH] Styled login

---
 src/App.vue              | 11 +++-------
 src/components/Login.vue | 45 ++++++++++++++++++++++++++--------------
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 32c1b5b3..136aa030 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <template>
 	<div id="app">
-		<h1>Test</h1>
 		<router-view/>
 	</div>
 </template>
@@ -12,12 +11,8 @@
 </script>
 
 <style>
-	#app {
-		font-family: 'Avenir', Helvetica, Arial, sans-serif;
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		text-align: center;
-		color: #2c3e50;
-		margin-top: 60px;
+	body {
+		background: #f5f5f5;
+		min-height: 100vh;
 	}
 </style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 0d91d174..abca443a 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,20 +1,35 @@
 <template>
-	<div>
-		<h2>
-			Login
-		</h2>
-		<form id="loginform" @submit.prevent="submit">
-			<input type="text" name="username" placeholder="Username" v-model="credentials.username" required>
-			<input type="password" name="password" placeholder="Password" v-model="credentials.password" required>
-			<button type="submit" class="ui fluid large blue submit button">Login</button>
-			<div class="ui info message" v-if="loading">
-				<icon name="refresh" spin></icon>&nbsp;&nbsp;
-				Loading...
+	<div class="container has-text-centered">
+		<div class="column is-4 is-offset-4">
+			<h2 class="title">Login</h2>
+			<div class="box">
+				<form id="loginform" @submit.prevent="submit">
+					<div class="field">
+						<div class="control">
+							<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						</div>
+					</div>
+					<div class="field">
+						<div class="control">
+							<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
+						</div>
+					</div>
+
+					<div class="field is-grouped">
+						<div class="control">
+							<button type="submit" class="button is-link">Login</button>
+						</div>
+					</div>
+					<div class="notification is-info" v-if="loading">
+						Loading...
+					</div>
+					<div class="notification is-danger" v-if="error">
+						{{ error }}
+					</div>
+				</form>
+
 			</div>
-			<div class="ui error message" v-if="error" style="display: block;">
-				{{ error }}
-			</div>
-		</form>
+		</div>
 	</div>
 </template>