refactor(console): add webauthn tips and update phrases (#4709)

2025-02-17 22:04:19 -05:00 · 2023-10-23 12:37:32 +08:00 · 2023-10-23 12:37:32 +08:00 · 6b01e9c88e
commit 6b01e9c88e
parent 62367da5fc
20 changed files with 181 additions and 32 deletions
--- a/packages/console/src/components/MfaFactorTitle/index.module.scss
+++ b/packages/console/src/components/MfaFactorTitle/index.module.scss
@ -9,3 +9,7 @@
  color: var(--color-text-secondary);
  margin-right: _.unit(3);
 }
+
+.factorTip {
+  margin-left: _.unit(1);
+}
--- a/packages/console/src/components/MfaFactorTitle/index.tsx
+++ b/packages/console/src/components/MfaFactorTitle/index.tsx
@ -1,8 +1,12 @@
 import { MfaFactor } from '@logto/schemas';
+import { type ReactNode } from 'react';

 import FactorBackupCode from '@/assets/icons/factor-backup-code.svg';
 import FactorTotp from '@/assets/icons/factor-totp.svg';
 import FactorWebAuthn from '@/assets/icons/factor-webauthn.svg';
+import Tip from '@/assets/icons/tip.svg';
+import IconButton from '@/ds-components/IconButton';
+import { ToggleTip } from '@/ds-components/Tip';

 import MfaFactorName, { type Props as MfaFactorNameProps } from '../MfaFactorName';

@ -14,13 +18,24 @@ const factorIcon: Record<MfaFactor, SvgComponent> = {
  [MfaFactor.BackupCode]: FactorBackupCode,
 };

