From 81b93e974bc6a5e9996d356b0311df7a053993ff Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Wed, 9 Mar 2022 12:59:42 +0300
Subject: [PATCH] :bug: 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
---
 .../src/components/N8nActionBox/ActionBox.vue |  7 ++++--
 .../N8nActionToggle/ActionToggle.vue          |  1 +
 .../src/components/N8nAvatar/Avatar.vue       | 24 +++++++++++++++---
 .../components/N8nFormInputs/FormInputs.vue   |  4 ++-
 .../N8nUserInfo/UserInfo.stories.js           |  6 +++--
 .../src/components/N8nUserInfo/UserInfo.vue   |  9 ++++---
 .../editor-ui/src/components/MainSidebar.vue  |  2 +-
 .../src/plugins/i18n/locales/en.json          |  7 +++---
 packages/editor-ui/src/router.ts              | 25 +++++++++++++++++++
 .../src/views/SettingsPersonalView.vue        |  2 +-
 .../editor-ui/src/views/SettingsUsersView.vue | 10 ++------
 packages/editor-ui/src/views/SignupView.vue   |  1 +
 12 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
index 7aa6e57a7cb0e..032b2bb385ea3 100644
--- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/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>
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 3a617ef2fd956..c73f324309495 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/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);
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index 3983fa263ce6c..122d7c159f876 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/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,7 +67,10 @@ export default {
 
 <style lang="scss" module>
 .container {
+	position: relative;
 	display: inline-flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .empty {
@@ -68,4 +78,12 @@ export default {
 	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>
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index 897daa99e06b8..c721f0067799a 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/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);
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js
index 927d02458c780..53ee48deb4c6f 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.js
+++ b/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,
 };
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index f819e49e618ed..12bcc800a9edd 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/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: {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 467f58961a02c..c04f2a477ff3d 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/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}}
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 05a27fb7210ad..325e14de06c29 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/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",
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 8aeab6dff6537..c4eef0af3e4ef 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -171,6 +171,11 @@ const router = new Router({
 			components: {
 				default: SigninView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/signup',
@@ -178,6 +183,11 @@ const router = new Router({
 			components: {
 				default: SignupView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/setup',
@@ -185,6 +195,11 @@ const router = new Router({
 			components: {
 				default: SetupView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/forgot-password',
@@ -192,6 +207,11 @@ const router = new Router({
 			components: {
 				default: ForgotMyPasswordView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/change-password',
@@ -199,6 +219,11 @@ const router = new Router({
 			components: {
 				default: ChangePasswordView,
 			},
+			meta: {
+				telemetry: {
+					pageCategory: 'auth',
+				},
+			},
 		},
 		{
 			path: '/settings',
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index dbf076dfd2a79..8d4eba5f84105 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/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>
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index 214c8d7513ce0..28149e19de1f2 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/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
diff --git a/packages/editor-ui/src/views/SignupView.vue b/packages/editor-ui/src/views/SignupView.vue
index 4d021dec65792..831528b033189 100644
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/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: {