* Show icon if no provider is available * Reduce shown text if no provider available * Fix login button icons * Make backup codes button primary if the only options to log in Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>tags/v15.0.0beta1
/* Default FORM */ | /* Default FORM */ | ||||
form { | form { | ||||
position: relative; | position: relative; | ||||
width: 100%; | |||||
width: 280px; | |||||
margin: auto; | margin: auto; | ||||
padding: 0; | padding: 0; | ||||
} | } | ||||
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; | ||||
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; | ||||
} | } | ||||
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; | ||||
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; | ||||
} | } | ||||
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, | ||||
.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; | ||||
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 */ | ||||
/* 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; | ||||
user-select: text; | user-select: text; | ||||
} | } | ||||
.warning { | |||||
margin-top: 15px; | |||||
} | |||||
.body-login-container h2, | |||||
.warning h2, | .warning h2, | ||||
.update h2, | .update h2, | ||||
.error h2 { | .error h2 { | ||||
height: 70px; | height: 70px; | ||||
} | } | ||||
.body-login-container form { | |||||
width: initial; | |||||
} | |||||
.warning.updateAnyways { | .warning.updateAnyways { | ||||
text-align: center; | text-align: center; | ||||
} | } |
<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 (empty($_['providers'])): ?> | |||||
<p> | |||||
<?php if (is_null($_['backupProvider'])): ?> | |||||
<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 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 if (is_null($_['backupProvider'])): ?> | |||||
<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 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: ?> | |||||
<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 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> | |||||
<?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> | </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> |
$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): ?> | ||||
<?php endif; ?> | <?php endif; ?> | ||||
<?php endif; ?> | <?php endif; ?> | ||||
<?php print_unescaped($template); ?> | <?php print_unescaped($template); ?> | ||||
<ul> | |||||
<?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> | |||||
<?php if (!is_null($_['backupProvider'])): ?> | |||||
<p> | |||||
<a class="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> | |||||
</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> |