feat(core): Add LDAP support (#3835)

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

@@ -6,6 +6,23 @@
 		@focus="onFocus"
 		ref="inputRef"
 	/>
+	<n8n-input-label
+		v-else-if="type === 'toggle'"
+		:inputName="name"
+		:label="label"
+		:tooltipText="tooltipText"
+		:required="required && showRequiredAsterisk"
+	>
+		<template #content>
+			{{ tooltipText }}
+		</template>
+		<el-switch
+			:value="value"
+			@change="onInput"
+			:active-color="activeColor"
+			:inactive-color="inactiveColor"
+		></el-switch>
+	</n8n-input-label>
 	<n8n-input-label
 		v-else
 		:inputName="name"
@@ -20,6 +37,7 @@
 				:value="value"
 				:placeholder="placeholder"
 				:multiple="type === 'multi-select'"
+				:disabled="disabled"
 				@change="onInput"
 				@focus="onFocus"
 				@blur="onBlur"
@@ -41,6 +59,7 @@
 				:value="value"
 				:maxlength="maxlength"
 				:autocomplete="autocomplete"
+				:disabled="disabled"
 				@input="onInput"
 				@blur="onBlur"
 				@focus="onFocus"
@@ -73,6 +92,7 @@ import N8nSelect from '../N8nSelect';
 import N8nOption from '../N8nOption';
 import N8nInputLabel from '../N8nInputLabel';
 import N8nCheckbox from '../N8nCheckbox';
+import ElSwitch from 'element-ui/lib/switch';
 
 import { getValidationError, VALIDATORS } from './validators';
 import { Rule, RuleGroup, IValidator, Validatable, FormState } from '../../types';
@@ -100,6 +120,11 @@ export interface Props {
 	name?: string;
 	focusInitially?: boolean;
 	labelSize?: 'small' | 'medium';
+	disabled?: boolean;
+	activeLabel?: string;
+	activeColor?: string;
+	inactiveLabel?: string;
+	inactiveColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {

packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts

@@ -27,6 +27,7 @@ const Template: StoryFn = (args, { argTypes }) => ({
 
 export const FormInputs = Template.bind({});
 FormInputs.args = {
+	columnView: true,
 	inputs: [
 		{
 			name: 'email',
@@ -79,5 +80,15 @@ FormInputs.args = {
 				tooltipText: 'Check this if you agree to be contacted by our marketing team',
 			},
 		},
+		{
+			name: 'activate',
+			properties: {
+				type: 'toggle',
+				label: 'Activated',
+				activeColor: '#13ce66',
+				inactiveColor: '#8899AA',
+				tooltipText: 'Check this if you agree to be contacted by our marketing team',
+			},
+		},
 	],
 };

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -2,12 +2,18 @@
 	<ResizeObserver :breakpoints="[{ bp: 'md', width: 500 }]">
 		<template #default="{ bp }">
 			<div :class="bp === 'md' || columnView ? $style.grid : $style.gridMulti">
-				<div v-for="input in filteredInputs" :key="input.name">
+				<div
+					v-for="(input, index) in filteredInputs"
+					:key="input.name"
+					:class="{ [`mt-${verticalSpacing}`]: index > 0 }"
+				>
 					<n8n-text
 						color="text-base"
 						v-if="input.properties.type === 'info'"
 						tag="div"
-						align="center"
+						:size="input.properties.labelSize"
+						:align="input.properties.labelAlignment"
+						class="form-text"
 					>
 						{{ input.properties.label }}
 					</n8n-text>
@@ -15,11 +21,13 @@
 						v-else
 						v-bind="input.properties"
 						:name="input.name"
+						:label="input.properties.label || ''"
 						:value="values[input.name]"
 						:data-test-id="input.name"
 						:showValidationWarnings="showValidationWarnings"
 						@input="(value) => onInput(input.name, value)"
 						@validate="(value) => onValidate(input.name, value)"
+						@change="(value) => onInput(input.name, value)"
 						@enter="onSubmit"
 					/>
 				</div>
@@ -52,6 +60,12 @@ export default Vue.extend({
 		},
 		columnView: {
 			type: Boolean,
+			default: false,
+		},
+		verticalSpacing: {
+			type: String,
+			required: false,
+			validator: (value: string): boolean => ['xs', 's', 'm', 'm', 'l', 'xl'].includes(value),
 		},
 	},
 	data() {

packages/design-system/src/components/N8nUserInfo/UserInfo.vue

@@ -10,14 +10,22 @@
 		</div>
 		<div v-else :class="$style.infoContainer">
 			<div>
-				<n8n-text :bold="true" color="text-dark"
-					>{{ firstName }} {{ lastName }}
-					{{ isCurrentUser ? this.t('nds.userInfo.you') : '' }}</n8n-text
-				>
+				<n8n-text :bold="true" color="text-dark">
+					{{ firstName }} {{ lastName }}
+					{{ isCurrentUser ? this.t('nds.userInfo.you') : '' }}
+				</n8n-text>
+				<span v-if="disabled" :class="$style.pendingBadge">
+					<n8n-badge :bold="true">Disabled</n8n-badge>
+				</span>
 			</div>
 			<div>
 				<n8n-text size="small" color="text-light">{{ email }}</n8n-text>
 			</div>
+			<div v-if="!isOwner">
+				<n8n-text v-if="signInType" size="small" color="text-light">
+					Sign-in type: {{ signInType }}
+				</n8n-text>
+			</div>
 		</div>
 	</div>
 </template>
@@ -47,6 +55,9 @@ export default mixins(Locale).extend({
 		email: {
 			type: String,
 		},
+		isOwner: {
+			type: Boolean,
+		},
 		isPendingUser: {
 			type: Boolean,
 		},
@@ -55,7 +66,10 @@ export default mixins(Locale).extend({
 		},
 		disabled: {
 			type: Boolean,
-			default: false,
+		},
+		signInType: {
+			type: String,
+			required: false,
 		},
 	},
 	computed: {

packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts

@@ -40,28 +40,16 @@ UserSelect.args = {
 			firstName: 'Sunny',
 			lastName: 'Side',
 			email: 'sunny@n8n.io',
-			globalRole: {
-				name: 'owner',
-				id: '1',
-			},
 		},
 		{
 			id: '2',
 			firstName: 'Kobi',
 			lastName: 'Dog',
 			email: 'kobi@n8n.io',
-			globalRole: {
-				name: 'member',
-				id: '2',
-			},
 		},
 		{
 			id: '3',
 			email: 'invited@n8n.io',
-			globalRole: {
-				name: 'member',
-				id: '2',
-			},
 		},
 	],
 	placeholder: 'Select user to transfer to',

packages/design-system/src/components/N8nUsersList/UsersList.stories.ts

@@ -50,10 +50,8 @@ UsersList.args = {
 			isDefaultUser: false,
 			isPendingUser: false,
 			isOwner: true,
-			globalRole: {
-				name: 'owner',
-				id: 1,
-			},
+			signInType: 'email',
+			disabled: false,
 		},
 		{
 			id: '2',
@@ -64,10 +62,8 @@ UsersList.args = {
 			isDefaultUser: false,
 			isPendingUser: false,
 			isOwner: false,
-			globalRole: {
-				name: 'member',
-				id: '2',
-			},
+			signInType: 'ldap',
+			disabled: true,
 		},
 		{
 			id: '3',
@@ -75,10 +71,6 @@ UsersList.args = {
 			isDefaultUser: false,
 			isPendingUser: true,
 			isOwner: false,
-			globalRole: {
-				name: 'member',
-				id: '2',
-			},
 		},
 	],
 	currentUserId: '1',

packages/design-system/src/components/N8nUsersList/UsersList.vue

@@ -13,7 +13,13 @@
 				</n8n-badge>
 				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
 				<n8n-action-toggle
-					v-if="!user.isOwner && !readonly && getActions(user).length > 0 && actions.length > 0"
+					v-if="
+						!user.isOwner &&
+						user.signInType !== 'ldap' &&
+						!readonly &&
+						getActions(user).length > 0 &&
+						actions.length > 0
+					"
 					placement="bottom"
 					:actions="getActions(user)"
 					theme="dark"

packages/design-system/src/types/form.ts

@@ -24,7 +24,16 @@ export type IFormInput = {
 	initialValue?: string | number | boolean | null;
 	properties: {
 		label?: string;
-		type?: 'text' | 'email' | 'password' | 'select' | 'multi-select' | 'info' | 'checkbox';
+		type?:
+			| 'text'
+			| 'email'
+			| 'password'
+			| 'select'
+			| 'multi-select'
+			| 'number'
+			| 'info'
+			| 'checkbox'
+			| 'toggle';
 		maxlength?: number;
 		required?: boolean;
 		showRequiredAsterisk?: boolean;
@@ -45,6 +54,9 @@ export type IFormInput = {
 			| 'email'; // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
 		capitalize?: boolean;
 		focusInitially?: boolean;
+		disabled?: boolean;
+		labelSize?: 'small' | 'medium' | 'large';
+		labelAlignment?: 'left' | 'right' | 'center';
 	};
 	shouldDisplay?: (values: { [key: string]: unknown }) => boolean;
 };

packages/design-system/src/types/user.ts

@@ -7,6 +7,8 @@ export interface IUser {
 	isOwner: boolean;
 	isPendingUser: boolean;
 	inviteAcceptUrl?: string;
+	disabled: boolean;
+	signInType: string;
 }
 
 export interface IUserListAction {