@adminforth/i18n 1.0.4

package/dist/custom/SignupPage.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+    :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
+      'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
+      'background-size': 'cover',
+      'background-position': 'center',
+      'background-blend-mode': 'darken'
+    }: {}"
+  >
+    
+    <img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
+      :src="loadFile(coreStore.config?.loginBackgroundImage)"
+      class="position-absolute top-0 left-0 h-screen object-cover w-0"
+      :class="{
+        '1/2': 'md:w-1/2',
+        '1/3': 'md:w-1/3',
+        '2/3': 'md:w-2/3',
+        '3/4': 'md:w-3/4',
+        '2/5': 'md:w-2/5',
+        '3/5': 'md:w-3/5',
+      }[backgroundPosition]"
+    />
+
+    <!-- Main modal -->
+    <div id="authentication-modal" tabindex="-1" 
+      class="overflow-y-auto flex flex-grow
+      overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="relative p-4 w-full max-h-full max-w-[400px]">
+            <!-- Modal content -->
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+                <!-- Modal header -->
+                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+                      Sign up into {{ coreStore.config?.brandName }}
+                    </h3>
+                </div>
+                <!-- Modal body -->
+                <div class="p-4 md:p-5">
+                  <form v-if="!requestSent" class="space-y-4" role="alert" @submit.prevent>
+                    <div class="relative">
+                      <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
+                      <input type="email" name="email" id="email" 
+                        tabindex="1"
+                        @keydown.enter="passwordInput.focus()"
+                        ref="emailInput"
+                        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>
+                    <div class="relative">
+                      <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New password</label>
+                      <input 
+                        tabindex="2"
+                        ref="passwordInput"
+                        :type="unmasked ? 'text' : 'password'"
+                        name="password" id="password" 
+                        v-model="password"
+                        @keydown.enter="passwordConfirmationInput.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="New password" required 
+                      />
+                      
+                      <button
+                        type="button"
+                        @click="unmasked = !unmasked"
+                        class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
+                      >
+                        <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked" />
+                        <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                      </button>
+                    </div>
+
+                    <div class="relative">
+                      <label for="password_confirmation" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm new password</label>
+                      <input 
+                        ref="passwordConfirmationInput"
+                        :type="unmasked ? 'text' : 'password'"
+                        name="password_confirmation" id="password_confirmation" 
+                        tabindex="3"
+                        v-model="passwordConfirmation"
+                        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="Confirm new password" required 
+                      />
+
+                      <button
+                        type="button"
+                        @click="unmasked = !unmasked"
+                        class="h-6 absolute inset-y-2 top-9 right-1 flex items-center pr-2 z-index-100 focus:outline-none"
+                      >
+                        <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked" />
+                        <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                      </button>
+                    </div>
+
+                    <div v-if="validationError || error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+                      <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                      </svg>
+                      <span class="sr-only">Info</span>
+                      <div>
+                        {{ validationError || error }}
+                      </div>
+                    </div>
+
+                    <Button
+                      :disabled="inProgress || (validationRunning && validationError)"
+                      @click="doSignup"
+                      type="submit"
+                      class="w-full"
+                      :loader="inProgress"
+                    >
+                      Sign up
+                    </Button>
+                  </form>
+<!-- END of set new paasord -->
+                  <div v-else class="flex items center justify-center p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-green-800 dark:text-green-400" role="alert">
+                    If user with specified email exists in our db, then request was sent. Please check your email at {{ sentToEmail }} to reset your password.
+                  </div>
+
+                </div>
+            </div>
+        </div>
+    </div> 
+
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+import { onMounted, ref, computed, Ref } from 'vue';
+import { useCoreStore } from '@/stores/core';
+import { useUserStore } from '@/stores/user';
+import { callAdminForthApi, loadFile, applyRegexValidation } from '@/utils';
+import { useRoute, useRouter } from 'vue-router';
+import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
+import Button from '@/afcl/Button.vue';
+
+const inProgress = ref(false);
+
+const coreStore = useCoreStore();
+const requestSent = ref(false);
+
+const emailInput = ref(null);
+const passwordInput = ref(null);
+const passwordConfirmationInput = ref(null);
+
+const password = ref("");
+const passwordConfirmation = ref("");
+const unmasked = ref(false);
+const sentToEmail: Ref<string> = ref('');
+
+const user = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+function checkPassowrd() {
+
+  if (!password.value || !passwordConfirmation.value) {
+    return 'Please enter both password and password confirmation';
+  }
+  if (password.value !== passwordConfirmation.value) {
+    return 'Passwords do not match';
+  }
+
+  if (password.value.length < passwordField.value.minLength) {
+    return `Password must be at least ${passwordField.value.minLength} characters long`;
+  }
+
+  if (password.value.length > passwordField.value.maxLength) {
+    return `Password must be at most ${passwordField.value.maxLength} characters long`;
+  }
+
+  if (passwordField.value.validation) {
+    const valError = applyRegexValidation(password.value, passwordField.value.validation);
+    if (valError) {
+      return valError;
+    }
+  }
+
+  return null;
+}
+
+const validationRunning = ref(false);
+
+const validationError = computed(() => {
+  if (validationRunning.value) {
+    return checkPassowrd();
+  }
+  return null;
+});
+
+const error: Ref<str | null> = ref(null);
+
+onMounted(async () => {
+  if (route.query.token) {
+    // call method completeVerifiedSignup to confirm { token }
+    // if success, then redirect to login page
+
+    const resp = await callAdminForthApi({
+      path: `/plugin/${route.meta.pluginInstanceId}/complete-verified-signup`,
+      method: 'POST',
+      body: {
+        token: route.query.token,
+      }
+    });
+    if (resp.error) {
+      window.adminforth.alert({
+        message: `Error fetching data: ${error.message}`,
+        variant: 'danger',
+      });
+    } else if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    } else {
+      await user.finishLogin();
+    }
+    return;
+
+  }
+  emailInput.value.focus();
+});
+
+
+const backgroundPosition = computed(() => {
+  return coreStore.config?.loginBackgroundPosition || '1/2';
+});
+
+const passwordField = computed(
+  () => route.meta.passwordField
+)
+
+onMounted(async () => {
+  await coreStore.getPublicConfig();
+});
+
+async function doSignup() {
+  error.value = null;
+  const email = emailInput.value!.value;
+  if (!email) {
+    error.value = 'Please enter your email';
+    return;
+  }
+  if (checkPassowrd()) {
+    validationRunning.value = true;
+    return;
+  }
+
+  inProgress.value = true;
+  const resp = await callAdminForthApi({
+    path: `/plugin/${route.meta.pluginInstanceId}/signup`,
+    method: 'POST',
+    body: {
+      email,
+      url: window.location.origin + window.location.pathname,
+      password: password.value,
+    }
+  });
+  inProgress.value = false;
+  if (resp.error) {
+    error.value = resp.error;
+  } else {
+    error.value = null;
+    requestSent.value = true;
+    sentToEmail.value = email;
+    if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    } else {
+      error.value = null;
+      await user.finishLogin();
+    }
+  }
+}
+
+
+
+</script>

