@liujitcn/kratos-taro-app-core 0.0.29 → 0.0.32

package/README.md

@@ -4,9 +4,11 @@
 
 ## 主要能力
 
-- 账号密码、行为验证码、微信登录、OAuth、Token 刷新和退出。
-- 统一 HTTP、上传、下载、文件预览与 RSA/AES 密码加密。
-- Zustand 用户、配置和导航状态。
+- 账号密码、行为验证码、微信登录、OAuth、MFA（TOTP/WebAuthn/恢复码）、Token 刷新和退出。
+- 统一 HTTP、上传、下载、文件预览、RSA/AES 密码加密和 WebAuthn 工具。
+- Zustand 用户、配置和导航状态，H5 浏览器页签标题使用宿主 HTML 声明的应用名称。
+- 登录阶段支持 TOTP、WebAuthn 和一次性恢复码校验。
+- 公开 Base MFA 请求及通用密码弹窗、绑定面板和恢复码弹窗，供登录页与业务模块复用同一套绑定界面。
 - 接口驱动的逻辑路由、访问模式、自绘 tabBar 和稳定 `viewKey`。
 - 页面静态资源 export、动态资源公共路径解析，以及 H5 默认导航栏兼容框架。
 - 首页、登录、协议、WebView、启动/错误状态页面。
@@ -20,7 +22,7 @@
 - `@liujitcn/kratos-taro-app-core/runner`：Taro 构建装配入口。
 - `api/*`、`components/*`、`rpc/*`、`styles/*`、`utils/*`、`views/*`：白名单子路径。
 
-业务模块只能通过这些 exports 使用底座，不得相对引用 core 源码。RPC 由 `make -C backend ts-taro-app` 生成，不能手工编辑。
+业务模块只能通过这些 exports 使用底座，不得相对引用 core 源码。RPC 由 `make -C frontend ts-taro-app` 生成，不能手工编辑。
 
 ## Runner 协议
 

package/dist/runner.mjs

@@ -281,7 +281,7 @@ function restoreBuildTransaction(transaction, transactionFile) {
     removeEmptyParents(dirname(file), transaction.inputDir);
   }
   removeGeneratedStaticFiles(
-    transaction.generatedStaticFiles ?? [],
+    transaction.generatedStaticFiles,
     resolve(transaction.inputDir, "static")
   );
   writeFileSync(transaction.appConfigFile, transaction.originalAppConfig);
@@ -447,8 +447,15 @@ function appendPage(manifest, route) {
   const subRoute = rest.join("/");
   if (!subpackage.pages.includes(subRoute)) subpackage.pages.push(subRoute);
 }
