Login lab examples

panel/lab/components/login/login-code/index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-login-code'
+];

panel/lab/components/login/login-code/index.vue

@@ -0,0 +1,15 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-login-code />
+		</k-lab-example>
+		<k-lab-example label="Prefilled">
+			<k-login-code value="123456" />
+		</k-lab-example>
+		<k-lab-example label="Pending info">
+			<k-login-code
+				:pending="{ email: 'homer@simpson.com', challenge: 'totp' }"
+			/>
+		</k-lab-example>
+	</k-lab-examples>
+</template>

panel/lab/components/login/login/index.php

@@ -0,0 +1,5 @@
+<?php
+
+return [
+	'docs' => 'k-login'
+];

panel/lab/components/login/login/index.vue

@@ -0,0 +1,26 @@
+<template>
+	<k-lab-examples>
+		<k-lab-example label="Default">
+			<k-login />
+		</k-lab-example>
+		<k-lab-example label="With password">
+			<k-login :methods="['password']" />
+		</k-lab-example>
+		<k-lab-example label="Prefilled">
+			<k-login
+				:methods="['password']"
+				:value="{
+					email: 'homer@simpson.com',
+					password: 'password1',
+					remember: true
+				}"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Toggle between login methods">
+			<k-login :methods="['password', 'code']" />
+		</k-lab-example>
+		<k-lab-example label="Password reset">
+			<k-login :methods="['password', 'password-reset']" />
+		</k-lab-example>
+	</k-lab-examples>
+</template>

panel/src/components/Forms/Login.vue

@@ -5,7 +5,7 @@
 				v-if="canToggle === true"
 				class="k-login-toggler"
 				type="button"
-				@click="toggleForm"
+				@click="toggle"
 			>
 				{{ toggleText }}
 			</button>
@@ -19,14 +19,15 @@
 			/>
 		</div>
 
-		<div class="k-login-buttons">
-			<span v-if="isResetForm === false" class="k-login-checkbox">
-				<k-checkbox-input
-					:value="user.remember"
-					:label="$t('login.remember')"
-					@input="user.remember = $event"
-				/>
-			</span>
+		<footer class="k-login-buttons">
+			<k-checkbox-input
+				v-if="isResetForm === false"
+				:label="$t('login.remember')"
+				:checked="user.remember"
+				:value="user.remember"
+				@input="user.remember = $event"
+			/>
+
 			<k-button
 				class="k-login-button"
 				icon="check"
@@ -35,10 +36,9 @@
 				type="submit"
 				variant="filled"
 			>
-				{{ $t("login" + (isResetForm ? ".reset" : "")) }}
-				<template v-if="isLoading"> … </template>
+				{{ submitText }}
 			</k-button>
-		</div>
+		</footer>
 	</form>
 </template>
 
@@ -48,12 +48,18 @@ export const props = {
 		/**
 		 * List of available login method names
 		 */
-		methods: Array,
+		methods: {
+			type: Array,
+			default: () => []
+		},
 		/**
 		 * Values to prefill the inputs
-		 * @value { email: String, password: String }
+		 * @value { email: String, password: String, remember: Boolean }
 		 */
-		value: Object
+		value: {
+			type: Object,
+			default: () => ({})
+		}
 	}
 };
 
