open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Restructure and redesign two-factor auth provider selection

Browse Source 
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
pull/11500/head
Christoph Wurst 8 years ago
parent 40a3dbf878
commit feb5842a7d
5 changed files with 109 additions and 46 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      apps/twofactor_backupcodes/templates/challenge.php
  2. 65
      core/css/guest.css
  3. 1
      core/img/actions/password-white.svg
  4. 51
      core/templates/twofactorselectchallenge.php
  5. 30
      core/templates/twofactorshowchallenge.php

8
apps/twofactor_backupcodes/templates/challenge.php
Unescape 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>

65
core/css/guest.css
Unescape View File

@ -372,34 +372,57 @@ 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;
display: flex;
border-radius: 3px;
margin: 12px 0;
border: 1px solid transparent;
}
.two-factor-link {
display: inline-block;
color: rgba(255, 255, 255, 0.75);
width: 100%;
.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-link .button {
.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;
color: #555 !important;
display: inline-block;
margin: 5px 0;
text-align: center;
width: 100%;
box-sizing: border-box
font-size: 20px;
}
/* Additional login options */
#remember_login {
margin: 18px 5px 0 16px !important;

1
core/img/actions/password-white.svg
Unescape 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
Unescape 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; ?>
</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; ?>
<?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>
</div>

30
core/templates/twofactorshowchallenge.php
Unescape 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>

Write Preview
Loading…
Cancel
Save