ayanova/src/plugins/vuetify.js

@@ -116,6 +116,7 @@ import {
   faLink,
   faListOl,
   faListUl,
+  faLock,
   faMagic,
   faMapMarkerAlt,
   faMapMarkedAlt,
@@ -293,6 +294,7 @@ library.add(
   faLink,
   faListOl,
   faListUl,
+  faLock,
   faMagic,
   faMapMarkerAlt,
   faMapMarkedAlt,
@@ -912,6 +914,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "list-ul"]
     }
   },
+  ayiLock: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "lock"]
+    }
+  },
   ayiMagic: {
     component: FontAwesomeIcon,
     props: {

ayanova/src/views/home-security.vue

@@ -12,36 +12,26 @@
               <v-card class="mx-auto my-12" max-width="600">
                 <v-card-title>{{ $ay.t("AuthConnectAppTitle") }}</v-card-title>
                 <v-card-subtitle
-                  >Using an authenticator app like Google Authenticator, Duo,
-                  Microsoft Authenticator or Authy, scan the QR code. It will
-                  display a 6 digit code which you need to enter below.
+                  >{{ $ay.t("AuthConnectAppSubTitle") }}
                 </v-card-subtitle>
                 <v-card-text>
                   <div class="text-center my-10">
                     <img alt="Embedded QR Code" :src="qCode" />
                   </div>
-
-                  Having trouble scanning the code? Enter the following
-                  manually:
-                  <div>
-                    <span class="text-subtitle-2">{{ obj.s }}</span>
-                  </div>
+                  {{ $ay.t("AuthConnectAppManualEntry") }}
+                  <span class="text-subtitle-2 ml-2">{{ obj.s }}</span>
+                  <v-text-field
+                    class="mt-10"
+                    v-model="pin"
+                    :label="$ay.t('AuthEnterPassCode')"
+                    :error-messages="form().serverErrors(this, 'pin')"
+                    ref="pin"
+                    @input="fieldValueChanged('mapUrlTemplate')"
+                    data-cy="tfaPin"
+                  ></v-text-field>
                 </v-card-text>
               </v-card>
             </v-col>
-
-            <!-- <div class="mb-6">
-              <span class="text-h5"> {{ $ay.t("AuthConnectAppTitle") }}</span>
-            </div>
-            <v-col cols="12" offset-lg="1" offset-xl="3">
-              <v-col cols="12">
-                <img alt="Embedded QR Code" :src="qCode" />
-              </v-col>
-            </v-col>
-            <v-col cols="12">
-              <img alt="Embedded QR Code" :src="qCode" />
-            </v-col>
-            {{ obj.s }} -->
           </template>
         </v-row>
       </v-form>
@@ -112,6 +102,7 @@ export default {
         s: null, // = u.TotpSecret,
         qr: null // = qrCodeImageAsBase64
       },
+      pin: null,
       tfaEnabled: window.$gz.store.state.tfaEnabled,
       formState: {
         ready: false,
@@ -228,9 +219,9 @@ function clickHandler(menuItem) {
 function generateMenu(vm) {
   let menuOptions = {
     isMain: true,
-    icon: "$ayiKey",
-    title: "SetLoginPassword",
-    helpUrl: "home-password",
+    icon: "$ayiLock",
+    title: "AuthTwoFactor",
+    helpUrl: "home-tfa",
     formData: {
       ayaType: window.$gz.type.UserOptions
     },
@@ -263,11 +254,11 @@ async function initForm(vm) {
 //
 async function fetchTranslatedText(vm) {
   await window.$gz.translation.cacheTranslations([
-    "UserLogin",
-    "OldPassword",
-    "NewPassword",
-    "ConfirmPassword",
-    "KnownPasswordWarning"
+    "AuthConnectAppTitle",
+    "AuthConnectAppSubTitle",
+    "AuthConnectAppManualEntry",
+    "AuthEnterPin",
+    "AuthTwoFactor"
   ]);
 }
 </script>