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

<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="rc-old connection-status">
		{{> status}}
	</div>
	<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}}">
													<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}}
												</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>