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

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div class="login-container" v-on:keyup.enter="onLogin">
        <div v-bind:class="loadingClassName">
            <img class="loading-overlay__logo" src="../../static/images/Logo.svg" alt="loading-logo">
        </div>
        <img class="planet" src="../../static/images/Mars.png" alt="" >
        <div class="login-container__wrapper">
            <div class="login-container__header">
                <img class="login-container__logo" src="../../static/images/Logo.svg" alt="logo" v-on:click="onLogoClick">
                <div class="login-container__register-button" v-on:click.prevent="onSignUpClick">
                    <p>Create Account</p>
                </div>
            </div>
            <div class="login-area-wrapper">
                <div class="login-area">
                    <div class="login-area__title-container">
                        <h1>Login to Storj</h1>
                        <p>Satellite:<b>Mars</b></p>
                    </div>
                    <HeaderlessInput
                            class="login-area__email-input"
                            placeholder="Email"
                            @setData="setEmail"
                            height="46px"
                            width="100%">
                    </HeaderlessInput>
                    <HeaderlessInput
                            class="login-area__password-input"
                            placeholder="Password"
                            @setData="setPassword"
                            width="100%"
                            height="46px"
                            isPassword>
                    </HeaderlessInput>
                    <div class="login-area__submit-area">
                        <router-link to="" class="login-area__navigation-area__nav-link" exact>
                            <h3><strong>Forgot password?</strong></h3>
                        </router-link>
                        <div class="login-area__submit-area__login-button" v-on:click.prevent="onLogin">
                            <p>Login</p>
                        </div>
                    </div>
                    <div class="login-area__info-area">
                        <p class="login-area__info-area__signature">Storj Labs Inc 2019.</p>
                        <a class="login-area__info-area__terms">Terms & Conditions</a>
                        <a class="login-area__info-area__help">Help</a>
                    </div>
                </div>
            </div>
        </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 { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { getTokenRequest } from '@/api/users';
import { LOADING_CLASSES } from '@/utils/constants/classConstants';

@Component({
    data: function () {

        return {
            email: '',
            password: '',
            loadingClassName: LOADING_CLASSES.LOADING_OVERLAY,
        };
    },
    methods: {
        onLogoClick: function (): void {
            location.reload();
        },
        setEmail: function (value: string): void {
            this.$data.email = value;
        },
        setPassword: function (value: string): void {
            this.$data.password = value;
        },
        activateLoadingOverlay: function(): void {
            this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY_ACTIVE;
            setTimeout(() => {
                this.$data.loadingClassName = LOADING_CLASSES.LOADING_OVERLAY;
            }, 2000);
        },
        onLogin: async function (): Promise<any> {
            if (!this.$data.email || !this.$data.password) {
                return;
            }

            (this as any).activateLoadingOverlay();

            let loginResponse = await getTokenRequest(this.$data.email, this.$data.password);
            if (!loginResponse.isSuccess) {
                this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, loginResponse.errorMessage);

                return;
            }

            setToken(loginResponse.data);
            this.$router.push(ROUTES.DASHBOARD.path);
        },
        onSignUpClick: function (): void {
            this.$router.push(ROUTES.REGISTER.path);
        },
    },
    components: {
        HeaderlessInput,
        Button
    }
})

export default class Login extends Vue {
}
</script>

<style scoped lang="scss">
    .login-container {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10;
        background-size: contain;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        padding: 60px 0px 0px 104px;
        background-image: url("../../static/images/Background.png");
        background-repeat: no-repeat;
        background-size: auto;

        &__wrapper {
            min-width: 50%;
            height: 86vh;
        }

        &__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row;
            width: 100%;
        }

        &__logo {
            cursor: pointer;
            width: 139px;
            height: 62px;
        }

        &__register-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            border-radius: 6px;
            border: 1px solid white;
            cursor: pointer;
            width: 160px;
            height: 48px;

            p {
                font-family: 'font_bold';
                font-size: 14px;
                line-height: 19px;
                margin-block-start: 0;
                margin-block-end: 0;
                color: white;
            }

            &:hover {
                background-color: white;

                p {
                    color: #2683FF;
                }
            }
        }
    }

    .planet {
        position: absolute;
        top: -161px;
        right: -257px;
        z-index: -100;
    }

    .login-area-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .login-area {
        background-color: transparent;
        width: 620px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 50px;

        &__title-container {
            height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-direction: row;
            margin-bottom: 20px;
            width: 100%;

            h1 {
                font-family: 'font_bold';
                font-size: 22px;
                color: white;
                line-height: 27px;
                margin-block-start: 0;
                margin-block-end: 0;
            }

            p {
                font-family: 'font_regular';
                font-size: 16px;
                color: white;
                line-height: 21px;
                margin-block-start: 0;
                margin-block-end: 0;

                b {
                    font-family: 'font_bold';
                    margin-left: 7px;
                }
            }
        }

        &__password-input {
            margin-top: 22px;
        }

        &__submit-area {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            width: 100%;
            margin-top: 22px;

            &__login-button {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #2683FF;
                border-radius: 6px;
                cursor: pointer;
                width: 160px;
                height: 48px;
                box-shadow: 0px 16px 24px #3A54DF;

                p {
                    font-family: 'font_bold';
                    font-size: 14px;
                    line-height: 19px;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    color: white;
                }

                &:hover {
                    box-shadow: none;
                }
            }
        }

        &__info-area {
            width: 100%;
            height: 42px;
            margin-top: 300px;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            flex-direction: row;

            p {
                font-family: 'font_regular';
                font-size: 12px;
                line-height: 18px;
                text-align: center;
                text-decoration: none;
                color: white;
                margin-block-start: 0;
                margin-block-end: 0;
            }

            a {
                font-family: 'font_regular';
                font-size: 15px;
                line-height: 22px;
                text-align: center;
                text-decoration: none;
                color: white;
            }

            &__signature {
                margin-right: 50px;
            }

            &__terms {
                margin-right: 35px;
            }
        }

        &__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: 'font_regular';
                font-size: 14px;
                line-height: 20px;
                height: 48px;
                text-align: center;
                padding-left: 15px;
                padding-right: 15px;
                min-width: 140px;
                text-decoration: none;
                color: white;

                .bold {
                    font-family: 'font_medium';
                }
            }
        }
    }

    .loading-overlay {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        left: 0;
        height: 100vh;
        width: 0;
        z-index: 100;
        background-color: rgba(134, 134, 148, 0.7);
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;

        &__logo {
            width: 240px;
            height: 110px;
            z-index: 200;
        }
    }

    .loading-overlay.active {
        width: 100vw;
        visibility: visible;
        opacity: 1;
    }
</style>