@@ -62,22 +68,36 @@ export default {
 	emits: ["error"],
 	data() {
 		return {
-			currentForm: null,
+			mode: null,
 			isLoading: false,
 			user: {
-				email: this.value.email ?? "",
-				password: this.value.password ?? "",
-				remember: false
+				email: "",
+				password: "",
+				remember: false,
+				...this.value
 			}
 		};
 	},
 	computed: {
+		alternateMode() {
+			if (this.form === "email-password") {
+				return "email";
+			}
+
+			return "email-password";
+		},
 		canToggle() {
+			if (this.codeMode === null) {
+				return false;
+			}
+
+			if (this.methods.includes("password") === false) {
+				return false;
+			}
+
 			return (
-				this.codeMode !== null &&
-				this.methods.includes("password") === true &&
-				(this.methods.includes("password-reset") === true ||
-					this.methods.includes("code") === true)
+				this.methods.includes("password-reset") === true ||
+				this.methods.includes("code") === true
 			);
 		},
 		codeMode() {
@@ -90,7 +110,7 @@ export default {
 			return null;
 		},
 		fields() {
-			let fields = {
+			const fields = {
 				email: {
 					autofocus: true,
 					label: this.$t("email"),
@@ -114,8 +134,8 @@ export default {
 			return fields;
 		},
 		form() {
-			if (this.currentForm) {
-				return this.currentForm;
+			if (this.mode) {
+				return this.mode;
 			}
 
 			if (this.methods[0] === "password") {
@@ -127,28 +147,30 @@ export default {
 		isResetForm() {
 			return this.codeMode === "password-reset" && this.form === "email";
 		},
+		submitText() {
+			const suffix = this.isLoading ? " …" : "";
+
+			if (this.isResetForm) {
+				return this.$t("login.reset") + suffix;
+			}
+
+			return this.$t("login") + suffix;
+		},
 		toggleText() {
 			return this.$t(
-				"login.toggleText." + this.codeMode + "." + this.formOpposite(this.form)
+				"login.toggleText." + this.codeMode + "." + this.alternateMode
 			);
 		}
 	},
 	methods: {
-		formOpposite(input) {
-			if (input === "email-password") {
-				return "email";
-			} else {
-				return "email-password";
-			}
-		},
 		async login() {
 			this.$emit("error", null);
 			this.isLoading = true;
 
 			// clear field data that is not needed for login
-			let user = Object.assign({}, this.user);
+			const user = { ...this.user };
 
-			if (this.currentForm === "email") {
+			if (this.mode === "email") {
 				user.password = null;
 			}
 
@@ -173,10 +195,35 @@ export default {
 				this.isLoading = false;
 			}
 		},
-		toggleForm() {
-			this.currentForm = this.formOpposite(this.form);
+		toggle() {
+			this.mode = this.alternateMode;
 			this.$refs.fieldset.focus("email");
 		}
 	}
 };
 </script>
+
+<style>
+.k-login-form {
+	position: relative;
+}
+
+.k-login-form label abbr {
+	visibility: hidden;
+}
+
+.k-login-toggler {
+	position: absolute;
+	top: -2px;
+	inset-inline-end: calc(var(--spacing-2) * -1);
+	color: var(--link-color);
+	text-decoration: underline;
+	text-decoration-color: var(--link-color);
+	text-underline-offset: 1px;
+	height: var(--height-xs);
+	line-height: 1;
+	padding-inline: var(--spacing-2);
+	border-radius: var(--rounded);
+	z-index: 1;
+}
+</style>

panel/src/components/Forms/LoginCode.vue

@@ -1,6 +1,6 @@
 <template>
 	<form class="k-login-form k-login-code-form" @submit.prevent="login">
-		<k-user-info :user="pending.email" />
+		<k-user-info v-if="pending.email" :user="pending.email" />
 
 		<k-text-field
 			:autofocus="true"
@@ -17,15 +17,15 @@
 			@input="code = $event"
 		/>
 
-		<div class="k-login-buttons">
+		<footer class="k-login-buttons">
 			<k-button
 				class="k-login-button k-login-back-button"
 				icon="angle-left"
+				link="/logout"
 				size="lg"
 				variant="filled"
-				@click="back"
 			>
-				{{ $t("back") }} <template v-if="isLoadingBack"> … </template>
+				{{ $t("back") }}
 			</k-button>
 
 			<k-button
@@ -36,10 +36,9 @@
 				theme="positive"
 				variant="filled"
 			>
-				{{ $t("login" + (mode === "password-reset" ? ".reset" : "")) }}
-				<template v-if="isLoadingLogin"> … </template>
+				{{ submitText }}
 			</k-button>
-		</div>
+		</footer>
 	</form>
 </template>
 
@@ -49,12 +48,18 @@ export const props = {
 		/**
 		 * List of available login method names
 		 */
-		methods: Array,
+		methods: {
+			type: Array,
+			default: () => []
+		},
 		/**
 		 * Pending login data (user email, challenge type)
 		 * @value { email: String, challenge: String }
 		 */
-		pending: Object,
+		pending: {
+			type: Object,
+			default: () => ({ challenge: "email" })
+		},
 		/**
 		 * Code value to prefill the input
 		 */
@@ -68,27 +73,29 @@ export default {
 	data() {
 		return {
 			code: this.value ?? "",
-			isLoadingBack: false,
-			isLoadingLogin: false
+			isLoading: false
 		};
 	},
 	computed: {
 		mode() {
-			if (this.methods.includes("password-reset") === true) {
-				return "password-reset";
+			return this.methods.includes("password-reset")
+				? "password-reset"
+				: "login";
+		},
+		submitText() {
+			const suffix = this.isLoading ? " …" : "";
+
+			if (this.mode === "password-reset") {
+				return this.$t("login.reset") + suffix;
 			}
 
-			return "login";
+			return this.$t("login") + suffix;
 		}
 	},
 	methods: {
-		async back() {
-			this.isLoadingBack = true;
-			this.$go("/logout");
-		},
 		async login() {
 			this.$emit("error", null);
-			this.isLoadingLogin = true;
+			this.isLoading = true;
 
 			try {
 				await this.$api.auth.verifyCode(this.code);
@@ -106,7 +113,7 @@ export default {
 			} catch (error) {
 				this.$emit("error", error);
 			} finally {
-				this.isLoadingLogin = false;
+				this.isLoading = false;
 			}
 		}
 	}