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

Refined WebAuthn UI #223

Merged
merged 18 commits into from
Aug 18, 2023
Merged

Refined WebAuthn UI #223

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
6d39e22
Remove dev only flag from webauthn settings
adamwoodnz Aug 7, 2023
cc044c1
Replace `Default` inline text with `Primary` badge
adamwoodnz Aug 7, 2023
3d50e53
Replace info icon with cross for unconfigured methods
adamwoodnz Aug 7, 2023
3c62c9c
Make spacing around screen intro text consistent
adamwoodnz Aug 7, 2023
2cab481
Update webauthn screens copy and layout
adamwoodnz Aug 8, 2023
264b9ad
Style keys list
adamwoodnz Aug 8, 2023
e8abd7b
Move spinner out of submit actions container
adamwoodnz Aug 8, 2023
c60c89e
Add modal for confirmation of disabling security keys
adamwoodnz Aug 9, 2023
5409809
Remove possible redirection to backup codes
adamwoodnz Aug 10, 2023
e516cfa
Add newline to end of file
adamwoodnz Aug 10, 2023
59eb63d
DRY the disable keys button text
adamwoodnz Aug 10, 2023
32b94af
Revert removing dev flag
adamwoodnz Aug 10, 2023
444c544
Remove space below submit actions
adamwoodnz Aug 16, 2023
f56b52b
Ignore exceptions from cancelling key registration
adamwoodnz Aug 16, 2023
cfe1518
Add space between action buttons and error notices
adamwoodnz Aug 16, 2023
900ec33
Style secondary buttons to match design
adamwoodnz Aug 16, 2023
5a3b185
Reduce space under security keys list heading
adamwoodnz Aug 18, 2023
2634c00
Simplify registering key transition
adamwoodnz Aug 18, 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
2 changes: 1 addition & 1 deletion settings/rest-api.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ function rest_update_provider_status( WP_REST_Request $request ) {
break;

case 'disable':
$result = new WP_Error( 'todo_pending_194', 'TODO pending #194.', array( 'status' => 501 ) );
$result = Two_Factor_Core::disable_provider_for_user( $user_id, $provider );
adamwoodnz marked this conversation as resolved.
Show resolved Hide resolved
break;
}

Expand Down
64 changes: 32 additions & 32 deletions settings/src/components/account-status.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { Card, CardBody } from '@wordpress/components';
import { useContext } from '@wordpress/element';
import { Icon, cancelCircleFilled, check, chevronRight, info, warning } from '@wordpress/icons';
import { Icon, cancelCircleFilled, check, chevronRight, warning } from '@wordpress/icons';

/**
* Internal dependencies
Expand Down Expand Up @@ -56,37 +56,28 @@ export default function AccountStatus() {
}
/>

{ /* TODO: Only enable WebAuthn UI in development, until it's finished. */ }
{ 'development' === process.env.NODE_ENV && (
<SettingStatusCard
screen="webauthn"
status={ hasPrimaryProvider && ! webAuthnEnabled ? 'info' : webAuthnEnabled }
headerText={
'Two-Factor Security Key' +
( 'TwoFactor_Provider_WebAuthn' === primaryProvider && totpEnabled
? ' (Default)'
: '' )
}
bodyText={
webAuthnEnabled
? 'You have two-factor authentication enabled using security keys.'
: 'You have not registered any security keys.'
}
/>
) }
<SettingStatusCard
screen="webauthn"
status={ hasPrimaryProvider && ! webAuthnEnabled ? 'info' : webAuthnEnabled }
headerText="Two-Factor Security Key"
bodyText={
webAuthnEnabled
? 'You have two-factor authentication enabled using security keys.'
: 'You have not registered any security keys.'
}
isPrimary={ 'TwoFactor_Provider_WebAuthn' === primaryProvider && totpEnabled }
/>

