From: Tim Düsterhus Date: Tue, 10 Nov 2020 14:07:27 +0000 (+0100) Subject: Improve UX when setting up TOTP X-Git-Tag: 5.4.0_Alpha_1~555^2~53^2~9 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=53e360bd7f9cffd3f283588e973750bed5456ec1;p=GitHub%2FWoltLab%2FWCF.git Improve UX when setting up TOTP --- diff --git a/com.woltlab.wcf/templates/__totpCodeField.tpl b/com.woltlab.wcf/templates/__totpCodeField.tpl new file mode 100644 index 0000000000..9b46101f55 --- /dev/null +++ b/com.woltlab.wcf/templates/__totpCodeField.tpl @@ -0,0 +1,17 @@ +getMaximumLength() !== null}size="{$field->getMaximumLength()}" {/if}{* + *}pattern="[0-9]*" {* + *}inputmode="numeric"{* + *}{if $field->isAutofocused()} autofocus{/if}{* + *}{if $field->isRequired()} required{/if}{* + *}{if $field->isImmutable()} disabled{/if}{* + *}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{* + *}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{* + *}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{* + *}{if $field->getDocument()->isAjax()} data-dialog-submit-on-enter="true"{/if}{* +*}> diff --git a/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl b/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl index f2c9db9312..19b8887a12 100644 --- a/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl +++ b/com.woltlab.wcf/templates/__totpNewDeviceContainer.tpl @@ -14,9 +14,11 @@ {/if} {/if} + {lang}wcf.user.security.multifactor.totp.newDevice.description{/lang} +
{if $container->getNodeById('secret')->isAvailable()} - {@$container->getNodeById('secret')->getHtml()} + {@$container->getNodeById('secret')->getFieldHtml()} {/if}
diff --git a/com.woltlab.wcf/templates/__totpSecretField.tpl b/com.woltlab.wcf/templates/__totpSecretField.tpl index eb3fe6d0c5..fc32f52215 100644 --- a/com.woltlab.wcf/templates/__totpSecretField.tpl +++ b/com.woltlab.wcf/templates/__totpSecretField.tpl @@ -1,7 +1,6 @@
- - +
label('wcf.user.security.multifactor.totp.code') + ->description('wcf.user.security.multifactor.totp.code.description') ->required() ->addValidator(new FormFieldValidator('totpSecretValid', function (CodeFormField $field) { /** @var SecretFormField $secret */ @@ -72,7 +73,9 @@ class TotpMultifactorMethod implements IMultifactorMethod { })), TextFormField::create('deviceName') ->label('wcf.user.security.multifactor.totp.deviceName') - ->placeholder('wcf.user.security.multifactor.totp.deviceName.placeholder'), + ->description('wcf.user.security.multifactor.totp.deviceName.description') + ->placeholder('wcf.user.security.multifactor.totp.deviceName.placeholder') + ->maximumLength(200), FormButton::create('submitButton') ->label('wcf.global.button.submit') ->accessKey('s') diff --git a/wcfsetup/install/files/lib/system/user/multifactor/totp/CodeFormField.class.php b/wcfsetup/install/files/lib/system/user/multifactor/totp/CodeFormField.class.php index 5427c4a94c..2af016a274 100644 --- a/wcfsetup/install/files/lib/system/user/multifactor/totp/CodeFormField.class.php +++ b/wcfsetup/install/files/lib/system/user/multifactor/totp/CodeFormField.class.php @@ -15,6 +15,11 @@ use wcf\system\form\builder\field\TextFormField; class CodeFormField extends TextFormField { use TDefaultIdFormField; + /** + * @inheritDoc + */ + protected $templateName = '__totpCodeField'; + /** * @var ?int */ @@ -23,6 +28,7 @@ class CodeFormField extends TextFormField { public function __construct() { $this->minimumLength(Totp::CODE_LENGTH); $this->maximumLength(Totp::CODE_LENGTH); + $this->placeholder("123456"); } /** diff --git a/wcfsetup/install/files/style/ui/accountSecurity.scss b/wcfsetup/install/files/style/ui/accountSecurity.scss index 476a0804e0..23cfe7fec7 100644 --- a/wcfsetup/install/files/style/ui/accountSecurity.scss +++ b/wcfsetup/install/files/style/ui/accountSecurity.scss @@ -21,13 +21,19 @@ } } +// Just .multifactorTotpCode is not specific enough. +input.multifactorTotpCode { + font-family: monospace; + font-weight: 600; + font-size: 28px; +} + .multifactorTotpNewDevice { display: flex; + flex-direction: column; .totpSecretContainer { text-align: center; - width: 250px; - margin: 0 5px; canvas { width: 200px; @@ -38,4 +44,13 @@ .multifactorTotpNewDeviceFields { flex: 1 1 auto; } + + @include screen-md-up { + flex-direction: row; + + .totpSecretContainer { + width: 250px; + margin: 0 5px; + } + } } diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml index e7235e1c9f..ef1a9a4fa7 100644 --- a/wcfsetup/install/lang/de.xml +++ b/wcfsetup/install/lang/de.xml @@ -4859,6 +4859,14 @@ Die E-Mail-Adresse des neuen Benutzers lautet: {@$user->email} + + + Authentifizieren Sie sich mit Hilfe einer App auf Ihrem Smartphone.

+
    +
  1. {if LANGUAGE_USE_INFORMAL_VARIANT}Installiere{else}Installieren Sie{/if} eine Authentifizierungs-App wie beispielsweise Google Authenticator (Android, iOS) oder Authy (Android, iOS).
    2. +
  2. {if LANGUAGE_USE_INFORMAL_VARIANT}Scanne{else}Scannen Sie{/if} den QR-Code in der App.
    3. +
  3. {if LANGUAGE_USE_INFORMAL_VARIANT}Gib{else}Geben Sie{/if} den durch die App generierten 6-stelligen Einmalcode ein.
    4. +
]]> diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml index 42135f5dd7..a8fee525ee 100644 --- a/wcfsetup/install/lang/en.xml +++ b/wcfsetup/install/lang/en.xml @@ -4856,6 +4856,14 @@ Open the link below to access the user profile: + + + Authenticate using an app on your smartphone.

+
    +
  1. Install an authentication app such as Google Authenticator (Android, iOS) or Authy (Android, iOS).
    2. +
  2. Scan the QR code within the app.
    3. +
  3. Enter the 6 digit one time code generated by the app.
    4. +
]]>