show banner telling user that MFA code is required

admin_ui/src/components/MessagePopup.vue

@@ -1,6 +1,9 @@
 <template>
     <div
-        :class="{ error: apiResponseMessage.type == 'error' }"
+        :class="{
+            error: apiResponseMessage.type == 'error',
+            neutral: apiResponseMessage.type == 'neutral'
+        }"
         id="message_popup"
         v-if="visible"
     >
@@ -85,8 +88,13 @@ div#message_popup {
     p.close {
         flex-grow: 0;
     }
-}
-div#message_popup.error {
-    background-color: @red;
+
+    &.error {
+        background-color: @red;
+    }
+
+    &.neutral {
+        background-color: @dark_blue;
+    }
 }
 </style>

admin_ui/src/interfaces.ts

@@ -35,7 +35,7 @@ export interface FetchSingleRowConfig {
 
 export interface APIResponseMessage {
     contents: string
-    type: string
+    type: "success" | "error" | "neutral"
 }
 
 export interface OrderByConfig {

admin_ui/src/views/Login.vue

@@ -13,7 +13,7 @@
 
                 <template v-if="mfaCodeRequired">
                     <label>{{ $t("MFA Code") }}</label>
-                    <input placeholder="123456" type="text" />
+                    <input placeholder="123456" type="text" v-model="mfaCode" />
                     <p>
                         Hint: Use your authenticator app to generate the MFA
                         code - if you've lost your phone, you can use a recovery
@@ -38,6 +38,7 @@ export default defineComponent({
         return {
             username: "",
             password: "",
+            mfaCode: "",
             mfaCodeRequired: false
         }
     },
@@ -55,7 +56,8 @@ export default defineComponent({
             try {
                 await axios.post(`./public/login/`, {
                     username: this.username,
-                    password: this.password
+                    password: this.password,
+                    ...(this.mfaCodeRequired ? { mfaCode: this.mfaCode } : {})
                 })
             } catch (error) {
                 console.log("Request failed")
@@ -67,6 +69,11 @@ export default defineComponent({
                         error.response?.status == 401 &&
                         error.response?.data?.detail == "MFA code required"
                     ) {
+                        this.$store.commit("updateApiResponseMessage", {
+                            contents: "MFA code required",
+                            type: "neutral"
+                        })
+
                         this.mfaCodeRequired = true
                     } else {
                         this.$store.commit("updateApiResponseMessage", {