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

625 lines
19 KiB
Vue
Raw Normal View History

// Copyright (C) 2021 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="login-area" @keyup.enter="onLogin">
<div class="login-area__logo-wrapper">
<LogoIcon class="logo" @click="onLogoClick" />
</div>
<div class="login-area__content-area">
<div v-if="isActivatedBannerShown" class="login-area__content-area__activation-banner" :class="{'error': isActivatedError}">
<p class="login-area__content-area__activation-banner__message">
<template v-if="!isActivatedError"><b>Success!</b> Account verified.</template>
<template v-else><b>Oops!</b> This account has already been verified.</template>
</p>
</div>
<div class="login-area__content-area__container">
<div class="login-area__content-area__container__title-area">
<h1 class="login-area__content-area__container__title-area__title" aria-roledescription="sign-in-title">Sign In</h1>
<div class="login-area__expand" @click.stop="toggleDropdown">
<span class="login-area__expand__value">{{ satelliteName }}</span>
<BottomArrowIcon />
<div v-if="isDropdownShown" v-click-outside="closeDropdown" class="login-area__expand__dropdown">
<div class="login-area__expand__dropdown__item" @click.stop="closeDropdown">
<SelectedCheckIcon />
<span class="login-area__expand__dropdown__item__name">{{ satelliteName }}</span>
</div>
<a v-for="sat in partneredSatellites" :key="sat.id" class="login-area__expand__dropdown__item" :href="sat.address + '/login'">
{{ sat.name }}
</a>
</div>
</div>
</div>
<template v-if="!isMFARequired">
<div v-if="isBadLoginMessageShown" class="info-box error">
<div class="info-box__header">
<WarningIcon />
<h2 class="info-box__header__label">Invalid Credentials</h2>
</div>
<p class="info-box__message">
Your login credentials are incorrect. If you didnt receive an activation email, click <router-link :to="activatePath" class="link">here</router-link>.
</p>
</div>
<div class="login-area__input-wrapper">
<HeaderlessInput
label="Email Address"
placeholder="user@example.com"
:error="emailError"
role-description="email"
@setData="setEmail"
/>
</div>
<div class="login-area__input-wrapper">
<HeaderlessInput
label="Password"
placeholder="Password"
:error="passwordError"
is-password="true"
role-description="password"
@setData="setPassword"
/>
</div>
</template>
<template v-else>
<div class="info-box">
<div class="info-box__header">
<GreyWarningIcon />
<h2 class="info-box__header__label">
Two-Factor Authentication Required
</h2>
</div>
<p class="info-box__message">
You'll need the six-digit code from your authenticator app to continue.
</p>
</div>
<div class="login-area__input-wrapper">
<ConfirmMFAInput ref="mfaInput" :on-input="onConfirmInput" :is-error="isMFAError" :is-recovery="isRecoveryCodeState" />
</div>
<span v-if="!isRecoveryCodeState" class="login-area__content-area__container__recovery" @click="setRecoveryCodeState">
Or use recovery code
</span>
</template>
<p class="login-area__content-area__container__button" :class="{ 'disabled-button': isLoading }" @click.prevent="onLogin">Sign In</p>
<span v-if="isMFARequired" class="login-area__content-area__container__cancel" :class="{ disabled: isLoading }" @click.prevent="onMFACancelClick">
Cancel
</span>
</div>
<p class="login-area__content-area__footer-item">
Forgot your sign in details?
<router-link :to="forgotPasswordPath" class="link">
Reset Password
</router-link>
</p>
<router-link :to="registerPath" class="login-area__content-area__footer-item link">
Need to create an account?
</router-link>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ConfirmMFAInput from '@/components/account/mfa/ConfirmMFAInput.vue';
import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
import WarningIcon from '@/../static/images/accessGrants/warning.svg';
import GreyWarningIcon from '@/../static/images/common/greyWarning.svg';
import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
import SelectedCheckIcon from '@/../static/images/common/selectedCheck.svg';
import LogoIcon from '@/../static/images/logo.svg';
import { AuthHttpApi } from '@/api/auth';
import { ErrorMFARequired } from '@/api/errors/ErrorMFARequired';
import { RouteConfig } from '@/router';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AppState } from '@/utils/constants/appStateEnum';
import { Validator } from '@/utils/validation';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
interface ClearInput {
clearInput(): void;
}
// @vue/component
@Component({
components: {
HeaderlessInput,
BottomArrowIcon,
SelectedCheckIcon,
LogoIcon,
WarningIcon,
GreyWarningIcon,
ConfirmMFAInput,
},
})
export default class Login extends Vue {
private email = '';
private password = '';
private passcode = '';
private recoveryCode = '';
private isLoading = false;
private emailError = '';
private passwordError = '';
private readonly auth: AuthHttpApi = new AuthHttpApi();
public readonly forgotPasswordPath: string = RouteConfig.ForgotPassword.path;
public returnURL: string = RouteConfig.ProjectDashboard.path;
public isActivatedBannerShown = false;
public isActivatedError = false;
public isMFARequired = false;
public isMFAError = false;
public isRecoveryCodeState = false;
public isBadLoginMessageShown = false;
// Tardigrade logic
public isDropdownShown = false;
public readonly registerPath: string = RouteConfig.Register.path;
public readonly activatePath: string = RouteConfig.Activate.path;
public $refs!: {
mfaInput: ConfirmMFAInput & ClearInput;
};
/**
* Clears confirm MFA input.
*/
public clearConfirmMFAInput(): void {
this.$refs.mfaInput.clearInput();
}
/**
* Lifecycle hook after initial render.
* Makes activated banner visible on successful account activation.
*/
public mounted(): void {
this.isActivatedBannerShown = !!this.$route.query.activated;
this.isActivatedError = this.$route.query.activated === 'false';
this.returnURL = this.$route.query.return_url as string || this.returnURL;
}
/**
* Reloads page.
*/
public onLogoClick(): void {
location.reload();
}
/**
* Sets page to recovery code state.
*/
public setRecoveryCodeState(): void {
this.isMFAError = false;
this.passcode = '';
this.clearConfirmMFAInput();
this.isRecoveryCodeState = true;
}
/**
* Cancels MFA passcode input state.
*/
public onMFACancelClick(): void {
this.isMFARequired = false;
this.isRecoveryCodeState = false;
this.isMFAError = false;
this.passcode = '';
this.recoveryCode = '';
}
/**
* Sets confirmation passcode value from input.
*/
public onConfirmInput(value: string): void {
this.isMFAError = false;
this.isRecoveryCodeState ? this.recoveryCode = value.trim() : this.passcode = value.trim();
}
/**
* Sets email string on change.
*/
public setEmail(value: string): void {
this.email = value.trim();
this.emailError = '';
}
/**
* Sets password string on change.
*/
public setPassword(value: string): void {
this.password = value;
this.passwordError = '';
}
/**
* Name of the current satellite.
*/
public get satelliteName(): string {
return this.$store.state.appStateModule.satelliteName;
}
/**
* Information about partnered satellites, including name and signup link.
*/
public get partneredSatellites(): PartneredSatellite[] {
return this.$store.state.appStateModule.partneredSatellites;
}
/**
* Toggles satellite selection dropdown visibility (Tardigrade).
*/
public toggleDropdown(): void {
this.isDropdownShown = !this.isDropdownShown;
}
/**
* Closes satellite selection dropdown (Tardigrade).
*/
public closeDropdown(): void {
this.isDropdownShown = false;
}
/**
* Performs login action.
* Then changes location to project dashboard page.
*/
public async onLogin(): Promise<void> {
if (this.isLoading) {
return;
}
this.isLoading = true;
if (!this.validateFields()) {
this.isLoading = false;
return;
}
try {
await this.auth.token(this.email, this.password, this.passcode, this.recoveryCode);
} catch (error) {
if (error instanceof ErrorMFARequired) {
if (this.isMFARequired) this.isMFAError = true;
this.isMFARequired = true;
this.isLoading = false;
return;
}
if (this.isMFARequired) {
this.isMFAError = true;
this.isLoading = false;
return;
}
if (error instanceof ErrorUnauthorized) {
this.isBadLoginMessageShown = true;
this.isLoading = false;
return;
}
await this.$notify.error(error.message);
this.isLoading = false;
return;
}
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADING);
this.isLoading = false;
await this.$router.push(this.returnURL);
}
/**
* Validates email and password input strings.
*/
private validateFields(): boolean {
let isNoErrors = true;
if (!Validator.email(this.email)) {
this.emailError = 'Invalid Email';
isNoErrors = false;
}
if (!Validator.password(this.password)) {
this.passwordError = 'Invalid Password';
isNoErrors = false;
}
return isNoErrors;
}
}
</script>
<style scoped lang="scss">
.login-area {
display: flex;
flex-direction: column;
font-family: 'font_regular', sans-serif;
background-color: #f5f6fa;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-height: 100%;
overflow-y: scroll;
&__logo-wrapper {
text-align: center;
margin: 70px 0;
}
&__divider {
margin: 0 20px;
height: 22px;
width: 2px;
background-color: #acbace;
}
&__input-wrapper {
margin-top: 20px;
width: 100%;
}
&__expand {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
&__value {
font-size: 16px;
line-height: 21px;
color: #acbace;
margin-right: 10px;
font-family: 'font_regular', sans-serif;
font-weight: 700;
}
&__dropdown {
position: absolute;
top: 35px;
left: 0;
background-color: #fff;
z-index: 1000;
border: 1px solid #c5cbdb;
box-shadow: 0 8px 34px rgb(161 173 185 / 41%);
border-radius: 6px;
min-width: 250px;
&__item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 25px;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
cursor: pointer;
text-decoration: none;
&__name {
font-family: 'font_bold', sans-serif;
margin-left: 15px;
font-size: 14px;
line-height: 20px;
color: #7e8b9c;
}
&:hover {
background-color: #f2f2f6;
}
}
}
}
&__content-area {
background-color: #f5f6fa;
padding: 0 20px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
box-sizing: border-box;
&__activation-banner {
padding: 20px;
background-color: rgb(39 174 96 / 10%);
border: 1px solid #27ae60;
color: #27ae60;
border-radius: 6px;
width: 570px;
margin-bottom: 30px;
&.error {
background-color: #fff3f2;
border: 1px solid #e30011;
color: #e30011;
}
&__message {
font-size: 16px;
line-height: 21px;
margin: 0;
}
}
&__container {
display: flex;
flex-direction: column;
padding: 60px 80px;
background-color: #fff;
width: 610px;
border-radius: 20px;
box-sizing: border-box;
margin-bottom: 20px;
&__title-area {
display: flex;
justify-content: space-between;
align-items: center;
&__title {
font-size: 24px;
line-height: 49px;
letter-spacing: -0.1007px;
color: #252525;
font-family: 'font_bold', sans-serif;
font-weight: 800;
}
&__satellite {
font-size: 16px;
line-height: 21px;
color: #848484;
}
}
&__button {
font-family: 'font_regular', sans-serif;
font-weight: 700;
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #376fff;
border-radius: 50px;
color: #fff;
cursor: pointer;
width: 100%;
height: 48px;
&:hover {
background-color: #0059d0;
}
}
&__cancel {
align-self: center;
font-size: 16px;
line-height: 21px;
color: #0068dc;
text-align: center;
margin-top: 30px;
cursor: pointer;
}
&__recovery {
font-size: 16px;
line-height: 19px;
color: #0068dc;
cursor: pointer;
margin-top: 20px;
text-align: center;
width: 100%;
}
}
&__footer-item {
margin-top: 30px;
font-size: 14px;
}
}
}
.logo {
cursor: pointer;
}
.disabled,
.disabled-button {
pointer-events: none;
color: #acb0bc;
}
.disabled-button {
background-color: #dadde5;
border-color: #dadde5;
}
.link {
color: #376fff;
font-family: 'font_medium', sans-serif;
}
.info-box {
background-color: #f7f8fb;
border-radius: 6px;
padding: 20px;
margin-top: 25px;
width: 100%;
box-sizing: border-box;
&.error {
background-color: #fff9f7;
border: 1px solid #f84b00;
}
&__header {
display: flex;
align-items: center;
&__label {
font-family: 'font_bold', sans-serif;
font-size: 16px;
color: #1b2533;
margin-left: 15px;
}
}
&__message {
font-size: 16px;
color: #1b2533;
margin-top: 10px;
}
}
@media screen and (max-width: 750px) {
.login-area {
&__content-area {
&__container {
width: 100%;
padding: 60px;
}
}
&__expand {
&__dropdown {
left: -200px;
}
}
}
}
@media screen and (max-width: 414px) {
.login-area {
&__logo-wrapper {
margin: 40px;
}
&__content-area {
padding: 0;
&__container {
padding: 0 20px 20px;
background: transparent;
}
}
}
}
</style>