feat/ui-layout (#25)

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

package-lock.json

@@ -7017,6 +7017,85 @@
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
+    "style-loader": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.2.1.tgz",
+      "integrity": "sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.6"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.3",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
+          "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.1",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.1.tgz",
+          "integrity": "sha512-KWcq3xN8fDjSB+IMoh2VaXVhRI0BBGxoYp3rx7Pkb6z0cFjYR9Q9l4yZqqals0/zsioCmocC5H6UvsGD4MoIBA==",
+          "dev": true
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -7677,6 +7756,11 @@
       "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.5.tgz",
       "integrity": "sha512-32kJNHE9FqV2RzuIfwAYHny40+EltZjf86Jf4cIHc0QUy2/yAr0PM7cET1MBJe+puJdYrItGTwnmTC4I9gKLWg=="
     },
+    "vue-snotify": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/vue-snotify/-/vue-snotify-3.2.1.tgz",
+      "integrity": "sha512-7kETtCAK3key/mDkz47FY/LuPzDGNwHHrYmS037JuVac2FW/9GTtoCNIrOp+SNbpMHeXFdLIDktkBK0IdPdHew=="
+    },
     "vue-spinner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.4.tgz",

package.json

@@ -22,6 +22,7 @@
     "vue-datetime": "^1.0.0-beta.11",
     "vue-router": "^3.0.6",
     "vue-select": "^3.4.0",
+    "vue-snotify": "^3.2.1",
     "vue-spinner": "^1.0.4",
     "vuelidate": "^0.7.5",
     "vuex": "^3.1.1"
@@ -39,6 +40,7 @@
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
     "path": "^0.12.7",
+    "style-loader": "^1.2.1",
     "vue-loader": "^14.2.3",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.39.3",

src/_components/layout/Header.vue

@@ -8,17 +8,17 @@
       >
         <router-link to="/help" class="d-flex align-items-center">
           <Button link>
-            {{ messages.button_label_help || 'Help' }}
+            {{ messages.button_label_help }}
           </Button>
         </router-link>
-        <router-link to="/sign-up" class="d-flex align-items-center">
+        <router-link to="/register" class="d-flex align-items-center">
           <Button link>
-            {{ messages.button_label_sign_up || 'Sign Up' }}
+            {{ messages.button_label_sign_up }}
           </Button>
         </router-link>
-        <router-link to="/help" class="d-flex align-items-center">
+        <router-link to="/login" class="d-flex align-items-center">
           <Button color="default" width="118" height="48">
-            {{ messages.button_label_sign_in || 'Sign In' }}
+            {{ messages.button_label_sign_in }}
           </Button>
         </router-link>
       </div>
@@ -33,13 +33,13 @@
       v-click-outside="hide"
     >
       <router-link class="dropdown-item" to="#">
-        Help
+        {{ messages.button_label_help }}
       </router-link>
-      <router-link class="dropdown-item" to="/new_pages/login">
-        Sign In
+      <router-link class="dropdown-item" to="/register">
+        {{ messages.button_label_sign_up }}
       </router-link>
-      <router-link class="dropdown-item" to="/new_pages/logout">
-        Sign Out
+      <router-link class="dropdown-item" to="/login">
+        {{ messages.button_label_sign_in }}
       </router-link>
     </div>
   </div>

src/_pages/auth/ForgotPassword.vue

@@ -115,7 +115,13 @@ export default {
           username: this.email,
           messages: this.messages,
           errors: this.errors,
-        });
+        })
+          .then(() => {
+            this.$snotify.success(this.messages.message_resetPassword_sent);
+          })
+          .catch((err) => {
+            this.$snotify.error(this.messages.message_resetPassword_sent);
+          });
       }
     },
   },

src/_pages/auth/Login.vue

@@ -126,7 +126,7 @@
         </div>
       </div>
 
-      <router-link to="/new_pages/forgot-password">
+      <router-link to="/forgotPassword">
         {{ messages.button_label_forgotPassword }}
       </router-link>
       <Button

src/_pages/auth/Register.vue

@@ -113,7 +113,7 @@
         class="form-group mt-4 d-flex justify-content-center align-items-center"
       >
         <div class="flex-grow-1 pr-2">
-          <router-link to="/new_pages/login">
+          <router-link to="/login">
             <Button block color="outline">
               {{ messages.button_label_cancel }}
             </Button>

