opensignup localization

Author: ivictbor

adminforth/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.8-next.17",
+  "version": "1.5.8-next.19",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",

adminforth/package.json

@@ -24,7 +24,8 @@
         text-black dark:text-darkSidebarTextHover
         bg-black bg-opacity-10	
         hover:brightness-110
-        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrasts
+        hover:text-lightPrimary dark:hover:text-darkPrimary
+        hover:bg-lightPrimaryContrast dark:hover:bg-darkPrimaryContrast
         w-full text-select-none pl-5 select-none"
         v-for="option in options.filter((opt) => opt.value !== selectedOption.value)"
         @click="doChangeLang(option.value)"

adminforth/plugins/i18n/custom/LanguageInUserMenu.vue

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/i18n",
-  "version": "1.0.18",
+  "version": "1.0.19-next.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

adminforth/plugins/i18n/package-lock.json

@@ -141,6 +141,9 @@ import { useRoute, useRouter } from 'vue-router';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import Button from '@/afcl/Button.vue';
 import Link from '@/afcl/Link.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const inProgress = ref(false);
 
@@ -158,7 +161,7 @@ const sentToEmail: Ref<string> = ref('');
 
 const requestEmailConfirmation = computed(() => route.meta.requestEmailConfirmation);
 const verifyToken = computed(() => route.query.token);
-const toLoginText = computed(() => `${verifyToken.value ? 'Go' : 'Back'} to login`);
+const toLoginText = computed(() => verifyToken.value ? t('Go to login') : t('Back to login'));
 const isPasswordNeeded = computed(() => !requestEmailConfirmation.value || (requestEmailConfirmation.value && verifyToken.value));
 
 const user = useUserStore();
