Handle device login like an alternative login

Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling 2021-04-16 11:03:12 +02:00 committed by Roeland Jago Douma
parent adab9deb3e
commit 69290781ff
8 changed files with 51 additions and 24 deletions

View File

@ -162,7 +162,7 @@ $invert: luma($color-primary) > 0.6;
}
input.primary,
#alternative-logins li a {
.alternative-logins a, {
background-color: $color-primary-element;
border: 1px solid $color-primary-text;
color: $color-primary-text;
@ -185,19 +185,19 @@ input.primary,
}
input,
#alternative-logins li a {
.alternative-logins a {
border: 1px solid nc-lighten($color-primary-text, 50%);
}
input.primary,
button.primary,
#alternative-logins li a {
.alternative-logins a {
background-color: $color-primary;
color: $color-primary-text;
}
a,
label,
footer p,
#alternative-logins legend,
.alternative-logins legend,
.lost-password-container #lost-password,
.warning, .update, .error {
color: $color-primary-text !important;

View File

@ -204,6 +204,9 @@ class LoginController extends Controller {
$parameters = [
'alt_login' => OC_App::getAlternativeLogIns(),
];
$this->initialStateService->provideInitialState('core', 'countAlternativeLogins', count($parameters['alt_login']));
return new TemplateResponse(
$this->appName, 'login', $parameters, 'guest'
);

View File

@ -147,7 +147,7 @@ form #datadirField legend {
/* Buttons and input */
#submit-wrapper,
#reset-password-wrapper,
#alternative-logins {
.alternative-logins {
display: flex;
align-items: center;
justify-content: center;
@ -155,7 +155,7 @@ form #datadirField legend {
absolutely positioned descendant icons */
}
#alternative-logins {
.alternative-logins {
margin: auto;
display: block;
min-width: 260px;
@ -163,7 +163,7 @@ form #datadirField legend {
overflow: hidden;
}
#alternative-logins a {
.alternative-logins a.button {
margin: 10px 5px;
display: block;
font-size: 15px;
@ -172,7 +172,7 @@ form #datadirField legend {
text-overflow: ellipsis;
}
#alternative-logins a.button::before {
.alternative-logins a.button::before {
content: "";
background-repeat: no-repeat;
background-size: contain;
@ -183,16 +183,22 @@ form #datadirField legend {
vertical-align: bottom;
}
#alternative-logins .button {
color: #0082c9;
.alternative-logins .button {
color: #ffffff;
padding: 12px 20px;
}
.alternative-logins .button.single-alt-login-option {
width: 260px;
margin: 0 auto;
}
@media only screen and (max-width: 1024px) {
.wrapper {
margin-top: 0;
}
#alternative-logins {
.alternative-logins {
margin: auto;
}
}
@ -563,15 +569,16 @@ form .warning input[type='checkbox']+label {
}
/* Alternative Logins */
#alternative-logins legend {
.alternative-logins legend {
margin-bottom: 10px;
}
#alternative-logins li {
.alternative-logins li {
height: 40px;
white-space: nowrap;
padding: 05px;
}
#alternative-logins li a {
.alternative-logins a.button,
.alternative-logins li a {
width: 100%;
display: inline-block;
text-align: center;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -69,6 +69,7 @@ new View({
resetPasswordUser: fromStateOr('resetPasswordUser', ''),
directLogin: query.direct === '1',
hasPasswordless: fromStateOr('webauthn-available', false),
countAlternativeLogins: fromStateOr('countAlternativeLogins', false),
isHttps: window.location.protocol === 'https:',
hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
hideLoginForm: fromStateOr('hideLoginForm', false),

View File

@ -46,12 +46,24 @@
{{ t('core', 'Forgot password?') }}
</a>
<br>
<template v-if="hasPasswordless">
<div v-if="countAlternativeLogins"
class="alternative-logins">
<a v-if="hasPasswordless"
class="button"
:class="{ 'single-alt-login-option': countAlternativeLogins }"
href="#"
@click.prevent="passwordlessLogin = true">
{{ t('core', 'Log in with a device') }}
</a>
</div>
<a v-else
href="#"
@click.prevent="passwordlessLogin = true">
{{ t('core', 'Log in with a device') }}
</a>
</template>
</div>
<div v-else-if="!loading && passwordlessLogin"
key="reset"
class="login-additional">
@ -63,7 +75,7 @@
:is-https="isHttps"
:has-public-key-credential="hasPublicKeyCredential"
@submit="loading = true" />
<a @click.prevent="passwordlessLogin = false" href="#">
<a href="#" @click.prevent="passwordlessLogin = false">
{{ t('core', 'Back') }}
</a>
</div>
@ -156,6 +168,10 @@ export default {
type: Boolean,
default: false,
},
countAlternativeLogins: {
type: Number,
default: 0,
},
isHttps: {
type: Boolean,
default: false,

View File

@ -6,7 +6,7 @@ script('core', 'dist/login');
<div id="login"></div>
<?php if (!empty($_['alt_login'])) { ?>
<div id="alternative-logins">
<div id="alternative-logins" class="alternative-logins">
<?php foreach ($_['alt_login'] as $login): ?>
<a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
<?php p($login['name']); ?>