src/_plugins/snotify.js

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import Snotify, { SnotifyPosition } from 'vue-snotify';
+import 'vue-snotify/styles/material.css';
+
+const options = {
+  toast: {
+    position: SnotifyPosition.rightTop,
+  },
+  timeout: 3000,
+  progressBar: true,
+};
+
+Vue.use(Snotify, options);

src/_router/index.js

@@ -9,10 +9,10 @@ import LegalPage from '~/app/LegalPage';
 import SupportPage from '~/app/SupportPage';
 import ActivationPage from '~/auth/ActivationPage';
 import ModelSetupPage from '~/admin/ModelSetupPage';
-import RegisterPage from '~/auth/RegisterPage';
-import LoginPage from '~/auth/LoginPage';
+// import RegisterPage from '~/auth/RegisterPage';
+// import LoginPage from '~/auth/LoginPage';
 import LogoutPage from '~/auth/LogoutPage';
-import ForgotPasswordPage from '~/auth/ForgotPasswordPage';
+// import ForgotPasswordPage from '~/auth/ForgotPasswordPage';
 import MultifactorAuthPage from '~/auth/MultifactorAuthPage';
 import AppLoginPage from '~/auth/AppLoginPage';
 import RestorePage from '~/auth/RestorePage';
@@ -70,6 +70,28 @@ export const router = new Router({
     {
       path: '/new_pages',
       component: () => import('~/_pages/Layout'),
+      children: [
+        {
+          path: '',
+          component: () => import('~/_pages/auth/Layout'),
+          children: [],
+        },
+        {
+          path: '',
+          component: () => import('~/_pages/main/Layout'),
+          children: [
+            {
+              path: 'test',
+              component: () => import('~/_pages/main/Test'),
+            },
+          ],
+        },
+      ],
+    },
+
+    {
+      path: '',
+      component: () => import('~/_pages/Layout'),
       children: [
         {
           path: '',
@@ -80,7 +102,7 @@ export const router = new Router({
               component: () => import('~/_pages/auth/Login'),
             },
             {
-              path: 'forgot-password',
+              path: 'forgotPassword',
               component: () => import('~/_pages/auth/ForgotPassword'),
             },
             {
@@ -92,12 +114,7 @@ export const router = new Router({
         {
           path: '',
           component: () => import('~/_pages/main/Layout'),
-          children: [
-            {
-              path: 'test',
-              component: () => import('~/_pages/main/Test'),
-            },
-          ],
+          children: [],
         },
       ],
     },
@@ -157,15 +174,15 @@ export const router = new Router({
     { path: '/resetPassword/:code', component: SetPasswordPage },
 
     { path: '/activate', component: ActivationPage },
-    {
-      path: '/register',
-      component: RegisterPage,
-      children: paymentMethodsChildren,
-    },
+    // {
+    //   path: '/register',
+    //   component: RegisterPage,
+    //   children: paymentMethodsChildren,
+    // },
     { path: '/auth', component: MultifactorAuthPage },
-    { path: '/login', component: LoginPage },
+    // { path: '/login', component: LoginPage },
     { path: '/logout', component: LogoutPage },
-    { path: '/forgotPassword', component: ForgotPasswordPage },
+    // { path: '/forgotPassword', component: ForgotPasswordPage },
     { path: '/appLogin', component: AppLoginPage },
     { path: '/restore', component: RestorePage },
 

src/app/App.vue

@@ -2,6 +2,7 @@
 <template>
   <div v-if="isNewPage" class="page-container">
     <router-view></router-view>
+    <vue-snotify></vue-snotify>
   </div>
   <div v-else>
     <div v-if="!configs"><img :src="loadingImgSrc" /></div>
@@ -175,7 +176,7 @@ export default {
       return this.configs ? this.configs.awaitingRestore : undefined;
     },
     isNewPage() {
-      const newPages = ['/new_pages'];
+      const newPages = ['/new_pages', '/login', '/forgotPassword', '/register'];
       return (
         newPages.includes(this.$route.path) ||
         newPages.filter((p) => this.$route.path.startsWith(p)).length

src/index.js

@@ -28,6 +28,9 @@ Vue.component('field-display', FieldDisplay);
 Vue.component('form-field', FormField);
 Vue.config.productionTip = false;
 
+// plugins
+import './_plugins/snotify';
+
 // not sure what the best way is to include these icons, we reference them programmatically via string resource/messages
 // Vue.component('font-awesome-icon', FontAwesomeIcon);
 

webpack.config.js

@@ -24,11 +24,7 @@ module.exports = {
       },
       {
         test: /\.(css|less)$/,
-        use: [
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-          },
-        ],
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.s[ac]ss$/i,