Move all login components into same location

panel/lab/components/login/1_login-form/index.php

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

panel/lab/components/login/login/index.vue → panel/lab/components/login/1_login-form/index.vue

@@ -1,13 +1,13 @@
 <template>
 	<k-lab-examples>
 		<k-lab-example label="Default">
-			<k-login />
+			<k-login-form />
 		</k-lab-example>
 		<k-lab-example label="With password">
-			<k-login :methods="['password']" />
+			<k-login-form :methods="['password']" />
 		</k-lab-example>
 		<k-lab-example label="Prefilled">
-			<k-login
+			<k-login-form
 				:methods="['password']"
 				:value="{
 					email: 'homer@simpson.com',
@@ -17,10 +17,10 @@
 			/>
 		</k-lab-example>
 		<k-lab-example label="Toggle between login methods">
-			<k-login :methods="['password', 'code']" />
+			<k-login-form :methods="['password', 'code']" />
 		</k-lab-example>
 		<k-lab-example label="Password reset">
-			<k-login :methods="['password', 'password-reset']" />
+			<k-login-form :methods="['password', 'password-reset']" />
 		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/lab/components/login/2_login-code-form/index.php

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

panel/lab/components/login/login-code/index.vue → panel/lab/components/login/2_login-code-form/index.vue

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

panel/src/components/Forms/index.js

@@ -6,13 +6,8 @@ import FormButtons from "./FormButtons.vue";
 import Field from "./Field.vue";
 import Fieldset from "./Fieldset.vue";
 import Input from "./Input.vue";
-import Login from "./Login.vue";
-import LoginCode from "./LoginCode.vue";
 import Upload from "./Upload.vue";
 
-/** Form Helpers */
-import LoginAlert from "./LoginAlert.vue";
-
 /* Form parts */
 import Blocks from "./Blocks/index.js";
 import Fields from "./Field/index.js";
@@ -31,12 +26,8 @@ export default {
 		app.component("k-field", Field);
 		app.component("k-fieldset", Fieldset);
 		app.component("k-input", Input);
-		app.component("k-login", Login);
-		app.component("k-login-code", LoginCode);
 		app.component("k-upload", Upload);
 
-		app.component("k-login-alert", LoginAlert);
-
 		app.use(Blocks);
 		app.use(Inputs);
 		app.use(Fields);

panel/src/components/Views/Login/LoginView.vue

@@ -13,7 +13,7 @@
 			</k-login-alert>
 
 			<k-dialog-body>
-				<k-login-code
+				<k-login-code-form
 					v-if="form === 'code'"
 					v-bind="{ methods, pending, value: value.code }"
 					@error="onError"
@@ -30,17 +30,17 @@
 </template>
 
 <script>
-import { props as LoginCodeProps } from "@/components/Forms/LoginCode.vue";
-import { props as LoginProps } from "@/components/Forms/Login.vue";
+import { props as LoginCodeFormProps } from "./LoginCodeForm.vue";
+import { props as LoginFormProps } from "./LoginForm.vue";
 
 /**
  * @internal
  */
 export default {
 	components: {
-		"k-login-plugin": window.panel.plugins.login
+		"k-login-plugin-form": window.panel.plugins.login
 	},
-	mixins: [LoginCodeProps, LoginProps],
+	mixins: [LoginCodeFormProps, LoginFormProps],
 	props: {
 		/**
 		 * Values to prefill the inputs
@@ -61,7 +61,9 @@ export default {
 	},
 	computed: {
 		component() {
-			return window.panel.plugins.login ? "k-login-plugin" : "k-login";
+			return window.panel.plugins.login
+				? "k-login-plugin-form"
+				: "k-login-form";
 		},
 		form() {
 			return this.pending.email ? "code" : "login";

panel/src/components/Views/Login/index.js

@@ -0,0 +1,28 @@
+import LoginView from "./LoginView.vue";
+
+import LoginForm from "./LoginForm.vue";
+import LoginAlert from "./LoginAlert.vue";
+import LoginCodeForm from "./LoginCodeForm.vue";
+
+import InstallationView from "./InstallationView.vue";
+import ResetPasswordView from "./ResetPasswordView.vue";
+
+import UserInfo from "./UserInfo.vue";
+
+export default {
+	install(app) {
+		app.component("k-login-view", LoginView);
+		app.component("k-login-form", LoginForm);
+		app.component("k-login-code-form", LoginCodeForm);
+		app.component("k-login-alert", LoginAlert);
+
+		app.component("k-installation-view", InstallationView);
+		app.component("k-reset-password-view", ResetPasswordView);
+
+		app.component("k-user-info", UserInfo);
+
+		/** deprecated */
+		app.component("k-login", LoginForm);
+		app.component("k-login-code", LoginCodeForm);
+	}
+};

panel/src/components/Views/index.js

@@ -8,10 +8,7 @@ import FileFocusButton from "./Files/FileFocusButton.vue";
 import LanguagesView from "./Languages/LanguagesView.vue";
 import LanguageView from "./Languages/LanguageView.vue";
 
-import LoginView from "./Login/LoginView.vue";
-import InstallationView from "./Login/InstallationView.vue";
-import ResetPasswordView from "./Login/ResetPasswordView.vue";
-import UserInfo from "./Login/UserInfo.vue";
+import Login from "./Login/index.js";
 
 import PageView from "./Pages/PageView.vue";
 import SiteView from "./Pages/SiteView.vue";
@@ -39,10 +36,7 @@ export default {
 		app.component("k-languages-view", LanguagesView);
 		app.component("k-language-view", LanguageView);
 
-		app.component("k-login-view", LoginView);
-		app.component("k-installation-view", InstallationView);
-		app.component("k-reset-password-view", ResetPasswordView);
-		app.component("k-user-info", UserInfo);
+		app.use(Login);
 
 		app.component("k-page-view", PageView);
 		app.component("k-site-view", SiteView);