Handle device login like an alternative login

Signed-off-by: Joas Schilling <coding@schilljs.com>

apps/theming/css/theming.scss

@@ -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;

core/Controller/LoginController.php

@@ -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'
 		);

core/css/guest.css

@@ -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;

core/src/login.js

@@ -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),

core/src/views/Login.vue

@@ -46,11 +46,23 @@
 					{{ t('core', 'Forgot password?') }}
 				</a>
 				<br>
-				<a v-if="hasPasswordless"
-					href="#"
-					@click.prevent="passwordlessLogin = true">
-					{{ t('core', 'Log in with a device') }}
-				</a>
+				<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"
@@ -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,

core/templates/login.php

@@ -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']); ?>