JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Web auth pages redesign (#1532)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-03-20 18:16:30 +02:00 committed by GitHub
parent 6bf46e80ee
commit 26da16be2f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 796 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/satellite/src/api/users.ts
View File

@ -13,7 +13,7 @@ export async function updateAccountRequest(user: User): Promise<RequestResponse<
data: {
firstName: '',
lastName: '',
email: ''
email: '',
}
};
@ -93,7 +93,7 @@ export async function changePasswordRequest(password: string, newPassword: strin
// Performs Create user graqhQL request.
// Throws an exception if error occurs
// Returns object with newly created user
export async function createUserRequest(user: User, password: string): Promise<RequestResponse<null>> {
export async function createUserRequest(user: User, password: string, secret: string): Promise<RequestResponse<null>> {
let result: RequestResponse<null> = {
errorMessage: '',
isSuccess: false,
@ -111,7 +111,8 @@ export async function createUserRequest(user: User, password: string): Promise<R
password: "${password}",
firstName: "${user.firstName}",
lastName: "${user.lastName}",
}
},
secret: "${secret}",
){email}
}`
),
@ -179,7 +180,7 @@ export async function getUserRequest(): Promise<RequestResponse<User>> {
data: {
firstName: '',
lastName: '',
email: ''
email: '',
}
};

29
web/satellite/src/components/common/HeaderlessInput.vue
View File

@ -5,15 +5,16 @@
<div class="input-wrap">
<div class="label-container">
<img v-if="error" src="../../../static/images/register/ErrorInfo.svg"/>
<h3 v-if="!error && label">{{label}}</h3>
<h3 class="label-container__error" v-if="error">{{error}}</h3>
<h3 v-if="!error && label" :style="style.labelStyle">{{label}}</h3>
<h3 class="label-container__error" v-if="error" :style="style.errorStyle">{{error}}</h3>
</div>
<input
v-bind:class="[error ? 'inputError' : null]"
@input="onInput"
:placeholder="this.$props.placeholder"
v-model="value"
v-bind:type="[isPassword ? passwordType : textType]"
:style="style"/>
:style="style.inputStyle"/>
<!--2 conditions of eye image (crossed or not) -->
<svg v-if="isPassword && !isPasswordShown" v-on:click="changeVision()" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"/>
@ -78,12 +79,27 @@ import { Component, Vue } from 'vue-property-decorator';
type: String,
default: '100%'
},
isWhite: {
type: Boolean,
default: false
},
label: String,
error: String
},
computed: {
style: function () {
return {width: this.$props.width, height: this.$props.height};
return {
inputStyle: {
width: this.$props.width,
height: this.$props.height
},
labelStyle: {
color: this.$props.isWhite ? 'white' : '#354049'
},
errorStyle: {
color: this.$props.isWhite ? 'white' : '#FF5560'
},
};
}
}
},
@ -112,6 +128,10 @@ input::placeholder {
color: #384B65;
opacity: 0.4;
}
.inputError::placeholder {
color: #EB5757;
opacity: 0.4;
}
h3 {
font-family: 'montserrat_regular';
font-size: 16px;
@ -132,7 +152,6 @@ h3 {
}
&__error {
color: #FF5560;
margin-left: 10px;
}
}

2
web/satellite/src/components/common/RegistrationSuccessPopup.vue
View File

@ -23,7 +23,7 @@
Please check your inbox and use the verification link we shared with you in last email.</p>
<p>Didn’t receive a verification email?</p>
<div class="register-success-popup__form-container__button-container">
<Button label="Resend Email" width="450px" height="50px" :onPress="onCloseClick" isWhite />
<Button label="Go to Login" width="450px" height="50px" :onPress="onCloseClick" isWhite />
</div>
</div>
<div class="register-success-popup__close-cross-container">

2
web/satellite/src/types/users.d.ts vendored
View File

@ -4,7 +4,7 @@
declare type User = {
firstName: string,
lastName: string,
email: string
email: string,
};
// Used in users module to pass parameters to action

7
web/satellite/src/utils/constants/classConstants.ts Normal file
View File

@ -0,0 +1,7 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export const LOADING_CLASSES = {
LOADING_OVERLAY: 'loading-overlay',
LOADING_OVERLAY_ACTIVE: 'loading-overlay active',
};

5
web/satellite/src/utils/constants/emptyStatesImages.ts
View File

@ -230,4 +230,9 @@ export const EMPTY_STATE_IMAGES = {
<path d="M136.881 125.405H138.679C140.232 125.405 141.54 124.015 141.54 122.38C141.54 120.663 140.314 119.355 138.679 119.355H136.881C135.328 119.355 134.02 120.745 134.02 122.38C134.101 124.097 135.328 125.405 136.881 125.405Z" fill="#2683FF"/>
<path d="M116.361 136.03C115.952 136.03 115.625 136.03 115.298 136.111C114.644 136.193 113.99 135.784 113.745 135.212C106.061 121.233 91.1824 111.75 74.015 111.75C58.4826 111.75 44.7487 119.516 36.6555 131.37C36.2468 131.942 35.511 132.187 34.857 132.106C32.8133 131.697 30.6878 131.452 28.5623 131.452C12.5395 131.37 -0.376953 144.123 -0.376953 159.982C-0.376953 159.982 -0.376953 159.982 -0.376953 160.064C-0.376953 160.963 0.358791 161.699 1.33978 161.699H138.761C139.66 161.699 140.477 160.963 140.477 160.064V159.982C140.477 146.739 129.686 136.03 116.361 136.03Z" fill="#DEDEFC"/>
</svg>`,
INFO: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="19" height="19" rx="9.5" fill="#007AFF" stroke="#007AFF"/>
<path d="M10.0004 11.7359C10.6112 11.7359 11.111 11.2035 11.111 10.5527V5.81169C11.111 5.75253 11.1073 5.68942 11.0999 5.63026C11.0185 5.06623 10.5557 4.62842 10.0004 4.62842C9.38964 4.62842 8.88989 5.16089 8.88989 5.81169V10.5487C8.88989 11.2035 9.38964 11.7359 10.0004 11.7359Z" fill="white"/>
<path d="M9.99983 12.8904C9.13953 12.8904 8.44507 13.5848 8.44507 14.4452C8.44507 15.3055 9.13953 15.9999 9.99983 15.9999C10.8601 15.9999 11.5546 15.3055 11.5546 14.4452C11.5581 13.5848 10.8636 12.8904 9.99983 12.8904Z" fill="white"/>
</svg>`,
};

317
web/satellite/src/views/Login.vue
View File

@ -3,11 +3,22 @@
<template>
<div class="login-container" v-on:keyup.enter="onLogin">
<div v-bind:class="loadingClassName">
<img class="loading-overlay__logo" src="../../static/images/login/Logo.svg" alt="loading-logo">
</div>
<img class="planet" src="../../static/images/Mars.png" alt="" >
<div class="login-container__wrapper">
<div class="login-container__header">
<img class="login-container__logo" src="../../static/images/login/Logo.svg" alt="logo" v-on:click="onLogoClick">
<div class="login-container__register-button" v-on:click.prevent="onSignUpClick">
<p>Create Account</p>
</div>
</div>
<div class="login-area-wrapper">
<div class="login-area">
<div class="login-area__title-container">
<h1>Welcome to Storj</h1>
<h1>Login to Storj</h1>
<p>Satellite:<b>Mars</b></p>
</div>
<HeaderlessInput
class="login-area__email-input"
@ -24,15 +35,20 @@
height="46px"
isPassword>
</HeaderlessInput>
<Button class="login-area__login-button" label="Login" width="100%" height="48px" :onPress="onLogin"/>
<!-- start of navigation area -->
<div class="login-area__navigation-area">
<router-link to="/register" class="login-area__navigation-area__nav-link bold" exact><h3>Create
account</h3></router-link>
<router-link to="" class="login-area__navigation-area__nav-link" exact><h3><strong>Forgot
password</strong></h3></router-link>
<div class="login-area__submit-area">
<router-link to="" class="login-area__navigation-area__nav-link" exact>
<h3><strong>Forgot password?</strong></h3>
</router-link>
<div class="login-area__submit-area__login-button" v-on:click.prevent="onLogin">
<p>Login</p>
</div>
</div>
<div class="login-area__info-area">
<p class="login-area__info-area__signature">Storj Labs Inc 2019.</p>
<a class="login-area__info-area__terms">Terms & Conditions</a>
<a class="login-area__info-area__help">Help</a>
</div>
</div>
<!-- end of navigation area -->
</div>
</div>
</div>
@ -40,13 +56,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import Button from '@/components/common/Button.vue';
import { setToken } from '@/utils/tokenManager';
import ROUTES from '../utils/constants/routerConstants';
import { NOTIFICATION_ACTIONS } from '../utils/constants/actionNames';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { getTokenRequest } from '@/api/users';
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
@Component({
data: function () {
@ -54,20 +70,32 @@ import { getTokenRequest } from '@/api/users';
return {
email: '',
password: '',
token: ''
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
};
},
methods: {
onLogoClick: function (): void {
location.reload();
},
setEmail: function (value: string) {
setEmail: function (value: string): void {
this.$data.email = value;
},
setPassword: function (value: string) {
setPassword: function (value: string): void {
this.$data.password = value;
},
onLogin: async function () {
activateLoadingOverlay: function(): void {
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
setTimeout(() => {
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
}, 2000);
},
onLogin: async function (): Promise<any> {
if (!this.$data.email || !this.$data.password) {
return;
}
(this as any).activateLoadingOverlay();
let loginResponse = await getTokenRequest(this.$data.email, this.$data.password);
if (!loginResponse.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, loginResponse.errorMessage);
@ -77,8 +105,10 @@ import { getTokenRequest } from '@/api/users';
setToken(loginResponse.data);
this.$router.push(ROUTES.DASHBOARD.path);
}
},
onSignUpClick: function (): void {
this.$router.push(ROUTES.REGISTER.path);
},
},
components: {
HeaderlessInput,
@ -97,59 +127,198 @@ export default class Login extends Vue {
height: 100%;
left: 0;
top: 0;
background: rgba(51, 51, 51, 0.7);
z-index: 10;
background-image: url(../../static/images/login/1920.svg);
background-repeat: no-repeat;
background-size: contain;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
padding: 60px 0px 190px 104px;
padding: 60px 0px 0px 104px;
background-image: url("../../static/images/Background.png");
background-repeat: no-repeat;
background-size: auto;
&__wrapper {
min-width: 50%;
height: 86vh;
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
}
&__logo {
cursor: pointer;
width: 139px;
height: 62px;
}
&__register-button {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border-radius: 6px;
border: 1px solid white;
cursor: pointer;
width: 160px;
height: 48px;
p {
font-family: 'montserrat_bold';
font-size: 14px;
line-height: 19px;
margin-block-start: 0;
margin-block-end: 0;
color: white;
}
&:hover {
background-color: white;
p {
color: #2683FF;
}
}
}
}
.planet {
position: absolute;
top: -161px;
right: -257px;
z-index: -100;
}
.login-area-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.login-area {
background-color: #fff;
margin-top: 50px;
max-width: 500px;
width: 100%;
padding: 120px;
background-color: transparent;
width: 620px;
border-radius: 6px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
padding-bottom: 50px;
&__title-container {
height: 48px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 32px;
justify-content: space-between;
align-items: flex-end;
flex-direction: row;
margin-bottom: 20px;
width: 100%;
h1 {
font-family: 'montserrat_bold';
font-size: 32px;
color: #384B65;
line-height: 39px;
font-size: 22px;
color: white;
line-height: 27px;
margin-block-start: 0;
margin-block-end: 0;
}
p {
font-family: 'montserrat_regular';
font-size: 16px;
color: white;
line-height: 21px;
margin-block-start: 0;
margin-block-end: 0;
b {
font-family: 'montserrat_bold';
margin-left: 7px;
}
}
}
&__password-input {
margin-top: 22px;
}
&__login-button {
&__submit-area {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%;
margin-top: 22px;
align-self: center;
&__login-button {
display: flex;
align-items: center;
justify-content: center;
background-color: #2683FF;
border-radius: 6px;
cursor: pointer;
width: 160px;
height: 48px;
box-shadow: 0px 16px 24px #3A54DF;
p {
font-family: 'montserrat_bold';
font-size: 14px;
line-height: 19px;
margin-block-start: 0;
margin-block-end: 0;
color: white;
}
&:hover {
box-shadow: none;
}
}
}
&__info-area {
width: 100%;
height: 42px;
margin-top: 300px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: row;
p {
font-family: 'montserrat_regular';
font-size: 12px;
line-height: 18px;
text-align: center;
text-decoration: none;
color: white;
margin-block-start: 0;
margin-block-end: 0;
}
a {
font-family: 'montserrat_regular';
font-size: 15px;
line-height: 22px;
text-align: center;
text-decoration: none;
color: white;
}
&__signature {
margin-right: 50px;
}
&__terms {
margin-right: 35px;
}
}
&__login-button.container {
@ -170,17 +339,13 @@ export default class Login extends Vue {
font-family: 'montserrat_regular';
font-size: 14px;
line-height: 20px;
color: #2683FF;
height: 48px;
text-align: center;
text-justify: center;
padding-left: 15px;
padding-right: 15px;
min-width: 140px;
&:hover {
text-decoration: underline;
}
text-decoration: none;
color: white;
.bold {
font-family: 'montserrat_medium';
@ -189,52 +354,36 @@ export default class Login extends Vue {
}
}
@media screen and (max-width: 1440px) {
.login-container {
background-size: auto;
background-image: url(../../static/images/login/Background.svg);
.loading-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
height: 100vh;
width: 0;
z-index: 100;
background-color: rgba(134, 134, 148, 0.7);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
&__logo {
width: 240px;
height: 110px;
z-index: 200;
}
}
@media screen and (max-width: 1280px) {
.login-container {
background-image: url(../../static/images/login/1280.svg);
background-size: auto;
}
.login-area {
padding: 86px;
max-width: 444px;
}
}
@media screen and (max-width: 1024px) {
.login-container {
background-image: url(../../static/images/login/1024.svg);
}
}
@media screen and (max-width: 800px) {
.login-container {
padding: 0;
justify-content: flex-start;
display: block;
padding: 77px 50px 0 50px;
background-image: url(../../static/images/login/800.svg);
background-position-y: 0px;
width: auto;
height: 1450px;
position: relative;
&__wrapper {
margin: 0 auto;
max-width: 600px;
}
}
.login-area {
max-width: auto;
width: auto;
margin: 0 auto;
margin-top: 80px;
}
.loading-overlay.active {
width: 100vw;
visibility: visible;
opacity: 1;
}
</style>

731
web/satellite/src/views/Register.vue
View File

@ -2,164 +2,116 @@
// See LICENSE for copying information.
<template>
<div class="register" v-on:keyup.enter="onCreateClick">
<div class="register-area">
<div class="register-area__scrollable">
<div class="register-area__scrollable__navLabel">
<router-link to="/" exact>
<svg class="register-area__scrollable__navLabel__back-image" width="19" height="19"
viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z"
fill="#384B65"/>
</svg>
</router-link>
<h1>Sign Up</h1>
<div class="register-container" v-on:keyup.enter="onCreateClick">
<div v-bind:class="loadingClassName">
<img src="../../static/images/register/Loading.gif">
</div>
<div class="register-area__scrollable__form-area">
<HeaderedInput
<img class="planet" src="../../static/images/Mars.png" alt="" >
<div class="register-container__wrapper">
<div class="register-container__header">
<img class="register-container__logo" src="../../static/images/login/Logo.svg" alt="logo" v-on:click="onLogoClick">
<div class="register-container__register-button" v-on: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>
<p>Satellite:<b>Mars</b></p>
</div>
<HeaderlessInput
class="full-input"
label="First name"
placeholder="Enter First Name"
:error="firstNameError"
@setData="setFirstName">
</HeaderedInput>
<HeaderedInput
@setData="setFirstName"
width="100%"
height="46px"
isWhite>
</HeaderlessInput>
<HeaderlessInput
class="full-input"
label="Last Name"
placeholder="Enter Last Name"
@setData="setLastName">
</HeaderedInput>
<HeaderedInput
placeholder="Enter Short Name"
@setData="setLastName"
width="100%"
height="46px"
isWhite>
</HeaderlessInput>
<HeaderlessInput
class="full-input"
label="Email"
placeholder="Enter Email"
:error="emailError"
@setData="setEmail">
</HeaderedInput>
<HeaderedInput
@setData="setEmail"
width="100%"
height="46px"
isWhite>
</HeaderlessInput>
<div class="register-input">
<HeaderlessInput
class="full-input"
label="Password"
placeholder="Enter Password"
:error="passwordError"
@setData="setPassword"
width="100%"
height="46px"
isWhite
isPassword>
</HeaderedInput>
<HeaderedInput
</HeaderlessInput>
<span
v-html="infoImage"
title="Use 6 or more characters with a mix of letters and numbers"></span>
</div>
<div class="register-input">
<HeaderlessInput
class="full-input"
label="Repeat Password"
placeholder="Repeat Password"
:error="repeatedPasswordError"
@setData="setRepeatedPassword"
isPassword>
</HeaderedInput>
<!-- end of optional area -->
<div class="register-area__scrollable__form-area__terms-area">
<Checkbox
class="register-area__scrollable__form-area__terms-area__checkbox"
@setData="setTermsAccepted"
:isCheckboxError="isTermsAcceptedError"/>
<h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2>
width="100%"
height="46px"
isPassword
isWhite >
</HeaderlessInput>
<span v-html="infoImage"></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 v-bind:class="[isTermsAcceptedError ? 'checkmark error': 'checkmark']"></span>
</label>
<h2>I agree to the <a>Terms & Conditions</a></h2>
</div>
<div id="createAccountButton" class="register-area__submit-container__create-button" v-on:click.prevent="onCreateClick">
<p>Create Account</p>
</div>
</div>
<Button id="createAccountButton" class="register-area__scrollable__form-area__create-button" label="Create Account"
width="100%" height="48px" :onPress="onCreateClick"/>
</div>
</div>
</div>
<img class="layout-image" src="../../static/images/register/RegisterImage.svg"/>
<RegistrationSuccessPopup />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderedInput from '@/components/common/HeaderedInput.vue';
import Checkbox from '@/components/common/Checkbox.vue';
import Button from '@/components/common/Button.vue';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup.vue';
import { validateEmail, validatePassword } from '@/utils/validation';
import ROUTES from '@/utils/constants/routerConstants';
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { createUserRequest } from '@/api/users';
@Component(
{
methods: {
setEmail: function (value: string) {
this.$data.email = value;
this.$data.emailError = '';
},
setFirstName: function (value: string) {
this.$data.firstName = value;
this.$data.firstNameError = '';
},
setLastName: function (value: string) {
this.$data.lastName = value;
},
setPassword: function (value: string) {
this.$data.password = value;
this.$data.passwordError = '';
},
setRepeatedPassword: function (value: string) {
this.$data.repeatedPassword = value;
this.$data.repeatedPasswordError = '';
},
setTermsAccepted: function (value: boolean) {
this.$data.isTermsAccepted = value;
this.$data.isTermsAcceptedError = false;
},
onCreateClick: async function () {
let hasError = false;
const firstName = this.$data.firstName.trim();
const email = this.$data.email.trim();
const lastName = this.$data.lastName.trim();
if (!firstName) {
this.$data.firstNameError = 'Invalid First Name';
hasError = true;
}
if (!validateEmail(email)) {
this.$data.emailError = 'Invalid Email';
hasError = true;
}
if (!validatePassword(this.$data.password)) {
this.$data.passwordError = 'Invalid Password';
hasError = true;
}
if (this.$data.repeatedPassword !== this.$data.password) {
this.$data.repeatedPasswordError = 'Password doesn\'t match';
hasError = true;
}
if (!this.$data.isTermsAccepted) {
this.$data.isTermsAcceptedError = true;
hasError = true;
}
if (hasError) return;
let user = {
email,
firstName,
lastName,
};
let response = await createUserRequest(user, this.$data.password);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP);
}
},
data: function (): RegisterData {
data: function () {
return {
firstName: '',
firstNameError: '',
@ -172,14 +124,106 @@ import { createUserRequest } from '@/api/users';
repeatedPasswordError: '',
isTermsAccepted: false,
isTermsAcceptedError: false,
secret: '',
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
};
},
computed: {},
methods: {
setEmail: function (value: string): void {
this.$data.email = value;
this.$data.emailError = '';
},
setFirstName: function (value: string): void {
this.$data.firstName = value;
this.$data.firstNameError = '';
},
setLastName: function (value: string): void {
this.$data.lastName = value;
},
setPassword: function (value: string): void {
this.$data.password = value;
this.$data.passwordError = '';
},
setRepeatedPassword: function (value: string): void {
this.$data.repeatedPassword = value;
this.$data.repeatedPasswordError = '';
},
validateFields: function (): boolean {
let isNoErrors = true;
if (!this.$data.firstName.trim()) {
this.$data.firstNameError = 'Invalid First Name';
isNoErrors = false;
}
if (!validateEmail(this.$data.email.trim())) {
this.$data.emailError = 'Invalid Email';
isNoErrors = false;
}
if (!validatePassword(this.$data.password)) {
this.$data.passwordError = 'Invalid Password';
isNoErrors = false;
}
if (this.$data.repeatedPassword !== this.$data.password) {
this.$data.repeatedPasswordError = 'Password doesn\'t match';
isNoErrors = false;
}
if (!this.$data.isTermsAccepted) {
this.$data.isTermsAcceptedError = true;
isNoErrors = false;
}
return isNoErrors;
},
createUser: async function(): Promise<any> {
let user = {
email: this.$data.email.trim(),
firstName: this.$data.firstName.trim(),
lastName: this.$data.lastName.trim(),
};
let response = await createUserRequest(user, this.$data.password, this.$data.secret);
if (!response.isSuccess) {
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
return;
}
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP);
},
onCreateClick: function (): any {
let self = this as any;
if (!self.validateFields()) return;
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
self.createUser();
},
onLogoClick: function (): void {
location.reload();
},
onLoginClick: function (): void {
this.$router.push(ROUTES.LOGIN.path);
},
},
computed: {
infoImage: function() {
return EMPTY_STATE_IMAGES.INFO;
},
},
components: {
HeaderedInput,
Checkbox,
Button,
HeaderlessInput,
RegistrationSuccessPopup
},
mounted(): void {
if (this.$route.query.token) {
this.$data.secret = this.$route.query.token.toString();
}
}
})
@ -194,239 +238,334 @@ export default class Register extends Vue {
margin: 0 !important;
}
.register {
.register-container {
position: fixed;
background-color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
height: 100%;
left: 0;
top: 0;
z-index: 10;
background-size: contain;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
padding: 60px 0px 0px 104px;
background-image: url("../../static/images/Background.png");
background-repeat: no-repeat;
background-size: auto;
.register-input {
position: relative;
width: 100%;
span {
position: absolute;
top: 66px;
right: 43px;
}
}
&__wrapper {
min-width: 50%;
height: 86vh;
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
width: 100%;
}
&__logo {
cursor: pointer;
width: 139px;
height: 62px;
}
&__register-button {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border-radius: 6px;
border: 1px solid white;
cursor: pointer;
width: 160px;
height: 48px;
p {
font-family: 'montserrat_bold';
font-size: 14px;
line-height: 19px;
margin-block-start: 0;
margin-block-end: 0;
color: white;
}
&:hover {
background-color: white;
p {
color: #2683FF;
}
}
}
}
.register-area-wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
margin-top: 50px;
}
.register-area {
background-color: white;
width: 100%;
max-height: 100vh;
&__scrollable {
height: 100vh;
background-color: transparent;
width: 620px;
border-radius: 6px;
display: flex;
justify-content: center;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
&__navLabel {
&__title-container {
height: 48px;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-start;
align-self: center;
width: 68%;
margin-top: 70px;
h1 {
color: #384B65;
margin-left: 24px;
font-family: 'montserrat_bold'
}
&__back-image {
width: 21px;
height: 21px;
&:hover path {
fill: #2683FF !important;
}
}
}
&__form-area {
margin-top: 50px;
align-self: center;
width: 35vw;
&__company-area {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-items: flex-end;
flex-direction: row;
margin-bottom: 20px;
width: 100%;
margin-top: 32px;
h2 {
h1 {
font-family: 'montserrat_bold';
font-size: 20px;
font-size: 22px;
color: white;
line-height: 27px;
margin-right: 11px;
margin-block-start: 0;
margin-block-end: 0;
}
;
&__details-area {
cursor: pointer;
p {
font-family: 'montserrat_regular';
font-size: 16px;
color: white;
line-height: 21px;
margin-block-start: 0;
margin-block-end: 0;
b {
font-family: 'montserrat_bold';
margin-left: 7px;
}
}
}
&__submit-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
&__text {
font-size: 16px;
line-height: 23px;
}
&__expander-area {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
&:hover {
background-color: #E2ECF7;
}
}
}
;
}
justify-content: space-between;
width: 100%;
margin-top: 20px;
&__terms-area {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 20px;
justify-content: center;
align-items: center;
&__checkbox {
align-self: center;
}
;
h2 {
font-family: 'montserrat_regular';
font-size: 14px;
line-height: 20px;
margin-top: 30px;
margin-top: 14px;
margin-left: 10px;
color: white;
}
;
a {
color: #2683FF;
color: white;
font-family: 'montserrat_bold';
&:hover {
text-decoration: underline;
}
}
}
&__create-button {
margin-top: 30px;
margin-bottom: 100px;
}
}
}
}
.input-container.full-input {
width: 100%;
}
.layout-image {
background-color: #2683FF;
.container {
display: block;
height: 100vh;
}
a {
position: relative;
padding-left: 20px;
height: 25px;
width: 25px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
#optional-area {
height: auto;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
#optional-area.optional-area--active {
animation: mymove 0.5s ease-in-out;
}
#optional-area.optional-area {
height: 0px;
visibility: hidden;
.container input {
position: absolute;
animation: mymoveout 0.5s ease-in-out;
}
@keyframes mymove {
from {
height: 0px;
visibility: hidden;
opacity: 0;
}
to {
height: 100%;
visibility: visible;
opacity: 1;
}
cursor: pointer;
height: 0;
width: 0;
}
@keyframes mymoveout {
from {
height: 100%;
visibility: visible;
opacity: 1;
}
to {
height: 0px;
visibility: hidden;
opacity: 0;
}
}
@media screen and (max-width: 1440px) {
.register-area {
background-color: white;
width: 100%;
max-height: 100vh;
&__scrollable {
width: 60vw;
}
}
}
@media screen and (max-width: 720px), screen and (max-height: 880px) {
.register {
flex-direction: column;
}
.layout-image {
.checkmark {
position: absolute;
display: block;
bottom: 0;
top: 0;
left: 0;
width: 100%;
height: 200px;
height: 25px;
width: 25px;
border: 2px solid white;
border-radius: 4px;
}
.register-area {
width: 100vw;
overflow-y: scroll;
height: calc(100vh - 200px);
&__scrollable {
width: auto;
.container:hover input ~ .checkmark {
background-color: white;
}
&__form-area {
.container input:checked ~ .checkmark {
border: 2px solid white;
background-color: transparent;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkmark.error {
border-color: red;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&__create-button {
margin-bottom: 50px;
}
display: flex;
align-items: center;
justify-content: center;
background-color: #2683FF;
border-radius: 6px;
cursor: pointer;
width: 160px;
height: 48px;
box-shadow: 0px 16px 24px #3A54DF;
p {
font-family: 'montserrat_bold';
font-size: 14px;
line-height: 19px;
margin-block-start: 0;
margin-block-end: 0;
color: white;
}
&__form-area {
width: 75vw;
&:hover {
box-shadow: none;
}
}
}
}
.input-wrap.full-input {
width: 100%;
}
.planet {
position: absolute;
bottom: -61px;
right: -257px;
z-index: -100;
}
.loading-overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
height: 100vh;
z-index: 100;
background-color: rgba(134, 134, 148, 0.7);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
img {
z-index: 200;
}
}
.loading-overlay.active {
visibility: visible;
opacity: 1;
}
@media screen and (max-height: 840px) {
.register-container {
overflow: hidden;
&__wrapper {
height: 770px;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
&::-webkit-scrollbar {
width: 0 !important;
display: none;
}
}
}
}
@media screen and (max-height: 810px) {
.register-container {
&__wrapper {
height: 700px;
}
}
.register-area__submit-container {
margin-bottom: 25px;
}
}
</style>

BIN
web/satellite/static/images/Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 MiB

BIN
web/satellite/static/images/Mars.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 KiB

BIN
web/satellite/static/images/register/Loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

21
web/satellite/tests/unit/common/__snapshots__/HeaderlessInput.spec.ts.snap
View File

@ -1,14 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HeaderlessInput.vue renders correctly with default props 1`] = `
<div class="input-wrap"><input placeholder="default" type="text" style="width: 100%; height: 48px;">
<div class="input-wrap">
<div class="label-container">
<!---->
<!---->
<!---->
</div> <input placeholder="default" type="text" class="" style="width: 100%; height: 48px;">
<!---->
<!---->
</div>
`;
exports[`HeaderlessInput.vue renders correctly with isPassword prop 1`] = `
<div class="input-wrap"><input placeholder="default" type="password" style="width: 100%; height: 48px;"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<div class="input-wrap">
<div class="label-container">
<!---->
<!---->
<!---->
</div> <input placeholder="default" type="password" class="" style="width: 100%; height: 48px;"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 4C4.70642 4 1 10 1 10C1 10 3.6999 16 10 16C16.3527 16 19 10 19 10C19 10 15.3472 4 10 4ZM10 13.8176C7.93537 13.8176 6.2946 12.1271 6.2946 10C6.2946 7.87285 7.93537 6.18239 10 6.18239C12.0646 6.18239 13.7054 7.87285 13.7054 10C13.7054 12.1271 12.0646 13.8176 10 13.8176Z" fill="#AFB7C1"></path>
<path d="M11.6116 9.96328C11.6116 10.8473 10.8956 11.5633 10.0116 11.5633C9.12763 11.5633 8.41162 10.8473 8.41162 9.96328C8.41162 9.07929 9.12763 8.36328 10.0116 8.36328C10.8956 8.36328 11.6116 9.07929 11.6116 9.96328Z" fill="#AFB7C1"></path>
</svg>
@ -17,7 +27,12 @@ exports[`HeaderlessInput.vue renders correctly with isPassword prop 1`] = `
`;
exports[`HeaderlessInput.vue renders correctly with size props 1`] = `
<div class="input-wrap"><input placeholder="test" type="text" style="width: 30px; height: 20px;">
<div class="input-wrap">
<div class="label-container">
<!---->
<!---->
<!---->
</div> <input placeholder="test" type="text" class="" style="width: 30px; height: 20px;">
<!---->
<!---->
</div>

