feat: implement new login page

src/_components/layout/Header.vue

@@ -1,25 +1,25 @@
 <template>
-  <div
-    class="d-flex justify-content-center align-items-center container header"
-  >
-    <img src="/small-BubbleLogo-Horizontal-BlackText.png" height="40" />
-    <div class="flex-grow-1"></div>
-    <div class="navbar d-flex justify-content-center align-items-center ">
-      <router-link to="/help" class="d-flex align-items-center">
-        <Button link>
-          {{ messages.button_label_help || 'Help' }}
-        </Button>
-      </router-link>
-      <router-link to="/sign-up" class="d-flex align-items-center">
-        <Button link>
-          {{ messages.button_label_sign_up || 'Sign Up' }}
-        </Button>
-      </router-link>
-      <router-link to="/help" class="d-flex align-items-center">
-        <Button color="default" width="118" height="48">
-          {{ messages.button_label_sign_in || 'Sign In' }}
-        </Button>
-      </router-link>
+  <div class="header">
+    <div class="d-flex justify-content-center align-items-center container ">
+      <img src="/small-BubbleLogo-Horizontal-BlackText.png" height="40" />
+      <div class="flex-grow-1"></div>
+      <div class="navbar d-flex justify-content-center align-items-center ">
+        <router-link to="/help" class="d-flex align-items-center">
+          <Button link>
+            {{ messages.button_label_help || 'Help' }}
+          </Button>
+        </router-link>
+        <router-link to="/sign-up" class="d-flex align-items-center">
+          <Button link>
+            {{ messages.button_label_sign_up || 'Sign Up' }}
+          </Button>
+        </router-link>
+        <router-link to="/help" class="d-flex align-items-center">
+          <Button color="default" width="118" height="48">
+            {{ messages.button_label_sign_in || 'Sign In' }}
+          </Button>
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -28,7 +28,7 @@
 .header {
   background-color: white;
 
-  height: 85px;
+  height: 80px;
 
   .navbar {
     height: 100%;

src/_components/shared/Button.vue

@@ -44,6 +44,7 @@
   }
 
   .btn--text {
+    text-transform: uppercase;
     padding: 5px 20px;
   }
 

src/_pages/auth/Login.vue

@@ -1,9 +1,101 @@
 <template>
-  <div>
-    New Login Page
+  <div class="wrapper">
+    <h1 class="text-center white-text title">
+      {{ messages.login_title }}
+    </h1>
+    <h4 class="text-center white-text sub-title">
+      {{ messages.login_blurb }}
+    </h4>
+
+    <form class="login-form">
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="email"
+          :placeholder="messages.field_label_email"
+        />
+      </div>
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="password"
+          :placeholder="messages.field_label_password"
+        />
+      </div>
+      <router-link to="/new_pages/forgot-password">
+        {{ messages.button_label_forgotPassword }}
+      </router-link>
+      <Button color="default" class="login-btn">
+        {{ messages.button_label_sign_in }}
+      </Button>
+      <p
+        class="text-center privacy-description"
+        v-html="messages.message_login_agreeToTerms"
+      ></p>
+    </form>
+    <p class="text-center mt-4">
+      {{ messages.registration_label }}
+      <router-link to="/sign-up">
+        {{ messages.button_label_sign_up }}
+      </router-link>
+    </p>
   </div>
 </template>
 
+<style lang="scss" scoped>
+@import '../../_scss/components/form';
+
+.title {
+  margin-top: 80px;
+}
+
+.sub-title {
+  margin-top: 16px;
+}
+
+.login-form {
+  background-color: white;
+  box-shadow: $form-box-shadow;
+
+  width: 450px;
+  max-width: 90%;
+  margin: 80px auto 0;
+  padding: 40px 36px;
+
+  border-radius: $form-border-radius;
+}
+
+.login-btn {
+  margin-top: 55px;
+}
+
+.privacy-description {
+  width: 280px;
+  font-size: 14px;
+  margin: 32px auto 8px;
+}
+</style>
+
 <script>
-export default {};
+import { mapState } from 'vuex';
+
+import { Button, Input } from '~/_components/shared';
+
+export default {
+  components: {
+    Button,
+    Input,
+  },
+
+  data() {
+    return {
+      email: '',
+      password: '',
+    };
+  },
+
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+};
 </script>

src/_scss/_base.scss

@@ -1,3 +1,12 @@
-html, body {
-  font-family: 'Luto';
+@import 'variables';
+
+@import 'components/text';
+
+// html,
+// body {
+//   font-family: 'Lato';
+// }
+
+p {
+  color: $default-text-color;
 }

src/_scss/_variables.scss

@@ -72,6 +72,8 @@ $bright-cyan-8: #bcf1e1;
 $bright-cyan-9: #cdf4e8;
 $bright-cyan-10: #def8f0;
 
+$background-color: #e5e5e5;
+$default-text-color: #666666;
 
 // fonts
-$default-font-family: 'Lato';
+$default-font-family: 'Lato';

src/_scss/components/_form.scss

@@ -0,0 +1,2 @@
+$form-box-shadow: 0px 5px 15px -10px #777;
+$form-border-radius: 2px;

src/_scss/components/_text.scss

@@ -0,0 +1,8 @@
+.white-text {
+  color: white;
+}
+
+a {
+  color: $vivid-navy;
+  text-decoration: none;
+}

src/_scss/variables.scss

@@ -1,74 +0,0 @@
-// Copyright (c) 2020 Bubble, Inc.  All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/
-// color codes
-
-$deep-purple: #3607a6;
-$deep-purple-1: #4709d7;
-$deep-purple-2: #5814f5;
-$deep-purple-3: #6628f6;
-$deep-purple-4: #733bf7;
-$deep-purple-5: #814ff8;
-$deep-purple-6: #8f62f8;
-$deep-purple-7: #3a07b0;
-$deep-purple-8: #ba9efa;
-$deep-purple-9: #d5c5fc;
-$deep-purple-10: #e3d8fd;
-
-$vivid-navy: #221fe0;
-$vivid-navy-1: #3c3ae4;
-$vivid-navy-2: #4e4be7;
-$vivid-navy-3: #605de9;
-$vivid-navy-4: #716feb;
-$vivid-navy-5: #8381ee;
-$vivid-navy-6: #9593f0;
-$vivid-navy-7: #a7a5f3;
-$vivid-navy-8: #bab7f6;
-$vivid-navy-9: #cbc9f8;
-$vivid-navy-10: #dcdafb;
-
-$strong-purple: #7a11b1;
-$strong-purple-1: #8c14cc;
-$strong-purple-2: #9916df;
-$strong-purple-3: #aa33eb;
-$strong-purple-4: #b245ed;
-$strong-purple-5: #c16af0;
-$strong-purple-6: #c97df2;
-$strong-purple-7: #d9a2f6;
-$strong-purple-8: #e0b5f8;
-$strong-purple-9: #e8c7fa;
-$strong-purple-10: #f0d9fc;
-
-$vivid-pink: #f92c8b;
-$vivid-pink-1: #f94d9d;
-$vivid-pink-2: #f962a8;
-$vivid-pink-3: #fa75b3;
-$vivid-pink-4: #fb89be;
-$vivid-pink-5: #fb9dc9;
-$vivid-pink-6: #fcb1d4;
-$vivid-pink-7: #fdc4df;
-$vivid-pink-8: #fed8e9;
-$vivid-pink-9: #feebf4;
-$vivid-pink-10: #fdf5f9;
-
-$light-blue: #54c7ea;
-$light-blue-1: #6ecfed;
-$light-blue-2: #80d5ef;
-$light-blue-3: #92dbf2;
-$light-blue-4: #a4e1f4;
-$light-blue-5: #b6e7f6;
-$light-blue-6: #c9edf8;
-$light-blue-7: #d7eef8;
-$light-blue-8: #dbf3fa;
-$light-blue-9: #e4f3f9;
-$light-blue-10: #edf9fd;
-
-$bright-cyan: #2ed1a1;
-$bright-cyan-1: #47d7ac;
-$bright-cyan-2: #58dab3;
-$bright-cyan-3: #68debb;
-$bright-cyan-4: #79e2c2;
-$bright-cyan-5: #8ae5ca;
-$bright-cyan-6: #9be9d1;
-$bright-cyan-7: #abedd9;
-$bright-cyan-8: #bcf1e1;
-$bright-cyan-9: #cdf4e8;
-$bright-cyan-10: #def8f0;

src/app/App.vue

@@ -105,10 +105,13 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
+@import '../_scss/base';
+
 .page-container {
   width: 100vw;
   height: 100vh;
+  background-color: $background-color;
 }
 </style>
 

src/index.js

@@ -4,7 +4,7 @@
  */
 import Vue from 'vue';
 import VeeValidate from 'vee-validate';
-import vSelect from 'vue-select'
+import vSelect from 'vue-select';
 import { Datetime } from 'vue-datetime';
 
 // not sure what the best way is to include these icons
@@ -13,13 +13,11 @@ import { Datetime } from 'vue-datetime';
 // import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // library.add(faCoffee);
 
-import 'vue-select/dist/vue-select.css';
-
 import { store } from './_store';
 import { router } from './_router';
 import TotpModal from './_components/TotpModal';
 import FieldDisplay from './_components/FieldDisplay';
-import FormField from "./_components/FormField";
+import FormField from './_components/FormField';
 import App from './app/App';
 
 Vue.use(VeeValidate);
@@ -34,8 +32,8 @@ Vue.config.productionTip = false;
 // Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 new Vue({
-    el: '#app',
-    router,
-    store,
-    render: h => h(App)
-});
+  el: '#app',
+  router,
+  store,
+  render: (h) => h(App),
+});

webpack.config.js

@@ -32,7 +32,7 @@ module.exports = {
       },
       {
         test: /\.s[ac]ss$/i,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: ['css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jpe?g|gif)$/i,