Wizard improvements (#10776)

* Change wizard state from boolean to `pending`, `in_progress` or `completed`
* Add migration to change the wizard setting to new values and fix the old migration
* Make the wizard responsive for small screens
* Do not publish wizard settings to the client
* Do not show wizard for unlogged users after admin was created

packages/rocketchat-lib/server/startup/settings.js

@@ -628,9 +628,21 @@ RocketChat.settings.addGroup('OAuth', function() {
 });
 
 RocketChat.settings.addGroup('General', function() {
-	this.add('Show_Setup_Wizard', true, {
-		type: 'boolean',
-		public: true
+	this.add('Show_Setup_Wizard', 'pending', {
+		type: 'select',
+		public: true,
+		values: [
+			{
+				key: 'pending',
+				i18nLabel: 'Pending'
+			}, {
+				key: 'in_progress',
+				i18nLabel: 'In_progress'
+			}, {
+				key: 'completed',
+				i18nLabel: 'Completed'
+			}
+		]
 	});
 	this.add('Site_Url', typeof __meteor_runtime_config__ !== 'undefined' && __meteor_runtime_config__ !== null ? __meteor_runtime_config__.ROOT_URL : null, {
 		type: 'string',
@@ -639,7 +651,6 @@ RocketChat.settings.addGroup('General', function() {
 	});
 	this.add('Site_Name', 'Rocket.Chat', {
 		type: 'string',
-		'public': true,
 		wizard: {
 			step: 3,
 			order: 0
@@ -647,7 +658,6 @@ RocketChat.settings.addGroup('General', function() {
 	});
 	this.add('Language', '', {
 		type: 'language',
-		'public': true,
 		wizard: {
 			step: 3,
 			order: 1
@@ -1666,7 +1676,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 					i18nLabel: 'Community'
 				}
 			],
-			public: true,
 			wizard: {
 				step: 2,
 				order: 0
@@ -1674,7 +1683,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 		});
 		this.add('Organization_Name', '', {
 			type: 'string',
-			public: true,
 			wizard: {
 				step: 2,
 				order: 1
@@ -1784,7 +1792,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 					i18nLabel: 'Other'
 				}
 			],
-			public: true,
 			wizard: {
 				step: 2,
 				order: 2
@@ -1826,7 +1833,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 					i18nLabel: '4000 or more people'
 				}
 			],
-			public: true,
 			wizard: {
 				step: 2,
 				order: 3
@@ -2796,7 +2802,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 					i18nLabel: 'Country_Zimbabwe'
 				}
 			],
-			public: true,
 			wizard: {
 				step: 2,
 				order: 4
@@ -2804,7 +2809,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 		});
 		this.add('Website', '', {
 			type: 'string',
-			public: true,
 			wizard: {
 				step: 2,
 				order: 5
@@ -2822,7 +2826,6 @@ RocketChat.settings.addGroup('Setup_Wizard', function() {
 					i18nLabel: 'Public_Community'
 				}
 			],
-			public: true,
 			wizard: {
 				step: 3,
 				order: 2

packages/rocketchat-setup-wizard/client/setupWizard.html

@@ -18,6 +18,9 @@
 </template>
 
 <template name="setupWizard">
+	<div class="rc-old connection-status">
+		{{> status}}
+	</div>
 	<div class="setup-wizard">
 		<section class="setup-wizard-info">
 			<header class="setup-wizard-info__header">
@@ -105,6 +108,7 @@
 											<div class="rc-input__title">{{_ i18nLabel}}</div>
 											<div class="rc-select">
 												<select class="rc-select__element js-setting-data" name="{{_id}}">
+													<option value="" disabled selected="{{selectedValue _id undefined}}">{{_ "Select_an_option"}}</option>
 													{{#each values}}
 														<option class="rc-select__option" value="{{key}}" selected="{{selectedValue ../_id key}}">{{_ i18nLabel}}</option>
 													{{/each}}

packages/rocketchat-setup-wizard/client/setupWizard.js

@@ -21,6 +21,13 @@ const setSettingsAndGo = (settings, registerServer = true) => {
 };
 
 Template.setupWizard.onCreated(function() {
+	const userId = Meteor.userId();
+	const Show_Setup_Wizard = RocketChat.settings.get('Show_Setup_Wizard');
+
+	if (!userId || Show_Setup_Wizard === 'completed' || !RocketChat.authz.hasRole(userId, 'admin')) {
+		FlowRouter.go('home');
+	}
+
 	if (localStorage.getItem('wizardFinal')) {
 		FlowRouter.go('setup-wizard-final');
 	}
@@ -60,7 +67,7 @@ Template.setupWizard.onCreated(function() {
 			this.state.set('currentStep', 1);
 		}
 
-		if (RocketChat.settings.get('Show_Setup_Wizard') === false) {
+		if (RocketChat.settings.get('Show_Setup_Wizard') === 'completed') {
 			FlowRouter.go('home');
 		}
 
@@ -245,7 +252,10 @@ Template.setupWizard.helpers({
 
 Template.setupWizardFinal.onCreated(function() {
 	Tracker.autorun(() => {
-		if (RocketChat.settings.get('Show_Setup_Wizard') === false) {
+		const userId = Meteor.userId();
+		const Show_Setup_Wizard = RocketChat.settings.get('Show_Setup_Wizard');
+
+		if (!userId || Show_Setup_Wizard === 'completed' || !RocketChat.authz.hasRole(userId, 'admin')) {
 			FlowRouter.go('home');
 		}
 	});
@@ -257,7 +267,7 @@ Template.setupWizardFinal.onRendered(function() {
 
 Template.setupWizardFinal.events({
 	'click .js-finish'() {
-		RocketChat.settings.set('Show_Setup_Wizard', false, function() {
+		RocketChat.settings.set('Show_Setup_Wizard', 'completed', function() {
 			localStorage.removeItem('wizard');
 			localStorage.removeItem('wizardFinal');
 			FlowRouter.go('home');

packages/rocketchat-theme/client/imports/components/setup-wizard.css

@@ -9,9 +9,9 @@
 	justify-content: center;
 
 	&-info {
-		flex: 0 0 350px;
+		flex: 0 0 auto;
 
-		margin: 55px 65px 0 80px;
+		margin: 55px 65px 30px 80px;
 
 		&__header{
 			display: flex;
@@ -463,3 +463,15 @@
 		}
 	}
 }
+
+@media (width <= 760px) {
+	.setup-wizard {
+		flex-direction: column;
+		justify-content: initial;
+
+		& .setup-wizard-forms__wrapper {
+			margin: 0;
+			width: 100%;
+		}
+	}
+}

packages/rocketchat-ui-master/client/main.js

@@ -172,11 +172,10 @@ Template.main.helpers({
 		}
 	},
 	showSetupWizard() {
-		if (RocketChat.settings.get('Show_Setup_Wizard') === false) {
-			return false;
-		}
+		const userId = Meteor.userId();
+		const Show_Setup_Wizard = RocketChat.settings.get('Show_Setup_Wizard');
 
-		return true;
+		return (!userId && Show_Setup_Wizard === 'pending') || (userId && RocketChat.authz.hasRole(userId, 'admin') && Show_Setup_Wizard === 'in_progress');
 	}
 });
 
@@ -197,9 +196,11 @@ Template.main.onRendered(function() {
 		}, 100);
 	});
 	return Tracker.autorun(function() {
+		const userId = Meteor.userId();
 		const user = Meteor.user();
+		const Show_Setup_Wizard = RocketChat.settings.get('Show_Setup_Wizard');
 
-		if (RocketChat.settings.get('Show_Setup_Wizard')) {
+		if ((!userId && Show_Setup_Wizard === 'pending') || (userId && RocketChat.authz.hasRole(userId, 'admin') && Show_Setup_Wizard === 'in_progress')) {
 			FlowRouter.go('setup-wizard');
 		}
 

packages/rocketchat-ui/client/lib/menu.js

@@ -219,6 +219,10 @@ this.menu.on('clickOut', function() {
 });
 
 this.menu.on('close', function() {
+	if (!this.sidebar) {
+		return;
+	}
+
 	this.sidebar.css('transition', '');
 	this.sidebarWrap.css('transition', '');
 	if (passClosePopover) {

packages/rocketchat-ui/client/lib/tapi18n.js

@@ -23,6 +23,6 @@ this.tr = function(key, options, ...replaces) {
 };
 
 this.isRtl = (lang) => {
-	const language = lang ? lang : localStorage.getItem('userLanguage');
+	const language = lang ? lang : localStorage.getItem('userLanguage') ? localStorage.getItem('userLanguage') : 'en-US';
 	return ['ar', 'dv', 'fa', 'he', 'ku', 'ps', 'sd', 'ug', 'ur', 'yi'].includes(language.split('-').shift().toLowerCase());
 };

server/lib/accounts.js

@@ -220,6 +220,9 @@ Accounts.insertUserDoc = _.wrap(Accounts.insertUserDoc, function(insertUserDoc,
 			roles.push('user');
 		} else {
 			roles.push('admin');
+			if (RocketChat.settings.get('Show_Setup_Wizard') === 'pending') {
+				RocketChat.models.Settings.updateValueById('Show_Setup_Wizard', 'in_progress');
+			}
 		}
 	}
 

server/startup/initialData.js

@@ -143,6 +143,9 @@ Meteor.startup(function() {
 
 			if (oldestUser) {
 				RocketChat.authz.addUserRoles(oldestUser._id, 'admin');
+				if (RocketChat.settings.get('Show_Setup_Wizard') === 'pending') {
+					RocketChat.models.Settings.updateValueById('Show_Setup_Wizard', 'in_progress');
+				}
 				console.log(`No admins are found. Set ${ oldestUser.username } as admin for being the oldest user`);
 			}
 		}
@@ -188,6 +191,10 @@ Meteor.startup(function() {
 
 			RocketChat.authz.addUserRoles(adminUser._id, 'admin');
 
+			if (RocketChat.settings.get('Show_Setup_Wizard') === 'pending') {
+				RocketChat.models.Settings.updateValueById('Show_Setup_Wizard', 'in_progress');
+			}
+
 			return RocketChat.addUserToDefaultChannels(adminUser, true);
 		}
 	});

server/startup/migrations/v117.js

@@ -1,14 +1,16 @@
 RocketChat.Migrations.add({
 	version: 117,
 	up() {
-		if (RocketChat &&
-		RocketChat.authz &&
-		RocketChat.authz.getUsersInRole('admin').count() &&
+		if (RocketChat.authz &&
 		RocketChat.models &&
-		RocketChat.models.Settings) {
+		RocketChat.models.Settings &&
+		RocketChat.authz.getUsersInRole('admin').count()) {
 			RocketChat.models.Settings.upsert(
-				{ _id: 'Show_Setup_Wizard' },
-				{ $set: { value: false }}
+				{
+					_id: 'Show_Setup_Wizard'
+				}, {
+					$set: { value: 'completed' }
+				}
 			);
 		}
 	}

server/startup/migrations/v119.js

@@ -0,0 +1,20 @@
+RocketChat.Migrations.add({
+	version: 119,
+	up() {
+		if (RocketChat.models && RocketChat.models.Settings) {
+			RocketChat.models.Settings.update({
+				_id: 'Show_Setup_Wizard',
+				value: true
+			}, {
+				$set: { value: 'pending' }
+			});
+
+			RocketChat.models.Settings.update({
+				_id: 'Show_Setup_Wizard',
+				value: false
+			}, {
+				$set: { value: 'completed' }
+			});
+		}
+	}
+});

tests/end-to-end/ui/00-login.js

@@ -3,9 +3,75 @@
 import loginPage from '../../pageobjects/login.page';
 import setupWizard from '../../pageobjects/setup-wizard.page';
 
+describe('[Login]', () => {
+	before(()=>{
+		loginPage.open();
+		// This Can Cause Timeouts erros if the server is slow so it should have a big wait
+		loginPage.emailOrUsernameField.waitForVisible(15000);
+	});
+
+	describe('[Render]', () => {
+		it('it should show email / username field', () => {
+			loginPage.emailOrUsernameField.isVisible().should.be.true;
+		});
+
+		it('it should show password field', () => {
+			loginPage.passwordField.isVisible().should.be.true;
+		});
+
+		it('it should show submit button', () => {
+			loginPage.submitButton.isVisible().should.be.true;
+		});
+
+		it('it should show register button', () => {
+			loginPage.registerButton.isVisible().should.be.true;
+		});
+
+		it('it should show forgot password button', () => {
+			loginPage.forgotPasswordButton.isVisible().should.be.true;
+		});
+
+		it('it should not show name field', () => {
+			loginPage.nameField.isVisible().should.be.false;
+		});
+
+		it('it should not show email field', () => {
+			loginPage.emailField.isVisible().should.be.false;
+		});
+
+		it('it should not show confirm password field', () => {
+			loginPage.confirmPasswordField.isVisible().should.be.false;
+		});
+
+		it('it should not show back to login button', () => {
+			loginPage.backToLoginButton.isVisible().should.be.false;
+		});
+	});
+
+	describe('[Required Fields]', () => {
+		before(() => {
+			loginPage.submit();
+		});
+
+		describe('email / username: ', () => {
+			it('it should be required', () => {
+				loginPage.emailOrUsernameField.getAttribute('class').should.contain('error');
+				loginPage.emailOrUsernameInvalidText.getText().should.not.be.empty;
+			});
+		});
+
+		describe('password: ', () => {
+			it('it should be required', () => {
+				loginPage.passwordField.getAttribute('class').should.contain('error');
+				loginPage.passwordInvalidText.getText().should.not.be.empty;
+			});
+		});
+	});
+});
+
 describe('[Setup Wizard]', () => {
 	before(()=>{
-		setupWizard.open();
+		setupWizard.login();
 		setupWizard.organizationType.waitForVisible(15000);
 	});
 
@@ -79,69 +145,3 @@ describe('[Setup Wizard]', () => {
 		});
 	});
 });
-
-describe('[Login]', () => {
-	before(()=>{
-		loginPage.open();
-		// This Can Cause Timeouts erros if the server is slow so it should have a big wait
-		loginPage.emailOrUsernameField.waitForVisible(15000);
-	});
-
-	describe('[Render]', () => {
-		it('it should show email / username field', () => {
-			loginPage.emailOrUsernameField.isVisible().should.be.true;
-		});
-
-		it('it should show password field', () => {
-			loginPage.passwordField.isVisible().should.be.true;
-		});
-
-		it('it should show submit button', () => {
-			loginPage.submitButton.isVisible().should.be.true;
-		});
-
-		it('it should show register button', () => {
-			loginPage.registerButton.isVisible().should.be.true;
-		});
-
-		it('it should show forgot password button', () => {
-			loginPage.forgotPasswordButton.isVisible().should.be.true;
-		});
-
-		it('it should not show name field', () => {
-			loginPage.nameField.isVisible().should.be.false;
-		});
-
-		it('it should not show email field', () => {
-			loginPage.emailField.isVisible().should.be.false;
-		});
-
-		it('it should not show confirm password field', () => {
-			loginPage.confirmPasswordField.isVisible().should.be.false;
-		});
-
-		it('it should not show back to login button', () => {
-			loginPage.backToLoginButton.isVisible().should.be.false;
-		});
-	});
-
-	describe('[Required Fields]', () => {
-		before(() => {
-			loginPage.submit();
-		});
-
-		describe('email / username: ', () => {
-			it('it should be required', () => {
-				loginPage.emailOrUsernameField.getAttribute('class').should.contain('error');
-				loginPage.emailOrUsernameInvalidText.getText().should.not.be.empty;
-			});
-		});
-
-		describe('password: ', () => {
-			it('it should be required', () => {
-				loginPage.passwordField.getAttribute('class').should.contain('error');
-				loginPage.passwordInvalidText.getText().should.not.be.empty;
-			});
-		});
-	});
-});

tests/pageobjects/setup-wizard.page.js

@@ -15,8 +15,7 @@ class SetupWizard extends Page {
 	get language() { return browser.element('select[name="Language"]'); }
 	get serverType() { return browser.element('select[name="Server_Type"]'); }
 
-	open() {
-		super.open('setup-wizard');
+	login() {
 		browser.execute(function(email, password) {
 			Meteor.loginWithPassword(email, password, () => {});
 		}, adminEmail, adminPassword);