[NEW] Setup Wizard (#10523)
* welcome * . * stylelint * new ilustration * new layout * . * implements dicts * added all setup wizard settings to wizard * fix some setup wizard css * fix setup wizard js linter errors * remove old setup wizard templaates * setup wizard has just one main tag now * setup wizard registration fields filter is more readable * add register server page to setup wizard * fix setup wizard progress bar on RTL * setup wizard is registering users * Add setup wizard tests, routes and fix batch * fix setup wizard tests * add api test back * comment rocketchat:google-natural-language package and remove logs * add some translation keys for setup wizard * remove old setup wizard template * fix sort code on setup wizard * fix getWizardSetting method * new migration for setupwizard * setup wizard setting migration * fix setupwizard migration * Update versions * fix some setup wizard code logic * fix setup wizard registerServer setting * rever package-lock.json * rever google-natural-language .npm folder * rever meteor packages file and add setup wizard * remove some default values from setup wizard settings * add advocacy option on setup wizard industry setting * change key name to setting to make the filter more readable on setup wizard * change key name to setting to make the filter more readable on setup wizard * add findWizardSettings on models Settings and handle errors of getWizardSettings method * change setting to key to make the filter more readable on setup wizard * fix setup wizard settings filter map * remove serverHasAdminUser method on setup wizard * fix setup wizard tests * fix setup wizard final step workspace link * fix setup wizard testspull/10673/head^2
Karl Prieb
7 years ago
committed by
Rodrigo Nascimento
parent
66f719e5c1
commit
08149ebebb
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,192 @@ |
||||
<template name="setupWizardFinal"> |
||||
<div class="setup-wizard"> |
||||
<div class="setup-wizard-final"> |
||||
<header class="setup-wizard-info__header setup-wizard-final__header"> |
||||
<img class="setup-wizard-info__header-logo" src="images/logo/logo-black.svg"> |
||||
</header> |
||||
<main class="setup-wizard-final__box"> |
||||
<span class="setup-wizard-forms__header-step">{{_ "Launched_successfully"}}</span> |
||||
<h1 class="setup-wizard-info__content-title setup-wizard-final__box-title">{{_ "Your_workspace_is_ready"}}</h1> |
||||
<span class="setup-wizard-final__link-text">{{_ "Your_server_link"}}</span> |
||||
<span class="setup-wizard-final__link">{{siteUrl}}</span> |
||||
<button class="rc-button rc-button--primary js-finish"> |
||||
<span>{{_ "Go_to_your_workspace"}}</span> |
||||
</button> |
||||
</main> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<template name="setupWizard"> |
||||
<div class="setup-wizard"> |
||||
<section class="setup-wizard-info"> |
||||
<header class="setup-wizard-info__header"> |
||||
<img class="setup-wizard-info__header-logo" src="images/logo/logo-black.svg"> |
||||
<span class="setup-wizard-info__header-tag">{{_ "Setup_Wizard"}}</span> |
||||
</header> |
||||
<div class="setup-wizard-info__content"> |
||||
<h1 class="setup-wizard-info__content-title">{{_ "Setup_Wizard"}}</h1> |
||||
<p class="setup-wizard-info__content-text">{{_ "Setup_Wizard_Info"}}</p> |
||||
<ol class="setup-wizard-info__steps"> |
||||
{{#unless hasAdmin}}<li class="setup-wizard-info__steps-item {{itemModifier 1}}">{{headerTitle 1}}</li>{{/unless}} |
||||
<li class="setup-wizard-info__steps-item {{itemModifier 2}}">{{headerTitle 2}}{{#unless hasAdmin}}<span class="setup-wizard-info__steps-item-bonding"></span>{{/unless}}</li> |
||||
<li class="setup-wizard-info__steps-item {{itemModifier 3}}">{{headerTitle 3}}<span class="setup-wizard-info__steps-item-bonding"></span></li> |
||||
{{#unless hasAdmin}}<li class="setup-wizard-info__steps-item {{itemModifier 4}}">{{headerTitle 4}}<span class="setup-wizard-info__steps-item-bonding"></span></li>{{/unless}} |
||||
</ol> |
||||
</div> |
||||
</section> |
||||
<section class="setup-wizard-forms"> |
||||
<div class="setup-wizard-forms__wrapper"> |
||||
<div class="setup-wizard-forms__box"> |
||||
<header class="setup-wizard-forms__header"> |
||||
<span class="setup-wizard-forms__header-step">{{_ "Step"}} {{currentStep}}</span> |
||||
<h1 class="setup-wizard-forms__header-title">{{headerTitle}}</h1> |
||||
</header> |
||||
<main class="setup-wizard-forms__content"> |
||||
<div class="setup-wizard-forms__content-step {{#if $eq currentStep 1}}setup-wizard-forms__content-step--active{{/if}}"> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ "Name"}}</div> |
||||
<div class="rc-input__wrapper"> |
||||
<div class="rc-input__icon"> |
||||
{{> icon block="rc-input__icon-sv" icon="user"}} |
||||
</div> |
||||
<input type="text" class="rc-input__element js-setting-data" name="registration-name" placeholder="{{_ 'Type_your_name'}}" value="{{getValue 'registration-name'}}"> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ "Username"}}</div> |
||||
<div class="rc-input__wrapper"> |
||||
<div class="rc-input__icon"> |
||||
{{> icon block="rc-input__icon-sv" icon="at"}} |
||||
</div> |
||||
<input type="text" class="rc-input__element js-setting-data" name="registration-username" placeholder="{{_ 'Type_your_username'}}" value="{{getValue 'registration-username'}}"> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ "Organization_Email"}}</div> |
||||
<div class="rc-input__wrapper"> |
||||
<div class="rc-input__icon"> |
||||
{{> icon block="rc-input__icon-sv" icon="mail"}} |
||||
</div> |
||||
<input type="email" class="rc-input__element js-setting-data" name="registration-email" placeholder="{{_ 'Type_your_email'}}" value="{{getValue 'registration-email'}}"> |
||||
</div> |
||||
</label> |
||||
{{#if invalidEmail}} |
||||
<div class="rc-input__error"> |
||||
<div class="rc-input__error-icon"> |
||||
{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}} |
||||
</div> |
||||
<div class="rc-input__error-message">{{_ "Invalid_email"}}</div> |
||||
</div> |
||||
{{/if}} |
||||
</div> |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ "Password"}}</div> |
||||
<div class="rc-input__wrapper"> |
||||
<div class="rc-input__icon"> |
||||
{{> icon block="rc-input__icon-sv" icon="key"}} |
||||
</div> |
||||
<input type="password" class="rc-input__element js-setting-data" name="registration-pass" placeholder="{{_ 'Type_your_password'}}"> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
<div class="setup-wizard-forms__content-step {{showStep}}"> |
||||
{{#each getSettings currentStep}} |
||||
{{#if $eq type 'select'}} |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ i18nLabel}}</div> |
||||
<div class="rc-select"> |
||||
<select class="rc-select__element js-setting-data" name="{{_id}}"> |
||||
{{#each values}} |
||||
<option class="rc-select__option" value="{{key}}" selected="{{selectedValue ../_id key}}">{{_ i18nLabel}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{> icon block="rc-select__arrow" icon="arrow-down" }} |
||||
</div> |
||||
</label> |
||||
</div> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'string'}} |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ i18nLabel}}</div> |
||||
<div class="rc-input__wrapper"> |
||||
<input type="text" class="rc-input__element js-setting-data" name="{{_id}}" value="{{getValue _id}}"> |
||||
</div> |
||||
</label> |
||||
</div> |
||||
{{/if}} |
||||
|
||||
{{#if $eq type 'language'}} |
||||
<div class="rc-input"> |
||||
<label class="rc-input__label"> |
||||
<div class="rc-input__title">{{_ i18nLabel}}</div> |
||||
<div class="rc-select"> |
||||
<select class="rc-select__element js-setting-data" name="{{_id}}"> |
||||
{{#each languages}} |
||||
<option class="rc-select__option" value="{{key}}" selected="{{selectedValue ../_id key}}" dir="auto">{{name}}</option> |
||||
{{/each}} |
||||
</select> |
||||
{{> icon block="rc-select__arrow" icon="arrow-down" }} |
||||
</div> |
||||
</label> |
||||
</div> |
||||
{{/if}} |
||||
{{/each}} |
||||
</div> |
||||
<div class="setup-wizard-forms__content-step {{#if $eq currentStep 4}}setup-wizard-forms__content-step--active{{/if}}"> |
||||
<p class="setup-wizard-forms__content-text">To receive free Rocket.Chat supplied features you need to register your server.</p> |
||||
<form class="setup-wizard-forms__content-register"> |
||||
<label class="setup-wizard-forms__content-register-option"> |
||||
<div class="setup-wizard-forms__content-register-radio"> |
||||
<input type="radio" name="registerServer" value="true" class="setup-wizard-forms__content-register-radio-element js-setting-data" checked> |
||||
<span class="setup-wizard-forms__content-register-radio-fake"></span> |
||||
<span class="setup-wizard-forms__content-register-radio-text">Registered Server</span> |
||||
</div> |
||||
<ul> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}Mobile push notifications</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}Omnichannel proxy</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}Social Network oAuth proxy</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}Apps Marketplace</li> |
||||
</ul> |
||||
</label> |
||||
<label class="setup-wizard-forms__content-register-option"> |
||||
<div class="setup-wizard-forms__content-register-radio"> |
||||
<input type="radio" name="registerServer" value="false" class="setup-wizard-forms__content-register-radio-element js-setting-data"> |
||||
<span class="setup-wizard-forms__content-register-radio-fake"></span> |
||||
<span class="setup-wizard-forms__content-register-radio-text">Standalone Server</span> |
||||
</div> |
||||
<ul> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="cross"}}Mobile push notifications</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="cross"}}Omnichannel proxy</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="cross"}}Social Network oAuth proxy</li> |
||||
<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="cross"}}Apps Marketplace</li> |
||||
</ul> |
||||
</label> |
||||
</form> |
||||
</div> |
||||
</main> |
||||
<footer class="setup-wizard-forms__footer"> |
||||
{{#if showBackButton}} |
||||
<button class="rc-button rc-button--secondary setup-wizard-forms__footer-back"> |
||||
<span>{{_ "Back"}}</span> |
||||
</button> |
||||
{{/if}} |
||||
<button class="rc-button rc-button--primary setup-wizard-forms__footer-next" {{isDisabled}}> |
||||
<span>{{_ "Continue"}}</span> |
||||
</button> |
||||
</footer> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,272 @@ |
||||
import s from 'underscore.string'; |
||||
|
||||
const setSettingsAndGo = (settings, registerServer = true) => { |
||||
const settingsFilter = Object.entries(settings) |
||||
.filter(([key]) => !/registration-|registerServer|currentStep/.test(key)) |
||||
.map(([_id, value]) => ({_id, value})); |
||||
|
||||
settingsFilter.push({ |
||||
_id: 'Statistics_reporting', |
||||
value: registerServer |
||||
}); |
||||
|
||||
RocketChat.settings.batchSet(settingsFilter, function(err) { |
||||
if (err) { |
||||
return handleError(err); |
||||
} |
||||
|
||||
localStorage.setItem('wizardFinal', true); |
||||
FlowRouter.go('setup-wizard-final'); |
||||
}); |
||||
}; |
||||
|
||||
Template.setupWizard.onCreated(function() { |
||||
if (localStorage.getItem('wizardFinal')) { |
||||
FlowRouter.go('setup-wizard-final'); |
||||
} |
||||
|
||||
this.hasAdmin = new ReactiveVar(false); |
||||
this.state = new ReactiveDict(); |
||||
this.wizardSettings = new ReactiveVar([]); |
||||
this.invalidEmail = new ReactiveVar(false); |
||||
|
||||
const storage = JSON.parse(localStorage.getItem('wizard')); |
||||
if (storage) { |
||||
Object.entries(storage).forEach(([key, value]) => { |
||||
this.state.set(key, value); |
||||
}); |
||||
} |
||||
|
||||
Tracker.autorun(() => { |
||||
const user = Meteor.user(); |
||||
if (user) { |
||||
if (!this.hasAdmin.get()) { |
||||
if (user.roles && user.roles.includes('admin')) { |
||||
this.state.set('currentStep', 2); |
||||
this.hasAdmin.set(true); |
||||
} else { |
||||
this.hasAdmin.set(false); |
||||
} |
||||
} |
||||
|
||||
Meteor.call('getWizardSettings', (error, result) => { |
||||
if (error) { |
||||
return handleError(error); |
||||
} |
||||
|
||||
this.wizardSettings.set(result); |
||||
}); |
||||
} else { |
||||
this.state.set('currentStep', 1); |
||||
} |
||||
|
||||
if (RocketChat.settings.get('Show_Setup_Wizard') === false) { |
||||
FlowRouter.go('home'); |
||||
} |
||||
|
||||
const states = this.state.all(); |
||||
states['registration-pass'] = ''; |
||||
localStorage.setItem('wizard', JSON.stringify(states)); |
||||
}); |
||||
}); |
||||
|
||||
Template.setupWizard.onRendered(function() { |
||||
$('#initial-page-loading').remove(); |
||||
}); |
||||
|
||||
Template.setupWizard.events({ |
||||
'click .setup-wizard-forms__footer-next'(e, t) { |
||||
const currentStep = t.state.get('currentStep'); |
||||
const hasAdmin = t.hasAdmin.get(); |
||||
|
||||
if (!hasAdmin && currentStep === 1) { |
||||
const emailValue = t.state.get('registration-email'); |
||||
const invalidEmail = !/\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]+\b/i.test(emailValue); |
||||
t.invalidEmail.set(invalidEmail); |
||||
|
||||
if (invalidEmail) { |
||||
return false; |
||||
} |
||||
|
||||
const state = t.state.all(); |
||||
const registration = Object.entries(state).filter(([key]) => /registration-/.test(key)); |
||||
const registrationData = Object.assign(...registration.map(d => ({[d[0].replace('registration-', '')]: d[1]}))); |
||||
|
||||
Meteor.call('registerUser', registrationData, error => { |
||||
if (error) { |
||||
return handleError(error); |
||||
} |
||||
|
||||
RocketChat.callbacks.run('userRegistered'); |
||||
|
||||
Meteor.loginWithPassword(s.trim(registrationData.email), registrationData.pass, error => { |
||||
if (error && error.error === 'error-invalid-email') { |
||||
toastr.success(t('We_have_sent_registration_email')); |
||||
return false; |
||||
} |
||||
|
||||
Session.set('forceLogin', false); |
||||
|
||||
Meteor.call('setUsername', registrationData.username, error => { |
||||
if (error) { |
||||
return handleError(error); |
||||
} |
||||
|
||||
RocketChat.callbacks.run('usernameSet'); |
||||
}); |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
if (hasAdmin && currentStep === 3) { |
||||
setSettingsAndGo(t.state.all()); |
||||
return false; |
||||
} |
||||
|
||||
if (currentStep === 4) { |
||||
setSettingsAndGo(t.state.all(), JSON.parse(t.state.get('registerServer') || true)); |
||||
|
||||
return false; |
||||
} |
||||
|
||||
t.state.set('currentStep', currentStep + 1); |
||||
}, |
||||
'click .setup-wizard-forms__footer-back'(e, t) { |
||||
t.state.set('currentStep', t.state.get('currentStep') - 1); |
||||
}, |
||||
'input .js-setting-data'(e, t) { |
||||
t.state.set(e.currentTarget.name, e.currentTarget.value); |
||||
} |
||||
}); |
||||
|
||||
Template.setupWizard.helpers({ |
||||
currentStep() { |
||||
return Template.instance().state.get('currentStep'); |
||||
}, |
||||
itemModifier(step) { |
||||
const current = Template.instance().state.get('currentStep'); |
||||
|
||||
if (current === step) { |
||||
return 'setup-wizard-info__steps-item--active'; |
||||
} |
||||
|
||||
if (current > step) { |
||||
return 'setup-wizard-info__steps-item--past'; |
||||
} |
||||
|
||||
return ''; |
||||
}, |
||||
getValue(name) { |
||||
return Template.instance().state.get(name); |
||||
}, |
||||
selectedValue(setting, optionValue) { |
||||
return Template.instance().state.get(setting) === optionValue; |
||||
}, |
||||
isDisabled() { |
||||
const user = Meteor.user(); |
||||
if (user && user.roles && !user.roles.includes('admin')) { |
||||
return 'disabled'; |
||||
} |
||||
|
||||
if (Template.instance().state.get('currentStep') === 1) { |
||||
const state = Template.instance().state.all(); |
||||
|
||||
if (Object.entries(state).filter(([key, value]) => /registration-/.test(key) && !value).length) { |
||||
return 'disabled'; |
||||
} |
||||
} |
||||
|
||||
return ''; |
||||
}, |
||||
headerTitle(step) { |
||||
if (!step) { |
||||
step = Template.instance().state.get('currentStep'); |
||||
} |
||||
|
||||
switch (step) { |
||||
case 1: return t('Admin_Info'); |
||||
case 2: return t('Organization_Info'); |
||||
case 3: return t('Server_Info'); |
||||
case 4: return t('Register_Server'); |
||||
} |
||||
}, |
||||
showStep() { |
||||
const currentStep = Template.instance().state.get('currentStep'); |
||||
if (currentStep === 2 || currentStep === 3) { |
||||
return 'setup-wizard-forms__content-step--active'; |
||||
} |
||||
|
||||
return ''; |
||||
}, |
||||
getSettings(step) { |
||||
return Template.instance().wizardSettings.get() |
||||
.filter(setting => setting.wizard.step === step) |
||||
.sort((a, b) => a.wizard.order - b.wizard.order); |
||||
}, |
||||
languages() { |
||||
const languages = TAPi18n.getLanguages(); |
||||
|
||||
const result = Object.entries(languages).map(language => { |
||||
const obj = language[1]; |
||||
obj.key = language[0]; |
||||
return obj; |
||||
}).sort((a, b) => a.key - b.key); |
||||
|
||||
result.unshift({ |
||||
'name': 'Default', |
||||
'en': 'Default', |
||||
'key': '' |
||||
}); |
||||
|
||||
return result; |
||||
}, |
||||
hasAdmin() { |
||||
return Template.instance().hasAdmin.get(); |
||||
}, |
||||
invalidEmail() { |
||||
return Template.instance().invalidEmail.get(); |
||||
}, |
||||
showBackButton() { |
||||
if (Template.instance().hasAdmin.get()) { |
||||
if (Template.instance().state.get('currentStep') > 2) { |
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
if (Template.instance().state.get('currentStep') > 1) { |
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
}); |
||||
|
||||
Template.setupWizardFinal.onCreated(function() { |
||||
Tracker.autorun(() => { |
||||
if (RocketChat.settings.get('Show_Setup_Wizard') === false) { |
||||
FlowRouter.go('home'); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
Template.setupWizardFinal.onRendered(function() { |
||||
$('#initial-page-loading').remove(); |
||||
}); |
||||
|
||||
Template.setupWizardFinal.events({ |
||||
'click .js-finish'() { |
||||
RocketChat.settings.set('Show_Setup_Wizard', false, function() { |
||||
localStorage.removeItem('wizard'); |
||||
localStorage.removeItem('wizardFinal'); |
||||
FlowRouter.go('home'); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
Template.setupWizardFinal.helpers({ |
||||
siteUrl() { |
||||
return RocketChat.settings.get('Site_Url'); |
||||
} |
||||
}); |
||||
@ -0,0 +1,17 @@ |
||||
Package.describe({ |
||||
name: 'rocketchat:setup-wizard', |
||||
version: '0.0.1', |
||||
summary: '', |
||||
git: '' |
||||
}); |
||||
|
||||
Package.onUse(function(api) { |
||||
api.use('ecmascript'); |
||||
api.use('templating', 'client'); |
||||
api.use('rocketchat:theme'); |
||||
|
||||
api.addFiles('client/setupWizard.html', 'client'); |
||||
api.addFiles('client/setupWizard.js', 'client'); |
||||
|
||||
api.addFiles('server/lib/getWizardSettings.js', 'server'); |
||||
}); |
||||
@ -0,0 +1,9 @@ |
||||
Meteor.methods({ |
||||
getWizardSettings() { |
||||
if (RocketChat.authz.hasRole(Meteor.userId(), 'admin') && RocketChat.models && RocketChat.models.Settings) { |
||||
return RocketChat.models.Settings.findSetupWizardSettings().fetch(); |
||||
} |
||||
|
||||
throw new Meteor.Error('settings-are-not-ready', 'Settings are not ready'); |
||||
} |
||||
}); |
||||
@ -0,0 +1,465 @@ |
||||
.setup-wizard { |
||||
display: flex; |
||||
|
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
background-color: #f7f8fa; |
||||
|
||||
justify-content: center; |
||||
|
||||
&-info { |
||||
flex: 0 0 350px; |
||||
|
||||
margin: 55px 65px 0 80px; |
||||
|
||||
&__header{ |
||||
display: flex; |
||||
|
||||
margin: 0 -0.375rem 3rem; |
||||
align-items: center; |
||||
|
||||
&-logo { |
||||
margin: 0 0.375rem; |
||||
} |
||||
|
||||
&-tag { |
||||
margin: 0 0.375rem; |
||||
|
||||
padding: 4px 8px; |
||||
|
||||
letter-spacing: 0.05rem; |
||||
|
||||
text-transform: uppercase; |
||||
|
||||
color: #ffffff; |
||||
|
||||
border-radius: 50px; |
||||
background: #2f343d; |
||||
|
||||
font-size: 10px; |
||||
|
||||
line-height: 1rem; |
||||
} |
||||
} |
||||
|
||||
&__content { |
||||
&-title { |
||||
margin-bottom: 1rem; |
||||
|
||||
letter-spacing: 0.03rem; |
||||
|
||||
color: #2f343d; |
||||
|
||||
font-size: 2rem; |
||||
|
||||
font-weight: 600; |
||||
|
||||
line-height: 2.6rem; |
||||
} |
||||
|
||||
&-text { |
||||
margin-bottom: 3rem; |
||||
|
||||
color: #9ea2a8; |
||||
|
||||
font-size: 1rem; |
||||
|
||||
font-weight: 500; |
||||
|
||||
line-height: 1.5rem; |
||||
} |
||||
} |
||||
|
||||
&__steps { |
||||
counter-reset: steps; |
||||
|
||||
&-item { |
||||
position: relative; |
||||
|
||||
margin: 0 -0.5rem; |
||||
|
||||
counter-increment: steps; |
||||
|
||||
color: #d3d5d9; |
||||
|
||||
font-size: 0.875rem; |
||||
font-weight: 500; |
||||
|
||||
&:not(:last-child) { |
||||
margin-bottom: 2rem; |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
bottom: -1rem; |
||||
left: 1.2rem; |
||||
|
||||
display: block; |
||||
|
||||
width: 1px; |
||||
height: 1rem; |
||||
|
||||
content: ""; |
||||
|
||||
background-color: #d3d5d9; |
||||
} |
||||
} |
||||
|
||||
&::before { |
||||
display: inline-flex; |
||||
|
||||
width: 1.5rem; |
||||
height: 1.5rem; |
||||
margin: 0 0.5rem; |
||||
|
||||
content: counter(steps); |
||||
|
||||
color: #d3d5d9; |
||||
|
||||
border: 1px solid #d3d5d9; |
||||
border-radius: 50px; |
||||
|
||||
font-size: 0.75rem; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
&--active { |
||||
color: #1d74f5; |
||||
|
||||
&::before { |
||||
color: #1d74f5; |
||||
border-color: #1d74f5; |
||||
} |
||||
} |
||||
|
||||
&--past { |
||||
color: #2f343d; |
||||
|
||||
&::before { |
||||
color: #ffffff; |
||||
background-color: #1d74f5; |
||||
} |
||||
|
||||
&::after { |
||||
background-color: #1d74f5 !important; |
||||
} |
||||
|
||||
& .setup-wizard-info__steps-item-bonding { |
||||
background-color: #1d74f5; |
||||
} |
||||
} |
||||
|
||||
&-bonding { |
||||
position: absolute; |
||||
top: -1rem; |
||||
left: 1.2rem; |
||||
|
||||
display: block; |
||||
|
||||
width: 1px; |
||||
height: 1rem; |
||||
|
||||
background-color: currentColor; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-forms { |
||||
flex: 1 1 auto; |
||||
|
||||
&__wrapper { |
||||
display: flex; |
||||
overflow-y: auto; |
||||
|
||||
width: calc(100% - 1rem); |
||||
height: calc(100% - 2rem); |
||||
margin: 1rem 1rem 1rem 0; |
||||
|
||||
padding: 3rem; |
||||
|
||||
border-radius: 2px; |
||||
background: #ffffff; |
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); |
||||
justify-content: center; |
||||
} |
||||
|
||||
&__box { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
width: 350px; |
||||
} |
||||
|
||||
&__header { |
||||
margin-bottom: 2rem; |
||||
|
||||
&-step { |
||||
display: block; |
||||
|
||||
margin-bottom: 3px; |
||||
|
||||
letter-spacing: 0.05rem; |
||||
|
||||
text-transform: uppercase; |
||||
|
||||
color: #caced1; |
||||
|
||||
font-size: 0.75rem; |
||||
|
||||
line-height: 1.125rem; |
||||
} |
||||
|
||||
&-title { |
||||
letter-spacing: 0.05rem; |
||||
|
||||
color: #1f2329; |
||||
|
||||
font-size: 1.25rem; |
||||
font-weight: 500; |
||||
|
||||
line-height: 1.75rem; |
||||
} |
||||
} |
||||
|
||||
&__content { |
||||
margin-bottom: 2rem; |
||||
|
||||
&-step { |
||||
display: none; |
||||
|
||||
&--active { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
&-text { |
||||
|
||||
margin-bottom: 2rem; |
||||
|
||||
color: #9ea2a8; |
||||
|
||||
font-size: 1rem; |
||||
font-weight: 500; |
||||
|
||||
line-height: 1.5rem; |
||||
} |
||||
|
||||
&-register { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
&-option { |
||||
|
||||
display: block; |
||||
|
||||
padding: 1.5rem; |
||||
|
||||
cursor: pointer; |
||||
|
||||
color: #2f343d; |
||||
border: 1px solid #e7ebf2; |
||||
|
||||
border-radius: 2px; |
||||
|
||||
font-size: 0.875rem; |
||||
|
||||
line-height: 1.25rem; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 1rem; |
||||
} |
||||
} |
||||
|
||||
&-radio { |
||||
position: relative; |
||||
|
||||
display: flex; |
||||
|
||||
margin: 0 -0.5rem 1rem; |
||||
|
||||
&-element { |
||||
position: absolute; |
||||
z-index: -1; |
||||
top: 0; |
||||
left: 0; |
||||
|
||||
width: 0; |
||||
height: 0; |
||||
|
||||
&:checked + .setup-wizard-forms__content-register-radio-fake { |
||||
|
||||
position: relative; |
||||
|
||||
border-color: #1d74f5; |
||||
|
||||
&::before { |
||||
position: absolute; |
||||
|
||||
top: 3px; |
||||
left: 3px; |
||||
|
||||
width: 12px; |
||||
height: 12px; |
||||
|
||||
content: ""; |
||||
|
||||
border-radius: 50%; |
||||
|
||||
background-color: #1d74f5; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-fake { |
||||
display: block; |
||||
|
||||
width: 20px; |
||||
height: 20px; |
||||
margin: 0 0.5rem; |
||||
|
||||
border: 1px solid #cfd8e6; |
||||
border-radius: 50px; |
||||
} |
||||
|
||||
&-text { |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
&-item { |
||||
|
||||
display: flex; |
||||
|
||||
margin: 0 -0.5rem 0.5rem; |
||||
align-items: center; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
& .setup-wizard-forms__content-register-radio-icon { |
||||
margin: 0 calc(4px + 0.5rem); |
||||
|
||||
font-size: 10px; |
||||
} |
||||
|
||||
& .setup-wizard-forms__content-register-radio-icon--check { |
||||
color: #1d74f5; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__footer { |
||||
display: flex; |
||||
|
||||
margin: 0 -0.5rem; |
||||
|
||||
& .rc-button { |
||||
margin: 0 0.5rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&-final { |
||||
width: 930px; |
||||
padding-top: 5rem; |
||||
|
||||
&__header { |
||||
margin-bottom: 5rem; |
||||
} |
||||
|
||||
&__box { |
||||
padding: 5rem 6rem; |
||||
|
||||
border-radius: 2px; |
||||
background: #ffffff; |
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); |
||||
|
||||
&-title { |
||||
margin-bottom: 3.25rem; |
||||
} |
||||
} |
||||
|
||||
&__link { |
||||
display: block; |
||||
|
||||
margin-bottom: 1.5rem; |
||||
|
||||
letter-spacing: 0; |
||||
|
||||
color: #1d74f5; |
||||
|
||||
font-size: 1rem; |
||||
|
||||
line-height: 1.5rem; |
||||
|
||||
&-text { |
||||
display:block; |
||||
|
||||
letter-spacing: 0.03rem; |
||||
|
||||
text-transform:uppercase; |
||||
|
||||
color: #2f343d; |
||||
|
||||
font-size: 0.625rem; |
||||
line-height: 1rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .rc-input { |
||||
&:not(:last-child) { |
||||
margin-bottom: 1.5rem; |
||||
} |
||||
|
||||
&__title { |
||||
letter-spacing: 0.03rem; |
||||
|
||||
text-transform: uppercase; |
||||
|
||||
color: #9ea2a8; |
||||
|
||||
font-size: 0.625rem; |
||||
|
||||
line-height: 1rem; |
||||
} |
||||
|
||||
&__element { |
||||
color: #030c1a; |
||||
|
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
& .rc-select { |
||||
&__element { |
||||
color: #030c1a; |
||||
|
||||
font-size: 0.875rem; |
||||
|
||||
font-weight: 500; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rtl { |
||||
& .setup-wizard-info { |
||||
margin: 55px 80px 0 65px; |
||||
} |
||||
|
||||
& .setup-wizard-forms__wrapper { |
||||
margin: 1rem 0 1rem 1rem; |
||||
} |
||||
|
||||
& .setup-wizard-info__steps-item { |
||||
&:not(:last-child)::after, |
||||
&-bonding { |
||||
right: 1.2rem; |
||||
left: auto; |
||||
} |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,15 @@ |
||||
RocketChat.Migrations.add({ |
||||
version: 117, |
||||
up() { |
||||
if (RocketChat && |
||||
RocketChat.authz && |
||||
RocketChat.authz.getUsersInRole('admin').count() && |
||||
RocketChat.models && |
||||
RocketChat.models.Settings) { |
||||
RocketChat.models.Settings.upsert( |
||||
{ _id: 'Show_Setup_Wizard' }, |
||||
{ $set: { value: false }} |
||||
); |
||||
} |
||||
} |
||||
}); |
||||
@ -0,0 +1,36 @@ |
||||
import Page from './Page'; |
||||
import {adminEmail, adminPassword} from '../data/user'; |
||||
|
||||
|
||||
class SetupWizard extends Page { |
||||
get nextButton() { return browser.element('.setup-wizard-forms__footer-next:enabled'); } |
||||
get goToWorkspace() { return browser.element('button.js-finish'); } |
||||
get organizationType() { return browser.element('select[name="Organization_Type"]'); } |
||||
get organizationName() { return browser.element('input[name="Organization_Name"]'); } |
||||
get industry() { return browser.element('select[name="Industry"]'); } |
||||
get size() { return browser.element('select[name="Size"]'); } |
||||
get country() { return browser.element('select[name="Country"]'); } |
||||
get website() { return browser.element('input[name="Website"]'); } |
||||
get siteName() { return browser.element('input[name="Site_Name"]'); } |
||||
get language() { return browser.element('select[name="Language"]'); } |
||||
get serverType() { return browser.element('select[name="Server_Type"]'); } |
||||
|
||||
open() { |
||||
super.open('setup-wizard'); |
||||
browser.execute(function(email, password) { |
||||
Meteor.loginWithPassword(email, password, () => {}); |
||||
}, adminEmail, adminPassword); |
||||
} |
||||
|
||||
goNext() { |
||||
this.nextButton.waitForVisible(5000); |
||||
this.nextButton.click(); |
||||
} |
||||
|
||||
goToHome() { |
||||
this.goToWorkspace.waitForVisible(5000); |
||||
this.goToWorkspace.click(); |
||||
} |
||||
} |
||||
|
||||
module.exports = new SetupWizard(); |
||||
Loading…
Reference in new issue