ayanova/src/views/home-security.vue

@@ -4,10 +4,14 @@
       <v-form ref="form">
         <v-row>
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-          tfaEnabled:{{ tfaEnabled }}
-
-          ui here if tfa enabled then only option is disable tfa if not enabled
-          then user sees code to scan into tfa app
+          <template v-if="tfaEnabled">
+            DISABLE TFA
+          </template>
+          <template v-else>
+            ENABLE TFA
+            <img alt="Embedded QR Code" :src="qCode" />
+            {{ obj.s }}
+          </template>
         </v-row>
       </v-form>
     </v-col>
@@ -41,7 +45,14 @@ export default {
       window.$gz.eventBus.$on("menu-click", clickHandler);
 
       //fetch tfa secret and display here if tfa not enabled currently
-      console.log("tfaEnabled:", this.tfaEnabled);
+      if (!this.tfaEnabled) {
+        let res = await window.$gz.api.get("auth/totp");
+        if (res.error) {
+          throw new Error(res.error);
+        } else {
+          this.obj = res.data;
+        }
+      }
 
       //------------------
     } catch (err) {
@@ -67,7 +78,7 @@ export default {
   data() {
     return {
       obj: {
-        s: null, // = u.HotpSecret,
+        s: null, // = u.TotpSecret,
         qr: null // = qrCodeImageAsBase64
       },
       tfaEnabled: window.$gz.store.state.tfaEnabled,
@@ -107,6 +118,9 @@ export default {
   computed: {
     canSave: function() {
       return this.formState.valid && this.formState.dirty;
+    },
+    qCode: function() {
+      return `data:image/png;base64,${this.obj.qr}`;
     }
   },
   methods: {