<SettingStatusCard
screen="totp"
status={ hasPrimaryProvider && ! totpEnabled ? 'info' : totpEnabled }
headerText={
'Two-Factor App' +
( 'Two_Factor_Totp' === primaryProvider && webAuthnEnabled ? ' (Default)' : '' )
}
headerText="Two-Factor App"
bodyText={
totpEnabled
? 'You have two-factor authentication enabled using an app.'
: 'You have not enabled an app for two-factor authentication.'
}
isPrimary={ 'Two_Factor_Totp' === primaryProvider && webAuthnEnabled }
/>

<SettingStatusCard
Expand All @@ -109,17 +100,29 @@ export default function AccountStatus() {
* @param props.headerText
* @param props.bodyText
* @param props.disabled
* @param props.isPrimary
*/
function SettingStatusCard( { screen, status, headerText, bodyText, disabled = false } ) {
function SettingStatusCard( {
screen,
status,
headerText,
bodyText,
isPrimary = false,
disabled = false,
} ) {
const cardContent = (
<CardBody>
<StatusIcon status={ status } />

<h3 aria-label={ 'Click to enter the ' + headerText + ' setting page.' }>
{ headerText }
</h3>
<div>
<h3 aria-label={ 'Click to enter the ' + headerText + ' setting page.' }>
{ headerText }
</h3>

<p className="wporg-2fa__status-card-body">{ bodyText }</p>
<p className="wporg-2fa__status-card-body">{ bodyText }</p>
</div>

{ isPrimary && <div className="wporg-2fa__status-card-badge">Primary</div> }

<Icon icon={ chevronRight } size={ 26 } className="wporg-2fa__status-card-open" />
</CardBody>
Expand Down Expand Up @@ -157,14 +160,11 @@ function StatusIcon( { status } ) {
icon = check;
break;

case 'info':
icon = info;
break;

case 'pending':
icon = warning;
break;

case 'info':
case 'error':
case 'disabled':
default:
Expand Down
22 changes: 15 additions & 7 deletions settings/src/components/account-status.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@

.components-card__body {
display: grid;
grid-template-columns: min-content auto min-content;
grid-template-columns: min-content auto min-content min-content;
grid-template-areas:
"status header open"
"status description open"
"status header primary open"
"status description primary open"
;
grid-column-gap: 10px;
padding: 18px 14px;
Expand All @@ -52,6 +52,17 @@
color: $gray-700;
}

.wporg-2fa__status-card-badge {
align-self: center;
border: 1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
border-radius: 3px;
font-size: 0.7rem;
line-height: 1;
padding: 6px 10px;
margin-right: 10px;
color: var(--wp-components-color-accent,var(--wp-admin-theme-color,#007cba));
}

.wporg-2fa__status-card-open {
grid-area: open;
align-self: center;
Expand All @@ -65,14 +76,11 @@
fill: $alert-green;
}

&.is-info {
fill: $alert-blue;
}

&.is-pending {
fill: $alert-yellow;
}

&.is-info,
&.is-disabled,
&.is-error {
fill: $alert-red;
Expand Down
50 changes: 27 additions & 23 deletions settings/src/components/backup-codes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,15 @@ function Setup( { setRegenerating, setHasSetupCompleted } ) {

return (
<>
<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>
<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>

<p>Please print the codes and keep them in a safe place.</p>
<p>Please print the codes and keep them in a safe place.</p>
</div>

{ error ? (
<Notice status="error" isDismissible={ false }>
Expand Down Expand Up @@ -191,26 +193,28 @@ function Manage( { setRegenerating } ) {

return (
<>
<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>

{ remaining > 5 && (
<div className="wporg-2fa__screen-intro">
<p>
You have <strong>{ remaining }</strong> backup codes remaining.
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>
) }

{ remaining <= 5 && (
<Notice status="warning" isDismissible={ false }>
<Icon icon={ warning } />
You only have <strong>{ remaining }</strong> backup codes remaining. Please
regenerate and save new ones before you run out. If you don&apos;t, you
won&apos;t be able to log into your account if you lose your phone.
</Notice>
) }
{ remaining > 5 && (
<p>
You have <strong>{ remaining }</strong> backup codes remaining.
</p>
) }

{ remaining <= 5 && (
<Notice status="warning" isDismissible={ false }>
<Icon icon={ warning } />
You only have <strong>{ remaining }</strong> backup codes remaining. Please
regenerate and save new ones before you run out. If you don&apos;t, you
won&apos;t be able to log into your account if you lose your phone.
</Notice>
) }
</div>

<Button
isSecondary
Expand Down
4 changes: 3 additions & 1 deletion settings/src/components/email-address.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export default function EmailAddress() {
</Notice>
) }

<p>To change your email address enter a new one below.</p>
<p className="wporg-2fa__screen-intro">
To change your email address enter a new one below.
</p>

<TextControl
type="email"
Expand Down
28 changes: 15 additions & 13 deletions settings/src/components/password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,19 +92,21 @@ export default function Password() {

return (
<form onSubmit={ handleFormSubmit }>
<p>
To update your password enter a new one below. Strong passwords are random, at least
twenty characters long, and include uppercase letters and symbols.
</p>

<p>
For convenience, use a password manager to store and automatically enter passwords.
For more information, read about{ ' ' }
<a href="https://wordpress.org/documentation/article/password-best-practices/">
password best practices
</a>
.
</p>
<div className="wporg-2fa__screen-intro">
<p>
To update your password enter a new one below. Strong passwords are random, at
least twenty characters long, and include uppercase letters and symbols.
</p>

<p>
For convenience, use a password manager to store and automatically enter
passwords. For more information, read about{ ' ' }
<a href="https://wordpress.org/documentation/article/password-best-practices/">
password best practices
</a>
.
</p>
</div>

<Flex className="wporg-2fa__password_container">
<TextControl
Expand Down
47 changes: 26 additions & 21 deletions settings/src/components/totp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ function Setup() {
gap="14px"
className="wporg-2fa__totp_setup-container"
>
<p className="wporg-2fa__totp_setup-instruction">
<p className="wporg-2fa__screen-intro">
Two-Factor Authentication adds an extra layer of security to your account. Use a
phone app like <a href="https://authy.com/">Authy</a> or{ ' ' }
<a href="https://support.google.com/accounts/answer/1066447">
Expand Down Expand Up @@ -313,29 +313,34 @@ function Manage() {

return (
<>
<p>
You&apos;ve enabled two-factor authentication on your account — smart move! When you
log in to WordPress.org, you&apos;ll need to enter your username and password, and
then enter a unique passcode generated by an app on your mobile device.
</p>

<p>
Make sure you&apos;ve created{ ' ' }
<ScreenLink screen="backup-codes" anchorText="backup codes" /> and saved them in a
safe location, in case you ever lose your device. You may also need them when
transitioning to a new device. Without them you may permanently lose access to your
account.
</p>
<div className="wporg-2fa__screen-intro">
<p>
You&apos;ve enabled two-factor authentication on your account — smart move! When
you log in to WordPress.org, you&apos;ll need to enter your username and
password, and then enter a unique passcode generated by an app on your mobile
device.
</p>

<p>
Make sure you&apos;ve created{ ' ' }
<ScreenLink screen="backup-codes" anchorText="backup codes" /> and saved them in
a safe location, in case you ever lose your device. You may also need them when
transitioning to a new device. Without them you may permanently lose access to
your account.
</p>

<p>
<strong>Status:</strong> Two-Factor app is currently{ ' ' }
<span className="wporg-2fa__enabled-status">on</span>.
</p>
</div>

<p>
<strong>Status:</strong> Two-Factor app is currently{ ' ' }
<span className="wporg-2fa__enabled-status">on</span>.
<p className="wporg-2fa__submit-actions">
<Button isPrimary onClick={ handleDisable }>
Disable Two-Factor app
</Button>
</p>

<Button isPrimary onClick={ handleDisable }>
Disable Two-Factor app
</Button>

{ error && (
<Notice status="error" isDismissible={ false }>
<Icon icon={ cancelCircleFilled } />
Expand Down
Loading