16
web/satellite/tests/unit/store/users.spec.ts
View File

@ -19,7 +19,7 @@ describe('mutations', () => {
user: {
firstName: '',
lastName: '',
email: ''
email: '',
}
};
@ -28,7 +28,7 @@ describe('mutations', () => {
const user = {
firstName: 'firstName',
lastName: 'lastName',
email: 'email'
email: 'email',
};
store.commit(USER_MUTATIONS.SET_USER_INFO, user);
@ -61,13 +61,13 @@ describe('mutations', () => {
user: {
firstName: '',
lastName: '',
email: ''
email: '',
}
};
const user = {
firstName: 'firstName',
lastName: 'lastName',
email: 'email'
email: 'email',
};
const store = new Vuex.Store({state, mutations});
@ -98,7 +98,7 @@ describe('actions', () => {
const user = {
firstName: '',
lastName: '',
email: ''
email: '',
};
const dispatchResponse = await usersModule.actions.updateAccount({commit}, user);
@ -107,7 +107,7 @@ describe('actions', () => {
expect(commit).toHaveBeenCalledWith(USER_MUTATIONS.UPDATE_USER_INFO, {
firstName: 'firstName',
lastName: 'lastName',
email: 'email'
email: 'email',
});
});
@ -121,7 +121,7 @@ describe('actions', () => {
const user = {
firstName: '',
lastName: '',
email: ''
email: '',
};
const dispatchResponse = await usersModule.actions.updateAccount({commit}, user);
@ -166,7 +166,7 @@ describe('actions', () => {
data: {
firstName: '',
lastName: '',
email: ''
email: '',
}
})
);

4
web/satellite/webpack.config.dev.js
View File

@ -37,8 +37,8 @@ module.exports = {
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
ts:'ts-loader!tslint-loader',
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
scss: 'vue-style-loader!css-loader!sass-loader',
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
// other vue-loader options go here
}