diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js index fc361d6f..fd850a21 100644 --- a/settings/src/components/backup-codes.js +++ b/settings/src/components/backup-codes.js @@ -21,8 +21,7 @@ import DownloadButton from './download-button'; */ export default function BackupCodes() { const { - user: { backupCodesEnabled, hasPrimaryProvider, backupCodesRemaining }, - backupCodesVerified, + user: { hasPrimaryProvider }, } = useContext( GlobalContext ); const [ regenerating, setRegenerating ] = useState( false ); @@ -41,12 +40,7 @@ export default function BackupCodes() { ); } - if ( - ! backupCodesEnabled || - backupCodesRemaining === 0 || - regenerating || - ! backupCodesVerified - ) { + if ( regenerating ) { return ; } @@ -116,11 +110,7 @@ function Setup( { setRegenerating } ) { return ( <>
-

- Backup codes let you access your account if your primary two-factor - authentication method is unavailable, like if your phone is lost or stolen. Each - code can only be used once. -

+

Please print the codes and keep them in a safe place.

@@ -201,6 +191,13 @@ function CodeList( { codes } ) { ); } +const IntroText = () => ( +

+ Backup codes let you access your account if your primary two-factor authentication method is + unavailable, like if your phone is lost or stolen. Each code can only be used once. +

+); + /** * Render the screen where users can manage Backup Codes. * @@ -209,25 +206,21 @@ function CodeList( { codes } ) { */ function Manage( { setRegenerating } ) { const { - user: { backupCodesRemaining }, + user: { backupCodesEnabled, backupCodesRemaining }, } = useContext( GlobalContext ); return ( <>
-

- Backup codes let you access your account if your primary two-factor - authentication method is unavailable, like if your phone is lost or stolen. Each - code can only be used once. -

+ - { backupCodesRemaining > 5 && ( + { backupCodesEnabled && backupCodesRemaining > 5 && (

You have { backupCodesRemaining } backup codes remaining.

) } - { backupCodesRemaining <= 5 && ( + { backupCodesEnabled && backupCodesRemaining <= 5 && ( You only have { backupCodesRemaining } backup codes @@ -239,7 +232,7 @@ function Manage( { setRegenerating } ) {
);