Merge pull request #51540 from nextcloud/fix/simplify-login-box

fix(login): simplify code and use consistent layout

core/src/components/login/LoginForm.vue

@@ -292,6 +292,7 @@ export default {
 .login-form {
 	text-align: start;
 	font-size: 1rem;
+	margin: 0;
 
 	&__fieldset {
 		width: 100%;

core/src/components/login/PasswordLessLoginForm.vue

@@ -5,11 +5,11 @@
 <template>
 	<form v-if="(isHttps || isLocalhost) && supportsWebauthn"
 		ref="loginForm"
+		class="password-less-login-form"
 		method="post"
 		name="login"
 		@submit.prevent="submit">
 		<h2>{{ t('core', 'Log in with a device') }}</h2>
-		<fieldset>
 		<NcTextField required
 			:value="user"
 			:autocomplete="autoCompleteAllowed ? 'on' : 'off'"
@@ -22,22 +22,23 @@
 		<LoginButton v-if="validCredentials"
 			:loading="loading"
 			@click="authenticate" />
-		</fieldset>
 	</form>
-	<div v-else-if="!supportsWebauthn" class="update">
-		<InformationIcon size="70" />
-		<h2>{{ t('core', 'Browser not supported') }}</h2>
-		<p class="infogroup">
-			{{ t('core', 'Passwordless authentication is not supported in your browser.') }}
-		</p>
-	</div>
-	<div v-else-if="!isHttps && !isLocalhost" class="update">
-		<LockOpenIcon size="70" />
-		<h2>{{ t('core', 'Your connection is not secure') }}</h2>
-		<p class="infogroup">
-			{{ t('core', 'Passwordless authentication is only available over a secure connection.') }}
-		</p>
-	</div>
+
+	<NcEmptyContent v-else-if="!isHttps && !isLocalhost"
+		:name="t('core', 'Your connection is not secure')"
+		:description="t('core', 'Passwordless authentication is only available over a secure connection.')">
+		<template #icon>
+			<LockOpenIcon />
+		</template>
+	</NcEmptyContent>
+
+	<NcEmptyContent v-else
+		:name="t('core', 'Browser not supported')"
+		:description="t('core', 'Passwordless authentication is not supported in your browser.')">
+		<template #icon>
+			<InformationIcon />
+		</template>
+	</NcEmptyContent>
 </template>
 
 <script>
@@ -46,10 +47,13 @@ import {
 	startAuthentication,
 	finishAuthentication,
 } from '../../services/WebAuthnAuthenticationService.ts'
-import LoginButton from './LoginButton.vue'
+
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
+
 import InformationIcon from 'vue-material-design-icons/Information.vue'
+import LoginButton from './LoginButton.vue'
 import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue'
-import NcTextField from '@nextcloud/vue/components/NcTextField'
 import logger from '../../logger'
 
 export default {
@@ -58,6 +62,7 @@ export default {
 		LoginButton,
 		InformationIcon,
 		LockOpenIcon,
+		NcEmptyContent,
 		NcTextField,
 	},
 	props: {
@@ -142,17 +147,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	fieldset {
+.password-less-login-form {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
-
-		:deep(label) {
-			text-align: initial;
-		}
-	}
-
-	.update {
-		margin: 0 auto;
+	margin: 0;
 }
 </style>

core/src/components/login/ResetPassword.vue

@@ -4,8 +4,9 @@
 -->
 
 <template>
-	<form class="login-form" @submit.prevent="submit">
-		<fieldset class="login-form__fieldset">
+	<form class="reset-password-form" @submit.prevent="submit">
+		<h2>{{ t('core', 'Reset password') }}</h2>
+
 		<NcTextField id="user"
 			:value.sync="user"
 			name="user"
@@ -16,7 +17,12 @@
 			:helper-text="userInputHelperText"
 			required
 			@change="updateUsername" />
-			<LoginButton :value="t('core', 'Reset password')" />
+
+		<LoginButton :loading="loading" :value="t('core', 'Reset password')" />
+
+		<NcButton type="tertiary" wide @click="$emit('abort')">
+			{{ t('core', 'Back to login') }}
+		</NcButton>
 
 		<NcNoteCard v-if="message === 'send-success'"
 			type="success">
@@ -30,33 +36,33 @@
 			type="error">
 			{{ t('core', 'Password cannot be changed. Please contact your administrator.') }}
 		</NcNoteCard>
-
-			<a class="login-form__link"
-				href="#"
-				@click.prevent="$emit('abort')">
-				{{ t('core', 'Back to login') }}
-			</a>
-		</fieldset>
 	</form>
 </template>
 
-<script>
-import axios from '@nextcloud/axios'
+<script lang="ts">
 import { generateUrl } from '@nextcloud/router'
-import LoginButton from './LoginButton.vue'
+import { defineComponent } from 'vue'
+
+import axios from '@nextcloud/axios'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
 import AuthMixin from '../../mixins/auth.js'
+import LoginButton from './LoginButton.vue'
+import logger from '../../logger.js'
 
-export default {
+export default defineComponent({
 	name: 'ResetPassword',
 	components: {
 		LoginButton,
+		NcButton,
 		NcNoteCard,
 		NcTextField,
 	},
+
 	mixins: [AuthMixin],
+
 	props: {
 		username: {
 			type: String,
@@ -67,11 +73,12 @@ export default {
 			required: true,
 		},
 	},
+
 	data() {
 		return {
 			error: false,
 			loading: false,
-			message: undefined,
+			message: '',
 			user: this.username,
 		}
 	},
@@ -84,56 +91,38 @@ export default {
 		updateUsername() {
 			this.$emit('update:username', this.user)
 		},
-		submit() {
+
+		async submit() {
 			this.loading = true
 			this.error = false
 			this.message = ''
 			const url = generateUrl('/lostpassword/email')
 
-			const data = {
-				user: this.user,
-			}
-
-			return axios.post(url, data)
-				.then(resp => resp.data)
-				.then(data => {
+			try {
+				const { data } = await axios.post(url, { user: this.user })
 				if (data.status !== 'success') {
 					throw new Error(`got status ${data.status}`)
 				}
 
 				this.message = 'send-success'
-				})
-				.catch(e => {
-					console.error('could not send reset email request', e)
+			} catch (error) {
+				logger.error('could not send reset email request', { error })
 
 				this.error = true
 				this.message = 'send-error'
-				})
-				.then(() => { this.loading = false })
+			} finally {
+				this.loading = false
+			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
-.login-form {
-	text-align: start;
-	font-size: 1rem;
-
-	&__fieldset {
-		width: 100%;
+.reset-password-form {
 	display: flex;
 	flex-direction: column;
 	gap: .5rem;
-	}
-
-	&__link {
-		display: block;
-		font-weight: normal !important;
-		cursor: pointer;
-		font-size: var(--default-font-size);
-		text-align: center;
-		padding: .5rem 1rem 1rem 1rem;
-	}
+	width: 100%;
 }
 </style>

core/src/views/Login.vue

@@ -7,7 +7,7 @@
 	<div class="guest-box login-box">
 		<template v-if="!hideLoginForm || directLogin">
 			<transition name="fade" mode="out-in">
-				<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''">
+				<div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''" class="login-box__wrapper">
 					<LoginForm :username.sync="user"
 						:redirect-url="redirectUrl"
 						:direct-login="directLogin"
@@ -17,40 +17,30 @@
 						:auto-complete-allowed="autoCompleteAllowed"
 						:email-states="emailStates"
 						@submit="loading = true" />
-					<a v-if="canResetPassword && resetPasswordLink !== ''"
+					<NcButton v-if="hasPasswordless"
+						type="tertiary"
+						wide
+						@click.prevent="passwordlessLogin = true">
+						{{ t('core', 'Log in with a device') }}
+					</NcButton>
+					<NcButton v-if="canResetPassword && resetPasswordLink !== ''"
 						id="lost-password"
-						class="login-box__link"
-						:href="resetPasswordLink">
+						:href="resetPasswordLink"
+						type="tertiary-no-background"
+						wide>
 						{{ t('core', 'Forgot password?') }}
-					</a>
-					<a v-else-if="canResetPassword && !resetPassword"
+					</NcButton>
+					<NcButton v-else-if="canResetPassword && !resetPassword"
 						id="lost-password"
-						class="login-box__link"
-						:href="resetPasswordLink"
+						type="tertiary"
+						wide
 						@click.prevent="resetPassword = true">
 						{{ t('core', 'Forgot password?') }}
-					</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>
+					</NcButton>
 				</div>
 				<div v-else-if="!loading && passwordlessLogin"
 					key="reset-pw-less"
-					class="login-additional login-passwordless">
+					class="login-additional login-box__wrapper">
 					<PasswordLessLoginForm :username.sync="user"
 						:redirect-url="redirectUrl"
 						:auto-complete-allowed="autoCompleteAllowed"
@@ -89,7 +79,7 @@
 			</transition>
 		</template>
 
-		<div id="alternative-logins" class="alternative-logins">
+		<div id="alternative-logins" class="login-box__alternative-logins">
 			<NcButton v-for="(alternativeLogin, index) in alternativeLogins"
 				:key="index"
 				type="secondary"
@@ -169,46 +159,30 @@ export default {
 }
 </script>
 
-<style lang="scss">
-body {
-	font-size: var(--default-font-size);
-}
-
+<style scoped lang="scss">
 .login-box {
 	// Same size as dashboard panels
 	width: 320px;
 	box-sizing: border-box;
 
-	&__link {
-		display: block;
-		padding: 1rem;
-		font-size: var(--default-font-size);
-		text-align: center;
-		font-weight: normal !important;
-	}
-}
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity .3s;
-}
-
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-	opacity: 0;
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: calc(2 * var(--default-grid-baseline));
 	}
 
-.alternative-logins {
+	&__alternative-logins {
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
-
-	.button-vue {
-		box-sizing: border-box;
 	}
 }
 
-.login-passwordless {
-	.button-vue {
-		margin-top: 0.5rem;
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .3s;
 }
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+	opacity: 0;
 }
 </style>