Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix unable to see the first set of backup code - using localStroage #221

Merged
merged 3 commits into from
Jun 26, 2023
Merged

Fix unable to see the first set of backup code - using localStroage #221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8bd33aa
Revert "Fix unable to see the first set of backup codes after enablin…
renintw Jun 22, 2023
0b59bee
add hasSetupCompleted
renintw Jun 22, 2023
6f8b6a0
fix eslint error
renintw Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions settings/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ module.exports = {
root: true,
extends: 'plugin:@wordpress/eslint-plugin/recommended',

env: {
browser: true,
},

globals: { navigator: 'readonly' },

rules: {
Expand Down
47 changes: 26 additions & 21 deletions settings/src/components/backup-codes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,17 @@ import { refreshRecord } from '../utilities/common';
*/
export default function BackupCodes() {
const {
user: {
backupCodesEnabled,
totpEnabled,
userRecord: { record },
},
user: { backupCodesEnabled, totpEnabled },
navigateToScreen,
} = useContext( GlobalContext );
const [ regenerating, setRegenerating ] = useState( false );
// TODO: hasSetupCompleted and its related logic should be removed
// once https://github.com/WordPress/two-factor/issues/507 is fixed.
// This is a workaround that fixes the side effect brought up by #507.
// See more in https://github.com/WordPress/wporg-two-factor/issues/216 and its PR.
const [ hasSetupCompleted, setHasSetupCompleted ] = useState(
localStorage.getItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED' ) === 'true'
);

// If TOTP hasn't been enabled, the user should not have access to BackupCodes component.
// This is primarily added to prevent users from accessing through the URL.
Expand All @@ -33,24 +36,23 @@ export default function BackupCodes() {
return;
}

// TODO: record.isSetupFinished and its related logic should be removed
// once https://github.com/WordPress/two-factor/issues/507 is fixed.
// This is a workaround that fixes the side effect brought up by #507.
// See more in https://github.com/WordPress/wporg-two-factor/issues/216 and its PR.
if ( backupCodesEnabled && record.isSetupFinished && ! regenerating ) {
if ( backupCodesEnabled && hasSetupCompleted && ! regenerating ) {
return <Manage setRegenerating={ setRegenerating } />;
}

return <Setup setRegenerating={ setRegenerating } />;
return (
<Setup setRegenerating={ setRegenerating } setHasSetupCompleted={ setHasSetupCompleted } />
);
}

/**
* Setup the Backup Codes provider.
*
* @param props
* @param props.setRegenerating
* @param props.setHasSetupCompleted
*/
function Setup( { setRegenerating } ) {
function Setup( { setRegenerating, setHasSetupCompleted } ) {
const {
setGlobalNotice,
user: { userRecord },
Expand Down Expand Up @@ -89,12 +91,14 @@ function Setup( { setRegenerating } ) {

// Finish the setup process.
const handleFinished = useCallback( async () => {
setGlobalNotice( 'Backup codes have been enabled.' );
setRegenerating( false );
userRecord.record.isSetupFinished = true;
// TODO: Add try catch here after https://github.com/WordPress/wporg-two-factor/pull/187/files is merged.
// The codes have already been saved to usermeta, see `generateCodes()` above.
await refreshRecord( userRecord ); // This has the intended side-effect of redirecting to the Manage screen.
}, [] );
setGlobalNotice( 'Backup codes have been enabled.' );
setRegenerating( false );
setHasSetupCompleted( true );
localStorage.setItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED', true );
} );

return (
<>
Expand Down Expand Up @@ -179,9 +183,11 @@ function CodeList( { codes } ) {
*/
function Manage( { setRegenerating } ) {
const {
user: { userRecord },
user: {
userRecord: { record },
},
} = useContext( GlobalContext );
const remaining = userRecord.record[ '2fa_backup_codes_remaining' ];
const remaining = record[ '2fa_backup_codes_remaining' ];

return (
<>
Expand All @@ -208,10 +214,9 @@ function Manage( { setRegenerating } ) {

<Button
isSecondary
onClick={ async () => {
onClick={ () => {
setRegenerating( true );
userRecord.record.isSetupFinished = false;
await refreshRecord( userRecord ); // This has the intended side-effect of redirecting to the Manage screen.
localStorage.setItem( 'WPORG_2FA_HAS_BACKUP_CODES_BEEN_SAVED', false );
} }
>
Generate new backup codes
Expand Down