df1401d952
* Inject segment snippet * Add page tracking on components mounted * Use router state to send tracking data to segment.io Move router tracking into router file * Create plugin for analytics * Add plugin * Add .env file for segment track id * Replace custome plugin with vue-segment-analytics package * Rename .env file to not be used for production * Add DNT check before tracking clean up code * move tracker to be above page reload * Inject segment snippet * Add page tracking on components mounted * Use router state to send tracking data to segment.io Move router tracking into router file * Create plugin for analytics * Add plugin * Add .env file for segment track id * Replace custome plugin with vue-segment-analytics package * Rename .env file to not be used for production * Add DNT check before tracking clean up code * move tracker to be above page reload
100 lines
3.3 KiB
Vue
100 lines
3.3 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 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 { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
|
|
import { getTokenRequest } from '@/api/users';
|
|
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
|
|
import { AppState } from '@/utils/constants/appStateEnum';
|
|
import { validateEmail, validatePassword } from '@/utils/validation';
|
|
import EVENTS from '../../utils/constants/analyticsEventNames';
|
|
|
|
@Component({
|
|
data: function () {
|
|
return {
|
|
email: '',
|
|
password: '',
|
|
loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
|
|
loadingLogoClassName: LOADING_CLASSES.LOADING_LOGO,
|
|
forgotPasswordRouterPath: ROUTES.FORGOT_PASSWORD.path,
|
|
emailError: '',
|
|
passwordError: '',
|
|
};
|
|
},
|
|
methods: {
|
|
onLogoClick: function (): void {
|
|
location.reload();
|
|
},
|
|
setEmail: function (value: string): void {
|
|
this.$data.email = value;
|
|
this.$data.emailError = '';
|
|
},
|
|
setPassword: function (value: string): void {
|
|
this.$data.password = value;
|
|
this.$data.passwordError = '';
|
|
},
|
|
activateLoadingOverlay: function(): void {
|
|
this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
|
|
this.$data.loadingLogoClassName = LOADING_CLASSES.LOADING_LOGO_ACTIVE;
|
|
},
|
|
onLogin: async function (): Promise<any> {
|
|
let self = this as any;
|
|
this.$segment.track(EVENTS.CLICKED_LOGIN);
|
|
|
|
if (!self.validateFields()) {
|
|
return;
|
|
}
|
|
|
|
let loginResponse = await getTokenRequest(this.$data.email, this.$data.password);
|
|
if (!loginResponse.isSuccess) {
|
|
this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, loginResponse.errorMessage);
|
|
|
|
return;
|
|
}
|
|
|
|
(this as any).activateLoadingOverlay();
|
|
|
|
setTimeout(() => {
|
|
setToken(loginResponse.data);
|
|
this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
|
|
this.$router.push(ROUTES.PROJECT_OVERVIEW.path + '/' + ROUTES.PROJECT_DETAILS.path);
|
|
}, 2000);
|
|
},
|
|
validateFields: function (): boolean {
|
|
let isNoErrors = true;
|
|
|
|
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;
|
|
}
|
|
|
|
return isNoErrors;
|
|
},
|
|
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>
|