From b1bb9f6e383b876e6d11ba4a63d9ec6951e6e043 Mon Sep 17 00:00:00 2001
From: Robert <rw@roko.li>
Date: Tue, 13 Apr 2021 11:01:50 +0200
Subject: [PATCH] Add basic signup form

---
 src/App.vue                  | 23 +----------------------
 src/components/LoginForm.vue | 31 +++++++++++++++++++++++++++++++
 src/components/Navbar.vue    |  4 ++--
 src/views/Home.vue           | 13 +++++++++----
 4 files changed, 43 insertions(+), 28 deletions(-)
 create mode 100644 src/components/LoginForm.vue

diff --git a/src/App.vue b/src/App.vue
index 641d58a..9441873 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,25 +13,4 @@ import Navbar from "@/components/Navbar.vue";
 export default class App extends Vue {}
 </script>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<style lang="scss"></style>
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
new file mode 100644
index 0000000..b750f6d
--- /dev/null
+++ b/src/components/LoginForm.vue
@@ -0,0 +1,31 @@
+<template>
+  <form class="box" @submit.prevent="">
+    <b-field label="E-Mail-Adresse">
+      <b-input type="email" icon="user" ref="email" />
+    </b-field>
+    <b-field label="Kennwort">
+      <b-input type="password" icon="key" />
+    </b-field>
+
+    <div v-if="false" class="notification is-danger">
+      Email or password was wrong.
+    </div>
+
+    <div class="buttons">
+      <b-button
+        native-type="submit"
+        type="is-primary"
+        style="margin-left: auto; margin-right: 0; order: 10"
+      >
+        Konto anlegen
+      </b-button>
+    </div>
+  </form>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LoginForm extends Vue {}
+</script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 05c8cbe..4d3b63f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -21,9 +21,9 @@
       <b-navbar-item tag="div">
         <div class="buttons">
           <a class="button is-primary">
-            <strong>Sign up</strong>
+            <strong>Konto anlegen</strong>
           </a>
-          <a class="button is-light"> Log in </a>
+          <a class="button is-light">Anmelden</a>
         </div>
       </b-navbar-item>
     </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d7adab0..a547742 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-  </div>
+  <section class="container">
+    <div class="columns is-centered">
+      <div class="column is-3-widescreen is-4-desktop is-3-tablet">
+        <LoginForm />
+      </div>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import LoginForm from "@/components/LoginForm.vue";
 
-@Component
+@Component({ components: { LoginForm } })
 export default class Home extends Vue {}
 </script>