feat: implement mail verification screen

package-lock.json

@@ -4370,6 +4370,11 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "lottie-web": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.1.tgz",
+      "integrity": "sha512-f7kO4Qcurldc9SWfGUuwgs96/SCT+hwATMCdMK6I/sd6EYK3Y0Ciz40yAvq0x9uXzrk6KKcnQrqijZM8Ir4Drg=="
+    },
     "lower-case": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
@@ -7746,6 +7751,14 @@
         }
       }
     },
+    "vue-lottie": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vue-lottie/-/vue-lottie-0.2.1.tgz",
+      "integrity": "sha512-zInUX69Ij8MhVR3XArpu4PqqBoufwKxS5UMutWCPm59VUaB5H6GtnaIzf9M+l6aYU+Kr8gF/W9dzWLgRuU6V+Q==",
+      "requires": {
+        "lottie-web": "^5.1.9"
+      }
+    },
     "vue-router": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.6.tgz",

package.json

@@ -11,6 +11,7 @@
     "dev": "webpack-dev-server --open --config webpack.config.dev.js"
   },
   "dependencies": {
+    "lottie-web": "^5.7.1",
     "luxon": "^1.21.3",
     "qrcode": "^1.4.4",
     "safe-eval": "^0.4.1",

src/_assets/messages.json

@@ -1,2 +1,6 @@
 {
+  "verify_email_title": "Please verify your email address",
+  "resend_verify_email_label": "Did you not received the email?",
+  "button_label_resend_verify_email": "Resend it.",
+  "more_features_label": "More Features"
 }

src/_components/layout/Header.vue

@@ -1,30 +1,56 @@
 <template>
-  <div class="header d-flex align-items-center">
+  <div class="header d-flex align-items-center justify-content-center">
     <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 justify-content-center align-items-center d-none d-md-flex"
-      >
-        <router-link to="/help" class="d-flex align-items-center">
-          <Button link>
-            {{ messages.button_label_help }}
-          </Button>
-        </router-link>
-        <router-link
-          v-if="configs.allowRegistration === true"
-          to="/register"
-          class="d-flex align-items-center"
+      <div class="navbar d-none d-md-flex">
+        <!--- If not logged in --->
+        <div
+          v-if="status.loggedIn === false"
+          class="d-flex justify-content-center align-items-center"
         >
-          <Button link>
-            {{ messages.button_label_sign_up }}
-          </Button>
-        </router-link>
-        <router-link to="/login" class="d-flex align-items-center">
-          <Button color="default" width="118" height="48">
-            {{ messages.button_label_sign_in }}
-          </Button>
-        </router-link>
+          <router-link to="/help" class="d-flex align-items-center">
+            <Button headerLink>
+              {{ messages.button_label_help }}
+            </Button>
+          </router-link>
+          <router-link
+            v-if="configs.allowRegistration === true"
+            to="/register"
+            class="d-flex align-items-center"
+          >
+            <Button headerLink>
+              {{ messages.button_label_sign_up }}
+            </Button>
+          </router-link>
+          <router-link to="/login" class="d-flex align-items-center">
+            <Button color="default" width="118" height="48">
+              {{ messages.button_label_sign_in }}
+            </Button>
+          </router-link>
+        </div>
+        <div v-else class="d-flex justify-content-center align-items-center">
+          <router-link to="/" class="d-flex align-items-center">
+            <Button headerLink>
+              {{ messages.label_menu_dashboard }}
+            </Button>
+          </router-link>
+          <router-link to="/bubbles" class="d-flex align-items-center">
+            <Button headerLink>
+              {{ messages.label_menu_network }}
+            </Button>
+          </router-link>
+          <router-link to="/help" class="d-flex align-items-center">
+            <Button headerLink>
+              {{ messages.button_label_help }}
+            </Button>
+          </router-link>
+          <router-link to="/logout" class="d-flex align-items-center">
+            <Button color="default" width="118" height="48">
+              {{ messages.label_menu_logout }}
+            </Button>
+          </router-link>
+        </div>
       </div>
       <div class="navbar d-md-none" @click="toggleNavbar()">
         <i class="fas fa-bars"></i>
@@ -36,15 +62,31 @@
       :class="{ show: menuVisible }"
       v-click-outside="hide"
     >
-      <router-link class="dropdown-item" to="#">
-        {{ messages.button_label_help }}
-      </router-link>
-      <router-link class="dropdown-item" to="/register">
-        {{ messages.button_label_sign_up }}
-      </router-link>
-      <router-link class="dropdown-item" to="/login">
-        {{ messages.button_label_sign_in }}
-      </router-link>
+      <div v-if="status.loggedIn === false">
+        <router-link class="dropdown-item" to="#">
+          {{ messages.button_label_help }}
+        </router-link>
+        <router-link class="dropdown-item" to="/register">
+          {{ messages.button_label_sign_up }}
+        </router-link>
+        <router-link class="dropdown-item" to="/login">
+          {{ messages.button_label_sign_in }}
+        </router-link>
+      </div>
+      <div v-else>
+        <router-link class="dropdown-item" to="/">
+          {{ messages.label_menu_dashboard }}
+        </router-link>
+        <router-link class="dropdown-item" to="/bubbles">
+          {{ messages.label_menu_network }}
+        </router-link>
+        <router-link class="dropdown-item" to="/help">
+          {{ messages.button_label_help }}
+        </router-link>
+        <router-link class="dropdown-item" to="/logout">
+          {{ messages.label_menu_logout }}
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
@@ -92,18 +134,23 @@ export default {
   data() {
     return {
       menuVisible: false,
+      prevVisibleState: false
     };
   },
 
   computed: {
     ...mapState('system', ['messages', 'configs']),
+    ...mapState('account', ['status']),
   },
 
   methods: {
     toggleNavbar() {
-      this.menuVisible = !this.menuVisible;
+      console.log('toggleNavbar');
+      this.menuVisible = !this.prevVisibleState;
     },
     hide() {
+      console.log('hide');
+      this.prevVisibleState = this.menuVisible;
       this.menuVisible = false;
     },
   },

src/_components/shared/Button.vue

@@ -5,8 +5,9 @@
       round: round,
       block: block,
       [`color-${color}`]: color,
+      'header-link': headerLink,
       link: link,
-      disabled: disabled
+      disabled: disabled,
     }"
     :disabled="disabled"
     :style="cssVars"
@@ -31,6 +32,7 @@
   width: var(--width);
   cursor: pointer;
   border: 1px solid $border-color;
+  display: inline-block;
 
   &:focus {
     outline: none;
@@ -53,7 +55,7 @@
     padding: 5px 20px;
   }
 
-  &.link {
+  &.header-link {
     background-color: transparent;
     border: none;
     color: #737373;
@@ -63,6 +65,15 @@
     }
   }
 
+  &.link {
+    background-color: transparent;
+    border: none;
+
+    .btn--text {
+      padding: 0 10px;
+    }
+  }
+
   // TODP: color schemas
   &.color-default {
     background: linear-gradient(300deg, #b838c9 -5%, #ee2f8e 95%);
@@ -92,6 +103,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    headerLink: {
+      type: Boolean,
+      default: false,
+    },
     link: {
       type: Boolean,
       default: false,
@@ -124,7 +139,7 @@ export default {
         '--height': `${this.height}px`.replace('pxpx', 'px'),
         '--width': this.width
           ? `${this.width}px`.replace('pxpx', 'px')
-          : '100%',
+          : '',
       };
     },
   },

src/_pages/auth/Layout.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="auth-layout h-100 d-flex flex-column">
-    <Header></Header>
-    <div :class="backgroundClass" class="content flex-grow-1">
-      <router-view></router-view>
-    </div>
+  <div
+    :class="backgroundClass"
+    class="auth-layout d-flex flex-column content"
+  >
+    <router-view></router-view>
   </div>
 </template>
 

src/_pages/auth/VerifyEmail.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="wrapper">
+    <h1 class="text-center white-text form-title">
+      {{ messages.verify_email_title }}
+    </h1>
+    <h4 class="d-flex align-items-center justify-content-center form-sub-title">
+      <span class="text-center white-text">
+        {{ messages.resend_verify_email_label }}
+      </span>
+      <a class="resend-btn" href="#">
+        {{ messages.button_label_resend_verify_email }}
+      </a>
+    </h4>
+
+    <div class="d-flex justify-content-center mt-5">
+      <div ref="lottie" class="lottie"></div>
+    </div>
+
+    <Features></Features>
+
+    <a
+      class="features-section-link text-center d-block"
+      href="https://getbubblenow.com/features/"
+    >
+      {{ messages.more_features_label }}
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../_scss/components/form';
+
+.features-section-link {
+  color: $vivid-navy;
+  font-size: 16px;
+  margin-top: 25px;
+}
+
+.sub-title {
+  font-size: 24px;
+}
+
+.lottie {
+  width: 400px;
+}
+
+.resend-btn {
+  text-decoration: underline;
+  color: white;
+  margin-left: 10px;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+import Lottie from 'lottie-web';
+
+import { Features } from '~/_components/sections';
+
+export default {
+  components: {
+    Features,
+  },
+
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+
+  mounted() {
+    Lottie.loadAnimation({
+      container: this.$refs.lottie,
+      renderer: '',
+      loop: true,
+      autoplay: true,
+      path: '/green_email_sent.json',
+    });
+  },
+};
+</script>

src/_router/index.js

@@ -74,7 +74,12 @@ export const router = new Router({
         {
           path: '',
           component: () => import('~/_pages/auth/Layout'),
-          children: [],
+          children: [
+            {
+              path: 'verify-email',
+              component: () => import('~/_pages/auth/VerifyEmail'),
+            },
+          ],
         },
         {
           path: '',

src/app/App.vue

@@ -1,10 +1,13 @@
 <!-- Copyright (c) 2020 Bubble, Inc. All rights reserved. For personal (non-commercial) use, see license: https://getbubblenow.com/bubble-license/ -->
 <template>
   <div v-if="isNewPage" class="page-container">
+    <Header></Header>
+
     <router-view></router-view>
     <vue-snotify></vue-snotify>
   </div>
   <div v-else>
+    <Header></Header>
     <div v-if="!configs"><img :src="loadingImgSrc" /></div>
 
     <div v-else class="jumbotron">
@@ -119,9 +122,13 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { util } from '~/_helpers';
 import { loadingImgSrc } from '~/_store';
+import { Header } from '~/_components/layout';
 
 export default {
   name: 'app',
+  components: {
+    Header,
+  },
   data() {
     return {
       showLocaleSelector: false,

src/index.html

@@ -99,7 +99,7 @@
         }
         .dash-icon-panel {
             position: fixed;
-            top: 30px;
+            top: 120px;
             left: 30px;
             width: auto;
         }