@@ -169,22 +172,25 @@ const router = useRouter();
 function checkPassword() {
 
   if (!password.value || !passwordConfirmation.value) {
-    return 'Please enter both password and password confirmation';
+    return t('Please enter both password and password confirmation');
   }
   if (password.value !== passwordConfirmation.value) {
-    return 'Passwords do not match';
+    return t('Passwords do not match');
   }
 
-  if (password.value.length < passwordField.value.minLength) {
-    return `Password must be at least ${passwordField.value.minLength} characters long`;
+  if (!passwordConstraints.value) {
+    return null;
+  }
+  if (password.value.length < passwordConstraints.value.minLength) {
+    return t(`Password must be at least {minLength} characters long`, { minLength: passwordConstraints.value.minLength });
   }
 
-  if (password.value.length > passwordField.value.maxLength) {
-    return `Password must be at most ${passwordField.value.maxLength} characters long`;
+  if (password.value.length > passwordConstraints.value.maxLength) {
+    return t(`Password must be at most {maxLength} characters long`, { maxLength: passwordConstraints.value.maxLength });
   }
 
-  if (passwordField.value.validation) {
-    const valError = applyRegexValidation(password.value, passwordField.value.validation);
+  if (passwordConstraints.value.validation) {
+    const valError = applyRegexValidation(password.value, passwordConstraints.value.validation);
     if (valError) {
       return valError;
     }
@@ -213,19 +219,31 @@ const backgroundPosition = computed(() => {
   return coreStore.config?.loginBackgroundPosition || '1/2';
 });
 
-const passwordField = computed(
-  () => route.meta.passwordField
-)
+
+const passwordConstraints: Ref<{
+  minLength: number;
+  maxLength: number;
+  validation: string;
+}> = ref({
+  minLength: 8,
+  maxLength: 100,
+  validation: '',
+});
 
 onMounted(async () => {
   await coreStore.getPublicConfig();
+  // getPasswordConstraints
+  passwordConstraints.value = await callAdminForthApi({
+    path: `/plugin/${route.meta.pluginInstanceId}/password-constraints`,
+    method: 'GET',
+  });
 });
 
 async function doSignup() {
   error.value = null;
   const email = emailInput.value!.value;
   if (!email) {
-    error.value = 'Please enter your email';
+    error.value = t('Please enter your email');
     return;
   }
   if (!requestEmailConfirmation.value && checkPassword()) {
@@ -274,7 +292,7 @@ const signupAfterEmailConfirmation = async () => {
     });
     if (resp.error) {
       window.adminforth.alert({
-        message: `Error fetching data: ${resp.error}`,
+        message: t(`Error fetching data: {error}`, { error: resp.error }),
         variant: 'danger',
       });
     } else if (resp.redirectTo) {

adminforth/plugins/i18n/package.json

@@ -1,6 +1,7 @@
 import AdminForth, { AdminForthPlugin, Filters, suggestIfTypo, AdminForthDataTypes } from "adminforth";
 import type { IAdminForth, IHttpServer, AdminForthComponentDeclaration, AdminForthResourceColumn, AdminForthResource, BeforeLoginConfirmationFunction, HttpExtra } from "adminforth";
 import type { PluginOptions } from './types.js';
+import { error } from "console";
 
 
 export default class OpenSignupPlugin extends AdminForthPlugin {
@@ -81,11 +82,6 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
         meta: { 
           customLayout: true, 
           pluginInstanceId: this.pluginInstanceId,
-          passwordField: {
-            minLength: passwordField.minLength,
-            maxLength: passwordField.maxLength,
-            validation: passwordField.validation
-          },
           requestEmailConfirmation: !!this.options.confirmEmails
         }
       }
@@ -146,27 +142,43 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
 
 
   setupEndpoints(server: IHttpServer) {
+
+    server.endpoint({
+      method: 'GET',
+      path: `/plugin/${this.pluginInstanceId}/password-constraints`,
+      noAuth: true,
+      handler: async ({tr}) => {
+        return {
+          minLength: this.passwordField.minLength,
+          maxLength: this.passwordField.maxLength,
+          validation: await Promise.all(
+            this.passwordField.validation.map(async ({ regExp, message }) => ({ regExp, message: await tr(message, 'opensignup') }))
+          ),
+        };
+      }
+    });
+    
     server.endpoint({
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/complete-verified-signup`,
       noAuth: true,
-      handler: async ({ body, response, headers, query, cookies }) => {
+      handler: async ({ body, response, headers, query, cookies, tr }) => {
         const { token, password } = body;
         const { email } = await this.adminforth.auth.verify(token, 'tempVerifyEmailToken', false);
         if (!email) {
           return { error: 'Invalid token', ok: false };
         }
 
         if(!password) {
-          return { error: 'Password is required', ok: false };
+          return { error: tr('Password is required', 'opensignup'), ok: false };
         }
         const userRecord = await this.adminforth.resource(this.authResource.resourceId).get(Filters.EQ(this.emailField.name, email));
         if (!userRecord) {
-          return { error: 'User not found', ok: false };
+          return { error: tr('User not found'), ok: false };
         }
 
         if (userRecord[this.options.confirmEmails.emailConfirmedField]) {
-          return { error: 'Email already confirmed', ok: false };
+          return { error: tr('Email already confirmed'), ok: false };
         }
 
         await this.adminforth.resource(this.authResource.resourceId).update(userRecord[this.authResource.columns.find((col) => col.primaryKey).name], {
@@ -181,7 +193,7 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/signup`,
       noAuth: true,
-      handler: async ({ body, response, headers, query, cookies }) => {
+      handler: async ({ body, response, headers, query, cookies, tr }) => {
         const { email, url, password } = body;
 
         // validate email
@@ -196,15 +208,21 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
         // validate password
         if (!this.options.confirmEmails) {
           if (password.length < this.passwordField.minLength) {
-            return { error: `Password must be at least ${this.passwordField.minLength} characters long`, ok: false };
+            return { 
+              error: tr(`Password must be at least ${this.passwordField.minLength} characters long`, 'opensignup'),
+              ok: false 
+            };
           }
           if (password.length > this.passwordField.maxLength) {
-            return { error: `Password must be at most ${this.passwordField.maxLength} characters long`, ok: false };
+            return { 
+              error: tr(`Password must be at most ${this.passwordField.maxLength} characters long`, 'opensignup'),
+              ok: false 
+            };
           }
           if (this.passwordField.validation) {
             for (const { regExp, message } of this.passwordField.validation) {
               if (!new RegExp(regExp).test(password)) {
-                return { error: message, ok: false };
+                return { error: tr(message, 'opensignup'), ok: false };
               }
             }
           }
@@ -213,7 +231,7 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
         // first check again if email already exists
         const existingUser = await this.adminforth.resource(this.authResource.resourceId).get(Filters.EQ(this.emailField.name, email));
         if ((!this.options.confirmEmails && existingUser) || (this.options.confirmEmails && existingUser?.[this.emailConfirmedField.name])) {
-          return { error: 'Email already exists', ok: false };
+          return { error: tr('Email already exists', 'opensignup'), ok: false };
         }
 
         // create user
@@ -237,40 +255,40 @@ export default class OpenSignupPlugin extends AdminForthPlugin {
 
         const verifyToken = this.adminforth.auth.issueJWT({email, issuer: brandName }, 'tempVerifyEmailToken', '2h');
         process.env.HEAVY_DEBUG && console.log('🐛Sending reset tok to', verifyToken);
-        const emailText = `
+        const emailText = tr(`
                   Dear user,
-                  Welcome to ${brandName}! 
+                  Welcome to {brandName}! 
                   
                   To confirm your email, click the link below:\n\n
 
-                  ${url}?verifyToken=${verifyToken}\n\n
+                  {url}?verifyToken={verifyToken}\n\n
 
                   If you didn't request this, please ignore this email.\n\n
                   Link is valid for 2 hours.\n\n
 
                   Thanks,
-                  The ${brandName} Team
+                  The {brandName} Team
                                     
-                `;
+                `, 'opensignup', { brandName, url, verifyToken }
+        );
 
-          const emailHtml = `
-                <html>
-                  <head></head>
-                  <body>
-                    <p>Dear user,</p>
-                    <p>Welcome to ${brandName}!</p>
-                    <p>To confirm your email, click the link below:</p>
-                    <a href="${url}?token=${verifyToken}">Confirm email</a>
-                    <p>If you didn't request this, please ignore this email.</p>
-                    <p>Link is valid for 2 hours.</p>
-                    <p>Thanks,</p>
-                    <p>The ${brandName} Team</p>
-                  </body>
-                </html>
-
-
-                `;
-          const emailSubject = `Signup request at ${brandName}`;
+        const emailHtml = tr(`
+              <html>
+                <head></head>
+                <body>
+                  <p>Dear user,</p>
+                  <p>Welcome to {brandName}!</p>
+                  <p>To confirm your email, click the link below:</p>
+                  <a href="{url}?token={verifyToken}">Confirm email</a>
+                  <p>If you didn't request this, please ignore this email.</p>
+                  <p>Link is valid for 2 hours.</p>
+                  <p>Thanks,</p>
+                  <p>The {brandName} Team</p>
+                </body>
+              </html>
+        `, 'opensignup', { brandName, url, verifyToken });
+
+        const emailSubject = tr(`Signup request at {brandName}`, 'opensignup', { brandName });
 
         // send email with AWS SES this.options.providerOptions.AWS_SES
         this.options.confirmEmails.adapter.sendEmail(this.options.confirmEmails.sendFrom, email, emailText, emailHtml, emailSubject);