storj/web/satellite/src/views/register/RegisterArea.vue

202 lines
6.0 KiB
Vue
Raw Normal View History

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
<template src="./registerArea.html"></template>
<script lang="ts">
2019-09-09 11:33:39 +01:00
import { Component, Vue } from 'vue-property-decorator';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup.vue';
import AuthIcon from '@/../static/images/AuthImage.svg';
import InfoIcon from '@/../static/images/info.svg';
import LogoIcon from '@/../static/images/Logo.svg';
import { AuthHttpApi } from '@/api/auth';
2019-09-09 11:33:39 +01:00
import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
2019-09-09 11:33:39 +01:00
import { LOADING_CLASSES } from '@/utils/constants/classConstants';
import { LocalData } from '@/utils/localData';
2019-09-09 11:33:39 +01:00
import { validateEmail, validatePassword } from '@/utils/validation';
import PasswordStrength from '@/views/register/passwordStrength/PasswordStrength.vue';
2019-09-09 11:33:39 +01:00
@Component({
components: {
HeaderlessInput,
RegistrationSuccessPopup,
AuthIcon,
LogoIcon,
InfoIcon,
PasswordStrength,
2019-09-09 11:33:39 +01:00
},
})
export default class RegisterArea extends Vue {
2019-09-09 11:33:39 +01:00
private readonly user = new User();
// tardigrade logic
private secret: string = '';
private referralToken: string = '';
2019-09-09 11:33:39 +01:00
private refUserId: string = '';
private userId: string = '';
private isTermsAccepted: boolean = false;
private password: string = '';
private repeatedPassword: string = '';
private fullNameError: string = '';
private emailError: string = '';
private passwordError: string = '';
private repeatedPasswordError: string = '';
private isTermsAcceptedError: boolean = false;
private isLoading: boolean = false;
2019-09-09 11:33:39 +01:00
private loadingClassName: string = LOADING_CLASSES.LOADING_OVERLAY;
private readonly auth: AuthHttpApi = new AuthHttpApi();
2019-09-09 11:33:39 +01:00
public isPasswordStrengthShown: boolean = false;
async mounted(): Promise<void> {
2019-09-09 11:33:39 +01:00
if (this.$route.query.token) {
this.secret = this.$route.query.token.toString();
}
if (this.$route.query.referralToken) {
this.referralToken = this.$route.query.referralToken.toString();
}
2019-09-09 11:33:39 +01:00
const { ids = '' } = this.$route.params;
let decoded = '';
try {
decoded = atob(ids);
} catch (error) {
await this.$notify.error('Invalid Referral URL');
this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
2019-09-09 11:33:39 +01:00
return;
}
2019-09-09 11:33:39 +01:00
const referralIds = ids ? JSON.parse(decoded) : undefined;
if (referralIds) {
this.user.partnerId = referralIds.partnerId;
this.refUserId = referralIds.userId;
}
2019-09-09 11:33:39 +01:00
}
public showPasswordStrength(): void {
this.isPasswordStrengthShown = true;
}
public hidePasswordStrength(): void {
this.isPasswordStrengthShown = false;
}
public async onCreateClick(): Promise<void> {
if (this.isLoading) {
return;
}
this.isLoading = true;
2019-09-09 11:33:39 +01:00
if (!this.validateFields()) {
this.isLoading = false;
2019-09-09 11:33:39 +01:00
return;
}
2019-09-09 11:33:39 +01:00
this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
await this.createUser();
2019-09-09 11:33:39 +01:00
this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
this.isLoading = false;
2019-09-09 11:33:39 +01:00
}
public onLogoClick(): void {
location.reload();
}
public onLoginClick(): void {
this.$router.push(RouteConfig.Login.path);
}
public setEmail(value: string): void {
this.user.email = value.trim();
this.emailError = '';
}
public setFullName(value: string): void {
this.user.fullName = value.trim();
this.fullNameError = '';
}
public setPassword(value: string): void {
this.user.password = value.trim();
2019-09-09 11:33:39 +01:00
this.password = value;
this.passwordError = '';
}
public setRepeatedPassword(value: string): void {
this.repeatedPassword = value;
this.repeatedPasswordError = '';
}
2019-09-09 11:33:39 +01:00
private validateFields(): boolean {
let isNoErrors = true;
2019-09-09 11:33:39 +01:00
if (!this.user.fullName.trim()) {
this.fullNameError = 'Invalid Name';
isNoErrors = false;
}
2019-09-09 11:33:39 +01:00
if (!validateEmail(this.user.email.trim())) {
this.emailError = 'Invalid Email';
isNoErrors = false;
}
2019-09-09 11:33:39 +01:00
if (!validatePassword(this.password)) {
this.passwordError = 'Invalid Password';
isNoErrors = false;
}
2019-09-09 11:33:39 +01:00
if (this.repeatedPassword !== this.password) {
this.repeatedPasswordError = 'Password doesn\'t match';
isNoErrors = false;
}
2019-09-09 11:33:39 +01:00
if (!this.isTermsAccepted) {
this.isTermsAcceptedError = true;
isNoErrors = false;
}
2019-09-09 11:33:39 +01:00
return isNoErrors;
}
private async createUser(): Promise<void> {
try {
this.userId = this.referralToken ?
await this.auth.referralRegister(this.user, this.referralToken) :
await this.auth.register(this.user, this.secret, this.refUserId);
2019-09-09 11:33:39 +01:00
LocalData.setUserId(this.userId);
2019-09-09 11:33:39 +01:00
this.$segment.identify(this.userId, {
email: this.$store.getters.user.email,
referralToken: this.referralToken,
});
2019-09-09 11:33:39 +01:00
// TODO: improve it
this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP);
const registrationSuccessPopupRef = this.$refs['register_success_popup'];
if (registrationSuccessPopupRef) {
(registrationSuccessPopupRef as any).startResendEmailCountdown();
}
2019-09-09 11:33:39 +01:00
} catch (error) {
await this.$notify.error(error.message);
2019-09-09 11:33:39 +01:00
this.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
this.isLoading = false;
}
}
2019-09-09 11:33:39 +01:00
}
</script>
<style src="./registerArea.scss" scoped lang="scss"></style>