105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
// 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 Button from '@/components/common/Button.vue';
|
|
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
|
|
|
|
import { AuthApi } from '@/api/auth';
|
|
import { RouteConfig } from '@/router';
|
|
import { AuthToken } from '@/utils/authToken';
|
|
import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
|
import { AppState } from '@/utils/constants/appStateEnum';
|
|
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
|
|
import { validateEmail, validatePassword } from '@/utils/validation';
|
|
|
|
@Component({
|
|
components: {
|
|
HeaderlessInput,
|
|
Button,
|
|
},
|
|
})
|
|
export default class Login extends Vue {
|
|
private email: string = '';
|
|
private password: string = '';
|
|
private authToken: string = '';
|
|
|
|
private readonly forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
|
|
private loadingClassName: string = LOADING_CLASSES.LOADING_OVERLAY;
|
|
private loadingLogoClassName: string = LOADING_CLASSES.LOADING_LOGO;
|
|
private emailError: string = '';
|
|
private passwordError: string = '';
|
|
|
|
private readonly auth: AuthApi = new AuthApi();
|
|
|
|
public onLogoClick(): void {
|
|
location.reload();
|
|
}
|
|
|
|
public setEmail(value: string): void {
|
|
this.email = value;
|
|
this.emailError = '';
|
|
}
|
|
|
|
public setPassword(value: string): void {
|
|
this.password = value;
|
|
this.passwordError = '';
|
|
}
|
|
|
|
public onSignUpClick(): void {
|
|
this.$router.push(RouteConfig.Register.path);
|
|
}
|
|
|
|
public async onLogin(): Promise<void> {
|
|
const self = this;
|
|
|
|
if (!self.validateFields()) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
this.authToken = await this.auth.token(this.email, this.password);
|
|
} catch (error) {
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, error.message);
|
|
|
|
return;
|
|
}
|
|
|
|
this.activateLoadingOverlay();
|
|
|
|
setTimeout(() => {
|
|
AuthToken.set(this.authToken);
|
|
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
|
|
this.$router.push(RouteConfig.ProjectOverview.with(RouteConfig.ProjectDetails).path);
|
|
}, 2000);
|
|
}
|
|
|
|
private validateFields(): boolean {
|
|
let isNoErrors = true;
|
|
|
|
if (!validateEmail(this.email.trim())) {
|
|
this.emailError = 'Invalid Email';
|
|
isNoErrors = false;
|
|
}
|
|
|
|
if (!validatePassword(this.password)) {
|
|
this.passwordError = 'Invalid Password';
|
|
isNoErrors = false;
|
|
}
|
|
|
|
return isNoErrors;
|
|
}
|
|
|
|
private activateLoadingOverlay(): void {
|
|
this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
|
|
this.loadingLogoClassName = LOADING_CLASSES.LOADING_LOGO_ACTIVE;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style src="./login.scss" scoped lang="scss"></style>
|