package/dist/custom/SignupUnderLogin.vue

@@ -0,0 +1,13 @@
+<template>
+  <p class="text-gray-500 dark:text-gray-400 font-sm text-left mt-3">
+    Have no account? 
+    <Link to="/signup">
+      sign up now
+    </Link>
+  </p>
+</template>
+
+<script setup>
+import Link from '@/afcl/Link.vue';
+
+</script>

package/dist/custom/langCommon.ts

@@ -0,0 +1,88 @@
+
+import { callAdminForthApi } from '@/utils';
+
+
+const messagesCache: Record<
+    string,
+    {
+        ts: number;
+        messages: Record<string, string>;
+    }
+> = {};
+
+// cleanup messages after a 2 minutes (cache for instant switching)
+setInterval(() => {
+    const now = Date.now();
+    for (const lang in messagesCache) {
+        if (now - messagesCache[lang].ts > 10 * 60 * 1000) {
+            delete messagesCache[lang];
+        }
+    }
+}, 60 * 1000);
+
+// i18n is vue-i18n instance
+export async function setLang({ setLocaleMessage, locale }: any, pluginInstanceId: string, langIso: string) {
+
+    if (!messagesCache[langIso]) {
+        const messages = await callAdminForthApi({
+            path: `/plugin/${pluginInstanceId}/frontend_messages?lang=${langIso}`,
+            method: 'GET',
+        });
+        messagesCache[langIso] = {
+            ts: Date.now(),
+            messages: messages
+        };
+    }
+    
+    // set locale and locale message
+    setLocaleMessage(langIso, messagesCache[langIso].messages);
+
+    // set the language
+    locale.value = langIso;
+
+    document.querySelector('html').setAttribute('lang', langIso);
+    setLocalLang(langIso);
+}
+
+// only remap the country code for the languages where language code is different from the country code
+// don't include es: es, fr: fr, etc, only include the ones where language code is different from the country code
+const countryISO31661ByLangISO6391 = {
+    en: 'us', // English → United States
+    zh: 'cn', // Chinese → China
+    hi: 'in', // Hindi → India
+    ar: 'sa', // Arabic → Saudi Arabia
+    ko: 'kr', // Korean → South Korea
+    ja: 'jp', // Japanese → Japan
+    uk: 'ua', // Ukrainian → Ukraine
+};
+
+export function getCountryCodeFromLangCode(langCode) {
+    return countryISO31661ByLangISO6391[langCode] || langCode;
+}
+
+
+const LS_LANG_KEY = `afLanguage`;
+
+export function getLocalLang(supportedLanguages: {code}[]): string {
+    let lsLang = localStorage.getItem(LS_LANG_KEY);
+    // if someone screwed up the local storage or we stopped language support, lets check if it is in supported languages
+    if (lsLang && !supportedLanguages.find((l) => l.code == lsLang)) {
+        lsLang = null;
+    }
+    if (lsLang) {
+        return lsLang;
+    }
+    // read lang from navigator and try find what we have in supported languages
+    const lang = navigator.language.split('-')[0];
+    const foundLang = supportedLanguages.find((l) => l.code == lang);
+    if (foundLang) {
+        return foundLang.code;
+    }
+    return supportedLanguages[0].code;
+}
+
+export function setLocalLang(lang: string) {
+    localStorage.setItem(LS_LANG_KEY, lang);
+}
+
+  

package/dist/custom/package-lock.json

@@ -0,0 +1,24 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "flag-icon-css": "^4.1.7"
+      }
+    },
+    "node_modules/flag-icon-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-4.1.7.tgz",
+      "integrity": "sha512-AFjSU+fv98XbU0vnTQ32vcLj89UEr1MhwDFcooQv14qWJCjg9fGZzfh9BVyDhAhIOZW/pGmJmq38RqpgPaeybQ==",
+      "deprecated": "The project has been renamed to flag-icons",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package/dist/custom/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "flag-icon-css": "^4.1.7"
+  }
+}

package/dist/custom/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".", // This should point to your project root
+    "paths": {
+      "@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "../../../spa/src/*"
+      ],
+      "*": [
+        // "node_modules/adminforth/dist/spa/node_modules/*"
+        "../../../spa/node_modules/*"
+      ],
+      "@@/*": [
+        // "node_modules/adminforth/dist/spa/src/*"
+        "."
+      ]
+    }
+  }
+}