+function typescriptStringLiteral(value) {
+  return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\r/g, "\\r").replace(/\n/g, "\\n").replace(/\t/g, "\\t")}'`;
+}
+function pageStyleString(style, key, fallback) {
+  const value = style?.[key];
+  return typeof value === "string" ? value : fallback;
+}
 function createPageWrapper(page) {
-  return `import KratosPage from ${JSON.stringify(`${page.source}.tsx`)}
+  return `import KratosPage from ${typescriptStringLiteral(`${page.source}.tsx`)}
 import { KratosPageFrame } from '@liujitcn/kratos-taro-app-core/components/KratosPageFrame'
 import { KratosTabBar } from '@liujitcn/kratos-taro-app-core/components/KratosTabBar'
 
@@ -457,14 +464,14 @@ export default function KratosPageWrapper() {
   return (
     <>
       <KratosPageFrame
-        navigationStyle=${JSON.stringify(page.style?.navigationStyle ?? "default")}
-        navigationBarTitleText=${JSON.stringify(page.style?.navigationBarTitleText ?? "")}
-        navigationBarBackgroundColor=${JSON.stringify(page.style?.navigationBarBackgroundColor ?? "#f8f8f8")}
-        navigationBarTextStyle=${JSON.stringify(page.style?.navigationBarTextStyle ?? "black")}
+        navigationStyle=${typescriptStringLiteral(pageStyleString(page.style, "navigationStyle", "default"))}
+        navigationBarTitleText=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarTitleText", ""))}
+        navigationBarBackgroundColor=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarBackgroundColor", "#f8f8f8"))}
+        navigationBarTextStyle=${typescriptStringLiteral(pageStyleString(page.style, "navigationBarTextStyle", "black"))}
       >
         <KratosPage />
       </KratosPageFrame>
-      <KratosTabBar route=${JSON.stringify(page.route)} />
+      <KratosTabBar route=${typescriptStringLiteral(page.route)} />
     </>
   )
 }

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.0.29",
+  "version": "0.0.32",
   "type": "module",
   "files": [
     "dist",
@@ -42,6 +42,7 @@
     "@tarojs/taro": "4.2.1",
     "asmcrypto.js": "2.3.2",
     "go-captcha-react": "1.0.5",
+    "qrcode-generator": "^2.0.4",
     "react": "18.3.1",
     "typescript": "5.8.3",
     "zustand": "5.0.6"

package/src/api/base/{config.ts → v1/config.ts}

@@ -1,5 +1,5 @@
-import { http } from '../../utils/http'
-import type { ConfigService, GetConfigRequest, GetConfigResponse } from '../../rpc/base/v1/config'
+import { http } from '../../../utils/http'
+import type { ConfigService, GetConfigRequest, GetConfigResponse } from '../../../rpc/base/v1/config'
 
 const CONFIG_URL = '/v1/base/config'
 

package/src/api/base/{file.ts → v1/file.ts}

@@ -3,10 +3,10 @@ import type {
   DownloadFileRequest,
   FileInfo,
   MultiUploadFileResponse,
-} from '../../rpc/base/v1/file'
-import { uploadFile, uploadFileList } from '../../utils/file'
-import { getLocaleRequestHeaders, t } from '../../locales'
-import { getRequestAccessToken, requestBaseURL } from '../../utils/http'
+} from '../../../rpc/base/v1/file'
+import { uploadFile, uploadFileList } from '../../../utils/file'
+import { getLocaleRequestHeaders, t } from '../../../locales'
+import { getRequestAccessToken, requestBaseURL } from '../../../utils/http'
 
 const FILE_URL = '/v1/base/file'
 

package/src/api/base/{language.ts → v1/language.ts}

@@ -1,5 +1,5 @@
-import { http } from '../../utils/http'
-import type { LanguageService, OptionLanguageRequest, OptionLanguageResponse } from '../../rpc/base/v1/language'
+import { http } from '../../../utils/http'
+import type { LanguageService, OptionLanguageRequest, OptionLanguageResponse } from '../../../rpc/base/v1/language'
 
 const LANGUAGE_URL = '/v1/base/language'
 

package/src/api/base/{login.ts → v1/login.ts}

@@ -1,4 +1,4 @@
-import { http } from '../../utils/http'
+import { http } from '../../../utils/http'
 import type {
   CaptchaRequest,
   CaptchaResponse,
@@ -12,8 +12,8 @@ import type {
   VerifyCaptchaRequest,
   VerifyCaptchaResponse,
   LoginService,
-} from '../../rpc/base/v1/login'
-import type { Empty } from '../../rpc/google/protobuf/empty'
+} from '../../../rpc/base/v1/login'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
 
 const CAPTCHA_URL = '/v1/base/captcha'
 const CAPTCHA_VERIFY_URL = '/v1/base/captcha/verify'

package/src/api/base/v1/mfa.ts

@@ -0,0 +1,127 @@
+import { http } from '../../../utils/http'
+import type { LoginResponse } from '../../../rpc/base/v1/login'
+import type {
+  BeginMfaDisableRequest,
+  BeginMfaDisableResponse,
+  BeginMfaEnrollmentRequest,
+  BeginMfaEnrollmentResponse,
+  BeginMfaSetupRequest,
+  BeginMfaSetupResponse,
+  ConfirmMfaEnrollmentRequest,
+  ConfirmMfaEnrollmentResponse,
+  ConfirmMfaSetupRequest,
+  ConfirmMfaSetupResponse,
+  DisableMfaRequest,
+  GetMfaStatusRequest,
+  MfaService,
+  MfaStatusResponse,
+  RecoveryCodesResponse,
+  RegenerateMfaRecoveryCodesRequest,
+  VerifyMfaRequest,
+} from '../../../rpc/base/v1/mfa'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
+
+const MFA_URL = '/v1/base/mfa'
+
+/** 多因素认证公共服务。 */
+export class MfaServiceImpl implements MfaService {
+  /** 校验登录阶段多因素认证。 */
+  VerifyMfa(request: VerifyMfaRequest): Promise<LoginResponse> {
+    return http<LoginResponse>({
+      url: `${MFA_URL}/verify`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 开始登录阶段的强制多因素认证绑定。 */
+  BeginMfaEnrollment(request: BeginMfaEnrollmentRequest): Promise<BeginMfaEnrollmentResponse> {
+    return http<BeginMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 确认登录阶段的强制多因素认证绑定。 */
+  ConfirmMfaEnrollment(
+    request: ConfirmMfaEnrollmentRequest,
+  ): Promise<ConfirmMfaEnrollmentResponse> {
+    return http<ConfirmMfaEnrollmentResponse>({
+      url: `${MFA_URL}/enrollment/confirm`,
+      method: 'POST',
+      authMode: 'none',
+      data: request,
+      header: { Authorization: 'no-auth' },
+    })
+  }
+
+  /** 查询当前用户多因素认证状态。 */
+  GetMfaStatus(request: GetMfaStatusRequest): Promise<MfaStatusResponse> {
+    return http<MfaStatusResponse>({
+      url: MFA_URL,
+      method: 'GET',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始绑定当前用户的多因素认证方式。 */
+  BeginMfaSetup(request: BeginMfaSetupRequest): Promise<BeginMfaSetupResponse> {
+    return http<BeginMfaSetupResponse>({
+      url: `${MFA_URL}/setup`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 确认绑定当前用户的多因素认证方式。 */
+  ConfirmMfaSetup(request: ConfirmMfaSetupRequest): Promise<ConfirmMfaSetupResponse> {
+    return http<ConfirmMfaSetupResponse>({
+      url: `${MFA_URL}/setup/confirm`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 开始禁用 WebAuthn 多因素认证的 Passkey 验证。 */
+  BeginMfaDisable(request: BeginMfaDisableRequest): Promise<BeginMfaDisableResponse> {
+    return http<BeginMfaDisableResponse>({
+      url: `${MFA_URL}/disable/challenge`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 禁用当前用户的多因素认证。 */
+  DisableMfa(request: DisableMfaRequest): Promise<Empty> {
+    return http<Empty>({
+      url: `${MFA_URL}/disable`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 重新生成当前用户的多因素认证恢复码。 */
+  RegenerateMfaRecoveryCodes(
+    request: RegenerateMfaRecoveryCodesRequest,
+  ): Promise<RecoveryCodesResponse> {
+    return http<RecoveryCodesResponse>({
+      url: `${MFA_URL}/recovery-codes`,
+      method: 'POST',
+      authMode: 'required',
+      data: request,
+    })
+  }
+}
+
+/** defMfaService 多因素认证公共服务实例。 */
+export const defMfaService = new MfaServiceImpl()

package/src/api/base/{oauth.ts → v1/oauth.ts}

@@ -1,4 +1,4 @@
-import { http } from '../../utils/http'
+import { http } from '../../../utils/http'
 import type {
   CreateOauthAuthorizationRequest,
   CreateOauthAuthorizationResponse,
@@ -19,8 +19,8 @@ import type {
   ListOauthProviderResponse,
   OauthService,
   UnbindOauthAccountRequest,
-} from '../../rpc/base/v1/oauth'
-import type { Empty } from '../../rpc/google/protobuf/empty'
+} from '../../../rpc/base/v1/oauth'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
 
 const OAUTH_PROVIDER_URL = '/v1/base/oauth/provider'
 const OAUTH_AUTHORIZATION_URL = '/v1/base/oauth/authorization'

package/src/api/system/{auth.ts → app/v1/auth.ts}

@@ -1,26 +1,20 @@
-import { http } from '../../utils/http'
+import { http } from '../../../../utils/http'
 import {
   type AuthService,
   type BindUserPhoneRequest,
   type BindUserPhoneResponse,
+  type GetUserProfileRequest,
+  type UpdateUserProfileRequest,
   type UserProfileForm,
-} from '../../rpc/system/app/v1/auth'
-import type { Empty } from '../../rpc/google/protobuf/empty'
+} from '../../../../rpc/system/app/v1/auth'
+import type { Empty } from '../../../../rpc/google/protobuf/empty'
 
 const AUTH_URL = '/v1/app/auth'
 
-/** 获取用户资料请求兼容空请求结构。 */
-type GetUserProfileRequestCompat = Empty
-
-/** 更新用户资料请求兼容新旧两种表单包裹方式。 */
-type UpdateUserProfileRequestCompat = Partial<UserProfileForm> & {
-  user_profile?: UserProfileForm
-}
-
 /** 用户认证资料服务 */
 export class AuthServiceImpl implements AuthService {
   /** 获取已登录用户资料 */
-  GetUserProfile(request: GetUserProfileRequestCompat): Promise<UserProfileForm> {
+  GetUserProfile(request: GetUserProfileRequest): Promise<UserProfileForm> {
     return http<UserProfileForm>({
       url: `${AUTH_URL}/profile`,
       method: 'GET',
@@ -30,13 +24,12 @@ export class AuthServiceImpl implements AuthService {
   }
 
   /** 修改个人中心用户信息 */
-  UpdateUserProfile(request: UpdateUserProfileRequestCompat): Promise<Empty> {
-    const userProfile = request.user_profile ?? (request as UserProfileForm)
+  UpdateUserProfile(request: UpdateUserProfileRequest): Promise<Empty> {
     return http<Empty>({
       url: `${AUTH_URL}/profile`,
       method: 'PUT',
       authMode: 'required',
-      data: userProfile,
+      data: request.user_profile,
     })
   }
 

package/src/api/system/{base_area.ts → app/v1/base_area.ts}

@@ -1,9 +1,9 @@
-import { http } from '../../utils/http'
+import { http } from '../../../../utils/http'
 import type {
   BaseAreaService,
   TreeBaseAreaRequest,
   TreeBaseAreaResponse,
-} from '../../rpc/system/app/v1/base_area'
+} from '../../../../rpc/system/app/v1/base_area'
 
 const BASE_AREA_URL = '/v1/app/base/area'
 

package/src/api/system/app/v1/base_dict.ts

@@ -0,0 +1,17 @@
+import { http } from '../../../../utils/http'
+import type { BaseDictForm, BaseDictService, GetBaseDictRequest } from '../../../../rpc/system/app/v1/base_dict'
+
+const BASE_DICT_URL = '/v1/app/base/dict'
+
+/** 字典服务 */
+export class BaseDictServiceImpl implements BaseDictService {
+  /** 查询单个字典 */
+  GetBaseDict(request: GetBaseDictRequest): Promise<BaseDictForm> {
+    return http<BaseDictForm>({
+      url: `${BASE_DICT_URL}/${request.code}`,
+      method: 'GET',
+    })
+  }
+}
+
+export const defBaseDictService = new BaseDictServiceImpl()

package/src/api/{base/menu.ts → system/app/v1/base_menu.ts}

@@ -1,5 +1,5 @@
-import { http } from '../../utils/http'
-import type { ListBaseMenuResponse } from '../../rpc/system/app/v1/base_menu'
+import { http } from '../../../../utils/http'
+import type { ListBaseMenuResponse } from '../../../../rpc/system/app/v1/base_menu'
 
 /** 远端移动菜单服务。 */
 export class BaseMenuServiceImpl {

package/src/bootstrap.ts

@@ -6,10 +6,17 @@ import { initializeAppNavigation } from './navigation'
 import {
   registerUserStoreExtension,
   startUserStoreEventBridge,
+  useSettingStore,
   useUserStore,
- useSettingStore } from './stores'
-import { applyLanguageConfig, initializeLocale, registerLocaleChangeHandler, registerLocaleMessages } from './locales'
-import { defLanguageService } from './api/base/language'
+} from './stores'
+import {
+  applyLanguageConfig,
+  initializeLocale,
+  registerLocaleChangeHandler,
+  registerLocaleMessages,
+  t,
+} from './locales'
+import { defLanguageService } from './api/base/v1/language'
 
 /** Taro 应用启动参数。 */
 export interface KratosTaroBootstrapOptions {
@@ -18,6 +25,21 @@ export interface KratosTaroBootstrapOptions {
 }
 
 let bootstrapped = false
+let titleObserver: MutationObserver | undefined
+
+/** 使用宿主声明的应用名称同步 H5 浏览器页签标题。 */
+function syncH5DocumentTitle(): void {
+  if (process.env.TARO_ENV !== 'h5' || typeof document === 'undefined') return
+  const titleElement = document.querySelector('title')
+  const appTitle = titleElement?.dataset.appTitle || t('core.home.main_title')
+  const applyTitle = () => {
+    if (document.title !== appTitle) document.title = appTitle
+  }
+  applyTitle()
+  if (!titleElement || titleObserver) return
+  titleObserver = new MutationObserver(applyTitle)
+  titleObserver.observe(titleElement, { childList: true })
+}
 
 /** 注册模块、认证生命周期和导航运行时。 */
 export function bootstrapKratosTaroApp(options: KratosTaroBootstrapOptions): void {
@@ -34,8 +56,10 @@ export function bootstrapKratosTaroApp(options: KratosTaroBootstrapOptions): voi
     })
   if (bootstrapped) return
   bootstrapped = true
+  syncH5DocumentTitle()
   registerLocaleChangeHandler(initializeAppNavigation)
   registerLocaleChangeHandler(() => useSettingStore.getState().loadData())
+  registerLocaleChangeHandler(syncH5DocumentTitle)
   startUserStoreEventBridge()
   registerUserStoreExtension({
     onLogin: initializeAppNavigation,

package/src/components/KratosTabBar.scss

@@ -13,6 +13,7 @@
 }
 
 .kratos-tab-bar__item {
+  position: relative;
   display: flex;
   flex: 1;
   align-items: center;
@@ -30,6 +31,69 @@
   margin-bottom: 4PX;
 }
 
+.kratos-tab-bar__message-icon {
+  position: relative;
+  width: 22PX;
+  height: 18PX;
+  margin-bottom: 6PX;
+  border: 2PX solid #9aa4b2;
+  border-radius: 6PX;
+  box-sizing: border-box;
+}
+.kratos-tab-bar__message-icon::before {
+  position: absolute;
+  top: 5PX;
+  left: 4PX;
+  width: 3PX;
+  height: 3PX;
+  border-radius: 50%;
+  background: #9aa4b2;
+  box-shadow:
+    5PX 0 #9aa4b2,
+    10PX 0 #9aa4b2;
+  content: '';
+}
+
+.kratos-tab-bar__message-icon::after {
+  position: absolute;
+  bottom: -5PX;
+  left: 3PX;
+  width: 7PX;
+  height: 7PX;
+  border-right: 2PX solid #9aa4b2;
+  border-bottom: 2PX solid #9aa4b2;
+  background: #fff;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.kratos-tab-bar__message-icon--active {
+  border-color: #27ba9b;
+}
+
+.kratos-tab-bar__message-icon--active::before {
+  background: #27ba9b;
+  box-shadow:
+    5PX 0 #27ba9b,
+    10PX 0 #27ba9b;
+}
+
+.kratos-tab-bar__message-icon--active::after {
+  border-color: #27ba9b;
+}
+
 .kratos-tab-bar__text--active {
   color: #27ba9b;
 }
+
+.kratos-tab-bar__badge {
+  position: absolute;
+  top: 0;
+  right: calc(50% - 19PX);
+  width: 10PX;
+  height: 10PX;
+  box-sizing: border-box;
+  border: 2PX solid #fff;
+  border-radius: 50%;
+  background: #e5484d;
+}

package/src/components/KratosTabBar.tsx

@@ -1,6 +1,6 @@
 import { Image, Text, View } from '@tarojs/components'
 import { resolveModuleIcon, resolveStaticView } from '../module'
-import { APP_MENU_ROOT_ID, navigateAppRoute, useAppNavigation } from '../navigation'
+import { APP_MENU_ROOT_ID, navigateAppRoute, useAppMenuBadges, useAppNavigation } from '../navigation'
 import { resolveRootMenuId } from '../navigation-tree.mjs'
 import './KratosTabBar.scss'
 
@@ -13,6 +13,7 @@ export interface KratosTabBarProps {
 export function KratosTabBar({ route }: KratosTabBarProps) {
   const menus = useAppNavigation((state) => state.menus)
   const tabBar = useAppNavigation((state) => state.tabBar)
+  const messageBadge = useAppMenuBadges((state) => state.badges.MESSAGE_INBOX ?? 0)
   const routeMenu = menus.find((menu) => resolveStaticView(menu.viewKey) === route)
   const tabMenuId = routeMenu
     ? resolveRootMenuId(menus, routeMenu.id, APP_MENU_ROOT_ID)
@@ -34,6 +35,12 @@ export function KratosTabBar({ route }: KratosTabBarProps) {
             {icon ? (
               <Image className='kratos-tab-bar__icon' src={icon} mode='aspectFit' />
             ) : null}
+            {!icon && item.viewKey === 'MESSAGE_INBOX' ? (
+              <View className={`kratos-tab-bar__message-icon${active ? ' kratos-tab-bar__message-icon--active' : ''}`} />
+            ) : null}
+            {item.viewKey === 'MESSAGE_INBOX' && messageBadge ? (
+              <View className='kratos-tab-bar__badge' aria-hidden='true' />
+            ) : null}
             <Text className={active ? 'kratos-tab-bar__text--active' : ''}>{item.title}</Text>
           </View>
         )

package/src/components/MfaRecoveryCodesDialog.scss

@@ -0,0 +1,94 @@
+.mfa-recovery-dialog {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background-color: rgb(0 0 0 / 45%);
+}
+
+.mfa-recovery-dialog__panel {
+  width: min(100%, 640px);
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 16px;
+  box-shadow: 0 20px 64px rgb(0 0 0 / 20%);
+}
+
+.mfa-recovery-dialog__header {
+  padding: 28px 32px;
+  border-bottom: 1px solid #eee;
+}
+
+.mfa-recovery-dialog__title {
+  color: #222;
+  font-size: 34px;
+  font-weight: 600;
+}
+
+.mfa-recovery-dialog__body {
+  padding: 32px;
+}
+
+.mfa-recovery-dialog__codes {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 220px;
+  margin-bottom: 16px;
+  padding: 20px 24px;
+  color: #222;
+  font-size: 30px;
+  line-height: 1.6;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.mfa-recovery-dialog__copy {
+  width: auto;
+  min-width: 140px;
+  height: 58px;
+  margin: 0;
+  padding: 0 18px;
+  color: #27ba9b;
+  font-size: 24px;
+  line-height: 58px;
+  background-color: #f0fbf8;
+  border: 0;
+  border-radius: 8px;
+}
+
+.mfa-recovery-dialog__copy::after,
+.mfa-recovery-dialog__confirm::after {
+  border: 0;
+}
+
+.mfa-recovery-dialog__warning {
+  display: block;
+  margin-top: 12px;
+  color: #c58b00;
+  font-size: 24px;
+  line-height: 1.5;
+}
+
+.mfa-recovery-dialog__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 32px 32px;
+}
+
+.mfa-recovery-dialog__confirm {
+  min-width: 160px;
+  height: 72px;
+  margin: 0;
+  padding: 0 24px;
+  color: #fff;
+  font-size: 28px;
+  line-height: 72px;
+  background-color: #27ba9b;
+  border: 0;
+  border-radius: 8px;
+}