feat: support stateless MFA setup (#3382)

web/src/auth/MfaSetupPage.js

@@ -179,8 +179,10 @@ class MfaSetupPage extends React.Component {
             mfaProps={this.state.mfaProps}
             application={this.state.application}
             user={this.props.account}
-            onSuccess={() => {
+            onSuccess={(res) => {
               this.setState({
+                dest: res.dest,
+                countryCode: res.countryCode,
                 current: this.state.current + 1,
               });
             }}
@@ -195,7 +197,7 @@ class MfaSetupPage extends React.Component {
       );
     case 2:
       return (
-        <MfaEnableForm user={this.getUser()} mfaType={this.state.mfaType} recoveryCodes={this.state.mfaProps.recoveryCodes}
+        <MfaEnableForm user={this.getUser()} mfaType={this.state.mfaType} secret={this.state.mfaProps.secret} recoveryCodes={this.state.mfaProps.recoveryCodes} dest={this.state.dest} countryCode={this.state.countryCode}
           onSuccess={() => {
             Setting.showMessage("success", i18next.t("general:Enabled successfully"));
             this.props.onfinish();

web/src/auth/mfa/MfaEnableForm.js

@@ -3,11 +3,15 @@ import i18next from "i18next";
 import React, {useState} from "react";
 import * as MfaBackend from "../../backend/MfaBackend";
 
-export function MfaEnableForm({user, mfaType, recoveryCodes, onSuccess, onFail}) {
+export function MfaEnableForm({user, mfaType, secret, recoveryCodes, dest, countryCode, onSuccess, onFail}) {
   const [loading, setLoading] = useState(false);
   const requestEnableMfa = () => {
     const data = {
       mfaType,
+      secret,
+      recoveryCodes,
+      dest,
+      countryCode,
       ...user,
     };
     setLoading(true);

web/src/auth/mfa/MfaVerifyForm.js

@@ -26,11 +26,13 @@ export const mfaSetup = "mfaSetup";
 
 export function MfaVerifyForm({mfaProps, application, user, onSuccess, onFail}) {
   const [form] = Form.useForm();
-  const onFinish = ({passcode}) => {
-    const data = {passcode, mfaType: mfaProps.mfaType, ...user};
+  const onFinish = ({passcode, countryCode, dest}) => {
+    const data = {passcode, mfaType: mfaProps.mfaType, secret: mfaProps.secret, dest: dest, countryCode: countryCode, ...user};
     MfaBackend.MfaSetupVerify(data)
       .then((res) => {
         if (res.status === "ok") {
+          res.dest = dest;
+          res.countryCode = countryCode;
           onSuccess(res);
         } else {
           onFail(res);

web/src/auth/mfa/MfaVerifySmsForm.js

@@ -1,5 +1,5 @@
 import {UserOutlined} from "@ant-design/icons";
-import {Button, Form, Input} from "antd";
+import {Button, Form, Input, Space} from "antd";
 import i18next from "i18next";
 import React, {useEffect} from "react";
 import {CountryCodeSelect} from "../../common/select/CountryCodeSelect";
@@ -19,11 +19,13 @@ export const MfaVerifySmsForm = ({mfaProps, application, onFinish, method, user}
     }
     if (mfaProps.mfaType === SmsMfaType) {
       setDest(user.phone);
+      form.setFieldValue("dest", user.phone);
       return;
     }
 
     if (mfaProps.mfaType === EmailMfaType) {
       setDest(user.email);
+      form.setFieldValue("dest", user.email);
     }
   }, [mfaProps.mfaType]);
 
@@ -57,45 +59,44 @@ export const MfaVerifySmsForm = ({mfaProps, application, onFinish, method, user}
         <div style={{marginBottom: 20, textAlign: "left", gap: 8}}>
           {isEmail() ? i18next.t("mfa:Your email is") : i18next.t("mfa:Your phone is")} {dest}
         </div> :
-        (<React.Fragment>
+        (
           <p>{isEmail() ? i18next.t("mfa:Please bind your email first, the system will automatically uses the mail for multi-factor authentication") :
             i18next.t("mfa:Please bind your phone first, the system automatically uses the phone for multi-factor authentication")}
           </p>
-          <Input.Group compact style={{width: "300Px", marginBottom: "30px"}}>
-            {isEmail() ? null :
-              <Form.Item
-                name="countryCode"
-                noStyle
-                rules={[
-                  {
-                    required: false,
-                    message: i18next.t("signup:Please select your country code!"),
-                  },
-                ]}
-              >
-                <CountryCodeSelect
-                  initValue={mfaProps.countryCode}
-                  style={{width: "30%"}}
-                  countryCodes={application.organizationObj.countryCodes}
-                />
-              </Form.Item>
-            }
-            <Form.Item
-              name="dest"
-              noStyle
-              rules={[{required: true, message: i18next.t("login:Please input your Email or Phone!")}]}
-            >
-              <Input
-                style={{width: isEmail() ? "100% " : "70%"}}
-                onChange={(e) => {setDest(e.target.value);}}
-                prefix={<UserOutlined />}
-                placeholder={isEmail() ? i18next.t("general:Email") : i18next.t("general:Phone")}
-              />
-            </Form.Item>
-          </Input.Group>
-        </React.Fragment>
         )
       }
+      <Space.Compact style={{width: "300Px", marginBottom: "30px", display: isShowText() ? "none" : ""}}>
+        {isEmail() || isShowText() ? null :
+          <Form.Item
+            name="countryCode"
+            noStyle
+            rules={[
+              {
+                required: false,
+                message: i18next.t("signup:Please select your country code!"),
+              },
+            ]}
+          >
+            <CountryCodeSelect
+              initValue={mfaProps.countryCode}
+              style={{width: "30%"}}
+              countryCodes={application.organizationObj.countryCodes}
+            />
+          </Form.Item>
+        }
+        <Form.Item
+          name="dest"
+          noStyle
+          rules={[{required: true, message: i18next.t("login:Please input your Email or Phone!")}]}
+        >
+          <Input
+            style={{width: isEmail() ? "100% " : "70%"}}
+            onChange={(e) => {setDest(e.target.value);}}
+            prefix={<UserOutlined />}
+            placeholder={isEmail() ? i18next.t("general:Email") : i18next.t("general:Phone")}
+          />
+        </Form.Item>
+      </Space.Compact>
       <Form.Item
         name="passcode"
         rules={[{required: true, message: i18next.t("login:Please input your code!")}]}

web/src/backend/MfaBackend.js

@@ -32,6 +32,9 @@ export function MfaSetupVerify(values) {
   formData.append("name", values.name);
   formData.append("mfaType", values.mfaType);
   formData.append("passcode", values.passcode);
+  formData.append("secret", values.secret);
+  formData.append("dest", values.dest);
+  formData.append("countryCode", values.countryCode);
   return fetch(`${Setting.ServerUrl}/api/mfa/setup/verify`, {
     method: "POST",
     credentials: "include",
@@ -44,6 +47,10 @@ export function MfaSetupEnable(values) {
   formData.append("mfaType", values.mfaType);
   formData.append("owner", values.owner);
   formData.append("name", values.name);
+  formData.append("secret", values.secret);
+  formData.append("recoveryCodes", values.recoveryCodes);
+  formData.append("dest", values.dest);
+  formData.append("countryCode", values.countryCode);
   return fetch(`${Setting.ServerUrl}/api/mfa/setup/enable`, {
     method: "POST",
     credentials: "include",