Moved templates and styles for Login, Register and Navigation (#1624)
This commit is contained in:
Nikolay Yurchenko
Bogdan Artemenko
parent
6aa50529ff
commit
42aad35b07
@ -83,7 +83,7 @@ export default class ProjectSelectionDropdown extends Vue {
|
|||||||
.account-dropdown-choice-container {
|
.account-dropdown-choice-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 9vh;
|
top: 9vh;
|
||||||
left: 0px;
|
left: -70px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 10px 0px 10px 0px;
|
padding: 10px 0px 10px 0px;
|
||||||
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
|
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
|
||||||
@ -132,4 +132,4 @@ export default class ProjectSelectionDropdown extends Vue {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -21,11 +21,6 @@ import AccountButton from './AccountButton.vue';
|
|||||||
|
|
||||||
@Component(
|
@Component(
|
||||||
{
|
{
|
||||||
methods: {
|
|
||||||
onLogoClick: function (): void {
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
components: {
|
||||||
ProjectSelectionArea,
|
ProjectSelectionArea,
|
||||||
NewProjectArea,
|
NewProjectArea,
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
45
web/satellite/src/components/navigation/navigationArea.html
Normal file
45
web/satellite/src/components/navigation/navigationArea.html
Normal file
File diff suppressed because one or more lines are too long
133
web/satellite/src/components/navigation/navigationArea.scss
Normal file
133
web/satellite/src/components/navigation/navigationArea.scss
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
.navigation-area {
|
||||||
|
position: relative;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 280px;
|
||||||
|
height: 100vh;
|
||||||
|
left: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
padding-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
margin-left: 60px;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: 54px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
margin-left: 12px;
|
||||||
|
width: 69px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__satellite {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
|
||||||
|
&__span_title {
|
||||||
|
color: #354049;
|
||||||
|
opacity: 0.41;
|
||||||
|
font-family: 'font_regular';
|
||||||
|
line-height: 21px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__span_name {
|
||||||
|
color: #354049;
|
||||||
|
font-family: 'font_medium';
|
||||||
|
line-height: 21px;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-container {
|
||||||
|
height: 70px;
|
||||||
|
padding-left: 60px;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
&.router-link-active,
|
||||||
|
&:hover {
|
||||||
|
border-left: 3px solid #2683FF;
|
||||||
|
.svg path:not(.white) {
|
||||||
|
fill: #2683FF !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
h1 {
|
||||||
|
font-family: 'font_medium';
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 23px;
|
||||||
|
color: #354049;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__add-button {
|
||||||
|
margin-left: 40px;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
border-radius: 50px;
|
||||||
|
box-shadow: 0px 4px 20px rgba(35, 121, 236, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.navigation-area {
|
||||||
|
width: 80px;
|
||||||
|
max-width: 80px;
|
||||||
|
min-width: 80px;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo__text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item-container {
|
||||||
|
padding-left: 26px;
|
||||||
|
|
||||||
|
&__link-container {
|
||||||
|
h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__add-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,8 +4,8 @@
|
|||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Router from 'vue-router';
|
import Router from 'vue-router';
|
||||||
import ROUTES from '@/utils/constants/routerConstants';
|
import ROUTES from '@/utils/constants/routerConstants';
|
||||||
import Login from '@/views/Login.vue';
|
import Login from '@/views/login/Login.vue';
|
||||||
import Register from '@/views/Register.vue';
|
import Register from '@/views/register/Register.vue';
|
||||||
import Dashboard from '@/views/Dashboard.vue';
|
import Dashboard from '@/views/Dashboard.vue';
|
||||||
import AccountArea from '@/components/account/AccountArea.vue';
|
import AccountArea from '@/components/account/AccountArea.vue';
|
||||||
import ProjectDetails from '@/components/project/ProjectDetailsArea.vue';
|
import ProjectDetails from '@/components/project/ProjectDetailsArea.vue';
|
||||||
|
|||||||
@ -1,389 +0,0 @@
|
|||||||
// Copyright (C) 2019 Storj Labs, Inc.
|
|
||||||
// See LICENSE for copying information.
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="login-container" v-on:keyup.enter="onLogin">
|
|
||||||
<div v-bind:class="loadingClassName">
|
|
||||||
<img class="loading-overlay__logo" src="../../static/images/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/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>Login to Storj</h1>
|
|
||||||
<p>Satellite:<b>Mars</b></p>
|
|
||||||
</div>
|
|
||||||
<HeaderlessInput
|
|
||||||
class="login-area__email-input"
|
|
||||||
placeholder="Email"
|
|
||||||
@setData="setEmail"
|
|
||||||
height="46px"
|
|
||||||
width="100%">
|
|
||||||
</HeaderlessInput>
|
|
||||||
<HeaderlessInput
|
|
||||||
class="login-area__password-input"
|
|
||||||
placeholder="Password"
|
|
||||||
@setData="setPassword"
|
|
||||||
width="100%"
|
|
||||||
height="46px"
|
|
||||||
isPassword>
|
|
||||||
</HeaderlessInput>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<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 { getTokenRequest } from '@/api/users';
|
|
||||||
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
data: function () {
|
|
||||||
|
|
||||||
return {
|
|
||||||
email: '',
|
|
||||||
password: '',
|
|
||||||
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onLogoClick: function (): void {
|
|
||||||
location.reload();
|
|
||||||
},
|
|
||||||
setEmail: function (value: string): void {
|
|
||||||
this.$data.email = value;
|
|
||||||
},
|
|
||||||
setPassword: function (value: string): void {
|
|
||||||
this.$data.password = value;
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setToken(loginResponse.data);
|
|
||||||
this.$router.push(ROUTES.DASHBOARD.path);
|
|
||||||
},
|
|
||||||
onSignUpClick: function (): void {
|
|
||||||
this.$router.push(ROUTES.REGISTER.path);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
HeaderlessInput,
|
|
||||||
Button
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default class Login extends Vue {
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.login-container {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
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;
|
|
||||||
|
|
||||||
&__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: 'font_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: 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: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: 'font_bold';
|
|
||||||
font-size: 22px;
|
|
||||||
color: white;
|
|
||||||
line-height: 27px;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-family: 'font_regular';
|
|
||||||
font-size: 16px;
|
|
||||||
color: white;
|
|
||||||
line-height: 21px;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
|
|
||||||
b {
|
|
||||||
font-family: 'font_bold';
|
|
||||||
margin-left: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__password-input {
|
|
||||||
margin-top: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__submit-area {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 22px;
|
|
||||||
|
|
||||||
&__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: 'font_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: 'font_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: 'font_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 {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__navigation-area {
|
|
||||||
margin-top: 24px;
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&__nav-link {
|
|
||||||
font-family: 'font_regular';
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
height: 48px;
|
|
||||||
text-align: center;
|
|
||||||
padding-left: 15px;
|
|
||||||
padding-right: 15px;
|
|
||||||
min-width: 140px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
.bold {
|
|
||||||
font-family: 'font_medium';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay.active {
|
|
||||||
width: 100vw;
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,571 +0,0 @@
|
|||||||
// Copyright (C) 2019 Storj Labs, Inc.
|
|
||||||
// See LICENSE for copying information.
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="register-container" v-on:keyup.enter="onCreateClick">
|
|
||||||
<div v-bind:class="loadingClassName">
|
|
||||||
<img src="../../static/images/register/Loading.gif">
|
|
||||||
</div>
|
|
||||||
<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/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="Full name"
|
|
||||||
placeholder="Enter Full Name"
|
|
||||||
:error="fullNameError"
|
|
||||||
@setData="setFullName"
|
|
||||||
width="100%"
|
|
||||||
height="46px"
|
|
||||||
isWhite>
|
|
||||||
</HeaderlessInput>
|
|
||||||
<HeaderlessInput
|
|
||||||
class="full-input"
|
|
||||||
label="Short Name"
|
|
||||||
placeholder="Enter Short Name"
|
|
||||||
@setData="setShortName"
|
|
||||||
width="100%"
|
|
||||||
height="46px"
|
|
||||||
isWhite>
|
|
||||||
</HeaderlessInput>
|
|
||||||
<HeaderlessInput
|
|
||||||
class="full-input"
|
|
||||||
label="Email"
|
|
||||||
placeholder="Enter Email"
|
|
||||||
:error="emailError"
|
|
||||||
@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>
|
|
||||||
</HeaderlessInput>
|
|
||||||
<span
|
|
||||||
v-html="infoImage"
|
|
||||||
title="Use 6 or more characters"></span>
|
|
||||||
</div>
|
|
||||||
<div class="register-input">
|
|
||||||
<HeaderlessInput
|
|
||||||
class="full-input"
|
|
||||||
label="Repeat Password"
|
|
||||||
placeholder="Repeat Password"
|
|
||||||
:error="repeatedPasswordError"
|
|
||||||
@setData="setRepeatedPassword"
|
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<RegistrationSuccessPopup />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
|
||||||
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(
|
|
||||||
{
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
fullName: '',
|
|
||||||
fullNameError: '',
|
|
||||||
shortName: '',
|
|
||||||
email: '',
|
|
||||||
emailError: '',
|
|
||||||
password: '',
|
|
||||||
passwordError: '',
|
|
||||||
repeatedPassword: '',
|
|
||||||
repeatedPasswordError: '',
|
|
||||||
isTermsAccepted: false,
|
|
||||||
isTermsAcceptedError: false,
|
|
||||||
secret: '',
|
|
||||||
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setEmail: function (value: string): void {
|
|
||||||
this.$data.email = value;
|
|
||||||
this.$data.emailError = '';
|
|
||||||
},
|
|
||||||
setFullName: function (value: string): void {
|
|
||||||
this.$data.fullName = value;
|
|
||||||
this.$data.fullNameError = '';
|
|
||||||
},
|
|
||||||
setShortName: function (value: string): void {
|
|
||||||
this.$data.shortName = 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.fullName.trim()) {
|
|
||||||
this.$data.fullNameError = 'Invalid 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(),
|
|
||||||
fullName: this.$data.fullName.trim(),
|
|
||||||
shortName: this.$data.shortName.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: {
|
|
||||||
HeaderlessInput,
|
|
||||||
RegistrationSuccessPopup
|
|
||||||
},
|
|
||||||
mounted(): void {
|
|
||||||
if (this.$route.query.token) {
|
|
||||||
this.$data.secret = this.$route.query.token.toString();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default class Register extends Vue {
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
body {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.register-container {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
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: 'font_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: transparent;
|
|
||||||
width: 620px;
|
|
||||||
border-radius: 6px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
&__title-container {
|
|
||||||
height: 48px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: 'font_bold';
|
|
||||||
font-size: 22px;
|
|
||||||
color: white;
|
|
||||||
line-height: 27px;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-family: 'font_regular';
|
|
||||||
font-size: 16px;
|
|
||||||
color: white;
|
|
||||||
line-height: 21px;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
|
|
||||||
b {
|
|
||||||
font-family: 'font_bold';
|
|
||||||
margin-left: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__submit-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
&__terms-area {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&__checkbox {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-family: 'font_regular';
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 20px;
|
|
||||||
margin-top: 14px;
|
|
||||||
margin-left: 10px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: white;
|
|
||||||
font-family: 'font_bold';
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: block;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container input {
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkmark {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 25px;
|
|
||||||
width: 25px;
|
|
||||||
border: 2px solid white;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container:hover input ~ .checkmark {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
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: 'font_bold';
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 19px;
|
|
||||||
margin-block-start: 0;
|
|
||||||
margin-block-end: 0;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&: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>
|
|
||||||
72
web/satellite/src/views/login/Login.vue
Normal file
72
web/satellite/src/views/login/Login.vue
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template src="./login.html"></template>
|
||||||
|
|
||||||
|
<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 { getTokenRequest } from '../../api/users';
|
||||||
|
import { LOADING_CLASSES } from '../../utils/constants/classConstants';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
data: function () {
|
||||||
|
|
||||||
|
return {
|
||||||
|
email: '',
|
||||||
|
password: '',
|
||||||
|
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onLogoClick: function (): void {
|
||||||
|
location.reload();
|
||||||
|
},
|
||||||
|
setEmail: function (value: string): void {
|
||||||
|
this.$data.email = value;
|
||||||
|
},
|
||||||
|
setPassword: function (value: string): void {
|
||||||
|
this.$data.password = value;
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setToken(loginResponse.data);
|
||||||
|
this.$router.push(ROUTES.DASHBOARD.path);
|
||||||
|
},
|
||||||
|
onSignUpClick: function (): void {
|
||||||
|
this.$router.push(ROUTES.REGISTER.path);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
HeaderlessInput,
|
||||||
|
Button
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default class Login extends Vue {
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="./login.scss" scoped lang="scss"></style>
|
||||||
53
web/satellite/src/views/login/login.html
Normal file
53
web/satellite/src/views/login/login.html
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!--Copyright (C) 2019 Storj Labs, Inc.-->
|
||||||
|
<!--See LICENSE for copying information.-->
|
||||||
|
|
||||||
|
<div class="login-container" v-on:keyup.enter="onLogin">
|
||||||
|
<div v-bind:class="loadingClassName">
|
||||||
|
<img class="loading-overlay__logo" src="../../../static/images/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/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>Login to Storj</h1>
|
||||||
|
<p>Satellite:<b>Mars</b></p>
|
||||||
|
</div>
|
||||||
|
<HeaderlessInput
|
||||||
|
class="login-area__email-input"
|
||||||
|
placeholder="Email"
|
||||||
|
@setData="setEmail"
|
||||||
|
height="46px"
|
||||||
|
width="100%">
|
||||||
|
</HeaderlessInput>
|
||||||
|
<HeaderlessInput
|
||||||
|
class="login-area__password-input"
|
||||||
|
placeholder="Password"
|
||||||
|
@setData="setPassword"
|
||||||
|
width="100%"
|
||||||
|
height="46px"
|
||||||
|
isPassword>
|
||||||
|
</HeaderlessInput>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
478
web/satellite/src/views/login/login.scss
Normal file
478
web/satellite/src/views/login/login.scss
Normal file
@ -0,0 +1,478 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
|
||||||
|
&__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: 'font_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: calc(100vw - 2200px);
|
||||||
|
z-index: -100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-area-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-area {
|
||||||
|
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: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'font_bold';
|
||||||
|
font-size: 22px;
|
||||||
|
color: white;
|
||||||
|
line-height: 27px;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: 'font_regular';
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-family: 'font_bold';
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__password-input {
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submit-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 22px;
|
||||||
|
|
||||||
|
&__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: 'font_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: 'font_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: 'font_regular';
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__signature {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__terms {
|
||||||
|
margin-right: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__login-button.container {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navigation-area {
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__nav-link {
|
||||||
|
font-family: 'font_regular';
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
height: 48px;
|
||||||
|
text-align: center;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
min-width: 140px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-family: 'font_medium';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-overlay.active {
|
||||||
|
width: 100vw;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1700px) {
|
||||||
|
.planet {
|
||||||
|
right: calc(100vw - 2000px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1450px) {
|
||||||
|
.planet {
|
||||||
|
right: calc(100vw - 1850px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1250px) {
|
||||||
|
.planet {
|
||||||
|
right: calc(100vw - 1700px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
.login-container {
|
||||||
|
padding: 60px 20px 20px 20px;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
min-width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-area {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&__info-area {
|
||||||
|
&__signature {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__terms {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 420px) {
|
||||||
|
.login-container {
|
||||||
|
padding: 40px 15px 50px 15px;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
width: 315px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__register-button {
|
||||||
|
width: 130px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.planet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.login-area-wrapper {
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.login-area {
|
||||||
|
width: 96%;
|
||||||
|
|
||||||
|
&__title-container {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submit-area {
|
||||||
|
h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-area {
|
||||||
|
margin-top: 200px;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
&__signature {
|
||||||
|
margin-right: 30px;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__terms {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__help {
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 340px) {
|
||||||
|
.login-container {
|
||||||
|
padding: 40px 15px 50px 15px;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__register-button {
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-area-wrapper {
|
||||||
|
padding-top: 20px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.login-area {
|
||||||
|
width: 92%;
|
||||||
|
|
||||||
|
&__title-container {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submit-area {
|
||||||
|
h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__info-area {
|
||||||
|
margin-top: 100px;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
&__signature {
|
||||||
|
margin-right: 30px;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__terms {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__help {
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 850px) {
|
||||||
|
.login-area {
|
||||||
|
&__info-area {
|
||||||
|
margin-top: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 700px) {
|
||||||
|
.login-area {
|
||||||
|
&__info-area {
|
||||||
|
margin-top: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-height: 610px) {
|
||||||
|
.login-area {
|
||||||
|
&__info-area {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
139
web/satellite/src/views/register/Register.vue
Normal file
139
web/satellite/src/views/register/Register.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template src="./register.html"></template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
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(
|
||||||
|
{
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
fullName: '',
|
||||||
|
fullNameError: '',
|
||||||
|
shortName: '',
|
||||||
|
email: '',
|
||||||
|
emailError: '',
|
||||||
|
password: '',
|
||||||
|
passwordError: '',
|
||||||
|
repeatedPassword: '',
|
||||||
|
repeatedPasswordError: '',
|
||||||
|
isTermsAccepted: false,
|
||||||
|
isTermsAcceptedError: false,
|
||||||
|
secret: '',
|
||||||
|
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setEmail: function (value: string): void {
|
||||||
|
this.$data.email = value;
|
||||||
|
this.$data.emailError = '';
|
||||||
|
},
|
||||||
|
setFullName: function (value: string): void {
|
||||||
|
this.$data.fullName = value;
|
||||||
|
this.$data.fullNameError = '';
|
||||||
|
},
|
||||||
|
setShortName: function (value: string): void {
|
||||||
|
this.$data.shortName = 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.fullName.trim()) {
|
||||||
|
this.$data.fullNameError = 'Invalid 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(),
|
||||||
|
fullName: this.$data.fullName.trim(),
|
||||||
|
shortName: this.$data.shortName.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: {
|
||||||
|
HeaderlessInput,
|
||||||
|
RegistrationSuccessPopup
|
||||||
|
},
|
||||||
|
mounted(): void {
|
||||||
|
if (this.$route.query.token) {
|
||||||
|
this.$data.secret = this.$route.query.token.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default class Register extends Vue {
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="./register.scss" scoped lang="scss"></style>
|
||||||
98
web/satellite/src/views/register/register.html
Normal file
98
web/satellite/src/views/register/register.html
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<!--Copyright (C) 2019 Storj Labs, Inc.-->
|
||||||
|
<!--See LICENSE for copying information.-->
|
||||||
|
|
||||||
|
<div class="register-container" v-on:keyup.enter="onCreateClick">
|
||||||
|
<div v-bind:class="loadingClassName">
|
||||||
|
<img src="../../../static/images/register/Loading.gif">
|
||||||
|
</div>
|
||||||
|
<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/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="Full name"
|
||||||
|
placeholder="Enter Full Name"
|
||||||
|
:error="fullNameError"
|
||||||
|
@setData="setFullName"
|
||||||
|
width="100%"
|
||||||
|
height="46px"
|
||||||
|
isWhite>
|
||||||
|
</HeaderlessInput>
|
||||||
|
<HeaderlessInput
|
||||||
|
class="full-input"
|
||||||
|
label="Short Name"
|
||||||
|
placeholder="Enter Short Name"
|
||||||
|
@setData="setShortName"
|
||||||
|
width="100%"
|
||||||
|
height="46px"
|
||||||
|
isWhite>
|
||||||
|
</HeaderlessInput>
|
||||||
|
<HeaderlessInput
|
||||||
|
class="full-input"
|
||||||
|
label="Email"
|
||||||
|
placeholder="Enter Email"
|
||||||
|
:error="emailError"
|
||||||
|
@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>
|
||||||
|
</HeaderlessInput>
|
||||||
|
<span
|
||||||
|
v-html="infoImage"
|
||||||
|
title="Use 6 or more characters"></span>
|
||||||
|
</div>
|
||||||
|
<div class="register-input">
|
||||||
|
<HeaderlessInput
|
||||||
|
class="full-input"
|
||||||
|
label="Repeat Password"
|
||||||
|
placeholder="Repeat Password"
|
||||||
|
:error="repeatedPasswordError"
|
||||||
|
@setData="setRepeatedPassword"
|
||||||
|
width="100%"
|
||||||
|
height="46px"
|
||||||
|
isPassword
|
||||||
|
isWhite >
|
||||||
|
</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 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<RegistrationSuccessPopup />
|
||||||
|
</div>
|
||||||
413
web/satellite/src/views/register/register.scss
Normal file
413
web/satellite/src/views/register/register.scss
Normal file
@ -0,0 +1,413 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-container {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
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: 'font_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: transparent;
|
||||||
|
width: 620px;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
&__title-container {
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'font_bold';
|
||||||
|
font-size: 22px;
|
||||||
|
color: white;
|
||||||
|
line-height: 27px;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: 'font_regular';
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
line-height: 21px;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-family: 'font_bold';
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submit-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
&__terms-area {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__checkbox {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'font_regular';
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
margin-top: 14px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
font-family: 'font_bold';
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: block;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container input {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkmark {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
border: 2px solid white;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container:hover input ~ .checkmark {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
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: 'font_bold';
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 19px;
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 840px) {
|
||||||
|
.planet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.register-container {
|
||||||
|
padding: 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.planet {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 650px) {
|
||||||
|
.register-container {
|
||||||
|
&__wrapper {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 520px) {
|
||||||
|
.register-container {
|
||||||
|
&__wrapper {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 420px) {
|
||||||
|
.register-container {
|
||||||
|
&__wrapper {
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 320px) {
|
||||||
|
.register-container {
|
||||||
|
&__wrapper {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__register-button {
|
||||||
|
width: 120px;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.register-area {
|
||||||
|
&__title-container {
|
||||||
|
h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__submit-container {
|
||||||
|
&__terms-area {
|
||||||
|
h2 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__create-button {
|
||||||
|
height: 40px;
|
||||||
|
p {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user