storj/web/satellite/src/views/Login.vue

188 lines
5.6 KiB
Vue
Raw Normal View History

<template>
<div class="login-container">
<img class="login-container__logo" src="../../static/images/login/Logo.svg" alt="logo">
<div class="login-area">
<div class="login-area__title-container">
<h1>Welcome to Storj</h1>
</div>
<HeaderlessInput
class="login-area__email-input"
placeholder="Email"
@setData="setEmail"
width="100%">
</HeaderlessInput>
<HeaderlessInput
class="login-area__password-input"
placeholder="Password"
@setData="setPassword"
width="100%"
isPassword>
</HeaderlessInput>
<Button class="login-area__login-button" label="Login" height="48px" :onPress="onLogin"/>
<!-- start of navigation area -->
<div class="login-area__navigation-area">
<router-link to="/register" class="login-area__navigation-area__nav-link bold" exact><h3>Create
account</h3></router-link>
<router-link to="" class="login-area__navigation-area__nav-link" exact><h3><strong>Forgot
password</strong></h3></router-link>
</div>
<!-- end of navigation area -->
</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 {login} from "../utils/qraphql/loginQuery";
@Component({
data: function () {
return {
email: '',
password: '',
token: ''
}
},
methods: {
setEmail: function (value: string) {
this.$data.email = value;
},
setPassword: function (value: string) {
this.$data.password = value;
},
onLogin: async function () {
try {
let loginData = await login(this.$data.email, this.$data.password);
setToken(loginData.data.token.token);
this.$store.dispatch("setUserInfo", loginData.data.token.user)
.then(() => {
this.$router.push(ROUTES.DASHBOARD.path);
}).catch((error) => {
console.log(error);
});
} catch (error) {
console.log(error)
}
}
},
computed: {},
components: {
HeaderlessInput,
Button
}
})
export default class Home extends Vue {
}
</script>
<style scoped lang="scss">
.login-container {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51, 51, 51, 0.7);
z-index: 10;
background-image: url(../../static/images/login/Background.svg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
padding: 60px 0px 190px 104px;
&__logo {
width: 139px;
height: 62px;
}
}
.login-area {
background-color: #fff;
margin-top: 50px;
max-width: 440px;
width: 100%;
padding: 120px;
border-radius: 6px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
&__title-container {
height: 48px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 32px;
h1 {
font-family: 'montserrat_bold';
font-size: 32px;
color: #384B65;
line-height: 39px;
margin-block-start: 0;
margin-block-end: 0;
}
}
&__password-input {
margin-top: 22px;
}
&__login-button {
margin-top: 22px;
align-self: center;
}
&__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: 'montserrat_regular';
font-size: 14px;
line-height: 20px;
color: #2683FF;
height: 48px;
text-align: center;
text-justify: center;
padding-left: 15px;
padding-right: 15px;
min-width: 140px;
&:hover {
text-decoration: underline;
}
.bold {
font-family: 'montserrat_medium';
}
}
}
}
@media screen and (max-width: 800px) {
.login-container {
padding: 0;
justify-content: center;
padding: 0 50px;
}
.login-area {
max-width: 300px;
}
}
</style>