102 lines
5.7 KiB
HTML
102 lines
5.7 KiB
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="Nickname"
|
|
placeholder="Enter Nickname"
|
|
@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="true">
|
|
</HeaderlessInput>
|
|
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" >
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
|
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
|
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
|
</svg>
|
|
</InfoComponent>
|
|
</div>
|
|
<div class="register-input">
|
|
<HeaderlessInput
|
|
class="full-input"
|
|
label="Confirm Password"
|
|
placeholder="Confirm Password"
|
|
:error="repeatedPasswordError"
|
|
@setData="setRepeatedPassword"
|
|
width="100%"
|
|
height="46px"
|
|
isPassword="true">
|
|
</HeaderlessInput>
|
|
<InfoComponent class="register-input__info-button" boldText="Use 6 or more characters with a mix of letters, numbers & symbols" isCustomPosition>
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="18" height="18" rx="9" fill="#007AFF"/>
|
|
<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
|
|
<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
|
|
</svg>
|
|
</InfoComponent>
|
|
</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 ref="register_success_popup"/>
|
|
</div>
|