From 4c0e58a80fd3c0dbbd28e7fb5caf5c842e4af95e Mon Sep 17 00:00:00 2001 From: Tyler Chen Date: Fri, 24 Jul 2020 01:53:57 +0000 Subject: [PATCH] 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 Co-authored-by: Jonathan Cobb Co-authored-by: jonathan Reviewed-on: https://git.bubblev.org/bubblev/bubble-web/pulls/27 --- .DS_Store | Bin 8196 -> 8196 bytes package-lock.json | 13 +++ package.json | 1 + src/.DS_Store | Bin 10244 -> 10244 bytes src/_assets/messages.json | 4 + src/_components/layout/Header.vue | 113 +++++++++++++++++++------- src/_components/sections/Features.vue | 58 +++++++++++++ src/_components/sections/index.js | 1 + src/_components/shared/Button.vue | 21 ++++- src/_pages/auth/ForgotPassword.vue | 2 +- src/_pages/auth/Layout.vue | 10 +-- src/_pages/auth/Login.vue | 9 +- src/_pages/auth/Register.vue | 52 +++--------- src/_pages/auth/VerifyEmail.vue | 79 ++++++++++++++++++ src/_router/index.js | 7 +- src/_store/system.module.js | 8 +- src/app/App.vue | 7 ++ src/index.html | 2 +- src/public/green-email-sent.gif | Bin 0 -> 266489 bytes src/public/green_email_sent.json | 1 + 20 files changed, 296 insertions(+), 92 deletions(-) create mode 100644 src/_components/sections/Features.vue create mode 100644 src/_components/sections/index.js create mode 100644 src/_pages/auth/VerifyEmail.vue create mode 100644 src/public/green-email-sent.gif create mode 100644 src/public/green_email_sent.json diff --git a/.DS_Store b/.DS_Store index 374e552273747ba4cc3dd07b94fcb0859dd7fc44..2ad2b65bf169db4ba6f9c54d39402113db325d08 100644 GIT binary patch delta 21 ccmZp1XmQxERDi?G!a_&E(AaeIT7htW084%bR{#J2 delta 21 ccmZp1XmQxERDi?8)J#Xg(9&e{T7htW0835=RR910 diff --git a/package-lock.json b/package-lock.json index 22cdb46..9974410 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a25fcde..ab3b31d 100644 --- a/package.json +++ b/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", diff --git a/src/.DS_Store b/src/.DS_Store index bde33d330fb26965c25fca62f2525f744291bf90..bec4cfa4fec40fcf593a84cd28646a17bbf63b71 100644 GIT binary patch delta 1323 zcmbu8K}-}^7{|XqQ1;EU-~&{cRe`VpvC`rypjC?tuEhojghFw}NCxJqBg;UU?QSKS zX)6a!FxqS&ZM7FoOpK>OwU;Kil^sH$1 zg8zuxMZ9gNH8^5_XpPJC!=h%lUx-f}*(Kvf!b-}hk&sTmC`?*1)iIi|Mr`LJIp(M} z6j@8&qg{A&>B@?#HEZiPZH?Z{%U>)C3OV0pnbJ;Jdo4NEld{aj{+QtmO53#TeZ5J` zu?FI@+ct(}0Zwb$&1JNhAz-0`jM{Eb^48N(I0f%rN8JtJ*3CN>3LRdj2?HRFfZkzlBF%vPk$pTO{4FWWT$d zuY68^z9V`RC;2JMXe|O6LG@sHu!1Rhg{Q9`tPHMV$^;_I%ksB^YNx?Ow!gWShna#Z z-te<^yg^ggMUJ0+mv3gG)zw6a_gfgv9y9;6C{P>FX?i!j!q4)38+;c9BaHngD~9q3fd`mh^&&<{f~8}gWq;vmLx z2!|EBqd2C>9mk0|cBk Pv=EtcUaM2Os`%D3Ha$L8 delta 116 zcmZn(XbG4Q$z8%woK#+1kd%|3w6Sm+`@{y`&FmZ;9E@y}g#>1En3$UBC>UCrOnxQi zGWoZF-sTwbR;I}tgta&GNcl5O))CtVSF-t)m@MbS29C|_3cpx3TSzN2qDw0=0swoi BBXa-% diff --git a/src/_assets/messages.json b/src/_assets/messages.json index 2c63c08..ae303a1 100644 --- a/src/_assets/messages.json +++ b/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" } diff --git a/src/_components/layout/Header.vue b/src/_components/layout/Header.vue index aae0f5b..7d86d01 100644 --- a/src/_components/layout/Header.vue +++ b/src/_components/layout/Header.vue @@ -1,26 +1,56 @@ @@ -74,7 +120,7 @@ diff --git a/src/_components/sections/index.js b/src/_components/sections/index.js new file mode 100644 index 0000000..cb1e5fd --- /dev/null +++ b/src/_components/sections/index.js @@ -0,0 +1 @@ +export { default as Features } from './Features'; diff --git a/src/_components/shared/Button.vue b/src/_components/shared/Button.vue index 3025cba..8044fb3 100644 --- a/src/_components/shared/Button.vue +++ b/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%', + : '', }; }, }, diff --git a/src/_pages/auth/ForgotPassword.vue b/src/_pages/auth/ForgotPassword.vue index bcb4d50..7611de7 100644 --- a/src/_pages/auth/ForgotPassword.vue +++ b/src/_pages/auth/ForgotPassword.vue @@ -36,7 +36,7 @@ {{ messages.button_label_forgot_password }}

- + {{ messages.forgot_password_login_link }}

diff --git a/src/_pages/auth/Layout.vue b/src/_pages/auth/Layout.vue index 6a993aa..295b978 100644 --- a/src/_pages/auth/Layout.vue +++ b/src/_pages/auth/Layout.vue @@ -1,9 +1,9 @@ diff --git a/src/_pages/auth/Login.vue b/src/_pages/auth/Login.vue index 12bf62b..6852c87 100644 --- a/src/_pages/auth/Login.vue +++ b/src/_pages/auth/Login.vue @@ -143,9 +143,9 @@ v-html="messages.message_login_agreeToTerms" >

-

+

{{ messages.registration_label }} - + {{ messages.button_label_sign_up }}

@@ -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(); diff --git a/src/_pages/auth/Register.vue b/src/_pages/auth/Register.vue index c99c0b3..130160e 100644 --- a/src/_pages/auth/Register.vue +++ b/src/_pages/auth/Register.vue @@ -147,38 +147,7 @@ - -

- {{ messages.marketing_message_got_you_covered_title }} -

-
-
- -
- - -

- {{ messages[`marketing_message_${item}_title`] }} -

- - {{ messages[`marketing_message_${item}_content`] }} - -
- -
-
+ @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'); + } + }, }, }; diff --git a/src/_pages/auth/VerifyEmail.vue b/src/_pages/auth/VerifyEmail.vue new file mode 100644 index 0000000..5391c35 --- /dev/null +++ b/src/_pages/auth/VerifyEmail.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/src/_router/index.js b/src/_router/index.js index af9e04c..8a88b49 100644 --- a/src/_router/index.js +++ b/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: '', diff --git a/src/_store/system.module.js b/src/_store/system.module.js index 5992c0f..afd03fa 100644 --- a/src/_store/system.module.js +++ b/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; diff --git a/src/app/App.vue b/src/app/App.vue index 2b9f5da..4485546 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -1,10 +1,13 @@