🐛 Um/fixes (#2952)

* add initials to avatar

* redirect to signin if invalid token

* update pluralization

* add auth page category

* data transferred

* touch up setup page

* update button to add cursor

* fix personalization modal not closing

packages/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<div :class="$style.description">
 			<component :is="$options.components.N8nHeading" size="xlarge" align="center">{{ props.heading }}</component>
-			<slot></slot>
+			<n8n-text color="text-base"><span v-html="props.description"></span></n8n-text>
 		</div>
 		<component :is="$options.components.N8nButton" :label="props.buttonText" size="large"
 			@click="(e) => listeners.click && listeners.click(e)"
@@ -24,6 +24,9 @@ export default {
 		buttonText: {
 			type: String,
 		},
+		description: {
+			type: String,
+		},
 	},
 	components: {
 		N8nButton,
@@ -56,7 +59,7 @@ export default {
 	flex-direction: column;
 
 	> *:first-child {
-		margin-bottom: var(--spacing-2xs);
+		margin-bottom: var(--spacing-xs);
 	}
 }
 </style>

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -59,6 +59,7 @@ export default {
 }
 
 .button {
+	cursor: pointer;
 	padding: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
 	color: var(--color-text-dark);

packages/design-system/src/components/N8nAvatar/Avatar.vue

@@ -1,10 +1,10 @@
 <template functional>
 	<span :class="$style.container">
 		<component
-			v-if="props.name"
+			v-if="props.firstName"
 			:is="$options.components.Avatar"
 			:size="$options.methods.getSize(props.size)"
-			:name="props.name"
+			:name="props.firstName + ' ' + props.lastName"
 			variant="marble"
 			:colors="$options.methods.getColors(props.colors)"
 		/>
@@ -13,6 +13,7 @@
 			:class="$style.empty"
 			:style="$options.methods.getBlankStyles(props.size)">
 		</div>
+		<span v-if="props.firstName" :class="$style.initials">{{$options.methods.getInitials(props)}}</span>
 	</span>
 </template>
 
@@ -28,7 +29,10 @@ const sizes: {[size: string]: number} = {
 export default {
 	name: 'n8n-avatar',
 	props: {
-		name: {
+		firstName: {
+			type: String,
+		},
+		lastName: {
 			type: String,
 		},
 		size: {
@@ -43,6 +47,9 @@ export default {
 		Avatar,
 	},
 	methods: {
+		getInitials({firstName, lastName}) {
+			return firstName.charAt(0) + lastName.charAt(0);
+		},
 		getBlankStyles(size): {height: string, width: string} {
 			const px = sizes[size];
 			return { height: `${px}px`, width: `${px}px` };
@@ -60,12 +67,23 @@ export default {
 
 <style lang="scss" module>
 .container {
+	position: relative;
 	display: inline-flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .empty {
 	border-radius: 50%;
 	background-color: var(--color-foreground-dark);
 	opacity: .3;
 }
+
+.initials {
+	position: absolute;
+	font-size: var(--font-size-2xs);
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-xlight);
+	text-shadow: 0px 1px 6px rgba(25, 11, 9, 0.2);
+}
 </style>

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

@@ -99,7 +99,9 @@ export default Vue.extend({
 			this.showValidationWarnings = true;
 			if (this.isReadyToSubmit) {
 				const toSubmit = this.filteredInputs.reduce((accu, input: IFormInput) => {
-					accu[input.name] = this.values[input.name];
+					if (this.values[input.name]) {
+						accu[input.name] = this.values[input.name];
+					}
 					return accu;
 				}, {});
 				this.$emit('submit', toSubmit);

packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js

@@ -19,13 +19,15 @@ const Template = (args, { argTypes }) => ({
 
 export const Member = Template.bind({});
 Member.args = {
-	fullName: "M A",
+	firstName: 'Oscar',
+	lastName: 'Wilde',
 	email: 'test@n8n.io',
 };
 
 export const Current = Template.bind({});
 Current.args = {
-	fullName: "M A",
+	firstName: 'Ham',
+	lastName: 'Sam',
 	email: 'test@n8n.io',
 	isCurrentUser: true,
 };

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

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container">
 		<div :class="$style.avatarContainer">
-			<n8n-avatar :name="fullName" />
+			<n8n-avatar :firstName="firstName" :lastName="lastName" />
 		</div>
 
 		<div v-if="isPendingUser" :class="$style.pendingUser">
@@ -10,7 +10,7 @@
 		</div>
 		<div v-else :class="$style.infoContainer">
 			<div>
-				<n8n-text :bold="true">{{fullName}} {{isCurrentUser ? '(you)' : ''}}</n8n-text>
+				<n8n-text :bold="true">{{firstName}} {{lastName}} {{isCurrentUser ? '(you)' : ''}}</n8n-text>
 			</div>
 			<div>
 				<n8n-text size="small" color="text-light">{{email}}</n8n-text>
@@ -34,7 +34,10 @@ export default Vue.extend({
 		N8nBadge,
 	},
 	props: {
-		fullName: {
+		firstName: {
+			type: String,
+		},
+		lastName: {
 			type: String,
 		},
 		email: {

packages/editor-ui/src/components/MainSidebar.vue

@@ -148,7 +148,7 @@
 					<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle" v-if="canUserAccessSidebarUserInfo && currentUser">
 						<n8n-menu-item class="user">
 							<div class="avatar">
-								<n8n-avatar :name="currentUser.fullName" size="small" />
+								<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
 							</div>
 							<span slot="title" class="item-title-root" v-if="!isCollapsed">
 								{{currentUser.fullName}}

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

@@ -1122,7 +1122,7 @@
 	"INVITE_NEW_USERS": "Invite new users",
 	"INVITE_RESENT": "Invite resent",
 	"INVITE_USER": "Invite user",
-	"INVITE_X_USER": "Invite {count} user",
+	"INVITE_X_USER": "Invite {count} users",
 	"LAST_NAME": "Last name",
 	"LOADING": "Loading",
 	"LOGIN_ERROR": "Problem logging in",
@@ -1163,8 +1163,7 @@
 	"SET_UP_MY_ACCOUNT": "Set up my owner account",
 	"SET_UP_OWNER": "Set up owner account",
 	"SET_UP_TO_INVITE_USERS": "To invite users, set up your own account",
-	"SET_UP_TO_INVITE_USERS_WARNING": "Invited users won’t be able to see workflows and credentials of other users. (As the owner of n8n, you will be able to see them though) <a href=\"https://docs.n8n.io/reference/user-management\" target=\"_blank\">More info</a>",
-	"SET_UP_SMTP_TO_COMPLETE_SETUP": "You will need details of an <a href=\"https://docs.n8n.io/reference/user-management#smtp\" target=\"_blank\">SMTP server</a> to complete the setup.",
+	"SET_UP_TO_INVITE_USERS_INFO": "Invited users won’t be able to see workflows and credentials of other users. <a href=\"https://docs.n8n.io/reference/user-management\" target=\"_blank\">More info</a> <br /> You will need details of an <a href=\"https://docs.n8n.io/reference/user-management#smtp\" target=\"_blank\">SMTP server</a> to complete the setup.",
 	"SIGN_IN": "Sign in",
 	"SIGN_OUT": "Sign out",
 	"SIGN_OUT_ERROR": "Could not sign out",
@@ -1175,7 +1174,7 @@
 	"SMTP_ERROR_CONTACT_ADMINISTRATOR": "Please contact your administrator (problem with your SMTP setup)",
 	"SMTP_TO_ADD_USERS_WARNING": "Set up SMTP before adding users (so that n8n can send them invitation emails). <a target=\"_blank\" href=\"https://docs.n8n.io/reference/user-management#smtp\">Instructions</a>",
 	"TOKEN_VALIDATION_ERROR": "Issue validating invite token",
-	"TRANSFERRED_TO_USER": "Transferred to {user}",
+	"TRANSFERRED_TO_USER": "Data transferred to {user}",
 	"TRANSFER_WORKFLOWS_AND_CREDENTIALS": "Transfer their workflows and credentials to another user",
 	"USERS": "Users",
 	"USERS_INVITED_ERROR": "Could not invite users",

packages/editor-ui/src/router.ts

@@ -171,34 +171,59 @@ const router = new Router({
 			components: {
 				default: SigninView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/signup',
 			name: 'SignupView',
 			components: {
 				default: SignupView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/setup',
 			name: 'SetupView',
 			components: {
 				default: SetupView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/forgot-password',
 			name: 'ForgotMyPasswordView',
 			components: {
 				default: ForgotMyPasswordView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/change-password',
 			name: 'ChangePasswordView',
 			components: {
 				default: ChangePasswordView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/settings',

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

@@ -7,7 +7,7 @@
 					<span :class="$style.username">
 						<n8n-text  color="text-light">{{currentUser.fullName}}</n8n-text>
 					</span>
-					<n8n-avatar :name="currentUser.fullName" size="large" />
+					<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="large" />
 				</div>
 			</div>
 			<div>

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

@@ -16,15 +16,9 @@
 				<n8n-action-box
 					:heading="$locale.baseText('SET_UP_TO_INVITE_USERS')"
 					:buttonText="$locale.baseText('SET_UP_MY_ACCOUNT')"
+					:description="$locale.baseText('SET_UP_TO_INVITE_USERS_INFO')"
 					@click="redirectToSetup"
-				>
-					<n8n-text color="text-base">
-						<ul>
-							<li v-html="$locale.baseText('SET_UP_TO_INVITE_USERS_WARNING')"></li>
-							<li v-html="$locale.baseText('SET_UP_SMTP_TO_COMPLETE_SETUP')"></li>
-						</ul>
-					</n8n-text>
-				</n8n-action-box>
+				/>
 			</div>
 			<div :class="$style.usersContainer" v-else>
 				<PageAlert

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

@@ -75,6 +75,7 @@ export default mixins(
 			this.inviter = invite.inviter as {firstName: string, lastName: string};
 		} catch (e) {
 			this.$showError(e, this.$locale.baseText('TOKEN_VALIDATION_ERROR'));
+			this.$router.replace({name: 'SigninView'});
 		}
 	},
 	computed: {