Backup Codes: Refine UI stubs.

WordPress · Jan 25, 2023 · 4be26e2 · 4be26e2
1 parent 09a195a
commit 4be26e2
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 15 deletions.
diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { Button, CheckboxControl } from '@wordpress/components';
+import { Icon, warning } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,37 +25,79 @@ export default function TOTP() {
 
 //
 function Setup() {
+	const hasPrinted = false; /* make state */
+
 	return (
 		<>
 			<SetupProgressBar step="backup-codes" />
 
 			<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.
-				We ask that you print this list of ten unique, one-time-use backup codes and keep the list in a safe place.
+				Each code can only be used once.
 			</p>
 
-			<code>
-				backup codes
-			</code>
-
-			<p>
-				red exclamation mark icon
-				Without access to the app, your phone, or a backup code, you will lose access to your account.
+			<p>Please print the codes and keep them in a safe place.</p>
 
+			<CodeList />
 
-				check box
-				I have printed or saved these codes
+			<p>
+				<Icon icon={ warning } className="wporg-2fa__print-codes-warning" />
+				Without access to the one-time password app or a backup code, you will lose access to your account.
+				Once you navigate away from this page, you will not be able to view these codes again.
+			</p>
 
-				all finished primary button
+			<CheckboxControl
+				label="I have printed or saved these codes"
+				checked={ hasPrinted }
+				onChange={ console.log( 'todo update state' ) }
+			/>
 
-				copy icon button
-				print icon button
-				download icon button
+			<p>
+				<Button
+					isPrimary
+					disabled={ ! hasPrinted }
+					onClick={ console.log( 'todo save the codes to usermeta' ) }
+				>
+					All Finished
+				</Button>
 			</p>
 		</>
 	);
 }
 
+/**
+ * Fetch and display a list of backup codes
+ */
+function CodeList() {
+	const codes = [
+		53532411, 69155486, 84512889, 87518529, 71203631,
+		26050601, 78319488, 36118778, 89935526, 86454379
+	];
+	// fetch via xhr. maybe need to do this as useeffect in Setup so that the save function has access to the codes
+	// if so update jsdoc to reflect that not fetching, and add param to accept codes. empty array for loading
+
+	return (
+		<code className="wporg-2fa__backup-codes-list">
+			{ ! codes &&
+				<p>Loading...</p>
+				/* test this */
+			}
+
+			{ codes &&
+				<ol>
+					{ codes.map( ( code ) => {
+						return (
+							 <li key={ code }>
+								 { code }
+							 </li>
+						)
+					} ) }
+				</ol>
+			}
+		</code>
+	);
+}
+
 //
 function Manage() {
 	//make this DRY with the setup screen - modularize Setup so that this can call indivitual components

diff --git a/settings/src/components/backup-codes.scss b/settings/src/components/backup-codes.scss
@@ -0,0 +1,37 @@
+.wporg-2fa__backup-codes {
+	.wporg-2fa__backup-codes-list {
+		ol {
+			column-count: 2;
+			column-width: 110px;
+			margin: 0;
+			padding: 15px 20px;
+			background-color: #e1e1e1; /* use color var */
+		}
+
+		li::marker {
+			/* todo: a11y issues w/ contrast here? mockup calls for this to be lighter than the backup code
+			     -- presumably so that users don't mistakenly think it's part of the code --
+			     but darker than the background
+			    */
+			color: #8a8787; /* use color var*/
+		}
+
+	}
+
+	.wporg-2fa__print-codes-warning {
+		position: relative;
+		top: 8px;
+		width: 28px;
+		height: 28px;
+		fill: #d20000; /* use color var */
+	}
+}
+
+#bbpress-forums .wporg-2fa__backup-codes {
+	.wporg-2fa__backup-codes-list {
+		li {
+			list-style-type: decimal;
+			list-style-position: inside;
+		}
+	}
+}
diff --git a/settings/src/components/password.js b/settings/src/components/password.js
@@ -94,7 +94,8 @@ export default function Password() {
 				/>
 
 				<Button onClick={ () => setInputType( inputType === 'password' ? 'text' : 'password' ) }>
-					{/* @todo style closer to mockup */ }
+					{/* @todo style closer to mockup.
+					 todo shrinks too small on mobile */ }
 					<Icon icon={ seen } />
 				</Button>
 			</Flex>

diff --git a/settings/src/style.scss b/settings/src/style.scss
@@ -26,6 +26,7 @@
 @import "components/password";
 @import "components/email-address";
 @import "components/totp";
+@import "components/backup-codes";
 @import "components/setup-progress-bar";
 @import "components/global-notice";
 @import "components/screen-link";