-function MfaFactorTitle({ type }: MfaFactorNameProps) {
+type Props = MfaFactorNameProps & {
+  tooltip?: ReactNode;
+};
+
+function MfaFactorTitle({ type, tooltip }: Props) {
  const Icon = factorIcon[type];

  return (
    <div className={styles.factorTitle}>
      <Icon className={styles.factorIcon} />
      <MfaFactorName type={type} />
+      {tooltip && (
+        <ToggleTip anchorClassName={styles.factorTip} content={tooltip}>
+          <IconButton size="small">
+            <Tip />
+          </IconButton>
+        </ToggleTip>
+      )}
    </div>
  );
 }
--- a/packages/console/src/pages/Mfa/MfaForm/FactorLabel/WebAuthnTipContent/index.module.scss
+++ b/packages/console/src/pages/Mfa/MfaForm/FactorLabel/WebAuthnTipContent/index.module.scss
@ -0,0 +1,6 @@
+@use '@/scss/underscore' as _;
+
+.webauthnTipContent {
+  padding-inline-start: _.unit(4);
+  margin: 0;
+}
--- a/packages/console/src/pages/Mfa/MfaForm/FactorLabel/WebAuthnTipContent/index.tsx
+++ b/packages/console/src/pages/Mfa/MfaForm/FactorLabel/WebAuthnTipContent/index.tsx
@ -0,0 +1,18 @@
+import DynamicT from '@/ds-components/DynamicT';
+
+import * as styles from './index.module.scss';
+
+function WebAuthnTipContent() {
+  return (
+    <ul className={styles.webauthnTipContent}>
+      <li>
+        <DynamicT forKey="mfa.webauthn_native_tip" />
+      </li>
+      <li>
+        <DynamicT forKey="mfa.webauthn_domain_tip" />
+      </li>
+    </ul>
+  );
+}
+
+export default WebAuthnTipContent;
--- a/packages/console/src/pages/Mfa/MfaForm/FactorLabel/index.tsx
+++ b/packages/console/src/pages/Mfa/MfaForm/FactorLabel/index.tsx
@ -4,6 +4,7 @@ import { MfaFactor } from '@logto/schemas';
 import MfaFactorTitle from '@/components/MfaFactorTitle';
 import DynamicT from '@/ds-components/DynamicT';

+import WebAuthnTipContent from './WebAuthnTipContent';
 import * as styles from './index.module.scss';

 type Props = {
@ -19,7 +20,7 @@ const factorDescriptionLabel: Record<MfaFactor, AdminConsoleKey> = {
 function FactorLabel({ type }: Props) {
  return (
    <div className={styles.factorLabel}>
-      <MfaFactorTitle type={type} />
+      <MfaFactorTitle type={type} tooltip={type === MfaFactor.WebAuthn && <WebAuthnTipContent />} />
      <div className={styles.factorDescription}>
        <DynamicT forKey={factorDescriptionLabel[type]} />
      </div>
--- a/packages/phrases/src/locales/de/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Benutzer müssen einen der aktivierten Faktoren zur zweistufigen Authentifizierung überprüfen.',
  totp: 'Authenticator-App OTP',
  otp_description: 'Verknüpfen Sie Google Authenticator usw., um Einmalpasswörter zu überprüfen.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn verwendet den Passkey, um das Gerät des Benutzers zu überprüfen, einschließlich YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Backup-Code',
  backup_code_description:
    'Generieren Sie 10 eindeutige Codes, von denen jeder für eine einzige Authentifizierung verwendet werden kann.',
--- a/packages/phrases/src/locales/en/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/mfa.ts
@ -8,8 +8,12 @@ const mfa = {
    'Users need to verify one of the enabled factors for 2-step authentication.',
  totp: 'Authenticator app OTP',
  otp_description: 'Link Google Authenticator, etc., to verify one-time passwords.',
-  webauthn: 'WebAuthn',
-  webauthn_description: 'WebAuthn uses the passkey to verify the user’s device including YubiKey.',
+  webauthn: 'WebAuthn(Passkey)',
+  webauthn_description:
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Backup code',
  backup_code_description: 'Generate 10 unique codes, each usable for a single authentication.',
  backup_code_setup_hint: 'The backup authentication factor which can not be enabled alone:',
--- a/packages/phrases/src/locales/es/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Los usuarios deben verificar uno de los factores habilitados para la autenticación de dos pasos.',
  totp: 'OTP de la aplicación autenticadora',
  otp_description: 'Vincula Google Authenticator, etc., para verificar contraseñas de un solo uso.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn utiliza la clave de paso para verificar el dispositivo del usuario, incluido YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Código de respaldo',
  backup_code_description:
    'Genera 10 códigos únicos, cada uno utilizable para una sola autenticación.',
--- a/packages/phrases/src/locales/fr/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/mfa.ts
@ -9,9 +9,16 @@ const mfa = {
  totp: "OTP de l'application Authenticator",
  otp_description:
    'Liez Google Authenticator, etc., pour vérifier les mots de passe à usage unique.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    "WebAuthn utilise la clé de passe pour vérifier le périphérique de l'utilisateur, y compris YubiKey.",
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Code de secours',
  backup_code_description:
    'Générez 10 codes uniques, chacun utilisable pour une seule authentification.',
--- a/packages/phrases/src/locales/it/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    "Gli utenti devono verificare uno dei fattori abilitati per l'autenticazione a due passaggi.",
  totp: "OTP dell'app Authenticator",
  otp_description: 'Collega Google Authenticator, ecc., per verificare le password monouso.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    "WebAuthn utilizza la chiave di passaggio per verificare il dispositivo dell'utente, inclusa YubiKey.",
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Codice di backup',
  backup_code_description:
    'Genera 10 codici unici, ciascuno utilizzabile per una singola autenticazione.',
--- a/packages/phrases/src/locales/ja/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'ユーザーは2段階認証のために有効になっている要因の1つを確認する必要があります。',
  totp: 'AuthenticatorアプリOTP',
  otp_description: 'Google Authenticatorなどをリンクしてワンタイムパスワードを確認します。',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthnはYubiKeyを含むユーザーのデバイスを確認するためにパスキーを使用します。',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'バックアップコード',
  backup_code_description: '1回の認証に使用できる10個のユニークなコードを生成します。',
  backup_code_setup_hint: '単独で有効化できないバックアップ認証要因：',
--- a/packages/phrases/src/locales/ko/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/mfa.ts
@ -7,9 +7,16 @@ const mfa = {
    '사용자는 두 단계 인증을 위해 활성화된 요소 중 하나를 확인해야 합니다.',
  totp: 'Authenticator 앱 OTP',
  otp_description: 'Google Authenticator 등을 연결하여 일회용 암호를 확인합니다.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn은 YubiKey를 포함한 사용자 장치를 확인하기 위해 패스키를 사용합니다.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: '백업 코드',
  backup_code_description: '한 번의 인증에 사용할 수 있는 고유한 10개의 코드를 생성합니다.',
  backup_code_setup_hint: '독립적으로 활성화할 수 없는 백업 인증 요소:',
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Użytkownicy muszą zweryfikować jeden z włączonych czynników podczas autoryzacji dwuetapowej.',
  totp: 'OTP z aplikacji Authenticator',
  otp_description: 'Połącz Google Authenticator itp., aby zweryfikować jednorazowe hasła.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn używa klucza przechodzenia do weryfikacji urządzenia użytkownika, w tym YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Kod zapasowy',
  backup_code_description:
    'Generuj 10 unikalnych kodów, z których każdy można użyć do jednej autoryzacji.',
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Os usuários precisam verificar um dos fatores habilitados para autenticação de dois passos.',
  totp: 'OTP do aplicativo Authenticator',
  otp_description: 'Vincule o Google Authenticator, etc., para verificar senhas de uso único.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'O WebAuthn usa a chave de passagem para verificar o dispositivo do usuário, incluindo o YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Código de backup',
  backup_code_description:
    'Gere 10 códigos exclusivos, cada um utilizável para uma única autenticação.',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Os usuários precisam verificar um dos fatores habilitados para autenticação de dois passos.',
  totp: 'OTP do aplicativo Authenticator',
  otp_description: 'Vincule o Google Authenticator, etc., para verificar senhas de uso único.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'O WebAuthn usa a chave de passagem para verificar o dispositivo do usuário, incluindo o YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Código de backup',
  backup_code_description:
    'Gere 10 códigos exclusivos, cada um utilizável para uma única autenticação.',
--- a/packages/phrases/src/locales/ru/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/mfa.ts
@ -8,9 +8,16 @@ const mfa = {
    'Пользователи должны проверить один из включенных факторов для двухэтапной аутентификации.',
  totp: 'OTP из приложения Authenticator',
  otp_description: 'Свяжите Google Authenticator и т. д., чтобы проверить одноразовые пароли.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn использует ключ прохода для проверки устройства пользователя, включая YubiKey.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Резервный код',
  backup_code_description:
    'Генерируйте 10 уникальных кодов, каждый из которых можно использовать для одной аутентификации.',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/mfa.ts
@ -9,9 +9,16 @@ const mfa = {
  totp: 'Authenticator uygulama OTP',
  otp_description:
    'Google Authenticator vb. bağlayarak tek kullanımlık şifreleri doğrulamak için kullanın.',
-  webauthn: 'WebAuthn',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
  webauthn_description:
-    'WebAuthn, YubiKey dahil olmak üzere kullanıcının cihazını doğrulamak için geçiş anahtarını kullanır.',
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: 'Yedek kod',
  backup_code_description:
    'Tek kullanımlık bir kimlik doğrulama için kullanılabilen 10 benzersiz kod üretin.',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/mfa.ts
@ -6,8 +6,16 @@ const mfa = {
  multi_factors_description: '用户需要验证启用的一个因素以进行两步验证。',
  totp: 'Authenticator应用程序OTP',
  otp_description: '链接Google Authenticator等来验证一次性密码。',
-  webauthn: 'WebAuthn',
-  webauthn_description: 'WebAuthn使用通行密钥验证用户设备，包括YubiKey。',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
+  webauthn_description:
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: '备用代码',
  backup_code_description: '生成10个唯一的代码，每个代码可用于一次验证。',
  backup_code_setup_hint: '不能单独启用的备用身份验证因素：',
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/mfa.ts
@ -6,8 +6,16 @@ const mfa = {
  multi_factors_description: '用戶需要驗證啟用的一個因素以進行兩步驗證。',
  totp: 'Authenticator應用程式OTP',
  otp_description: '連接Google Authenticator等來驗證一次性密碼。',
-  webauthn: 'WebAuthn',
-  webauthn_description: 'WebAuthn使用通行密鑰驗證用戶設備，包括YubiKey。',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
+  webauthn_description:
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: '備用代碼',
  backup_code_description: '生成10個唯一的代碼，每個代碼可用於一次驗證。',
  backup_code_setup_hint: '不能單獨啟用的備用身份驗證因素：',
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/mfa.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/mfa.ts
@ -6,8 +6,16 @@ const mfa = {
  multi_factors_description: '用戶需要驗證啟用的一個因素以進行兩步驗證。',
  totp: 'Authenticator應用程式OTP',
  otp_description: '連接Google Authenticator等來驗證一次性密碼。',
-  webauthn: 'WebAuthn',
-  webauthn_description: 'WebAuthn使用通行密鑰驗證用戶設備，包括YubiKey。',
+  /** UNTRANSLATED */
+  webauthn: 'WebAuthn(Passkey)',
+  /** UNTRANSLATED */
+  webauthn_description:
+    'Verify via browser-supported method: biometrics, phone scanning, or security key, etc.',
+  /** UNTRANSLATED */
+  webauthn_native_tip: 'WebAuthn is not supported for Native applications.',
+  /** UNTRANSLATED */
+  webauthn_domain_tip:
+    'WebAuthn binds public keys to the specific domain. Modifying your service domain will block users from authenticating via existing passkeys.',
  backup_code: '備用代碼',
  backup_code_description: '生成10個唯一的代碼，每個代碼可用於一次驗證。',
  backup_code_setup_hint: '不能單獨啟用的備用身份驗證因素：',