Handle device login like an alternative login
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
parent
adab9deb3e
commit
69290781ff
|
@ -162,7 +162,7 @@ $invert: luma($color-primary) > 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.primary,
|
input.primary,
|
||||||
#alternative-logins li a {
|
.alternative-logins a, {
|
||||||
background-color: $color-primary-element;
|
background-color: $color-primary-element;
|
||||||
border: 1px solid $color-primary-text;
|
border: 1px solid $color-primary-text;
|
||||||
color: $color-primary-text;
|
color: $color-primary-text;
|
||||||
|
@ -185,19 +185,19 @@ input.primary,
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
#alternative-logins li a {
|
.alternative-logins a {
|
||||||
border: 1px solid nc-lighten($color-primary-text, 50%);
|
border: 1px solid nc-lighten($color-primary-text, 50%);
|
||||||
}
|
}
|
||||||
input.primary,
|
input.primary,
|
||||||
button.primary,
|
button.primary,
|
||||||
#alternative-logins li a {
|
.alternative-logins a {
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
color: $color-primary-text;
|
color: $color-primary-text;
|
||||||
}
|
}
|
||||||
a,
|
a,
|
||||||
label,
|
label,
|
||||||
footer p,
|
footer p,
|
||||||
#alternative-logins legend,
|
.alternative-logins legend,
|
||||||
.lost-password-container #lost-password,
|
.lost-password-container #lost-password,
|
||||||
.warning, .update, .error {
|
.warning, .update, .error {
|
||||||
color: $color-primary-text !important;
|
color: $color-primary-text !important;
|
||||||
|
|
|
@ -204,6 +204,9 @@ class LoginController extends Controller {
|
||||||
$parameters = [
|
$parameters = [
|
||||||
'alt_login' => OC_App::getAlternativeLogIns(),
|
'alt_login' => OC_App::getAlternativeLogIns(),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
$this->initialStateService->provideInitialState('core', 'countAlternativeLogins', count($parameters['alt_login']));
|
||||||
|
|
||||||
return new TemplateResponse(
|
return new TemplateResponse(
|
||||||
$this->appName, 'login', $parameters, 'guest'
|
$this->appName, 'login', $parameters, 'guest'
|
||||||
);
|
);
|
||||||
|
|
|
@ -147,7 +147,7 @@ form #datadirField legend {
|
||||||
/* Buttons and input */
|
/* Buttons and input */
|
||||||
#submit-wrapper,
|
#submit-wrapper,
|
||||||
#reset-password-wrapper,
|
#reset-password-wrapper,
|
||||||
#alternative-logins {
|
.alternative-logins {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -155,7 +155,7 @@ form #datadirField legend {
|
||||||
absolutely positioned descendant icons */
|
absolutely positioned descendant icons */
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative-logins {
|
.alternative-logins {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: block;
|
display: block;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
|
@ -163,7 +163,7 @@ form #datadirField legend {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative-logins a {
|
.alternative-logins a.button {
|
||||||
margin: 10px 5px;
|
margin: 10px 5px;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
@ -172,7 +172,7 @@ form #datadirField legend {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative-logins a.button::before {
|
.alternative-logins a.button::before {
|
||||||
content: "";
|
content: "";
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
@ -183,16 +183,22 @@ form #datadirField legend {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
#alternative-logins .button {
|
.alternative-logins .button {
|
||||||
color: #0082c9;
|
color: #ffffff;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.alternative-logins .button.single-alt-login-option {
|
||||||
|
width: 260px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1024px) {
|
@media only screen and (max-width: 1024px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
#alternative-logins {
|
.alternative-logins {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -563,15 +569,16 @@ form .warning input[type='checkbox']+label {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alternative Logins */
|
/* Alternative Logins */
|
||||||
#alternative-logins legend {
|
.alternative-logins legend {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
#alternative-logins li {
|
.alternative-logins li {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 05px;
|
padding: 05px;
|
||||||
}
|
}
|
||||||
#alternative-logins li a {
|
.alternative-logins a.button,
|
||||||
|
.alternative-logins li a {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
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
|
@ -69,6 +69,7 @@ new View({
|
||||||
resetPasswordUser: fromStateOr('resetPasswordUser', ''),
|
resetPasswordUser: fromStateOr('resetPasswordUser', ''),
|
||||||
directLogin: query.direct === '1',
|
directLogin: query.direct === '1',
|
||||||
hasPasswordless: fromStateOr('webauthn-available', false),
|
hasPasswordless: fromStateOr('webauthn-available', false),
|
||||||
|
countAlternativeLogins: fromStateOr('countAlternativeLogins', false),
|
||||||
isHttps: window.location.protocol === 'https:',
|
isHttps: window.location.protocol === 'https:',
|
||||||
hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
|
hasPublicKeyCredential: typeof (window.PublicKeyCredential) !== 'undefined',
|
||||||
hideLoginForm: fromStateOr('hideLoginForm', false),
|
hideLoginForm: fromStateOr('hideLoginForm', false),
|
||||||
|
|
|
@ -46,11 +46,23 @@
|
||||||
{{ t('core', 'Forgot password?') }}
|
{{ t('core', 'Forgot password?') }}
|
||||||
</a>
|
</a>
|
||||||
<br>
|
<br>
|
||||||
<a v-if="hasPasswordless"
|
<template v-if="hasPasswordless">
|
||||||
href="#"
|
<div v-if="countAlternativeLogins"
|
||||||
@click.prevent="passwordlessLogin = true">
|
class="alternative-logins">
|
||||||
{{ t('core', 'Log in with a device') }}
|
<a v-if="hasPasswordless"
|
||||||
</a>
|
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>
|
||||||
<div v-else-if="!loading && passwordlessLogin"
|
<div v-else-if="!loading && passwordlessLogin"
|
||||||
key="reset"
|
key="reset"
|
||||||
|
@ -63,7 +75,7 @@
|
||||||
:is-https="isHttps"
|
:is-https="isHttps"
|
||||||
:has-public-key-credential="hasPublicKeyCredential"
|
:has-public-key-credential="hasPublicKeyCredential"
|
||||||
@submit="loading = true" />
|
@submit="loading = true" />
|
||||||
<a @click.prevent="passwordlessLogin = false" href="#">
|
<a href="#" @click.prevent="passwordlessLogin = false">
|
||||||
{{ t('core', 'Back') }}
|
{{ t('core', 'Back') }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -156,6 +168,10 @@ export default {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
countAlternativeLogins: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
isHttps: {
|
isHttps: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
|
|
@ -6,7 +6,7 @@ script('core', 'dist/login');
|
||||||
<div id="login"></div>
|
<div id="login"></div>
|
||||||
|
|
||||||
<?php if (!empty($_['alt_login'])) { ?>
|
<?php if (!empty($_['alt_login'])) { ?>
|
||||||
<div id="alternative-logins">
|
<div id="alternative-logins" class="alternative-logins">
|
||||||
<?php foreach ($_['alt_login'] as $login): ?>
|
<?php foreach ($_['alt_login'] as $login): ?>
|
||||||
<a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
|
<a class="button <?php p($login['style'] ?? ''); ?>" href="<?php print_unescaped($login['href']); ?>" >
|
||||||
<?php p($login['name']); ?>
|
<?php p($login['name']); ?>
|
||||||
|
|
Loading…
Reference in New Issue