diff --git a/ayanova/src/views/home-security.vue b/ayanova/src/views/home-security.vue
index d70139a5..e4ce02b6 100644
--- a/ayanova/src/views/home-security.vue
+++ b/ayanova/src/views/home-security.vue
@@ -50,7 +50,7 @@
                   <v-spacer></v-spacer>
 
                   <v-btn color="primary" text @click="authenticate()">{{
-                    $ay.t("Save")
+                    $ay.t("AuthVerifyCode")
                   }}</v-btn>
                 </v-card-actions>
               </v-card>
@@ -320,7 +320,8 @@ async function fetchTranslatedText(vm) {
     "AuthPinInvalid",
     "AuthConnectCompleted",
     "AuthDisableTwoFactor",
-    "AuthTwoFactorDisabled"
+    "AuthTwoFactorDisabled",
+    "AuthVerifyCode"
   ]);
 }
 </script>
diff --git a/ayanova/src/views/login.vue b/ayanova/src/views/login.vue
index 878f621d..302406e2 100644
--- a/ayanova/src/views/login.vue
+++ b/ayanova/src/views/login.vue
@@ -1,5 +1,30 @@
 <template>
   <div>
+    <v-row justify="center">
+      <v-dialog v-model="tfaDialog" persistent max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="headline">{{ authTwoFactor }}</span>
+          </v-card-title>
+          <v-card-text>
+            <v-text-field
+              v-model="pin"
+              :label="authEnterPin"
+              required
+            ></v-text-field>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="blue darken-1" text @click="cancelTfaVerify()">{{
+              cancel
+            }}</v-btn>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" text @click="tfaVerify()">{{
+              authVerifyCode
+            }}</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
     <v-row align="center" justify="center" class="mx-auto mt-sm-12 mb-16">
       <v-col cols="12" offset-md="4">
         <form>
@@ -167,6 +192,12 @@ export default {
         username: "superuser",
         password: "l3tm3in"
       },
+      tfaDialog: false,
+      authTwoFactor: null,
+      authEnterPin: null,
+      authVerifyCode: null,
+      cancel: null,
+      pin: null,
       hasSmallLogo: false,
       hasMediumLogo: false,
       hasLargeLogo: false,
@@ -335,6 +366,85 @@ export default {
     }
   },
   methods: {
+    async tfaVerify() {
+      //
+        //send 2fa code to server if ok, then proceed as normal
+ let vm = this;
+      if (vm.input.username != "" && vm.input.password != "") {
+        vm.errorBadCreds = false;
+        let loggedInWithKnownPassword =
+          vm.input.username == "superuser" && vm.input.password == "l3tm3in";
+
+        try {
+          let res = await window.$gz.api.upsert(
+            "auth",
+            {
+              login: vm.input.username,
+              password: vm.input.password
+            },
+            true
+          );
+
+          if (res.error) {
+            //don't expect this to ever get called but just in case
+            // throw new Error(res.error);
+            throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+          }
+
+          //check for 2fa enabled, if so then need to do one more step before process login can be called
+          if (res.data.tfa) {
+            this.authTwoFactor = res.data.authTwoFactor;
+            this.authEnterPin = res.data.authEnterPin;
+            this.authVerifyCode = res.data.authVerifyCode;
+            this.cancel = res.data.cancel;
+            this.pin = null;
+            //prompt for 2fa
+            tfaDialog = true;
+            return;
+          
+          }
+
+          await this.step2(res, loggedInWithKnownPassword);
+        } catch (error) {
+          //bad creds?
+          if (
+            error.message &&
+            error.message.includes("ErrorUserNotAuthenticated")
+          ) {
+            vm.errorBadCreds = true;
+            return;
+          }
+          //server closed by server state setting?
+          if (error.code == 2000 || error.code == 2001 || error.code == 2006) {
+            vm.formState.errorBoxMessage = error.message;
+            return;
+          }
+          //probably here because server unresponsive.
+          if (error.message) {
+            let msg = error.message;
+            if (
+              msg.includes("NetworkError") ||
+              msg.includes("Failed to fetch")
+            ) {
+              msg =
+                "Could not connect to AyaNova server at " +
+                window.$gz.api.APIUrl("") +
+                "\r\nError: " +
+                error.message;
+            }
+            //this just makes the error a little cleaner to remove the extraneous typeerror
+            msg = msg.replace(" TypeError:", "");
+            vm.formState.errorBoxMessage = msg;
+            return;
+          }
+        }
+      }
+           
+    },
+    cancelTfaVerify() {
+      //todo: reset values here, reload page, ???
+      this.tfaDialog=false;
+    },
     showFooterLogo() {
       return (
         this.showCustomSmallLogo() ||
@@ -410,11 +520,15 @@ export default {
 
           //check for 2fa enabled, if so then need to do one more step before process login can be called
           if (res.data.tfa) {
+            this.authTwoFactor = res.data.authTwoFactor;
+            this.authEnterPin = res.data.authEnterPin;
+            this.authVerifyCode = res.data.authVerifyCode;
+            this.cancel = res.data.cancel;
+            this.pin = null;
             //prompt for 2fa
-
-            //send 2fa code to server if ok, then proceed as normal
-
-            await this.step2(res, loggedInWithKnownPassword);
+            tfaDialog = true;
+            return;
+          
           }
 
           await this.step2(res, loggedInWithKnownPassword);