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

<template name="setupWizard">
	<div class="rc-old connection-status">
		{{> status}}
	</div>
	<div class="setup-wizard">
		{{> setupWizardInfo infoArgs}}

		<section class="setup-wizard-forms">
			<div class="setup-wizard-forms__wrapper">
				<form class="setup-wizard-forms__box {{formLoadStateClass}}" novalidate>
					<header class="setup-wizard-forms__header">
						<span class="setup-wizard-forms__header-step">{{_ "Step"}} {{currentStep}}</span>
						<h1 class="setup-wizard-forms__header-title">{{_ currentStepTitle}}</h1>
					</header>

					<main class="setup-wizard-forms__content">
						{{> setupWizardAdminInfo adminInfoArgs}}
						{{> setupWizardCustomStep (customStepArgs 2)}}
						{{> setupWizardCustomStep (customStepArgs 3)}}
						{{> setupWizardRegisterServer registerServerArgs}}
					</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 type="submit" class="rc-button rc-button--primary setup-wizard-forms__footer-next" disabled={{isContinueDisabled}}>
							<span>{{_ "Continue"}}</span>
						</button>
					</footer>
				</form>
			</div>
		</section>
	</div>
</template>

<template name="setupWizardInfo">
	<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">
				<li class="setup-wizard-info__steps-item {{stepItemModifier 1}}">{{_ (stepTitle 1)}}</li>
				<li class="setup-wizard-info__steps-item {{stepItemModifier 2}}">{{_ (stepTitle 2)}}<span class="setup-wizard-info__steps-item-bonding"></span></li>
				<li class="setup-wizard-info__steps-item {{stepItemModifier 3}}">{{_ (stepTitle 3)}}<span class="setup-wizard-info__steps-item-bonding"></span></li>
				<li class="setup-wizard-info__steps-item {{stepItemModifier 4}}">{{_ (stepTitle 4)}}<span class="setup-wizard-info__steps-item-bonding"></span></li>
			</ol>
		</div>
	</section>
</template>

<template name="setupWizardAdminInfo">
	<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="{{name}}">
				</div>
			</label>
		</div>
		<div class="rc-input {{#if invalidUsername}}rc-input--error{{/if}}">
			<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="{{username}}">
				</div>
			</label>
			{{#if invalidUsername}}
				<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_username"}}</div>
				</div>
			{{/if}}
		</div>
		<div class="rc-input {{#if invalidEmail}}rc-input--error{{/if}}">
			<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="{{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'}}" value="{{password}}">
				</div>
			</label>
		</div>
	</div>
</template>

<template name="setupWizardRegisterServer">
	<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">{{_ "Register_Server_Info"}}</p>
		<form class="setup-wizard-forms__content-register">
			<label class="setup-wizard-forms__content-register-option {{#if registerServer}}setup-wizard-forms__content-register-option--selected{{/if}}">
				<div class="setup-wizard-forms__content-register-radio">
					<input type="radio" name="registerServer" value="true" class="setup-wizard-forms__content-register-radio-element" checked="{{registerServer}}">
					<span class="setup-wizard-forms__content-register-radio-fake"></span>
					<span class="setup-wizard-forms__content-register-radio-text">{{_ "Register_Server_Registered"}}</span>
				</div>
				<ul class="setup-wizard-forms__content-register-items">
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}{{_ "Register_Server_Registered_Push_Notifications"}}</li>
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}{{_ "Register_Server_Registered_Livechat"}}</li>
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}{{_ "Register_Server_Registered_OAuth"}}</li>
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="check"}}{{_ "Register_Server_Registered_Marketplace"}}</li>
				</ul>
				<div>
					<label class="setup-wizard-forms__content-register-checkbox">
						<input type="checkbox" name="optIn" value="true" class="setup-wizard-forms__content-register-checkbox-element" checked="{{optIn}}" disabled={{$not registerServer}}>
						<span class="setup-wizard-forms__content-register-checkbox-fake">
								{{> icon block="setup-wizard-forms__content-register-checkbox-fake-icon" icon="check"}}
						</span>
						<span class="setup-wizard-forms__content-register-checkbox-text">{{_ "Register_Server_Opt_In"}}</span>
					</label>
				</div>
			</label>
			<label class="setup-wizard-forms__content-register-option {{#if $not registerServer}}setup-wizard-forms__content-register-option--selected{{/if}} {{#if $not allowStandaloneServer}}setup-wizard-forms__content-register-option--disabled{{/if}}">
				<div class="setup-wizard-forms__content-register-radio">
					<input type="radio" name="registerServer" value="false" class="setup-wizard-forms__content-register-radio-element" checked="{{$not registerServer}}" disabled={{$not allowStandaloneServer}}>
					<span class="setup-wizard-forms__content-register-radio-fake"></span>
					<span class="setup-wizard-forms__content-register-radio-text">{{_ "Register_Server_Standalone"}}</span>
				</div>
				<ul class="setup-wizard-forms__content-register-items">
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="circle"}}{{_ "Register_Server_Standalone_Service_Providers"}}</li>
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="circle"}}{{_ "Register_Server_Standalone_Update_Settings"}}</li>
					<li class="setup-wizard-forms__content-register-item">{{> icon block="setup-wizard-forms__content-register-radio-icon" icon="circle"}}{{_ "Register_Server_Standalone_Own_Certificates"}}</li>
				</ul>
			</label>
		</form>
	</div>
</template>

<template name="setupWizardCustomStep">
	<div class="setup-wizard-forms__content-step {{#if $eq currentStep step}}setup-wizard-forms__content-step--active{{/if}}">
		{{#each settings}}
			{{#if $eq type 'string'}}
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ label}}</div>
						<div class="rc-input__wrapper">
							<input type="text" class="rc-input__element js-setting-data" name="{{id}}" value="{{value}}">
						</div>
					</label>
				</div>
			{{/if}}

			{{#if $eq type 'select'}}
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ label}}</div>
						<div class="rc-select">
							<select class="rc-select__element js-setting-data" name="{{id}}">
								<option value="" disabled selected="{{this.isValueSelected undefined}}">{{_ "Select_an_option"}}</option>
								{{#each options}}
									<option class="rc-select__option" value="{{optionValue}}" selected="{{this.isValueSelected optionValue}}">{{_ optionLabel}}</option>
								{{/each}}
							</select>
							{{> icon block="rc-select__arrow" icon="arrow-down" }}
						</div>
					</label>
				</div>
			{{/if}}

			{{#if $eq type 'language'}}
				<div class="rc-input">
					<label class="rc-input__label">
						<div class="rc-input__title">{{_ label}}</div>
						<div class="rc-select">
							<select class="rc-select__element js-setting-data" name="{{id}}">
								<option value="" disabled selected="{{this.isValueSelected undefined}}">{{_ "Default"}}</option>
								{{#each options}}
									<option class="rc-select__option" value="{{optionValue}}" selected="{{this.isValueSelected optionValue}}" dir="auto">{{_ optionLabel}}</option>
								{{/each}}
							</select>
							{{> icon block="rc-select__arrow" icon="arrow-down" }}
						</div>
					</label>
				</div>
			{{/if}}
		{{/each}}
	</div>
</template>