From 91de6eb56eff24b4042d0eb378ab7b5e3571061b Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 2 Oct 2023 14:54:00 +0200 Subject: [PATCH 1/4] refs #6067 feat: outLayout verifyEmail --- src/assets/{logo.svg => salix.svg} | 0 src/assets/salix_dark.svg | 32 ++++ src/assets/{logo_icon.svg => salix_icon.svg} | 0 src/assets/vn.svg | 158 ++++++++++++++++++ src/assets/vn_dark.svg | 161 +++++++++++++++++++ src/assets/vn_icon.svg | 72 +++++++++ src/components/NavBar.vue | 2 +- src/components/ui/VnLogo.vue | 24 +++ src/css/quasar.variables.scss | 1 + src/layouts/OutLayout.vue | 13 +- src/pages/Login/LoginMain.vue | 25 +-- src/pages/Login/TwoFactor.vue | 15 +- src/pages/Login/VerifyEmail.vue | 117 ++++++++++++++ src/router/index.js | 2 +- src/router/routes.js | 6 + 15 files changed, 603 insertions(+), 25 deletions(-) rename src/assets/{logo.svg => salix.svg} (100%) create mode 100644 src/assets/salix_dark.svg rename src/assets/{logo_icon.svg => salix_icon.svg} (100%) create mode 100644 src/assets/vn.svg create mode 100644 src/assets/vn_dark.svg create mode 100644 src/assets/vn_icon.svg create mode 100644 src/components/ui/VnLogo.vue create mode 100644 src/pages/Login/VerifyEmail.vue diff --git a/src/assets/logo.svg b/src/assets/salix.svg similarity index 100% rename from src/assets/logo.svg rename to src/assets/salix.svg diff --git a/src/assets/salix_dark.svg b/src/assets/salix_dark.svg new file mode 100644 index 000000000..10de3af4f --- /dev/null +++ b/src/assets/salix_dark.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/logo_icon.svg b/src/assets/salix_icon.svg similarity index 100% rename from src/assets/logo_icon.svg rename to src/assets/salix_icon.svg diff --git a/src/assets/vn.svg b/src/assets/vn.svg new file mode 100644 index 000000000..23b6df49c --- /dev/null +++ b/src/assets/vn.svg @@ -0,0 +1,158 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/vn_dark.svg b/src/assets/vn_dark.svg new file mode 100644 index 000000000..4d53b7b39 --- /dev/null +++ b/src/assets/vn_dark.svg @@ -0,0 +1,161 @@ + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/vn_icon.svg b/src/assets/vn_icon.svg new file mode 100644 index 000000000..738c8157c --- /dev/null +++ b/src/assets/vn_icon.svg @@ -0,0 +1,72 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 7d09b09b8..4e3e241b8 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -47,7 +47,7 @@ const pinnedModulesRef = ref(); > diff --git a/src/components/ui/VnLogo.vue b/src/components/ui/VnLogo.vue new file mode 100644 index 000000000..3b955289d --- /dev/null +++ b/src/components/ui/VnLogo.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss index 808bf3468..6a3700561 100644 --- a/src/css/quasar.variables.scss +++ b/src/css/quasar.variables.scss @@ -21,6 +21,7 @@ $positive: #21ba45; $negative: #c10015; $info: #31ccec; $warning: #f2c037; +$vnColor: #8ebb27; // Pendiente de cuadrar con la base de datos $success: $positive; diff --git a/src/layouts/OutLayout.vue b/src/layouts/OutLayout.vue index 6ea14622f..f21e6e568 100644 --- a/src/layouts/OutLayout.vue +++ b/src/layouts/OutLayout.vue @@ -80,7 +80,7 @@ const langs = ['en', 'es'];
- +
@@ -97,15 +97,4 @@ const langs = ['en', 'es']; min-height: inherit; flex-direction: column; } - -.formCard { - max-width: 350px; - min-width: 300px; -} - -@media (max-width: $breakpoint-xs-max) { - .formCard { - min-width: 100%; - } -} diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue index 7c0bbbd44..2e4fd91ca 100644 --- a/src/pages/Login/LoginMain.vue +++ b/src/pages/Login/LoginMain.vue @@ -8,6 +8,8 @@ import axios from 'axios'; import { useSession } from 'src/composables/useSession'; import { useLogin } from 'src/composables/useLogin'; +import VnLogo from 'components/ui/VnLogo.vue'; + const quasar = useQuasar(); const session = useSession(); const loginCache = useLogin(); @@ -64,14 +66,8 @@ async function onSubmit() { - + diff --git a/src/pages/Login/TwoFactor.vue b/src/pages/Login/TwoFactor.vue index f14e85418..1c99e8dec 100644 --- a/src/pages/Login/TwoFactor.vue +++ b/src/pages/Login/TwoFactor.vue @@ -48,7 +48,7 @@ async function onSubmit() { } - + diff --git a/src/pages/Login/VerifyEmail.vue b/src/pages/Login/VerifyEmail.vue new file mode 100644 index 000000000..b07b2a9c4 --- /dev/null +++ b/src/pages/Login/VerifyEmail.vue @@ -0,0 +1,117 @@ + + + + + { + "en": { + "verifyEmail": "Your email has been successfully verified. You can now log in to enjoy all the features of our platform.", + "goToShop": "Go to the shop", + "logIn": "Log In" + }, + "es": { + "verifyEmail": "Su correo electrónico ha sido verificado con éxito. Ahora puede iniciar sesión para disfrutar de todas las funcionalidades de nuestra plataforma.", + "goToShop": "Ir a la tienda", + "logIn": "Iniciar sesión" + }, + "fr": { + "verifyEmail": "Votre courrier électronique a été vérifié avec succès. Vous pouvez maintenant vous connecter pour profiter de toutes les fonctionnalités de notre plateforme.", + "goToShop": "Aller à la boutique", + "logIn": "Se connecter" + }, + "pt": { + "verifyEmail": "Seu e-mail foi verificado com sucesso. Agora você pode fazer o login para aproveitar todas as funcionalidades da nossa plataforma.", + "goToShop": "Ir para a loja", + "logIn": "Fazer login" + }, + "it": { + "verifyEmail": "La tua email è stata verificata con successo. Ora puoi accedere per godere di tutte le funzionalità della nostra piattaforma.", + "goToShop": "Vai al negozio", + "logIn": "Accedi" + } + } + + + diff --git a/src/router/index.js b/src/router/index.js index cccf9af6d..ca560e9c9 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -45,7 +45,7 @@ export { Router }; export default route(function (/* { store, ssrContext } */) { Router.beforeEach(async (to, from, next) => { const { isLoggedIn } = session; - const outLayout = ['Login', 'TwoFactor']; + const outLayout = ['Login', 'TwoFactor', 'VerifyEmail']; if (!isLoggedIn() && !outLayout.includes(to.name)) { return next({ name: 'Login', query: { redirect: to.fullPath } }); } diff --git a/src/router/routes.js b/src/router/routes.js index 4425996b0..e3aa22a06 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -23,6 +23,12 @@ const routes = [ meta: { title: 'twoFactor' }, component: () => import('../pages/Login/TwoFactor.vue'), }, + { + path: '/verifyEmail', + name: 'VerifyEmail', + meta: { title: 'verifyEmail' }, + component: () => import('../pages/Login/VerifyEmail.vue'), + }, ], }, { From 468ed9570278aa222f79df1073dee833de84e5a9 Mon Sep 17 00:00:00 2001 From: alexm Date: Mon, 2 Oct 2023 14:58:42 +0200 Subject: [PATCH 2/4] refs #6067 feat: add transalation --- src/i18n/en/index.js | 5 +++++ src/i18n/es/index.js | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index cfd20716b..948332d46 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -68,6 +68,11 @@ export default { twoFactor: 'Two-Factor', }, }, + verifyEmail: { + pageTitles: { + verifyEmail: 'Email verification', + }, + }, dashboard: { pageTitles: { dashboard: 'Dashboard', diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index 532c1bb3b..9b452ab22 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -68,6 +68,11 @@ export default { twoFactor: 'Doble factor', }, }, + verifyEmail: { + pageTitles: { + verifyEmail: 'Verificación de correo', + }, + }, dashboard: { pageTitles: { dashboard: 'Tablón', From 0f1dee42ecb3c11fbd723993844a6928aabf519d Mon Sep 17 00:00:00 2001 From: alexm Date: Tue, 3 Oct 2023 09:25:28 +0200 Subject: [PATCH 3/4] refs #6067 refactor: getUrl --- src/composables/getUrl.js | 9 +++------ src/pages/Login/VerifyEmail.vue | 3 ++- test/vitest/helper.js | 1 + 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/composables/getUrl.js b/src/composables/getUrl.js index e020d7f18..f2bd9ddb9 100644 --- a/src/composables/getUrl.js +++ b/src/composables/getUrl.js @@ -1,14 +1,11 @@ import axios from 'axios'; export async function getUrl(route, appName = 'salix') { - let url; const filter = { where: { and: [{ appName: appName }, { environment: process.env.NODE_ENV }] }, }; - await axios.get('Urls/findOne', { params: { filter } }).then((res) => { - url = res.data.url + route; - }); - - return url; + const { data } = await axios.get('Urls/findOne', { params: { filter } }); + const url = data.url; + return route ? url + route : url; } diff --git a/src/pages/Login/VerifyEmail.vue b/src/pages/Login/VerifyEmail.vue index b07b2a9c4..860b5bd89 100644 --- a/src/pages/Login/VerifyEmail.vue +++ b/src/pages/Login/VerifyEmail.vue @@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'; import { useRoute } from 'vue-router'; import VnLogo from 'components/ui/VnLogo.vue'; +import { getUrl } from 'src/composables/getUrl'; const route = useRoute(); @@ -17,7 +18,7 @@ onMounted(async () => { color: 'bg-vnColor', icon: new URL(`../../assets/vn_icon.svg`, import.meta.url).href, text: 'goToShop', - url: params?.url, + url: await getUrl(null, 'hedera'), }); if (params?.isWorker && JSON.parse(params?.isWorker)) { diff --git a/test/vitest/helper.js b/test/vitest/helper.js index 8f4dc3221..7cc2bdfa5 100644 --- a/test/vitest/helper.js +++ b/test/vitest/helper.js @@ -63,6 +63,7 @@ class FormDataMock { } } global.FormData = FormDataMock; +global.URL = class URL {}; export function createWrapper(component, options) { const defaultOptions = { From b4fb049cdf4de642031f83002fc588b35a9e6ce9 Mon Sep 17 00:00:00 2001 From: alexm Date: Wed, 18 Oct 2023 09:04:48 +0200 Subject: [PATCH 4/4] refs #6067 feat(verifyEmail): use urls/get-by-user --- src/pages/Login/VerifyEmail.vue | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/pages/Login/VerifyEmail.vue b/src/pages/Login/VerifyEmail.vue index 860b5bd89..dae20e8b6 100644 --- a/src/pages/Login/VerifyEmail.vue +++ b/src/pages/Login/VerifyEmail.vue @@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'; import { useRoute } from 'vue-router'; import VnLogo from 'components/ui/VnLogo.vue'; -import { getUrl } from 'src/composables/getUrl'; +import axios from 'axios'; const route = useRoute(); @@ -14,20 +14,26 @@ const redirectButtons = ref([]); onMounted(async () => { const params = route?.query; + const { data } = await axios.get(`Urls/${params.userId}/get-by-user`); + redirectButtons.value.push({ color: 'bg-vnColor', icon: new URL(`../../assets/vn_icon.svg`, import.meta.url).href, text: 'goToShop', - url: await getUrl(null, 'hedera'), + url: data.find((url) => url.appName == 'hedera').url, }); - if (params?.isWorker && JSON.parse(params?.isWorker)) { - redirectButtons.value.push({ - color: 'bg-primary', - icon: new URL(`../../assets/salix_icon.svg`, import.meta.url).href, - text: 'logIn', - url: '', - }); + const urls = data.filter((url) => url.appName != 'hedera'); + if (urls.length) { + for (const url of urls) { + redirectButtons.value.push({ + color: 'bg-primary', + icon: new URL(`../../assets/${url.appName}_icon.svg`, import.meta.url) + .href, + text: 'logIn', + url: url.url, + }); + } } });