From 8d5cd7a5d04d7bbdbb412dd1594b26c0fc426bda Mon Sep 17 00:00:00 2001 From: Petr Kachanovsky Date: Thu, 30 Jan 2025 10:06:52 +0200 Subject: [PATCH 1/4] fix: add i18n for login page errors --- adminforth/modules/restApi.ts | 2 +- adminforth/spa/src/views/LoginView.vue | 18 ++++++++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/adminforth/modules/restApi.ts b/adminforth/modules/restApi.ts index 9fb76604f..c06cbd4be 100644 --- a/adminforth/modules/restApi.ts +++ b/adminforth/modules/restApi.ts @@ -111,7 +111,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI { path: '/login', handler: async ({ body, response, headers, query, cookies, requestUrl }) => { - const INVALID_MESSAGE = 'Invalid Username or Password'; + const INVALID_MESSAGE = 'invalid_username_or_password'; const { username, password, rememberMe } = body; let adminUser: AdminUser; let toReturn: { redirectTo?: string, allowedLogin:boolean, error?: string } = { allowedLogin: true }; diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue index 111e5a428..cdfb64410 100644 --- a/adminforth/spa/src/views/LoginView.vue +++ b/adminforth/spa/src/views/LoginView.vue @@ -45,6 +45,7 @@ name="username" id="username" ref="usernameInput" + oninput="setCustomValidity('')" @keydown.enter="passwordInput.focus()" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required /> @@ -120,6 +121,9 @@ import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbi import { callAdminForthApi, loadFile } from '@/utils'; import { useRoute, useRouter } from 'vue-router'; import { Button, Checkbox } from '@/afcl'; +import { useI18n } from 'vue-i18n'; + +const { t } = useI18n(); const passwordInput = ref(null); const usernameInput = ref(null); @@ -167,9 +171,15 @@ async function login() { const username = usernameInput.value.value; const password = passwordInput.value.value; - if (!username || !password) { + if (!username) { + usernameInput.value.setCustomValidity(t('Please fill out this field.')); + return; + } + if (!password) { + passwordInput.value.setCustomValidity(t('Please fill out this field.')); return; } + if (inProgress.value) { return; } @@ -184,7 +194,11 @@ async function login() { } }); if (resp.error) { - error.value = resp.error; + if (resp.error === 'invalid_username_or_password') { + error.value = t('Invalid username or password'); + } else { + error.value = resp.error; + } } else if (resp.redirectTo) { router.push(resp.redirectTo); } else { From be9abc831cbb48632bda5c1c88628f01a9cb787a Mon Sep 17 00:00:00 2001 From: Petr Kachanovsky Date: Fri, 31 Jan 2025 12:56:25 +0200 Subject: [PATCH 2/4] change translation handling for login error --- adminforth/modules/restApi.ts | 4 ++-- adminforth/spa/src/views/LoginView.vue | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/adminforth/modules/restApi.ts b/adminforth/modules/restApi.ts index c06cbd4be..60cae2e24 100644 --- a/adminforth/modules/restApi.ts +++ b/adminforth/modules/restApi.ts @@ -109,9 +109,9 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI { noAuth: true, method: 'POST', path: '/login', - handler: async ({ body, response, headers, query, cookies, requestUrl }) => { + handler: async ({ body, response, headers, query, cookies, requestUrl, tr }) => { - const INVALID_MESSAGE = 'invalid_username_or_password'; + const INVALID_MESSAGE = await tr('Invalid username or password', 'errors'); const { username, password, rememberMe } = body; let adminUser: AdminUser; let toReturn: { redirectTo?: string, allowedLogin:boolean, error?: string } = { allowedLogin: true }; diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue index cdfb64410..a633a54cd 100644 --- a/adminforth/spa/src/views/LoginView.vue +++ b/adminforth/spa/src/views/LoginView.vue @@ -194,11 +194,7 @@ async function login() { } }); if (resp.error) { - if (resp.error === 'invalid_username_or_password') { - error.value = t('Invalid username or password'); - } else { error.value = resp.error; - } } else if (resp.redirectTo) { router.push(resp.redirectTo); } else { From 011eece9a829c4ad27f348f3d7067188af2acbba Mon Sep 17 00:00:00 2001 From: Petr Kachanovsky Date: Fri, 31 Jan 2025 15:21:29 +0200 Subject: [PATCH 3/4] add datepicker translation --- adminforth/spa/src/components/CustomDatePicker.vue | 3 ++- adminforth/spa/src/components/CustomDateRangePicker.vue | 7 +++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/adminforth/spa/src/components/CustomDatePicker.vue b/adminforth/spa/src/components/CustomDatePicker.vue index f65462d86..3e66a9f82 100644 --- a/adminforth/spa/src/components/CustomDatePicker.vue +++ b/adminforth/spa/src/components/CustomDatePicker.vue @@ -129,7 +129,8 @@ watch(start, () => { }) function initDatepickers() { - const options = {format: 'dd M yyyy'}; + const LS_LANG_KEY = `afLanguage`; + const options = {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)}; if (props.autoHide) { options.autohide = true; diff --git a/adminforth/spa/src/components/CustomDateRangePicker.vue b/adminforth/spa/src/components/CustomDateRangePicker.vue index 67893b31b..966fcad40 100644 --- a/adminforth/spa/src/components/CustomDateRangePicker.vue +++ b/adminforth/spa/src/components/CustomDateRangePicker.vue @@ -184,10 +184,9 @@ watch(end, () => { }) function initDatepickers() { - - datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'}); - - datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'}); + const LS_LANG_KEY = `afLanguage`; + datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)}); + datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy', language: localStorage.getItem(LS_LANG_KEY)}); addChangeDateListener(); } From f4537f3e488d7010485f468860c6a3c31036e232 Mon Sep 17 00:00:00 2001 From: Petr Kachanovsky Date: Fri, 31 Jan 2025 15:27:32 +0200 Subject: [PATCH 4/4] fix password input validity message --- adminforth/spa/src/views/LoginView.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/adminforth/spa/src/views/LoginView.vue b/adminforth/spa/src/views/LoginView.vue index a633a54cd..b706c6876 100644 --- a/adminforth/spa/src/views/LoginView.vue +++ b/adminforth/spa/src/views/LoginView.vue @@ -54,6 +54,7 @@