Merge pull request #11500 from nextcloud/enhancement/revamp-2fa-login-provider-selection
Improve 2FA provider selection screen
This commit is contained in:
John Molakvoæ
GitHub
commit
afef15b07b
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 268 B |
|
|
@ -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; ?>
|
||||
</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',
|
||||
<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'],
|
||||
]
|
||||
)) ?>"><?php p($l->t('Use backup code')) ?></a>
|
||||
)) ?>">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
<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'],
|
||||
]
|
||||
)) ?>"><?php p($l->t('Use backup code')) ?></a>
|
||||
<?php endif; ?>
|
||||
</p>
|
||||
)) ?>">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue