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'); 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"> <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="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> </form>

71
core/css/guest.css
View File

@ -372,33 +372,56 @@ form .warning input[type='checkbox']+label {
color: #fff !important; color: #fff !important;
} }
/* TOTP */
.two-factor-header {
text-align: center;
}
.two-factor-provider { .two-factor-provider {
text-align: center; display: flex;
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;
border-radius: 3px; border-radius: 3px;
color: #555 !important; margin: 12px 0;
display: inline-block; border: 1px solid transparent;
margin: 5px 0;
text-align: center;
width: 100%;
box-sizing: border-box
} }
.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 */ /* Additional login options */
#remember_login { #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"> <div class="warning">
<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>
<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']): ?> <?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>
@ -19,29 +19,50 @@
<ul> <ul>
<?php foreach ($_['providers'] as $provider): ?> <?php foreach ($_['providers'] as $provider): ?>
<li> <li>
<a class="button two-factor-provider" <a class="two-factor-provider"
href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge', href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge',
[ [
'challengeProviderId' => $provider->getId(), 'challengeProviderId' => $provider->getId(),
'redirect_url' => $_['redirect_url'], '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> </a>
</li> </li>
<?php endforeach; ?> <?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> </ul>
</p> </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> </div>

30
core/templates/twofactorshowchallenge.php
View File

@ -21,15 +21,27 @@ $template = $_['template'];
<?php endif; ?> <?php endif; ?>
<?php endif; ?> <?php endif; ?>
<?php print_unescaped($template); ?> <?php print_unescaped($template); ?>
<p class="two-factor-link"> <ul>
<a class="button" href="<?php print_unescaped($_['logout_url']); ?>"><?php p($l->t('Cancel log in')) ?></a>
<?php if (!is_null($_['backupProvider'])): ?> <?php if (!is_null($_['backupProvider'])): ?>
<a class="button" href="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.TwoFactorChallenge.showChallenge', <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'], 'challengeProviderId' => $_['backupProvider']->getId(),
] 'redirect_url' => $_['redirect_url'],
)) ?>"><?php p($l->t('Use backup code')) ?></a> ]
)) ?>">
<div>
<p><?php p($l->t('Use backup code')) ?></p>
</div>
</a>
</li>
<?php endif; ?> <?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> </div>