ayanova/src/views/home-security.vue

@@ -2,20 +2,30 @@
   <v-row v-if="formState.ready">
     <v-col>
       <v-form ref="form">
-        <v-row align="center" justify="center">
+        <v-row>
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <template v-if="tfaEnabled">
             DISABLE TFA
           </template>
           <template v-else>
-            <v-col cols="12" md="7">
-              <v-card>
+            <v-col cols="12">
+              <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.
+                </v-card-subtitle>
                 <v-card-text>
-                  <div class="text-center">
+                  <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>
                 </v-card-text>
               </v-card>
             </v-col>