mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11606 from nextcloud/fix/2fa-login-screen-design-III 

Improve 2FA login screens
This commit is contained in:
Roeland Jago Douma 2018-10-04 07:40:07 +02:00 committed by GitHub
parent d9504a4e06 ae2cd50427
commit dc037d9332
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
core/css/guest.css
View File

@ -103,7 +103,7 @@ body {
/* Default FORM */ /* Default FORM */
form { form {
position: relative; position: relative;
width: 100%; width: 280px;
margin: auto; margin: auto;
padding: 0; padding: 0;
} }
@ -178,7 +178,8 @@ input, textarea, select, button, div[contenteditable=true] {
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif; font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
} }
input, input,
input:not([type='range']) { input:not([type='range']),
a.button {
font-size: 20px; font-size: 20px;
margin: 5px; margin: 5px;
padding: 11px 10px 9px; padding: 11px 10px 9px;
@ -189,7 +190,8 @@ input:not([type='range']) {
input[type='submit'], input[type='submit'],
input[type='submit'].icon-confirm, input[type='submit'].icon-confirm,
input[type='button'], input[type='button'],
button, .button, button,
.button,
select { select {
display: inline-block; display: inline-block;
width: auto; width: auto;
@ -239,7 +241,8 @@ input.update-continue {
} }
input.primary, input.primary,
button.primary { button.primary,
a.primary {
border: 1px solid #fff; border: 1px solid #fff;
background-color: #0082c9; background-color: #0082c9;
color: #fff; color: #fff;
@ -248,7 +251,9 @@ button.primary {
input.primary:not(:disabled):hover, input.primary:not(:disabled):hover,
input.primary:not(:disabled):focus, input.primary:not(:disabled):focus,
button.primary:not(:disabled):hover, button.primary:not(:disabled):hover,
button.primary:not(:disabled):focus { button.primary:not(:disabled):focus,
a.primary:not(:disabled):hover,
a.primary:not(:disabled):focus{
background-color: #17adff; background-color: #17adff;
} }
@ -395,6 +400,9 @@ form .warning input[type='checkbox']+label {
border-radius: 3px; border-radius: 3px;
margin: 12px 0; margin: 12px 0;
border: 1px solid transparent; border: 1px solid transparent;
text-align: left;
align-items: center;
text-decoration: none !important;
} }
.two-factor-provider:hover, .two-factor-provider:hover,
.two-factor-provider:focus, .two-factor-provider:focus,
@ -415,18 +423,6 @@ form .warning input[type='checkbox']+label {
.two-factor-provider p { .two-factor-provider p {
font-weight: 300; 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 { .two-factor-icon {
width: 100px; width: 100px;
display: block; display: block;
@ -439,6 +435,15 @@ form .warning input[type='checkbox']+label {
border-radius: 3px; border-radius: 3px;
font-size: 20px; font-size: 20px;
} }
.two-factor-primary {
/* Fix for 'Use backup codes' button not taking correct styles */
padding: 14px !important;
width: 226px;
}
.two-factor-secondary {
display: inline-block;
padding: 12px;
}
/* Additional login options */ /* Additional login options */
@ -559,10 +564,12 @@ form #selectDbType label.ui-state-active {
/* Errors */ /* Errors */
/* Warnings and errors are the same */ /* Warnings and errors are the same */
.body-login-container,
.warning, .warning,
.update, .update,
.error { .error {
display: block; display: block;
margin-top: 15px;
padding: 15px; padding: 15px;
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
color: #fff; color: #fff;
@ -576,10 +583,7 @@ form #selectDbType label.ui-state-active {
user-select: text; user-select: text;
} }
.warning { .body-login-container h2,
margin-top: 15px;
}
.warning h2, .warning h2,
.update h2, .update h2,
.error h2 { .error h2 {
@ -592,6 +596,10 @@ form #selectDbType label.ui-state-active {
height: 70px; height: 70px;
} }
.body-login-container form {
width: initial;
}
.warning.updateAnyways { .warning.updateAnyways {
text-align: center; text-align: center;
} }

114
core/templates/twofactorselectchallenge.php
View File

@ -1,68 +1,66 @@
<div class="warning"> <?php
$noProviders = empty($_['providers']);
?>
<div class="body-login-container update">
<h2 class="two-factor-header"><?php p($l->t('Two-factor authentication')) ?></h2> <h2 class="two-factor-header"><?php p($l->t('Two-factor authentication')) ?></h2>
<?php if (!$noProviders): ?>
<p><?php p($l->t('Enhanced security is enabled for your account. Choose a second factor for authentication:')) ?></p> <p><?php p($l->t('Enhanced security is enabled for your account. Choose a second factor for authentication:')) ?></p>
<?php endif ?>
<?php if ($_['providerMissing']): ?> <?php if ($_['providerMissing']): ?>
<p> <p>
<strong><?php p($l->t('Could not load at least one of your enabled two-factor auth methods. Please contact your admin.')) ?></strong> <strong><?php p($l->t('Could not load at least one of your enabled two-factor auth methods. Please contact your admin.')) ?></strong>
</p> </p>
<?php endif; ?> <?php endif; ?>
<?php if ($noProviders): ?>
<img class="two-factor-icon" src="<?php p(image_path('core', 'actions/password-white.svg')) ?>" alt="" />
<p> <p>
<ul> <?php if (is_null($_['backupProvider'])): ?>
<?php if (empty($_['providers'])): ?> <strong><?php p($l->t('Two-factor authentication is enforced but has not been configured on your account. Contact your admin for assistance.')) ?></strong>
<p> <?php else: ?>
<?php if (is_null($_['backupProvider'])): ?> <strong><?php p($l->t('Two-factor authentication is enforced but has not been configured on your account. Use one of your backup codes to log in or contact your admin for assistance.')) ?></strong>
<strong><?php p($l->t('Two-factor authentication is enforced but has not been configured on your account. Contact your admin for assistance.')) ?></strong> <?php endif; ?>
<?php else: ?>
<strong><?php p($l->t('Two-factor authentication is enforced but has not been configured on your account. Use one of your backup codes to log in or contact your admin for assistance.')) ?></strong>
<?php endif; ?>
</p>
<?php else: ?>
<?php foreach ($_['providers'] as $provider): ?>
<li>
<a class="two-factor-provider"
href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[
'challengeProviderId' => $provider->getId(),
'redirect_url' => $_['redirect_url'],
]
)) ?>">
<?php
if ($provider instanceof \OCP\Authentication\TwoFactorAuth\IProvidesIcons) {
$icon = $provider->getLightIcon();
} else {
$icon = image_path('core', 'actions/password-white.svg');
}
?>
<img src="<?php p($icon) ?>" alt="" />
<div>
<h3><?php p($provider->getDisplayName()) ?></h3>
<p><?php p($provider->getDescription()) ?></p>
</div>
</a>
</li>
<?php endforeach; ?>
<?php endif ?>
<?php if (!is_null($_['backupProvider'])): ?>
<li>
<a class="two-factor-provider two-factor-secondary" href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[
'challengeProviderId' => $_['backupProvider']->getId(),
'redirect_url' => $_['redirect_url'],
]
)) ?>">
<div>
<p><?php p($l->t('Use backup code')) ?></p>
</div>
</a>
</li>
<?php endif; ?>
<li>
<a class="two-factor-provider two-factor-secondary" href="<?php print_unescaped($_['logout_url']); ?>">
<div>
<p><?php p($l->t('Cancel log in')) ?></p>
</div>
</a>
</li>
</ul>
</p> </p>
<?php else: ?>
<ul>
<?php foreach ($_['providers'] as $provider): ?>
<li>
<a class="two-factor-provider"
href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[
'challengeProviderId' => $provider->getId(),
'redirect_url' => $_['redirect_url'],
]
)) ?>">
<?php
if ($provider instanceof \OCP\Authentication\TwoFactorAuth\IProvidesIcons) {
$icon = $provider->getLightIcon();
} else {
$icon = image_path('core', 'actions/password-white.svg');
}
?>
<img src="<?php p($icon) ?>" alt="" />
<div>
<h3><?php p($provider->getDisplayName()) ?></h3>
<p><?php p($provider->getDescription()) ?></p>
</div>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif ?>
<?php if (!is_null($_['backupProvider'])): ?>
<p>
<a class="<?php if($noProviders): ?>button primary two-factor-primary<?php else: ?>two-factor-secondary<?php endif ?>" href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[
'challengeProviderId' => $_['backupProvider']->getId(),
'redirect_url' => $_['redirect_url'],
]
)) ?>">
<?php p($l->t('Use backup code')) ?>
</a>
</p>
<?php endif; ?>
<p><a class="two-factor-secondary" href="<?php print_unescaped($_['logout_url']); ?>">
<?php p($l->t('Cancel log in')) ?>
</a></p>
</div> </div>

40
core/templates/twofactorshowchallenge.php
View File

@ -11,7 +11,7 @@ $provider = $_['provider'];
$template = $_['template']; $template = $_['template'];
?> ?>
<div class="warning"> <div class="body-login-container update">
<h2 class="two-factor-header"><?php p($provider->getDisplayName()); ?></h2> <h2 class="two-factor-header"><?php p($provider->getDisplayName()); ?></h2>
<?php if ($error): ?> <?php if ($error): ?>
<?php if($error_message): ?> <?php if($error_message): ?>
@ -21,27 +21,19 @@ $template = $_['template'];
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php print_unescaped($template); ?> <?php print_unescaped($template); ?>
<ul> <?php if (!is_null($_['backupProvider'])): ?>
<?php if (!is_null($_['backupProvider'])): ?> <p>
<li> <a class="two-factor-secondary" href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
<a class="two-factor-provider two-factor-secondary" href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge', [
[ 'challengeProviderId' => $_['backupProvider']->getId(),
'challengeProviderId' => $_['backupProvider']->getId(), 'redirect_url' => $_['redirect_url'],
'redirect_url' => $_['redirect_url'], ]
] )) ?>">
)) ?>"> <?php p($l->t('Use backup code')) ?>
<div> </a>
<p><?php p($l->t('Use backup code')) ?></p> </p>
</div> <?php endif; ?>
</a> <p><a class="two-factor-secondary" href="<?php print_unescaped($_['logout_url']); ?>">
</li> <?php p($l->t('Cancel log in')) ?>
<?php endif; ?> </a></p>
<li>
<a class="two-factor-provider two-factor-secondary" href="<?php print_unescaped($_['logout_url']); ?>">
<div>
<p><?php p($l->t('Cancel log in')) ?></p>
</div>
</a>
</li>
</ul>
</div> </div>