add confirmation modal to setup

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -220,7 +220,9 @@ export default mixins(Locale).extend({
 		onFocus() {
 			this.$emit('focus');
 		},
-		onEnter() {
+		onEnter(e) {
+			e.stopPropagation();
+			e.preventDefault();
 			this.$emit('enter');
 		},
 	},

packages/editor-ui/src/api/credentials.ts

@@ -16,7 +16,7 @@ export async function getCredentialsNewName(context: IRestApiContext, name?: str
 	return await makeRestApiRequest(context, 'GET', '/credentials/new', name ? { name } : {});
 }
 
-export async function getAllCredentials(context: IRestApiContext): Promise<ICredentialType[]> {
+export async function getAllCredentials(context: IRestApiContext): Promise<ICredentialsResponse[]> {
 	return await makeRestApiRequest(context, 'GET', '/credentials');
 }
 

packages/editor-ui/src/modules/credentials.ts

@@ -129,9 +129,11 @@ const module: Module<ICredentialsState, IRootState> = {
 			const credentialTypes = await getCredentialTypes(context.rootGetters.getRestApiContext);
 			context.commit('setCredentialTypes', credentialTypes);
 		},
-		fetchAllCredentials: async (context: ActionContext<ICredentialsState, IRootState>) => {
+		fetchAllCredentials: async (context: ActionContext<ICredentialsState, IRootState>): Promise<ICredentialsResponse[]> => {
 			const credentials = await getAllCredentials(context.rootGetters.getRestApiContext);
 			context.commit('setCredentials', credentials);
+
+			return credentials;
 		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
 			return await getCredentialData(context.rootGetters.getRestApiContext, id);

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1106,6 +1106,19 @@
 	"auth.role": "Role",
 	"auth.roles.member": "Member",
 	"auth.roles.owner": "Owner",
+	"auth.setup.setupOwner": "Set up owner account",
+	"auth.setup.skipOwnerSetupQuestion": "Skip owner account setup?",
+	"auth.setup.skipSetup": "Skip setup",
+	"auth.setup.goBack": "Go back",
+	"auth.setup.confirmOwnerSetup": "Set up owner account?",
+	"auth.setup.setupConfirmation.oneWorkflowCount": "{count} existing workflow",
+	"auth.setup.setupConfirmation.oneCredentialCount": "{count} credential",
+	"auth.setup.setupConfirmation.workflowsCount": "{count} existing workflows",
+	"auth.setup.setupConfirmation.credentialsCount": "{count} credentials",
+	"auth.setup.setupConfirmation.concatEntities": "{workflows} and {credentials}",
+	"auth.setup.confirmOwnerSetupMessage": "To give others access to your <b>{entities}</b>, you’ll need to share these account details with them. Or you can continue as before with no account, by going back and skipping this setup. <a href=\"https://docs.n8n.io/reference/user-management.html\" target=\"_blank\">More info</a>",
+	"auth.setup.createAccount": "Create account",
+	"auth.setup.skipSetupTemporarily": "Skip setup for now",
 	"auth.setup.next": "Next",
 	"auth.setup.ownerAccountBenefits": "Setting up an owner account allows you to invite others, and prevents people using n8n without an account",
 	"auth.setup.settingUpOwnerError": "Problem setting up owner",
@@ -1141,10 +1154,6 @@
 	"settings.personal.personalSettingsUpdatedError": "Problem updating your details",
 	"settings.personal.save": "Save",
 	"settings.personal.security": "Security",
-	"settings.setup.setupOwner": "Set up owner account",
-	"settings.setup.skipOwnerSetupQuestion": "Skip owner account setup?",
-	"settings.setup.skipSetup": "Skip setup",
-	"settings.setup.skipSetupTemporarily": "Skip setup for now",
 	"settings.signup.signUpInviterInfo": "{firstName} {lastName} has invited you to n8n",
 	"settings.users": "Users",
 	"settings.users.confirmDataHandlingAfterDeletion": "What should we do with their data?",

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

@@ -115,6 +115,9 @@ export default mixins(
 			this.readyToSubmit = ready;
 		},
 		async onSubmit(form: {firstName: string, lastName: string, email: string}) {
+			if (!this.hasAnyChanges) {
+				return;
+			}
 			try {
 				await this.$store.dispatch('users/updateUser', {
 					id: this.currentUser.id,

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

@@ -3,7 +3,7 @@
 		:form="FORM_CONFIG"
 		:formLoading="loading"
 		@submit="onSubmit"
-		@secondaryClick="onSkip"
+		@secondaryClick="showSkipConfirmation"
 	/>
 </template>
 
@@ -14,20 +14,27 @@ import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
+import { restApi } from '@/components/mixins/restApi';
 
 
 export default mixins(
 	showMessage,
+	restApi,
 ).extend({
 	name: 'SetupView',
 	components: {
 		AuthView,
 	},
+	async mounted() {
+		const getAllCredentialsPromise = this.getAllCredentials();
+		const getAllWorkflowsPromise = this.getAllWorkflows();
+		await Promise.all([getAllCredentialsPromise, getAllWorkflowsPromise]);
+	},
 	data() {
 		const FORM_CONFIG: IFormBoxConfig = {
-			title: this.$locale.baseText('settings.setup.setupOwner'),
+			title: this.$locale.baseText('auth.setup.setupOwner'),
 			buttonText: this.$locale.baseText('auth.setup.next'),
-			secondaryButtonText: this.$locale.baseText('settings.setup.skipSetupTemporarily'),
+			secondaryButtonText: this.$locale.baseText('auth.setup.skipSetupTemporarily'),
 			inputs: [
 				{
 					name: 'email',
@@ -78,11 +85,47 @@ export default mixins(
 		return {
 			FORM_CONFIG,
 			loading: false,
+			workflowsCount: 0,
+			credentialsCount: 0,
 		};
 	},
 	methods: {
+		async getAllCredentials() {
+			const credentials = await this.$store.dispatch('credentials/fetchAllCredentials');
+			this.credentialsCount = credentials.length;
+		},
+		async getAllWorkflows() {
+			const workflows = await this.restApi().getWorkflows();
+			this.workflowsCount = workflows.length;
+		},
+		async confirmSetupOrGoBack(): Promise<boolean> {
+			if (this.workflowsCount === 0 && this.credentialsCount === 0) {
+				return true;
+			}
+
+			const workflows = this.workflowsCount > 0 ? this.$locale.baseText(this.workflowsCount === 1 ? 'auth.setup.setupConfirmation.oneWorkflowCount' : 'auth.setup.setupConfirmation.workflowsCount', { interpolate: { count: this.workflowsCount } }) : '';
+			const credentials = this.credentialsCount > 0 ? this.$locale.baseText(this.credentialsCount === 1? 'auth.setup.setupConfirmation.oneCredentialCount' : 'auth.setup.setupConfirmation.credentialsCount', { interpolate: { count: this.credentialsCount } }) : '';
+
+			const entities = workflows && credentials ? this.$locale.baseText('auth.setup.setupConfirmation.concatEntities', {interpolate: { workflows, credentials }}) : (workflows || credentials);
+			return await this.confirmMessage(
+				this.$locale.baseText('auth.setup.confirmOwnerSetupMessage', {
+					interpolate: {
+						entities,
+					},
+				}),
+				this.$locale.baseText('auth.setup.confirmOwnerSetup'),
+				null,
+				this.$locale.baseText('auth.setup.createAccount'),
+				this.$locale.baseText('auth.setup.goBack'),
+			);
+		},
 		async onSubmit(values: {[key: string]: string}) {
 			try {
+				const confirmSetup = await this.confirmSetupOrGoBack();
+				if (!confirmSetup) {
+					return;
+				}
+
 				const forceRedirectedHere = this.$store.getters['settings/showSetupPage'];
 				this.loading = true;
 				await this.$store.dispatch('users/createOwner', values);
@@ -98,21 +141,24 @@ export default mixins(
 			}
 			this.loading = false;
 		},
-		async onSkip() {
+		async showSkipConfirmation() {
 			const skip = await this.confirmMessage(
 				this.$locale.baseText('auth.setup.ownerAccountBenefits'),
-				this.$locale.baseText('settings.setup.skipOwnerSetupQuestion'),
+				this.$locale.baseText('auth.setup.skipOwnerSetupQuestion'),
 				null,
-				this.$locale.baseText('settings.setup.skipSetup'),
-				this.$locale.baseText('settings.goBack'),
+				this.$locale.baseText('auth.setup.skipSetup'),
+				this.$locale.baseText('auth.setup.goBack'),
 			);
 			if (skip) {
-				this.$store.dispatch('users/skipOwnerSetup');
-				this.$router.push({
-					name: VIEWS.HOMEPAGE,
-				});
+				this.onSkip();
 			}
 		},
+		onSkip() {
+			this.$store.dispatch('users/skipOwnerSetup');
+			this.$router.push({
+				name: VIEWS.HOMEPAGE,
+			});
+		},
 	},
 });
 </script>