feat/ui-layout (#19)

feat: implement UI for forgot-password

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement new login page

feat: implement input shared component

Merge branch 'master' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

feat: implement auth header

Merge branch 'feat/ui-layout' of git.bubblev.org:bubblev/bubble-web into feat/ui-layout

capitalize filename

fix: webpack config to add output default url

Merge branch 'master' into feat/ui-layout

Merge branch 'master' into feat/ui-layout

feat: integrate lazy loading and new page structure

feat: use different layout for new Pages

Co-authored-by: Tyler <everdev0923@gmail.com>
Co-authored-by: Jonathan Cobb <jonathan@kyuss.org>
Co-authored-by: jonathan <jonathan@noreply.git.bubblev.org>
Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/19

src/_pages/auth/ForgotPassword.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="wrapper">
+    <h1 class="text-center white-text form-title">
+      {{ messages.form_title_forgotPassword }}
+    </h1>
+    <h4 class="text-center white-text form-sub-title">
+      {{ messages.forgot_password_blurb }}
+    </h4>
+
+    <form class="login-form">
+      <div class="form-group">
+        <Input
+          class="form-control"
+          v-model="email"
+          :placeholder="messages.field_email_hint"
+        />
+      </div>
+      <Button color="default" class="login-btn">
+        {{ messages.button_label_forgot_password }}
+      </Button>
+      <p class="text-center mt-3">
+        <router-link to="/sign-in">
+          {{ messages.forgot_password_login_link }}
+        </router-link>
+      </p>
+    </form>
+  </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>
+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/_pages/auth/Login.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="wrapper">
-    <h1 class="text-center white-text title">
+    <h1 class="text-center white-text form-title">
       {{ messages.login_title }}
     </h1>
-    <h4 class="text-center white-text sub-title">
+    <h4 class="text-center white-text form-sub-title">
       {{ messages.login_blurb }}
     </h4>
 
@@ -12,7 +12,7 @@
         <Input
           class="form-control"
           v-model="email"
-          :placeholder="messages.field_label_email"
+          :placeholder="messages.field_email_hint"
         />
       </div>
       <div class="form-group">
@@ -45,13 +45,6 @@
 <style lang="scss" scoped>
 @import '../../_scss/components/form';
 
-.title {
-  margin-top: 80px;
-}
-
-.sub-title {
-  margin-top: 16px;
-}
 
 .login-form {
   background-color: white;

src/_router/index.js

@@ -79,6 +79,10 @@ export const router = new Router({
               path: 'login',
               component: () => import('~/_pages/auth/Login'),
             },
+            {
+              path: 'forgot-password',
+              component: () => import('~/_pages/auth/ForgotPassword'),
+            },
           ],
         },
         {

src/_scss/components/_form.scss

@@ -1,2 +1,10 @@
 $form-box-shadow: 0px 5px 15px -10px #777;
 $form-border-radius: 2px;
+
+.form-title {
+  margin-top: 80px;
+}
+
+.form-sub-title {
+  margin-top: 16px;
+}