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

Moved templates and styles for Login, Register and Navigation (#1624)

Browse Source
This commit is contained in:
Nikolay Yurchenko 2019-04-01 14:24:45 +03:00 committed by Bogdan Artemenko
parent 6aa50529ff
commit 42aad35b07
14 changed files with 1440 additions and 1115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/satellite/src/components/header/AccountDropdown.vue
View File

@ -83,7 +83,7 @@ export default class ProjectSelectionDropdown extends Vue {
.account-dropdown-choice-container {
position: absolute;
top: 9vh;
left: 0px;
left: -70px;
border-radius: 4px;
padding: 10px 0px 10px 0px;
box-shadow: 0px 4px rgba(231, 232, 238, 0.6);
@ -132,4 +132,4 @@ export default class ProjectSelectionDropdown extends Vue {
text-decoration: none;
outline: none;
}
</style>
</style>

5
web/satellite/src/components/header/Header.vue
View File

@ -21,11 +21,6 @@ import AccountButton from './AccountButton.vue';
@Component(
{
methods: {
onLogoClick: function (): void {
location.reload();
}
},
components: {
ProjectSelectionArea,
NewProjectArea,

151
web/satellite/src/components/navigation/NavigationArea.vue
View File

File diff suppressed because one or more lines are too long

45
web/satellite/src/components/navigation/navigationArea.html Normal file
View File

File diff suppressed because one or more lines are too long

133
web/satellite/src/components/navigation/navigationArea.scss Normal file
View 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
web/satellite/src/router/index.ts
View File

@ -4,8 +4,8 @@
import Vue from 'vue';
import Router from 'vue-router';
import ROUTES from '@/utils/constants/routerConstants';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';
import Login from '@/views/login/Login.vue';
import Register from '@/views/register/Register.vue';
import Dashboard from '@/views/Dashboard.vue';
import AccountArea from '@/components/account/AccountArea.vue';
import ProjectDetails from '@/components/project/ProjectDetailsArea.vue';

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

@ -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>

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

@ -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
View 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
View 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
View 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
View 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
View 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
View 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;
}
}
}
}
}