Refactor mfa form

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Jan 14, 2024 · 2457316 · 2457316
1 parent e85ef55
commit 2457316
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 124 deletions.
diff --git a/console/console-src/modules/system/users/Mfa.vue b/console/console-src/modules/system/users/Mfa.vue
diff --git a/console/console-src/modules/system/users/module.ts b/console/console-src/modules/system/users/module.ts
@@ -4,7 +4,6 @@ import UserStatsWidget from "./widgets/UserStatsWidget.vue";
 import UserList from "./UserList.vue";
 import UserDetail from "./UserDetail.vue";
 import Login from "./Login.vue";
-import Mfa from "./Mfa.vue";
 import { IconUserSettings } from "@halo-dev/components";
 import { markRaw } from "vue";
 import Binding from "./Binding.vue";
@@ -24,14 +23,6 @@ export default definePlugin({
         title: "core.login.title",
       },
     },
-    {
-      path: "/login/mfa",
-      name: "Mfa",
-      component: Mfa,
-      meta: {
-        title: "Multi-Factor Authentication",
-      },
-    },
     {
       path: "/binding/:provider",
       name: "Binding",

diff --git a/console/console-src/router/guards/auth-check.ts b/console/console-src/router/guards/auth-check.ts
@@ -2,7 +2,7 @@ import { rbacAnnotations } from "@/constants/annotations";
 import { useUserStore } from "@/stores/user";
 import type { Router } from "vue-router";
 
-const whiteList = ["Setup", "Login", "Binding", "ResetPassword", "Mfa"];
+const whiteList = ["Setup", "Login", "Binding", "ResetPassword"];
 
 export function setupAuthCheckGuard(router: Router) {
   router.beforeEach((to, from, next) => {

diff --git a/console/src/components/login/LoginForm.vue b/console/src/components/login/LoginForm.vue
@@ -12,10 +12,9 @@ import { JSEncrypt } from "jsencrypt";
 import { apiClient } from "@/utils/api-client";
 import { useI18n } from "vue-i18n";
 import { ERROR_MFA_REQUIRED_TYPE } from "@/constants/error-types";
-import { useRouter } from "vue-router";
+import MfaForm from "./MfaForm.vue";
 
 const { t } = useI18n();
-const router = useRouter();
 
 withDefaults(
   defineProps<{
@@ -103,7 +102,7 @@ const handleLogin = async () => {
       } = e.response?.data || {};
 
       if (errorType === ERROR_MFA_REQUIRED_TYPE) {
-        router.push({ name: "Mfa" });
+        mfaRequired.value = true;
         return;
       }
 
@@ -130,51 +129,57 @@ onMounted(() => {
 const inputClasses = {
   outer: "!py-3 first:!pt-0 last:!pb-0",
 };
+
+// mfa
+const mfaRequired = ref(false);
 </script>
 
 <template>
-  <FormKit
-    id="login-form"
-    v-model="loginForm"
-    name="login-form"
-    :actions="false"
-    type="form"
-    :classes="{
-      form: '!divide-none',
-    }"
-    :config="{ validationVisibility: 'submit' }"
-    @submit="handleLogin"
-    @keyup.enter="submitForm('login-form')"
-  >
+  <template v-if="!mfaRequired">
     <FormKit
-      :classes="inputClasses"
-      name="username"
-      :placeholder="$t('core.login.fields.username.placeholder')"
-      :validation-label="$t('core.login.fields.username.placeholder')"
-      :autofocus="true"
-      type="text"
-      validation="required"
+      id="login-form"
+      v-model="loginForm"
+      name="login-form"
+      :actions="false"
+      type="form"
+      :classes="{
+        form: '!divide-none',
+      }"
+      :config="{ validationVisibility: 'submit' }"
+      @submit="handleLogin"
+      @keyup.enter="submitForm('login-form')"
     >
+      <FormKit
+        :classes="inputClasses"
+        name="username"
+        :placeholder="$t('core.login.fields.username.placeholder')"
+        :validation-label="$t('core.login.fields.username.placeholder')"
+        :autofocus="true"
+        type="text"
+        validation="required"
+      >
+      </FormKit>
+      <FormKit
+        id="passwordInput"
+        :classes="inputClasses"
+        name="password"
+        :placeholder="$t('core.login.fields.password.placeholder')"
+        :validation-label="$t('core.login.fields.password.placeholder')"
+        type="password"
+        validation="required"
+        autocomplete="current-password"
+      >
+      </FormKit>
     </FormKit>
-    <FormKit
-      id="passwordInput"
-      :classes="inputClasses"
-      name="password"
-      :placeholder="$t('core.login.fields.password.placeholder')"
-      :validation-label="$t('core.login.fields.password.placeholder')"
-      type="password"
-      validation="required"
-      autocomplete="current-password"
+    <VButton
+      class="mt-8"
+      block
+      :loading="loading"
+      type="secondary"
+      @click="submitForm('login-form')"
     >
-    </FormKit>
-  </FormKit>
-  <VButton
-    class="mt-8"
-    block
-    :loading="loading"
-    type="secondary"
-    @click="submitForm('login-form')"
-  >
-    {{ $t(buttonText) }}
-  </VButton>
+      {{ $t(buttonText) }}
+    </VButton>
+  </template>
+  <MfaForm v-else @succeed="$emit('succeed')" />
 </template>
diff --git a/console/src/components/login/MfaForm.vue b/console/src/components/login/MfaForm.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { submitForm } from "@formkit/core";
+import { Toast, VButton } from "@halo-dev/components";
+import { ref } from "vue";
+import { onMounted } from "vue";
+
+const _csrf = ref();
+
+onMounted(() => {
+  const csrf = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("XSRF-TOKEN"))
+    ?.split("=")[1];
+
+  if (!csrf) {
+    Toast.warning("CSRF token not found");
+    return;
+  }
+
+  _csrf.value = csrf;
+});
+</script>
+
+<template>
+  <FormKit
+    id="mfa-form"
+    name="mfa-form"
+    type="form"
+    :classes="{
+      form: '!divide-none',
+    }"
+    :config="{ validationVisibility: 'submit' }"
+    action="/login/mfa/totp"
+    method="POST"
+    @keyup.enter="submitForm('mfa-form')"
+  >
+    <FormKit
+      :classes="{
+        outer: '!py-0',
+      }"
+      name="code"
+      placeholder="请输入两步验证码"
+      validation-label="两步验证码"
+      :autofocus="true"
+      type="text"
+      validation="required"
+    >
+    </FormKit>
+    <FormKit name="_csrf" :model-value="_csrf" type="hidden"></FormKit>
+  </FormKit>
+  <VButton class="mt-8" block type="secondary" @click="submitForm('mfa-form')">
+    验证
+  </VButton>
+</template>