From a11fc3ed69323f28bab385dac3740a4e2f391411 Mon Sep 17 00:00:00 2001
From: Robin Kemna <kemna.robin@gmail.com>
Date: Fri, 26 Feb 2021 01:47:33 +0100
Subject: [PATCH 1/4] feat: new login route

---
 src/App.vue         | 1 +
 src/router/index.js | 7 ++++++-
 src/views/Login.vue | 0
 src/views/index.js  | 2 ++
 4 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Login.vue
 create mode 100644 src/views/index.js

diff --git a/src/App.vue b/src/App.vue
index d5145a1..28efa5f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@
     <router-link to="/companies/">{{ $t('menu.companies') }}</router-link>
     <router-link to="/messages/">{{ $t('menu.messages') }}</router-link>
     <router-link to="/settings/">{{ $t('menu.settings') }}</router-link>
+    <router-link to="/login/">{{ $t('menu.login') }}</router-link>
   </div>
   <router-view />
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index 0810761..1bff0e7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
+import { Home, Login } from '../views';
 
 const routes = [
   {
@@ -7,6 +7,11 @@ const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/',
+    name: 'Login',
+    component: Login,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/index.js b/src/views/index.js
new file mode 100644
index 0000000..dacddb7
--- /dev/null
+++ b/src/views/index.js
@@ -0,0 +1,2 @@
+export { default as Home } from './Home.vue';
+export { default as Login } from './Login.vue';

From f3098ef24e5a9e991afff642fa87d408159b08d8 Mon Sep 17 00:00:00 2001
From: Robin Kemna <kemna.robin@gmail.com>
Date: Fri, 26 Feb 2021 02:33:57 +0100
Subject: [PATCH 2/4] fix: login route path

---
 src/router/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.js b/src/router/index.js
index 1bff0e7..f5982cc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,7 +8,7 @@ const routes = [
     component: Home,
   },
   {
-    path: '/',
+    path: '/login',
     name: 'Login',
     component: Login,
   },

From 6092f15304037839e15dd6fc54e18685355f2df5 Mon Sep 17 00:00:00 2001
From: Robin Kemna <kemna.robin@gmail.com>
Date: Fri, 26 Feb 2021 02:35:07 +0100
Subject: [PATCH 3/4] [WIP]: login page

---
 src/views/Login.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index e69de29..661d238 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="home"></div>
+
+  <Form>
+    <Input />
+    <Input />
+  </Form>
+</template>
+
+<script>
+import { Form, Input } from '../components';
+
+export default {
+  name: 'Login',
+  components: {
+    Form,
+    Input,
+  },
+};
+</script>

From 215414742173a5d6c0d63f791cf8499006e25cdb Mon Sep 17 00:00:00 2001
From: Robin Kemna <kemna.robin@gmail.com>
Date: Fri, 26 Feb 2021 03:02:54 +0100
Subject: [PATCH 4/4] [WIP]: feat form login with styling

---
 src/assets/scss/base/components/form.scss |  8 ++++++++
 src/assets/scss/base/main.scss            |  2 ++
 src/components/Form.vue                   | 11 +++++++++--
 src/views/Login.vue                       |  2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/scss/base/components/form.scss

diff --git a/src/assets/scss/base/components/form.scss b/src/assets/scss/base/components/form.scss
new file mode 100644
index 0000000..3632f9c
--- /dev/null
+++ b/src/assets/scss/base/components/form.scss
@@ -0,0 +1,8 @@
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  &--centered {
+    margin: 0 auto;
+  }
+}
diff --git a/src/assets/scss/base/main.scss b/src/assets/scss/base/main.scss
index ca6bb05..0217f63 100644
--- a/src/assets/scss/base/main.scss
+++ b/src/assets/scss/base/main.scss
@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
 
+@import './components/form.scss';
+
 html {
   font-size: 10px;
 }
diff --git a/src/components/Form.vue b/src/components/Form.vue
index b36915e..f52e12b 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,5 +1,9 @@
 <template>
-  <form @submit.prevent="true" @submit.once="this.$props.onSubmit" class="w-full rounded-3xl">
+  <form
+    :class="centered && 'form--centered'"
+    @submit.prevent="true"
+    @submit.once="this.$props.onSubmit"
+  >
     <slot v-for="slot in this.$slots">{{ slot }}</slot>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
@@ -10,7 +14,10 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'Form',
-  props: { onSubmit: { type: Function, default: () => null } },
+  props: {
+    onSubmit: { type: Function, default: () => null },
+    centered: { type: Boolean, default: false },
+  },
 });
 </script>
 <style></style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 661d238..739d1f7 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home"></div>
 
-  <Form>
+  <Form :centered="true">
     <Input />
     <Input />
   </Form>