refactor(editor): Extract auth code into features (no-changelog) (#20644)

packages/frontend/editor-ui/src/components/ConfirmPasswordModal/confirm-password.event-bus.ts

@@ -1,11 +0,0 @@
-import { createEventBus } from '@n8n/utils/event-bus';
-
-export interface ConfirmPasswordClosedEventPayload {
-	currentPassword: string;
-}
-
-export interface ConfirmPasswordModalEvents {
-	close: ConfirmPasswordClosedEventPayload | undefined;
-}
-
-export const confirmPasswordEventBus = createEventBus<ConfirmPasswordModalEvents>();

packages/frontend/editor-ui/src/components/Modals.vue

@@ -55,8 +55,8 @@ import AboutModal from '@/components/AboutModal.vue';
 import ActivationModal from '@/components/ActivationModal.vue';
 import ApiKeyCreateOrEditModal from '@/components/ApiKeyCreateOrEditModal.vue';
 import NewAssistantSessionModal from '@/features/assistant/components/Chat/NewAssistantSessionModal.vue';
-import ChangePasswordModal from '@/components/ChangePasswordModal.vue';
-import ConfirmPasswordModal from '@/components/ConfirmPasswordModal/ConfirmPasswordModal.vue';
+import ChangePasswordModal from '@/features/auth/components/ChangePasswordModal.vue';
+import ConfirmPasswordModal from '@/features/auth/components/ConfirmPasswordModal.vue';
 import ChatEmbedModal from '@/components/ChatEmbedModal.vue';
 import CommunityPackageInstallModal from '@/components/CommunityPackageInstallModal.vue';
 import CommunityPackageManageConfirmModal from '@/components/CommunityPackageManageConfirmModal.vue';
@@ -74,7 +74,7 @@ import FromAiParametersModal from '@/components/FromAiParametersModal.vue';
 import ImportCurlModal from '@/components/ImportCurlModal.vue';
 import ImportWorkflowUrlModal from '@/components/ImportWorkflowUrlModal.vue';
 import InviteUsersModal from '@/components/InviteUsersModal.vue';
-import MfaSetupModal from '@/components/MfaSetupModal.vue';
+import MfaSetupModal from '@/features/auth/components/MfaSetupModal.vue';
 import ModalRoot from '@/components/ModalRoot.vue';
 import NpsSurvey from '@/components/NpsSurvey.vue';
 import PersonalizationModal from '@/components/PersonalizationModal.vue';
@@ -95,7 +95,7 @@ import WorkflowSettings from '@/components/WorkflowSettings.vue';
 import WorkflowShareModal from '@/components/WorkflowShareModal.ee.vue';
 import WorkflowDiffModal from '@/features/workflow-diff/WorkflowDiffModal.vue';
 import type { EventBus } from '@n8n/utils/event-bus';
-import PromptMfaCodeModal from './PromptMfaCodeModal/PromptMfaCodeModal.vue';
+import PromptMfaCodeModal from '@/features/auth/components/PromptMfaCodeModal.vue';
 import DynamicModalLoader from './DynamicModalLoader.vue';
 import NodeRecommendationModalV2 from '@/experiments/templateRecoV2/components/NodeRecommendationModal.vue';
 import NodeRecommendationModalV3 from '@/experiments/personalizedTemplatesV3/components/NodeRecommendationModal.vue';

packages/frontend/editor-ui/src/event-bus/index.ts

@@ -4,5 +4,4 @@ export * from './global-link-actions';
 export * from './html-editor';
 export * from './import-curl';
 export * from './node-view';
-export * from './mfa';
 export * from './ndv';

packages/frontend/editor-ui/src/features/auth/auth.eventBus.ts

@@ -1,5 +1,15 @@
 import { createEventBus } from '@n8n/utils/event-bus';
 
+export interface ConfirmPasswordClosedEventPayload {
+	currentPassword: string;
+}
+
+export interface ConfirmPasswordModalEvents {
+	close: ConfirmPasswordClosedEventPayload | undefined;
+}
+
+export const confirmPasswordEventBus = createEventBus<ConfirmPasswordModalEvents>();
+
 export const mfaEventBus = createEventBus();
 
 export interface MfaModalClosedEventPayload {

packages/frontend/editor-ui/src/features/auth/components/ChangePasswordModal.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing';
-import ChangePasswordModal from '@/components/ChangePasswordModal.vue';
+import ChangePasswordModal from './ChangePasswordModal.vue';
 import type { createPinia } from 'pinia';
 import { createComponentRenderer } from '@/__tests__/render';
 

packages/frontend/editor-ui/src/features/auth/components/ChangePasswordModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useToast } from '@/composables/useToast';
-import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
+import { CHANGE_PASSWORD_MODAL_KEY } from '@/constants';
 import Modal from '@/components/Modal.vue';
 import { useUsersStore } from '@/stores/users.store';
 import { createFormEventBus } from '@n8n/design-system/utils';

packages/frontend/editor-ui/src/features/auth/components/ConfirmPasswordModal.test.ts

@@ -1,12 +1,12 @@
 import { createTestingPinia } from '@pinia/testing';
-import ConfirmPasswordModal from '@/components/ConfirmPasswordModal/ConfirmPasswordModal.vue';
+import ConfirmPasswordModal from './ConfirmPasswordModal.vue';
 import type { createPinia } from 'pinia';
 import { createComponentRenderer } from '@/__tests__/render';
 import userEvent from '@testing-library/user-event';
 import { waitFor } from '@testing-library/vue';
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { CONFIRM_PASSWORD_MODAL_KEY } from '@/constants';
-import { confirmPasswordEventBus } from './confirm-password.event-bus';
+import { confirmPasswordEventBus } from '../auth.eventBus';
 import { STORES } from '@n8n/stores';
 
 const renderModal = createComponentRenderer(ConfirmPasswordModal);

packages/frontend/editor-ui/src/features/auth/components/ConfirmPasswordModal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { CONFIRM_PASSWORD_MODAL_KEY } from '../../constants';
+import { CONFIRM_PASSWORD_MODAL_KEY } from '@/constants';
 import Modal from '@/components/Modal.vue';
 import { createFormEventBus } from '@n8n/design-system/utils';
 import type { IFormInputs, IFormInput, FormValues } from '@/Interface';
 import { useI18n } from '@n8n/i18n';
-import { confirmPasswordEventBus } from './confirm-password.event-bus';
+import { confirmPasswordEventBus } from '../auth.eventBus';
 
 import { N8nButton, N8nFormInputs, N8nText } from '@n8n/design-system';
 const config = ref<IFormInputs | null>(null);

packages/frontend/editor-ui/src/features/auth/components/MfaSetupModal.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import {
 	MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH,
 	MFA_AUTHENTICATION_CODE_WINDOW_EXPIRED,
 	MFA_SETUP_MODAL_KEY,
 	VIEWS,
-} from '../constants';
+} from '@/constants';
 import { ref, onMounted } from 'vue';
 import { useUsersStore } from '@/stores/users.store';
