feat: extend internalization support across views

src/i18n/en.ts

@@ -1,4 +1,9 @@
 export default {
+  consent: {
+    allow: 'Allow',
+    reject: 'Reject',
+    title: '{clientName} asks for your consent for the followings'
+  },
   login: {
     errors: {
       passwordRequired: 'Password is required',
@@ -12,6 +17,18 @@ export default {
     signUp: 'Sign Up',
     username: 'Username'
   },
+  fillMissing: {
+    errors: {
+      // eslint-disable-next-line @typescript-eslint/camelcase
+      phone_numberRequired: 'Phone Number is required',
+      password: 'Password is required'
+    },
+    title: 'Fill missing information',
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    phone_number: 'Phone number',
+    password: 'Password',
+    submit: 'Submit',
+  },
   forgotPassword: {
     errors: {
       emailRequired: 'Email is required',
@@ -66,6 +83,7 @@ export default {
       passwordsNotMatch: 'Passwords doesn\'t match',
       rePasswordRequired: 'Password confirmation is required'
     },
+    informNewPassword: 'This is your temporary password.',
     newPassword: 'New Password',
     rePassword: 'Confirm Password',
     successfullyReset: 'Your password has been successfully reset.'

src/ui/views/Consent.vue

@@ -15,7 +15,11 @@
         :src="resolveClientLogo(context.client)"
       >
       <div class="pa__form-title">
-        <span v-t="'consent.title'" />
+        <span
+          v-t="{ path: 'consent.title',
+                 args: { clientName: context.client.clientName}
+          }"
+        />
       </div>
 
       <div class="text-left">

src/ui/views/Login.vue

@@ -38,8 +38,12 @@
       </p-btn>
     </div>
 
-    <template v-if="features.socialConnections && context.client.social.length">
-      <div class="text-center">
+    <template
+      v-if="features.socialConnections && context.client
+        && context.client.social
+        && context.client.social.length"
+    >
+      <div class="text-center pt-4">
         <span v-t="'login.signInWith'" />
       </div>
       <div class="row justify-center">
@@ -56,7 +60,10 @@
       v-if="features.signUp"
       class="text-center txt1 pt-4 pb-2"
     >
-      <span v-t="'login.noAccount'" />
+      <span
+        v-t="'login.noAccount'"
+        class="pr-2"
+      />
       <a
         v-t="'login.signUp'"
         href="/signup"
@@ -102,22 +109,22 @@ export default defineComponent({
       default: (): AdditionalFields => ({
         username: {
           type: 'text',
-          label: 'register.username',
+          label: 'login.username',
           errors: [],
           validator(fields, value){
             if(!value){
-              return this.t('register.errors.usernameRequired')
+              return this.t('login.errors.usernameRequired')
             }
             return true
           }
         },
         password: {
           type: 'password',
-          label: 'register.password',
+          label: 'login.password',
           errors: [],
           validator(fields, value){
             if(!value){
-              return this.t('register.errors.passwordRequired')
+              return this.t('login.errors.passwordRequired')
             }
             return true
           }

src/ui/views/Register.vue

@@ -37,9 +37,13 @@
       </p-btn>
     </div>
 
-    <template v-if="features.socialConnections && context.client.social.length">
-      <div class="text-center">
-        <span v-t="'register.signUpWith'" />
+    <template
+      v-if="features.socialConnections && context.client
+        && context.client.social
+        && context.client.social.length"
+    >
+      <div class="text-center pt-4">
+        <span v-t="'login.signInWith'" />
       </div>
       <div class="row justify-center">
         <SocialConnectionButton
@@ -54,7 +58,10 @@
     <div
       class="text-center txt1 pt-4 pb-2"
     >
-      <span v-t="'register.haveAccount'" />
+      <span
+        v-t="'register.haveAccount'"
+        class="pr-2"
+      />
       <a
         v-t="'login.signIn'"
         href="/signin"
@@ -77,12 +84,14 @@ import PlusAuth from 'plusauth-js';
 import { defineComponent, inject, reactive, ref } from 'vue';
 
 import { PForm } from '../components';
+import SocialConnectionButton from '../components/SocialConnectionButton';
 import { AdditionalFields, SocialConnections } from '../interfaces';
 import { resolveClientLogo } from '../utils';
 
 
 export default defineComponent({
   name: 'Register',
+  components: { SocialConnectionButton },
   props: {
     features: {
       type: Object,
@@ -95,6 +104,9 @@ export default defineComponent({
       type: Object as () => AdditionalFields,
       default: (): AdditionalFields => ({
         username: {
+          attrs: {
+            autocomplete: 'username'
+          },
           type: 'text',
           label: 'register.username',
           validator(fields, value){
@@ -107,6 +119,9 @@ export default defineComponent({
         password: {
           type: 'password',
           label: 'register.password',
+          attrs: {
+            autocomplete: 'new-password'
+          },
           validator(fields, value){
             if(!value){
               return this.t('register.errors.passwordRequired')
@@ -116,7 +131,10 @@ export default defineComponent({
         },
         rePassword: {
           type: 'password',
-          label: 'register.repassword',
+          label: 'register.rePassword',
+          attrs: {
+            autocomplete: 'new-password'
+          },
           validator(fields, value){
             if(!value){
               return this.t('register.errors.rePasswordRequired')

src/ui/views/ResetPassword.vue

@@ -7,16 +7,17 @@
       v-if="context.settings.passwordResetFlow === 'newPassword'
         && context.newPassword"
     >
-      This is your temporary password.
+      <span v-t="'resetPassword.informNewPassword'" />
 
       <div>
         {{ context.newPassword }}
       </div>
     </div>
     <div v-else>
-      <div v-if="actionCompleted">
-        Your password has been successfully reset.
-      </div>
+      <div
+        v-if="actionCompleted"
+        v-t="'resetPassword.successfullyReset'"
+      />
       <p-form
         v-else
         ref="form"

src/ui/views/mfa/Challenge.vue

@@ -5,9 +5,10 @@
       alt="Logo"
       src="/images/icons/select.svg"
     >
-    <p class="text-center title font-weight-thin">
-      Try another way to sign in
-    </p>
+    <p
+      v-t="'mfa.challenge.title'"
+      class="text-center title font-weight-thin"
+    />
     <div
       v-for="challenge in context.details.challenges"
       :key="challenge"

src/ui/views/mfa/Email.vue

@@ -7,18 +7,86 @@
       alt="Logo"
       src="/images/icons/email_question.svg"
     >
-    <div class="subtitle-2 text-left">
-      Enter verification code sent to:
-      <strong>{{ context.details.email }}</strong>
+    <div
+      v-t="{ path: 'mfa.email.title', args: { email: context.details.email
+      } }"
+      class="subtitle-2 text-left"
+    />
+    <p-text-field
+      v-model="code"
+      label="mfa.email.code"
+      :error-messages="error"
+      :rules="[
+        v => !!v ? true : 'mfa.email.errors.codeRequired'
+      ]"
+    />
+
+    <p-btn
+      type="submit"
+      block
+      color="primary"
+      :loading="loading"
+    >
+      <span v-t="'mfa.email.submit'" />
+    </p-btn>
+
+    <div
+      v-if="context.details.challenges.length > 1"
+      class="row justify-center pt-4"
+    >
+      <a
+        v-t="'mfa.tryAnotherWay'"
+        href="/signin/challenge"
+      />
     </div>
   </p-form>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import PlusAuth from 'plusauth-js';
+import { defineComponent, inject, ref } from 'vue';
+
+import { PForm } from '../../components';
+
 
 export default defineComponent({
-  name: 'Email'
+  name: 'Email',
+  setup(){
+    const api = inject('api') as PlusAuth
+    const code = ref<string | null>(null)
+    const error = ref<string>(null as any)
+    const form = ref<InstanceType<typeof PForm>>(null as any)
+    const loading = ref(false)
+    return {
+      code,
+      loading,
+      error,
+      form,
+      async submit($event: Event){
+        $event.preventDefault()
+
+        loading.value = true
+
+        const valid = form.value?.validate()
+        if(valid){
+          form.value?.resetValidation()
+          try{
+            await api.mfa.validateCode(
+              code.value as string,
+              'email'
+            )
+          }catch (e) {
+            error.value = e.error;
+          }finally {
+            loading.value = false
+          }
+          return false
+        }else{
+          loading.value = false
+        }
+      }
+    }
+  }
 })
 </script >
 

src/ui/views/mfa/GA.vue

@@ -69,6 +69,15 @@ details?id=com.google.android.apps.authenticator2"
     >
       <span v-t="'mfa.sms.submit'" />
     </p-btn>
+    <div
+      v-if="context.details.challenges.length > 1"
+      class="row justify-center "
+    >
+      <a
+        v-t="'mfa.tryAnotherWay'"
+        href="/signin/challenge"
+      />
+    </div>
   </p-form>
 </template>
 

src/ui/views/mfa/SMS.vue

@@ -16,10 +16,12 @@
       v-if="timerEnabled"
       :duration="120"
     />
-    <div class="subtitle-2 font-weight-light text-left">
-      Enter verification code sent to:
-      <strong>{{ context.details.phone_number }}</strong>
-    </div>
+    <div
+      v-t="{ path: 'mfa.sms.title', args: { phone_number:
+        context.details.phone_number
+      } }"
+      class="subtitle-2 text-left"
+    />
     <p-text-field
       v-model="code"
       label="mfa.sms.code"
@@ -39,9 +41,12 @@
     </p-btn>
     <div
       v-if="context.details.challenges.length > 1"
-      class="row justify-center "
+      class="row justify-center pt-4"
     >
-      <a href="/signin/challenge">Try another way</a>
+      <a
+        v-t="'mfa.tryAnotherWay'"
+        href="/signin/challenge"
+      />
     </div>
   </p-form>
 </template>