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/25pull/32/head
@@ -7017,6 +7017,85 @@ | |||||
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", | "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", | ||||
"dev": true | "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": { | "supports-color": { | ||||
"version": "2.0.0", | "version": "2.0.0", | ||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", | "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", | "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.5.tgz", | ||||
"integrity": "sha512-32kJNHE9FqV2RzuIfwAYHny40+EltZjf86Jf4cIHc0QUy2/yAr0PM7cET1MBJe+puJdYrItGTwnmTC4I9gKLWg==" | "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": { | "vue-spinner": { | ||||
"version": "1.0.4", | "version": "1.0.4", | ||||
"resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.4.tgz", | "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.4.tgz", | ||||
@@ -22,6 +22,7 @@ | |||||
"vue-datetime": "^1.0.0-beta.11", | "vue-datetime": "^1.0.0-beta.11", | ||||
"vue-router": "^3.0.6", | "vue-router": "^3.0.6", | ||||
"vue-select": "^3.4.0", | "vue-select": "^3.4.0", | ||||
"vue-snotify": "^3.2.1", | |||||
"vue-spinner": "^1.0.4", | "vue-spinner": "^1.0.4", | ||||
"vuelidate": "^0.7.5", | "vuelidate": "^0.7.5", | ||||
"vuex": "^3.1.1" | "vuex": "^3.1.1" | ||||
@@ -39,6 +40,7 @@ | |||||
"file-loader": "^6.0.0", | "file-loader": "^6.0.0", | ||||
"html-webpack-plugin": "^3.2.0", | "html-webpack-plugin": "^3.2.0", | ||||
"path": "^0.12.7", | "path": "^0.12.7", | ||||
"style-loader": "^1.2.1", | |||||
"vue-loader": "^14.2.3", | "vue-loader": "^14.2.3", | ||||
"vue-template-compiler": "^2.6.10", | "vue-template-compiler": "^2.6.10", | ||||
"webpack": "^4.39.3", | "webpack": "^4.39.3", | ||||
@@ -8,17 +8,17 @@ | |||||
> | > | ||||
<router-link to="/help" class="d-flex align-items-center"> | <router-link to="/help" class="d-flex align-items-center"> | ||||
<Button link> | <Button link> | ||||
{{ messages.button_label_help || 'Help' }} | |||||
{{ messages.button_label_help }} | |||||
</Button> | </Button> | ||||
</router-link> | </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> | <Button link> | ||||
{{ messages.button_label_sign_up || 'Sign Up' }} | |||||
{{ messages.button_label_sign_up }} | |||||
</Button> | </Button> | ||||
</router-link> | </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"> | <Button color="default" width="118" height="48"> | ||||
{{ messages.button_label_sign_in || 'Sign In' }} | |||||
{{ messages.button_label_sign_in }} | |||||
</Button> | </Button> | ||||
</router-link> | </router-link> | ||||
</div> | </div> | ||||
@@ -33,13 +33,13 @@ | |||||
v-click-outside="hide" | v-click-outside="hide" | ||||
> | > | ||||
<router-link class="dropdown-item" to="#"> | <router-link class="dropdown-item" to="#"> | ||||
Help | |||||
{{ messages.button_label_help }} | |||||
</router-link> | </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> | ||||
<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> | </router-link> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -115,7 +115,13 @@ export default { | |||||
username: this.email, | username: this.email, | ||||
messages: this.messages, | messages: this.messages, | ||||
errors: this.errors, | errors: this.errors, | ||||
}); | |||||
}) | |||||
.then(() => { | |||||
this.$snotify.success(this.messages.message_resetPassword_sent); | |||||
}) | |||||
.catch((err) => { | |||||
this.$snotify.error(this.messages.message_resetPassword_sent); | |||||
}); | |||||
} | } | ||||
}, | }, | ||||
}, | }, | ||||
@@ -126,7 +126,7 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<router-link to="/new_pages/forgot-password"> | |||||
<router-link to="/forgotPassword"> | |||||
{{ messages.button_label_forgotPassword }} | {{ messages.button_label_forgotPassword }} | ||||
</router-link> | </router-link> | ||||
<Button | <Button | ||||
@@ -113,7 +113,7 @@ | |||||
class="form-group mt-4 d-flex justify-content-center align-items-center" | class="form-group mt-4 d-flex justify-content-center align-items-center" | ||||
> | > | ||||
<div class="flex-grow-1 pr-2"> | <div class="flex-grow-1 pr-2"> | ||||
<router-link to="/new_pages/login"> | |||||
<router-link to="/login"> | |||||
<Button block color="outline"> | <Button block color="outline"> | ||||
{{ messages.button_label_cancel }} | {{ messages.button_label_cancel }} | ||||
</Button> | </Button> | ||||
@@ -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); |
@@ -9,10 +9,10 @@ import LegalPage from '~/app/LegalPage'; | |||||
import SupportPage from '~/app/SupportPage'; | import SupportPage from '~/app/SupportPage'; | ||||
import ActivationPage from '~/auth/ActivationPage'; | import ActivationPage from '~/auth/ActivationPage'; | ||||
import ModelSetupPage from '~/admin/ModelSetupPage'; | 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 LogoutPage from '~/auth/LogoutPage'; | ||||
import ForgotPasswordPage from '~/auth/ForgotPasswordPage'; | |||||
// import ForgotPasswordPage from '~/auth/ForgotPasswordPage'; | |||||
import MultifactorAuthPage from '~/auth/MultifactorAuthPage'; | import MultifactorAuthPage from '~/auth/MultifactorAuthPage'; | ||||
import AppLoginPage from '~/auth/AppLoginPage'; | import AppLoginPage from '~/auth/AppLoginPage'; | ||||
import RestorePage from '~/auth/RestorePage'; | import RestorePage from '~/auth/RestorePage'; | ||||
@@ -70,6 +70,28 @@ export const router = new Router({ | |||||
{ | { | ||||
path: '/new_pages', | path: '/new_pages', | ||||
component: () => import('~/_pages/Layout'), | 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: [ | children: [ | ||||
{ | { | ||||
path: '', | path: '', | ||||
@@ -80,7 +102,7 @@ export const router = new Router({ | |||||
component: () => import('~/_pages/auth/Login'), | component: () => import('~/_pages/auth/Login'), | ||||
}, | }, | ||||
{ | { | ||||
path: 'forgot-password', | |||||
path: 'forgotPassword', | |||||
component: () => import('~/_pages/auth/ForgotPassword'), | component: () => import('~/_pages/auth/ForgotPassword'), | ||||
}, | }, | ||||
{ | { | ||||
@@ -92,12 +114,7 @@ export const router = new Router({ | |||||
{ | { | ||||
path: '', | path: '', | ||||
component: () => import('~/_pages/main/Layout'), | 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: '/resetPassword/:code', component: SetPasswordPage }, | ||||
{ path: '/activate', component: ActivationPage }, | { path: '/activate', component: ActivationPage }, | ||||
{ | |||||
path: '/register', | |||||
component: RegisterPage, | |||||
children: paymentMethodsChildren, | |||||
}, | |||||
// { | |||||
// path: '/register', | |||||
// component: RegisterPage, | |||||
// children: paymentMethodsChildren, | |||||
// }, | |||||
{ path: '/auth', component: MultifactorAuthPage }, | { path: '/auth', component: MultifactorAuthPage }, | ||||
{ path: '/login', component: LoginPage }, | |||||
// { path: '/login', component: LoginPage }, | |||||
{ path: '/logout', component: LogoutPage }, | { path: '/logout', component: LogoutPage }, | ||||
{ path: '/forgotPassword', component: ForgotPasswordPage }, | |||||
// { path: '/forgotPassword', component: ForgotPasswordPage }, | |||||
{ path: '/appLogin', component: AppLoginPage }, | { path: '/appLogin', component: AppLoginPage }, | ||||
{ path: '/restore', component: RestorePage }, | { path: '/restore', component: RestorePage }, | ||||
@@ -2,6 +2,7 @@ | |||||
<template> | <template> | ||||
<div v-if="isNewPage" class="page-container"> | <div v-if="isNewPage" class="page-container"> | ||||
<router-view></router-view> | <router-view></router-view> | ||||
<vue-snotify></vue-snotify> | |||||
</div> | </div> | ||||
<div v-else> | <div v-else> | ||||
<div v-if="!configs"><img :src="loadingImgSrc" /></div> | <div v-if="!configs"><img :src="loadingImgSrc" /></div> | ||||
@@ -175,7 +176,7 @@ export default { | |||||
return this.configs ? this.configs.awaitingRestore : undefined; | return this.configs ? this.configs.awaitingRestore : undefined; | ||||
}, | }, | ||||
isNewPage() { | isNewPage() { | ||||
const newPages = ['/new_pages']; | |||||
const newPages = ['/new_pages', '/login', '/forgotPassword', '/register']; | |||||
return ( | return ( | ||||
newPages.includes(this.$route.path) || | newPages.includes(this.$route.path) || | ||||
newPages.filter((p) => this.$route.path.startsWith(p)).length | newPages.filter((p) => this.$route.path.startsWith(p)).length | ||||
@@ -28,6 +28,9 @@ Vue.component('field-display', FieldDisplay); | |||||
Vue.component('form-field', FormField); | Vue.component('form-field', FormField); | ||||
Vue.config.productionTip = false; | 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 | // 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); | // Vue.component('font-awesome-icon', FontAwesomeIcon); | ||||
@@ -24,11 +24,7 @@ module.exports = { | |||||
}, | }, | ||||
{ | { | ||||
test: /\.(css|less)$/, | test: /\.(css|less)$/, | ||||
use: [ | |||||
{ | |||||
loader: 'css-loader', // translates CSS into CommonJS | |||||
}, | |||||
], | |||||
use: ['style-loader', 'css-loader'], | |||||
}, | }, | ||||
{ | { | ||||
test: /\.s[ac]ss$/i, | test: /\.s[ac]ss$/i, | ||||