storj/web/satellite/src/views/register/register.html

<!--Copyright (C) 2019 Storj Labs, Inc.-->
<!--See LICENSE for copying information.-->

<div class="register-container" @keyup.enter="onCreateClick">
	<div :class="loadingClassName">
		<img src="../../../static/images/register/Loading.gif">
	</div>
	<img class="image" src="../../../static/images/AuthImage.svg" alt="" >
	<div class="register-container__wrapper">
		<div class="register-container__header">
			<img class="register-container__logo" src="../../../static/images/Logo.svg" alt="logo" @click="onLogoClick">
			<div class="register-container__register-button" @click.prevent="onLoginClick">
				<p>Login</p>
			</div>
		</div>
		<div class="register-area-wrapper">
			<div class="register-area">
				<div class="register-area__title-container">
					<h1>Sign Up to Storj</h1>
				</div>
				<HeaderlessInput
						class="full-input"
						label="Full Name"
						placeholder="Enter Full Name"
						:error="fullNameError"
						@setData="setFullName"
						width="100%"
						height="46px">
				</HeaderlessInput>
				<HeaderlessInput
						class="full-input"
						label="Short Name"
						placeholder="Enter Short Name"
						@setData="setShortName"
						width="100%"
						height="46px">
				</HeaderlessInput>
				<HeaderlessInput
						class="full-input"
						label="Email"
						placeholder="Enter Email"
						:error="emailError"
						@setData="setEmail"
						width="100%"
						height="46px">
				</HeaderlessInput>
				<div class="register-input">
					<HeaderlessInput
						class="full-input"
						label="Password"
						placeholder="Enter Password"
						:error="passwordError"
						@setData="setPassword"
						width="100%"
						height="46px"
						isPassword>
					</HeaderlessInput>
					<span
							v-html="infoImage"
							title="Use 6 or more characters"></span>
				</div>
				<div class="register-input">
					<HeaderlessInput
							class="full-input"
							label="Confirm Password"
							placeholder="Confirm Password"
							:error="repeatedPasswordError"
							@setData="setRepeatedPassword"
							width="100%"
							height="46px"
							isPassword>
					</HeaderlessInput>
					<span v-html="infoImage"
					      title="Use 6 or more characters"></span>
				</div>
				<div class="register-area__submit-container">
					<div class="register-area__submit-container__terms-area">
						<label class="container">
							<input type="checkbox" v-model="isTermsAccepted">
							<span :class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
						</label>
						<h2>I agree to the <a href="https://tardigrade.io/terms-of-use/" target="_blank">Terms & Conditions</a></h2>
					</div>
					<div id="createAccountButton" class="register-area__submit-container__create-button" @click.prevent="onCreateClick">
						<p>Create Account</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<RegistrationSuccessPopup />
</div>