Feat/login page

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>

src/assets/scss/base/components/form.scss

@@ -0,0 +1,8 @@
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  &--centered {
+    margin: 0 auto;
+  }
+}

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;
 }

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>

src/router/index.js

@@ -1,12 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
+import { Home, Login } from '../views';
 
 const routes = [
   {
     path: '/',
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+  },
 ];
 
 const router = createRouter({

src/views/Login.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="home"></div>
+
+  <Form :centered="true">
+    <Input />
+    <Input />
+  </Form>
+</template>
+
+<script>
+import { Form, Input } from '../components';
+
+export default {
+  name: 'Login',
+  components: {
+    Form,
+    Input,
+  },
+};
+</script>

src/views/index.js

@@ -0,0 +1,2 @@
+export { default as Home } from './Home.vue';
+export { default as Login } from './Login.vue';