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

Merge pull request #11500 from nextcloud/enhancement/revamp-2fa-login-provider-selection 

Improve 2FA provider selection screen
This commit is contained in:
John Molakvoæ 2018-10-02 10:37:18 +02:00 committed by GitHub
parent d01905200a feb5842a7d
commit afef15b07b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 112 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/twofactor_backupcodes/templates/challenge.php
View File

@ -2,7 +2,13 @@
style('twofactor_backupcodes', 'style');
?>
<img class="two-factor-icon" src="<?php p(image_path('core', 'actions/more-white.svg')) ?>" alt="" />
<p><?php p($l->t('Use one of the backup codes you saved when setting up two-factor authentication.')) ?></p>
<form method="POST" class="challenge-form">
<input type="text" class="challenge" name="challenge" required="required" autofocus autocomplete="off" autocapitalize="off" placeholder="<?php p($l->t('Backup code')) ?>">
<input type="submit" class="confirm-inline icon-confirm" value="">
<button class="two-factor-submit primary" type="submit">
<?php p($l->t('Submit')); ?>
</button>
</form>

71
core/css/guest.css
View File

@ -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 {

1
core/img/actions/password-white.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" width="16" height="16"><path fill="#fff" d="m8 1c-2.319 0-3.967 1.8644-4 4v2.5h-1.5v7.5h11v-7.5h-1.5v-2.5c0-2.27-1.8-3.9735-4-4zm0 2c1.25 0 2 0.963 2 2v2.5h-4v-2.5c0-1.174 0.747-2 2-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

51
core/templates/twofactorselectchallenge.php
View File

@ -1,6 +1,6 @@
<div class="warning">
<h2 class="two-factor-header"><?php p($l->t('Two-factor authentication')) ?></h2>
<p><?php p($l->t('Enhanced security is enabled for your account. Please authenticate using a second factor.')) ?></p>
<p><?php p($l->t('Enhanced security is enabled for your account. Choose a second factor for authentication:')) ?></p>
<?php if ($_['providerMissing']): ?>
<p>
<strong><?php p($l->t('Could not load at least one of your enabled two-factor auth methods. Please contact your admin.')) ?></strong>
@ -19,29 +19,50 @@
<ul>
<?php foreach ($_['providers'] as $provider): ?>
<li>
<a class="button two-factor-provider"
<a class="two-factor-provider"
href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[
'challengeProviderId' => $provider->getId(),
'redirect_url' => $_['redirect_url'],
]
)) ?>">
<?php p($provider->getDescription()) ?>
<?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>
<?php endif ?>
<p class="two-factor-link">
<a class="button" href="<?php print_unescaped($_['logout_url']); ?>"><?php p($l->t('Cancel log in')) ?></a>
<?php if (!is_null($_['backupProvider'])): ?>
<a class="button" 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>
<?php endif; ?>
</p>
</div>

30
core/templates/twofactorshowchallenge.php
View File

@ -21,15 +21,27 @@ $template = $_['template'];
<?php endif; ?>
<?php endif; ?>
<?php print_unescaped($template); ?>
<p class="two-factor-link">
<a class="button" href="<?php print_unescaped($_['logout_url']); ?>"><?php p($l->t('Cancel log in')) ?></a>
<ul>
<?php if (!is_null($_['backupProvider'])): ?>
<a class="button" 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>
<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; ?>
</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>