Require explicit action to create backup codes

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 <Setup setRegenerating={ setRegenerating } />;
 	}
 
@@ -116,11 +110,7 @@ function Setup( { setRegenerating } ) {
 	return (
 		<>
 			<div className="wporg-2fa__screen-intro">
-				<p>
-					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.
-				</p>
+				<IntroText />
 
 				<p>Please print the codes and keep them in a safe place.</p>
 			</div>
@@ -201,6 +191,13 @@ function CodeList( { codes } ) {
 	);
 }
 
+const IntroText = () => (
+	<p>
+		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.
+	</p>
+);
+
 /**
  * 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 (
 		<>
 			<div className="wporg-2fa__screen-intro">
-				<p>
-					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.
-				</p>
+				<IntroText />
 
-				{ backupCodesRemaining > 5 && (
+				{ backupCodesEnabled && backupCodesRemaining > 5 && (
 					<p>
 						You have <strong>{ backupCodesRemaining }</strong> backup codes remaining.
 					</p>
 				) }
 
-				{ backupCodesRemaining <= 5 && (
+				{ backupCodesEnabled && backupCodesRemaining <= 5 && (
 					<Notice status="warning" isDismissible={ false }>
 						<Icon icon={ warning } />
 						You only have <strong>{ backupCodesRemaining }</strong> backup codes
@@ -239,7 +232,7 @@ function Manage( { setRegenerating } ) {
 			</div>
 
 			<Button isSecondary onClick={ () => setRegenerating( true ) }>
-				Generate new backup codes
+				{ backupCodesEnabled ? 'Regenerate backup codes' : 'Generate backup codes' }
 			</Button>
 		</>
 	);