From feb5842a7df71f1c8747446f2ff6293cea2a9e30 Mon Sep 17 00:00:00 2001 From: Christoph Wurst Date: Mon, 1 Oct 2018 11:30:32 +0200 Subject: [PATCH] Restructure and redesign two-factor auth provider selection Signed-off-by: Christoph Wurst --- .../templates/challenge.php | 8 ++- core/css/guest.css | 71 ++++++++++++------- core/img/actions/password-white.svg | 1 + core/templates/twofactorselectchallenge.php | 51 +++++++++---- core/templates/twofactorshowchallenge.php | 30 +++++--- 5 files changed, 112 insertions(+), 49 deletions(-) create mode 100644 core/img/actions/password-white.svg diff --git a/apps/twofactor_backupcodes/templates/challenge.php b/apps/twofactor_backupcodes/templates/challenge.php index e6ec7bb52e..d269fb4b47 100644 --- a/apps/twofactor_backupcodes/templates/challenge.php +++ b/apps/twofactor_backupcodes/templates/challenge.php @@ -2,7 +2,13 @@ style('twofactor_backupcodes', 'style'); ?> + + +

t('Use one of the backup codes you saved when setting up two-factor authentication.')) ?>

+
- +
diff --git a/core/css/guest.css b/core/css/guest.css index fc926688c4..5d1e164a4f 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -372,33 +372,56 @@ form .warning input[type='checkbox']+label { color: #fff !important; } -/* TOTP */ -.two-factor-header { - text-align: center; -} .two-factor-provider { - text-align: center; - width: 258px !important; - display: inline-block; - margin-bottom: 0 !important; - background-color: rgba(0, 0, 0, 0.3) !important; - border: none !important; -} -.two-factor-link { - display: inline-block; - color: rgba(255, 255, 255, 0.75); - width: 100%; -} -.two-factor-link .button { - padding: 10px; + display: flex; border-radius: 3px; - color: #555 !important; - display: inline-block; - margin: 5px 0; - text-align: center; - width: 100%; - box-sizing: border-box + margin: 12px 0; + border: 1px solid transparent; } +.two-factor-provider:hover, +.two-factor-provider:focus, +.two-factor-provider:active { + border: 1px solid #fff; +} +.two-factor-provider img { + width: 64px; + height: 64px; + padding: 0 12px; +} +.two-factor-provider div { + margin: 12px 0; +} +.two-factor-provider h3 { + margin: 0; +} +.two-factor-provider p { + font-weight: 300; +} +.two-factor-provider.two-factor-secondary { + margin: 0; +} +.two-factor-provider.two-factor-secondary img { + width: 16px; + height: 16px; + padding: 14px 12px 14px 60px; +} +.two-factor-provider.two-factor-secondary div { + margin: 12px auto; +} + +.two-factor-icon { + width: 100px; + display: block; + margin: 0 auto; +} +.two-factor-submit { + width: 280px; + padding: 10px; + margin: 0 0 5px 0; + border-radius: 3px; + font-size: 20px; +} + /* Additional login options */ #remember_login { diff --git a/core/img/actions/password-white.svg b/core/img/actions/password-white.svg new file mode 100644 index 0000000000..d0ffdcc26d --- /dev/null +++ b/core/img/actions/password-white.svg @@ -0,0 +1 @@ + diff --git a/core/templates/twofactorselectchallenge.php b/core/templates/twofactorselectchallenge.php index c3c35c7fec..a2fc97495a 100644 --- a/core/templates/twofactorselectchallenge.php +++ b/core/templates/twofactorselectchallenge.php @@ -1,6 +1,6 @@

t('Two-factor authentication')) ?>

-

t('Enhanced security is enabled for your account. Please authenticate using a second factor.')) ?>

+

t('Enhanced security is enabled for your account. Choose a second factor for authentication:')) ?>

t('Could not load at least one of your enabled two-factor auth methods. Please contact your admin.')) ?> @@ -19,29 +19,50 @@

- -
diff --git a/core/templates/twofactorshowchallenge.php b/core/templates/twofactorshowchallenge.php index fbfeeb4255..88ac550575 100644 --- a/core/templates/twofactorshowchallenge.php +++ b/core/templates/twofactorshowchallenge.php @@ -21,15 +21,27 @@ $template = $_['template']; -