Email verification page (#27)

feat: implement mail verification screen

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

feat: prevent registration when the configs.allowRegistration is set to false

fix: weird routing

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

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

feat: implement actual pages

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

feat: api integration for register page

fix: messages

feat: api integration for forget-password page

fix: login title and password placeholder

feat: disable button until get response

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

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

feat: integrate api for new login page

feat: implement responsive header

feat: implement checkbox

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

fix: checkbox event issue

feat: implement register page

feat: implement registration page

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

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/27

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,26 +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 to="/register" class="d-flex 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>
+      <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"
+        >
+          <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>
@@ -32,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>
@@ -74,7 +120,7 @@
 <script>
 import ClickOutside from 'vue-click-outside';
 
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 import { Button } from '~/_components/shared';
 
 export default {
@@ -88,18 +134,23 @@ export default {
   data() {
     return {
       menuVisible: false,
+      prevVisibleState: false
     };
   },
 
   computed: {
-    ...mapState('system', ['messages']),
+    ...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/sections/Features.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <!--- We've Got You Covered Section --->
+    <h2 class="covered-section-title text-center">
+      {{ messages.marketing_message_got_you_covered_title }}
+    </h2>
+    <div class="row" v-if="messages && messages.marketing_message_topics">
+      <div
+        v-for="(item, index) in messages.marketing_message_topics.split(',')"
+        :key="index"
+        class="col-lg-3 col-md-6 col-sm-12 my-4 px-3"
+      >
+        <Card>
+          <div class="card-content">
+            <span
+              class="card-icon"
+              :style="{
+                color: messages[`marketing_message_${item}_color`],
+                backgroundColor:
+                  messages[`marketing_message_${item}_background_color`],
+              }"
+              v-html="messages[`marketing_message_${item}_icon`]"
+            >
+            </span>
+            <p class="card-title">
+              {{ messages[`marketing_message_${item}_title`] }}
+            </p>
+            <span class="card-message">
+              {{ messages[`marketing_message_${item}_content`] }}
+            </span>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.covered-section-title {
+  margin-top: 64px;
+  margin-bottom: 20px;
+  color: #3c3c3c;
+}
+</style>
+
+<script>
+import { mapState } from 'vuex';
+import { Card } from '../shared';
+
+export default {
+  components: {
+    Card,
+  },
+  computed: {
+    ...mapState('system', ['messages']),
+  },
+};
+</script>

src/_components/sections/index.js

@@ -0,0 +1 @@
+export { default as Features } from './Features';

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/ForgotPassword.vue

@@ -36,7 +36,7 @@
         {{ messages.button_label_forgot_password }}
       </Button>
       <p class="text-center mt-3">
-        <router-link to="/sign-in">
+        <router-link to="/login">
           {{ messages.forgot_password_login_link }}
         </router-link>
       </p>

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/Login.vue

@@ -143,9 +143,9 @@
         v-html="messages.message_login_agreeToTerms"
       ></p>
     </form>
-    <p class="text-center mt-4">
+    <p class="text-center mt-4" v-if="configs.allowRegistration === true">
       {{ messages.registration_label }}
-      <router-link to="/sign-up">
+      <router-link to="/register">
         {{ messages.button_label_sign_up }}
       </router-link>
     </p>
@@ -191,10 +191,6 @@ export default {
     };
   },
 
-  created() {
-    this.loadSystemConfigs();
-  },
-
   computed: {
     ...mapState('account', [
       'status',
@@ -241,7 +237,6 @@ export default {
 
   methods: {
     ...mapActions('account', ['login', 'logout']),
-    ...mapActions('system', ['loadSystemConfigs']),
 
     submit() {
       this.errors.clear();

src/_pages/auth/Register.vue

@@ -147,38 +147,7 @@
       </div>
     </form>
 
-    <!--- We've Got You Covered Section --->
-    <h2 class="covered-section-title text-center">
-      {{ messages.marketing_message_got_you_covered_title }}
-    </h2>
-    <div class="row" v-if="messages && messages.marketing_message_topics">
-      <div
-        v-for="(item, index) in messages.marketing_message_topics.split(',')"
-        :key="index"
-        class="col-lg-3 col-md-6 col-sm-12 my-4 px-3"
-      >
-        <Card>
-          <div class="card-content">
-            <span
-              class="card-icon"
-              :style="{
-                color: messages[`marketing_message_${item}_color`],
-                backgroundColor:
-                  messages[`marketing_message_${item}_background_color`],
-              }"
-              v-html="messages[`marketing_message_${item}_icon`]"
-            >
-            </span>
-            <p class="card-title">
-              {{ messages[`marketing_message_${item}_title`] }}
-            </p>
-            <span class="card-message">
-              {{ messages[`marketing_message_${item}_content`] }}
-            </span>
-          </div>
-        </Card>
-      </div>
-    </div>
+    <Features></Features>
 
     <!--- Pricing Section --->
     <a
@@ -230,12 +199,6 @@
 <style lang="scss" scoped>
 @import '../../_scss/components/form';
 
-.covered-section-title {
-  margin-top: 64px;
-  margin-bottom: 20px;
-  color: #3c3c3c;
-}
-
 .pricing-section-link {
   color: $vivid-navy;
   font-size: 36px;
@@ -249,14 +212,16 @@ import { validationMixin } from 'vuelidate';
 import { required, email, minLength, sameAs } from 'vuelidate/lib/validators';
 
 import { util } from '~/_helpers';
-import { Button, Input, Checkbox, Card } from '~/_components/shared';
+import { Button, Input, Checkbox } from '~/_components/shared';
+import { Features } from '~/_components/sections';
 
 export default {
   components: {
     Button,
     Input,
     Checkbox,
-    Card,
+
+    Features,
   },
 
   mixins: [validationMixin],
@@ -292,7 +257,7 @@ export default {
 
   computed: {
     ...mapState('account', ['status']),
-    ...mapState('system', ['messages', 'countries']),
+    ...mapState('system', ['messages', 'countries', 'configs']),
     ...mapState('plans', ['plans', 'plan']),
     ...mapState('paymentMethods', [
       'paymentMethods',
@@ -416,6 +381,11 @@ export default {
         this.user.preferredPlan = p.uuid;
       }
     },
+    configs(configs) {
+      if (configs.allowRegistration === false) {
+        this.$route.replace('/login');
+      }
+    },
   },
 };
 </script>

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/_store/system.module.js

@@ -31,7 +31,8 @@ const state = {
     securityLevels: null,
     jarVersion: null,
     jarUpgradeAvailable: null,
-    maxUsers: null
+    maxUsers: null,
+    loaded: false,
   },
   entityConfigs: {},
   searchResults: [],
@@ -336,6 +337,9 @@ const getters = {
   promoCodeRequired: function() {
     return state.promoCodePolicy === 'required';
   },
+  configs: function () {
+    return state.configs.loaded === true ? state.configs : {};
+  }
 };
 
 const mutations = {
@@ -364,7 +368,7 @@ const mutations = {
 
   loadSystemConfigsRequest(state) {},
   loadSystemConfigsSuccess(state, configs) {
-    state.configs = configs;
+    state.configs = {...configs, loaded: true};
   },
   loadSystemConfigsFailure(state, error) {
     state.error = error;

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