-import { mfaEventBus } from '@/event-bus';
+import { mfaEventBus } from '../auth.eventBus';
 import { useToast } from '@/composables/useToast';
 //@ts-ignore
 import QrcodeVue from 'qrcode.vue';

packages/frontend/editor-ui/src/features/auth/components/PromptMfaCodeModal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import Modal from '../Modal.vue';
+import Modal from '@/components/Modal.vue';
 import { PROMPT_MFA_CODE_MODAL_KEY } from '@/constants';
 import { useI18n } from '@n8n/i18n';
-import { promptMfaCodeBus } from '@/event-bus';
+import { promptMfaCodeBus } from '../auth.eventBus';
 import { type IFormInput } from '@/Interface';
 import { createFormEventBus } from '@n8n/design-system/utils';
 import { validate as validateUuid } from 'uuid';

packages/frontend/editor-ui/src/features/auth/components/__snapshots__/ChangePasswordModal.test.ts.snap

@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ChangePasswordModal > should render correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;

packages/frontend/editor-ui/src/features/auth/views/AuthView.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing';
-import AuthView from '@/views/AuthView.vue';
+import AuthView from './AuthView.vue';
 import { createComponentRenderer } from '@/__tests__/render';
 
 const renderComponent = createComponentRenderer(AuthView, {

packages/frontend/editor-ui/src/features/auth/views/ChangePasswordView.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import AuthView from '@/views/AuthView.vue';
+import AuthView from './AuthView.vue';
 
 import { useI18n } from '@n8n/i18n';
 import { useToast } from '@/composables/useToast';

packages/frontend/editor-ui/src/features/auth/views/ForgotMyPasswordView.test.ts

@@ -2,7 +2,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { mockedStore } from '@/__tests__/utils';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
-import ForgotMyPasswordView from '@/views/ForgotMyPasswordView.vue';
+import ForgotMyPasswordView from './ForgotMyPasswordView.vue';
 import { useToast } from '@/composables/useToast';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';

packages/frontend/editor-ui/src/features/auth/views/MfaView.vue

@@ -6,7 +6,7 @@ import {
 	MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH,
 	MFA_FORM,
 } from '@/constants';
-import { mfaEventBus } from '@/event-bus';
+import { mfaEventBus } from '../auth.eventBus';
 import { onMounted, ref } from 'vue';
 import { useI18n } from '@n8n/i18n';
 import { toRefs } from '@vueuse/core';

packages/frontend/editor-ui/src/features/auth/views/SettingsPersonalView.test.ts

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event';
 import { createPinia } from 'pinia';
 import { waitAllPromises } from '@/__tests__/utils';
-import SettingsPersonalView from '@/views/SettingsPersonalView.vue';
+import SettingsPersonalView from './SettingsPersonalView.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { createComponentRenderer } from '@/__tests__/render';

packages/frontend/editor-ui/src/features/auth/views/SettingsPersonalView.vue

@@ -18,12 +18,12 @@ import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { createFormEventBus } from '@n8n/design-system/utils';
-import type { MfaModalEvents } from '@/event-bus/mfa';
-import { promptMfaCodeBus } from '@/event-bus/mfa';
+import type { MfaModalEvents } from '../auth.eventBus';
+import { promptMfaCodeBus } from '../auth.eventBus';
 import type { BaseTextKey } from '@n8n/i18n';
 import { useSSOStore } from '@/features/sso/sso.store';
-import type { ConfirmPasswordModalEvents } from '@/components/ConfirmPasswordModal/confirm-password.event-bus';
-import { confirmPasswordEventBus } from '@/components/ConfirmPasswordModal/confirm-password.event-bus';
+import type { ConfirmPasswordModalEvents } from '../auth.eventBus';
+import { confirmPasswordEventBus } from '../auth.eventBus';
 
 import {
 	N8nAvatar,

packages/frontend/editor-ui/src/features/auth/views/SetupView.vue

@@ -11,7 +11,7 @@ import { useUsersStore } from '@/stores/users.store';
 import type { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
 
-import AuthView from '@/views/AuthView.vue';
+import AuthView from './AuthView.vue';
 
 const settingsStore = useSettingsStore();
 const usersStore = useUsersStore();

packages/frontend/editor-ui/src/features/auth/views/SigninView.test.ts

@@ -3,7 +3,7 @@ import { mockedStore } from '@/__tests__/utils';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { useRouter, useRoute } from 'vue-router';
-import SigninView from '@/views/SigninView.vue';
+import SigninView from './SigninView.vue';
 import { useUsersStore } from '@/stores/users.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTelemetry } from '@/composables/useTelemetry';

packages/frontend/editor-ui/src/features/auth/views/SignupView.test.ts

@@ -3,7 +3,7 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { useToast } from '@/composables/useToast';
-import SignupView from '@/views/SignupView.vue';
+import SignupView from './SignupView.vue';
 import { VIEWS } from '@/constants';
 import { useUsersStore } from '@/stores/users.store';
 import { mockedStore } from '@/__tests__/utils';

packages/frontend/editor-ui/src/features/auth/views/SignupView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import AuthView from '@/views/AuthView.vue';
+import AuthView from './AuthView.vue';
 import { useToast } from '@/composables/useToast';
 
 import { computed, onMounted, ref } from 'vue';

packages/frontend/editor-ui/src/router.ts

@@ -21,11 +21,12 @@ import { projectsRoutes } from '@/features/projects/projects.routes';
 import { MfaRequiredError } from '@n8n/rest-api-client';
 import { useCalloutHelpers } from './composables/useCalloutHelpers';
 
-const ChangePasswordView = async () => await import('./views/ChangePasswordView.vue');
+const ChangePasswordView = async () => await import('@/features/auth/views/ChangePasswordView.vue');
 const ErrorView = async () => await import('./views/ErrorView.vue');
 const EntityNotFound = async () => await import('./views/EntityNotFound.vue');
 const EntityUnAuthorised = async () => await import('./views/EntityUnAuthorised.vue');
-const ForgotMyPasswordView = async () => await import('./views/ForgotMyPasswordView.vue');
+const ForgotMyPasswordView = async () =>
+	await import('@/features/auth/views/ForgotMyPasswordView.vue');
 const MainHeader = async () => await import('@/components/MainHeader/MainHeader.vue');
 const MainSidebar = async () => await import('@/components/MainSidebar.vue');
 const LogsPanel = async () => await import('@/features/logs/components/LogsPanel.vue');
@@ -38,16 +39,17 @@ const WorkflowExecutionsPreview = async () =>
 	await import('@/components/executions/workflow/WorkflowExecutionsPreview.vue');
 const SettingsView = async () => await import('./views/SettingsView.vue');
 const SettingsLdapView = async () => await import('@/features/sso/views/SettingsLdapView.vue');
-const SettingsPersonalView = async () => await import('./views/SettingsPersonalView.vue');
+const SettingsPersonalView = async () =>
+	await import('@/features/auth/views/SettingsPersonalView.vue');
 const SettingsUsersView = async () => await import('./views/SettingsUsersView.vue');
 const SettingsCommunityNodesView = async () =>
 	await import('./views/SettingsCommunityNodesView.vue');
 const SettingsApiView = async () => await import('./views/SettingsApiView.vue');
 const SettingsLogStreamingView = async () =>
 	await import('@/features/logStreaming.ee/views/SettingsLogStreamingView.vue');
-const SetupView = async () => await import('./views/SetupView.vue');
-const SigninView = async () => await import('./views/SigninView.vue');
-const SignupView = async () => await import('./views/SignupView.vue');
+const SetupView = async () => await import('@/features/auth/views/SetupView.vue');
+const SigninView = async () => await import('@/features/auth/views/SigninView.vue');
+const SignupView = async () => await import('@/features/auth/views/SignupView.vue');
 const TemplatesCollectionView = async () =>
 	await import('@/features/templates/views/TemplatesCollectionView.vue');
 const TemplatesWorkflowView = async () =>
@@ -60,7 +62,7 @@ const VariablesView = async () =>
 	await import('@/features/environments.ee/views/VariablesView.vue');
 const SettingsUsageAndPlan = async () => await import('./views/SettingsUsageAndPlan.vue');
 const SettingsSso = async () => await import('@/features/sso/views/SettingsSso.vue');
-const SignoutView = async () => await import('@/views/SignoutView.vue');
+const SignoutView = async () => await import('@/features/auth/views/SignoutView.vue');
 const SamlOnboarding = async () => await import('@/views/SamlOnboarding.vue');
 const SettingsSourceControl = async () =>
 	await import('@/features/sourceControl.ee/views/SettingsSourceControl.vue');

packages/frontend/editor-ui/src/views/SamlOnboarding.vue

@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import type { IFormBoxConfig } from '@n8n/design-system';
-import AuthView from '@/views/AuthView.vue';
+import AuthView from '@/features/auth/views/AuthView.vue';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@n8n/i18n';
 import { useToast } from '@/composables/useToast';