Merge branches 'next' and 'next' of github.com:devforth/adminforth into next

Author: ivictbor

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 };
@@ -498,7 +498,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
                     }
                     const showIn = {} as ShowInResolved;
                     await Promise.all(
-                      Object.entries(col.showIn).map(
+                      Object.entries(inCol.showIn).map(
                         async ([key, value]: [string, AllowedActionValue]) => {
                           // if callable then call
                           if (typeof value === 'function') {

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;

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();
 }
 

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 />
                         </div>
@@ -53,6 +54,7 @@
                             <input 
                               ref="passwordInput"
                               autocomplete="current-password"
+                              oninput="setCustomValidity('')"
                               @keydown.enter="login"
                               :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" 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" required />
                             <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
@@ -120,6 +122,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 +172,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 +195,7 @@ async function login() {
     }
   });
   if (resp.error) {
-    error.value = resp.error;
+      error.value = resp.error;
   } else if (resp.redirectTo) {
     router.push(resp.redirectTo);
   } else {