feat(editor): SSO onboarding (#5756)

* feat(editor): SSO onboarding

* fix(editor): add SAML onboarding page

* fix(editor): submit user name on SAML onboarding

packages/cli/src/sso/saml/constants.ts

@@ -21,7 +21,7 @@ export class SamlUrls {
 
 	static readonly defaultRedirect = '/';
 
-	static readonly samlOnboarding = '/settings/personal'; // TODO:SAML: implement signup page
+	static readonly samlOnboarding = '/saml/onboarding';
 }
 
 export const SAML_PREFERENCES_DB_KEY = 'features.saml';

packages/editor-ui/src/constants.ts

@@ -389,6 +389,7 @@ export enum VIEWS {
 	USAGE = 'Usage',
 	LOG_STREAMING_SETTINGS = 'LogStreamingSettingsView',
 	SSO_SETTINGS = 'SSoSettings',
+	SAML_ONBOARDING = 'SamlOnboarding',
 }
 
 export enum FAKE_DOOR_FEATURES {

packages/editor-ui/src/router.ts

@@ -38,6 +38,7 @@ import { useSSOStore } from './stores/sso';
 import SettingsUsageAndPlanVue from './views/SettingsUsageAndPlan.vue';
 import SettingsSso from './views/SettingsSso.vue';
 import SignoutView from '@/views/SignoutView.vue';
+import SamlOnboarding from '@/views/SamlOnboarding.vue';
 
 Vue.use(Router);
 
@@ -670,6 +671,34 @@ export const routes = [
 			},
 		],
 	},
+	{
+		path: '/saml/onboarding',
+		name: VIEWS.SAML_ONBOARDING,
+		components: {
+			default: SamlOnboarding,
+		},
+		meta: {
+			telemetry: {
+				pageCategory: 'auth',
+			},
+			permissions: {
+				allow: {
+					loginStatus: [LOGIN_STATUS.LoggedIn],
+				},
+				deny: {
+					shouldDeny: () => {
+						const settingsStore = useSettingsStore();
+						const ssoStore = useSSOStore();
+						return (
+							!ssoStore.isEnterpriseSamlEnabled ||
+							settingsStore.isCloudDeployment ||
+							settingsStore.isDesktopDeployment
+						);
+					},
+				},
+			},
+		},
+	},
 	{
 		path: '*',
 		name: VIEWS.NOT_FOUND,

packages/editor-ui/src/stores/sso.ts

@@ -5,10 +5,13 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useSettingsStore } from '@/stores/settings';
 import * as ssoApi from '@/api/sso';
 import { SamlPreferences } from '@/Interface';
+import { updateCurrentUser } from '@/api/users';
+import { useUsersStore } from '@/stores/users';
 
 export const useSSOStore = defineStore('sso', () => {
 	const rootStore = useRootStore();
 	const settingsStore = useSettingsStore();
+	const usersStore = useUsersStore();
 
 	const state = reactive({
 		loading: false,
@@ -58,6 +61,13 @@ export const useSSOStore = defineStore('sso', () => {
 		ssoApi.saveSamlConfig(rootStore.getRestApiContext, config);
 	const testSamlConfig = () => ssoApi.testSamlConfig(rootStore.getRestApiContext);
 
+	const updateUser = async (params: { firstName: string; lastName: string }) =>
+		updateCurrentUser(rootStore.getRestApiContext, {
+			id: usersStore.currentUser!.id,
+			email: usersStore.currentUser!.email!,
+			...params,
+		});
+
 	return {
 		isLoading,
 		setLoading,
@@ -69,5 +79,6 @@ export const useSSOStore = defineStore('sso', () => {
 		getSamlConfig,
 		saveSamlConfig,
 		testSamlConfig,
+		updateUser,
 	};
 });

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

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { IFormBoxConfig } from 'n8n-design-system';
+import AuthView from '@/views/AuthView.vue';
+import { i18n as locale } from '@/plugins/i18n';
+import { useSSOStore } from '@/stores/sso';
+
+const ssoStore = useSSOStore();
+
+const loading = ref(false);
+const FORM_CONFIG: IFormBoxConfig = reactive({
+	title: locale.baseText('auth.signup.setupYourAccount'),
+	buttonText: locale.baseText('auth.signup.finishAccountSetup'),
+	inputs: [
+		{
+			name: 'firstName',
+			properties: {
+				label: locale.baseText('auth.firstName'),
+				maxlength: 32,
+				required: true,
+				autocomplete: 'given-name',
+				capitalize: true,
+			},
+		},
+		{
+			name: 'lastName',
+			properties: {
+				label: locale.baseText('auth.lastName'),
+				maxlength: 32,
+				required: true,
+				autocomplete: 'family-name',
+				capitalize: true,
+			},
+		},
+	],
+});
+const onSubmit = (values: { firstName: string; lastName: string }) => {
+	ssoStore.updateUser(values);
+};
+</script>
+
+<template>
+	<AuthView :form="FORM_CONFIG" :formLoading="loading" @submit="onSubmit" />
+</template>