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

<template>
    <div v-if="isPopupShown" class="register-success-popup-container">
        <div class="register-success-popup" id="successfulRegistrationPopup">
            <div class="register-success-popup__info-panel-container">
                <svg width="206" height="232" viewBox="0 0 206 232" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M205.275 67.6463C205.089 74.8655 201.955 80.2446 195.908 83.8707C194.793 84.5379 194.405 85.2172 194.408 86.4899C194.446 106.182 194.444 125.876 194.414 145.564C194.412 146.747 194.714 147.462 195.797 148.089C202.796 152.13 206.335 159.588 205.078 167.426C203.873 174.939 197.868 181.111 190.09 182.589C185.581 183.448 181.212 182.763 177.259 180.339C176.055 179.601 175.206 179.73 174.077 180.383C157.147 190.188 140.199 199.969 123.234 209.714C122.073 210.38 121.638 211.116 121.639 212.467C121.658 221.943 114.345 230.19 105.209 231.107C95.4799 232.087 86.8785 225.977 84.7768 216.532C84.4536 215.081 84.3453 213.566 84.3112 212.078C84.2875 211.072 84.008 210.455 83.1132 209.936C65.911 200.041 48.7239 190.123 31.5445 180.188C30.6137 179.647 29.8828 179.644 28.9452 180.211C17.7202 186.968 3.41102 180.489 1.03159 167.866C-0.471472 159.893 2.77542 152.434 9.91188 148.235C11.0401 147.571 11.5493 146.899 11.5469 145.52C11.4958 125.827 11.5032 106.135 11.5343 86.4438C11.5352 85.2602 11.228 84.5613 10.145 83.9322C2.97806 79.7704 -0.391832 72.5387 0.984538 64.4191C2.35015 56.3537 8.58871 50.4371 16.7058 49.2815C21.0563 48.6622 25.2518 49.4546 29.0175 51.8587C29.8914 52.4171 30.5414 52.4005 31.4317 51.8876C48.5612 41.9747 65.7041 32.091 82.861 22.2289C83.8979 21.633 84.3026 20.9472 84.3054 19.7249C84.3346 8.87848 92.9031 0.576899 103.764 0.795224C112.227 0.965272 120.146 7.95106 121.348 16.3043C121.458 17.0724 121.631 17.5451 121.631 18.6029C121.631 20.918 122.483 21.9011 124.287 22.9303C140.933 32.4551 157.533 42.0553 174.124 51.6726C175.263 52.3338 176.092 52.3624 177.279 51.6883C188.547 45.2613 202.209 51.4202 204.952 64.1384C205.209 65.3204 205.185 66.5652 205.275 67.6463ZM58.368 135.204C58.198 135.349 58.0833 135.474 57.9409 135.553C48.6031 140.948 39.2707 146.357 29.8988 151.69C29.3809 151.982 28.373 151.922 27.848 151.604C25.3702 150.107 22.734 149.114 19.8472 149.037C10.2431 148.791 4.40148 156.638 4.0743 163.453C3.69423 171.434 9.73415 179.612 19.5025 179.538C28.0691 179.476 34.5875 172.607 34.5027 164.037C34.4885 162.505 34.9384 161.638 36.2828 160.877C46.2341 155.208 56.1476 149.474 66.0512 143.724C67.0082 143.166 67.7782 143.076 68.82 143.564C74.9955 146.467 81.3826 146.959 87.9671 145.098C88.6208 144.914 89.4892 145.1 90.1445 145.38C92.0802 146.203 93.9295 147.249 95.8778 148.035C96.9894 148.485 97.3637 149.092 97.3618 150.271C97.3283 165.794 97.3295 181.313 97.3587 196.835C97.36 197.93 97.014 198.552 96.0153 199.032C90.7841 201.551 86.8382 208.058 87.9145 215.015C89.1645 223.097 97.47 229.203 105.482 227.636C112.542 226.255 117.18 221.437 118.173 214.022C118.846 208.993 116.426 202.353 109.959 199.028C109.082 198.581 108.598 198.09 108.601 197.012C108.633 181.935 108.635 166.859 108.601 151.785C108.6 150.445 109.216 150.17 110.388 149.963C113.487 149.418 116.592 148.82 119.619 147.97C120.988 147.587 122.073 147.531 123.399 148.103C130.036 150.959 136.5 150.47 142.681 146.739C143.564 146.209 144.196 146.185 145.083 146.703C153.249 151.458 161.43 156.193 169.647 160.859C170.975 161.61 171.49 162.443 171.449 164.003C171.212 173.023 179.077 180.392 188.25 179.415C197.254 178.459 203.632 169.79 201.544 161.027C199.04 150.524 187.665 145.787 178.476 151.463C177.508 152.06 176.807 152.222 175.776 151.619C167.999 147.075 160.205 142.565 152.378 138.108C151.221 137.452 151.067 136.841 151.436 135.601C153.796 127.648 152.193 120.574 146.498 114.482C145.385 113.291 140.162 104.952 139.435 103.414C138.859 102.198 139.103 101.549 140.261 100.883C152.128 94.0877 163.976 87.259 175.805 80.3981C176.758 79.847 177.405 79.8369 178.339 80.4645C181.672 82.7037 185.409 83.4106 189.33 82.7252C196.963 81.3873 202.495 74.4805 201.816 66.3281C201.077 57.4828 192.4 50.8713 183.734 52.7882C176.13 54.4724 171.354 60.4164 171.441 68.2278C171.453 69.5596 171.083 70.3191 169.897 70.9969C157.881 77.871 145.895 84.7925 133.931 91.7568C132.852 92.3829 132.262 92.254 131.395 91.4173C125.757 85.9863 118.975 82.9359 111.235 81.9697C108.624 81.6407 108.622 81.6554 108.622 78.9596C108.621 64.8293 108.656 50.6991 108.58 36.5695C108.57 34.5975 109.031 33.4548 110.878 32.393C117.503 28.5874 120.022 20.3919 116.99 13.4046C113.934 6.35605 106.125 2.5901 98.8003 4.82132C92.1337 6.85144 88.4191 11.5614 87.7644 18.4141C87.2614 23.7031 89.7632 29.5781 95.7991 32.8755C96.7259 33.3816 97.3732 33.8269 97.3686 35.099C97.3175 50.6766 97.3218 66.2521 97.3609 81.8307C97.3633 83.0653 96.8012 83.4838 95.7933 83.9933C92.7794 85.5127 89.5467 86.8414 86.9883 88.9573C84.0369 91.394 81.2789 92.8011 77.1686 92.8011C76.7676 92.7878 76.5096 92.8281 76.0929 92.8192C75.0745 92.7971 73.9306 92.7546 73.0982 92.2786C60.9772 85.3663 48.9216 78.3406 36.7855 71.4507C35.0522 70.468 34.2151 69.4154 34.5045 67.4169C34.6198 66.6208 34.3744 65.7687 34.245 64.9483C33.0599 57.485 25.7607 51.2418 16.9493 52.6911C8.30673 54.113 2.81908 61.9351 4.24435 70.3062C6.06321 80.9986 18.2648 86.4115 27.4711 80.5632C28.5098 79.9027 29.2281 79.8507 30.2921 80.4715C39.4159 85.7925 48.5766 91.0508 57.7247 96.3299C59.293 97.2343 60.8557 98.1479 62.4132 99.0525C51.9022 110.183 50.7224 122.145 58.368 135.204Z" fill="#2683FF"/>
                    <path d="M83.6426 99.2185C86.0473 99.4319 87.245 98.6225 89.0024 96.99C96.5893 89.939 105.54 87.7558 115.367 91.0202C125.028 94.2293 131.019 101.095 133.004 111.167C133.392 113.14 134.167 114.325 135.93 115.33C140.967 118.199 143.869 124.406 142.872 129.577C141.581 136.272 137.191 140.914 130.984 141.897C127.679 142.423 124.396 142.047 121.486 140.254C120.183 139.451 119.15 139.539 117.804 140.103C109.161 143.736 100.792 143.121 92.8378 138.117C91.6155 137.348 90.594 137.288 89.2711 137.721C78.0624 141.381 66.4039 135.022 63.5564 123.842C60.2954 111.026 70.5204 98.6336 83.6426 99.2185Z" fill="#2683FF"/>
                    <path d="M182.388 164.321C182.387 161.815 184.189 159.992 186.658 159.998C189.035 160.008 191.057 161.97 191.082 164.292C191.108 166.527 188.946 168.686 186.693 168.69C184.281 168.691 182.39 166.771 182.388 164.321Z" fill="#2683FF"/>
                    <path d="M98.6328 19.4492C98.6424 17.0212 100.535 15.147 102.983 15.1445C105.432 15.1433 107.312 17.0117 107.321 19.4505C107.327 21.7884 105.287 23.8535 102.989 23.8259C100.655 23.8031 98.6248 21.761 98.6328 19.4492Z" fill="#2683FF"/>
                    <path d="M23.5619 164.341C23.553 166.785 21.6438 168.71 19.2462 168.691C16.9802 168.671 14.8852 166.556 14.8751 164.274C14.8621 161.995 16.9356 159.999 19.3141 159.999C21.7797 160.001 23.5718 161.832 23.5619 164.341Z" fill="#2683FF"/>
                    <path d="M103.029 208.317C105.475 208.335 107.332 210.195 107.32 212.616C107.306 215.028 105.419 216.843 102.942 216.829C100.484 216.814 98.6056 214.939 98.6326 212.529C98.6609 210.131 100.576 208.301 103.029 208.317Z" fill="#2683FF"/>
                    <path d="M19.3635 71.9823C16.8859 72.0047 14.949 70.2 14.8755 67.8046C14.8029 65.4716 16.7623 63.5128 19.206 63.4772C21.7552 63.4403 23.5279 65.1392 23.5639 67.6536C23.6008 70.1791 21.8717 71.9608 19.3635 71.9823Z" fill="#2683FF"/>
                    <path d="M186.604 71.9891C184.099 71.97 182.363 70.1868 182.387 67.6607C182.413 65.1534 184.189 63.4471 186.74 63.48C189.184 63.5126 191.13 65.455 191.074 67.8C191.015 70.1776 189.065 72.006 186.604 71.9891Z" fill="#2683FF"/>
                </svg>

            </div>
            <div class="register-success-popup__form-container">
                <h2 class="register-success-popup__form-container__main-label-text">Congratulation!</h2>
                <p>You almost registered on the Satellite, only one step left.
                    Please check your inbox and use the verification link we shared with you in last email.</p>
                <p>Didn’t receive a verification email?</p>
                <div class="register-success-popup__form-container__button-container">
                    <Button label="Go to Login" width="450px" height="50px" :onPress="onCloseClick" isWhite />
                </div>
            </div>
            <div class="register-success-popup__close-cross-container">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" v-on:click="onCloseClick">
                    <path d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
                </svg>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Button from '@/components/common/Button.vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import ROUTES from '@/utils/constants/routerConstants';

@Component(
        {
            computed:{
                isPopupShown: function () {
                    return this.$store.state.appStateModule.appState.isSuccessfulRegistrationPopupShown;
                }
            },
            methods: {
                onCloseClick: function () {
                    this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
                    this.$router.push(ROUTES.LOGIN.path);
                }
            },
            components: {
                Button,
            },
        }
    )

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

<style scoped lang="scss">
    p {
        font-family: 'montserrat_medium';
        font-size: 16px;
        line-height: 21px;
        color: #354049;
        padding: 27px 0 0 0;
        margin: 0;
    }

    a {
        font-family: 'montserrat_bold';
        color: #2683ff;
    }

    .register-success-popup-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(134, 134, 148, 0.4);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .register-success-popup {
        width: 100%;
        max-width: 845px;
        background-color: #FFFFFF;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;
        justify-content: center;
        padding: 80px 100px 80px 50px;

        &__info-panel-container {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            margin-right: 100px;
            margin-top: 20px;
        }

        &__form-container {
            width: 100%;
            max-width: 440px;
            margin-top: 10px;

            &__main-label-text {
                font-family: 'montserrat_bold';
                font-size: 32px;
                line-height: 39px;
                color: #384B65;
                margin: 0;
            }

            &__button-container {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
            }
        }

        &__close-cross-container {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 30px;
            top: 40px;
            height: 24px;
            width: 24px;
            cursor: pointer;

            &:hover svg path {
                fill: #2683FF;
            }
        }
    }

    @media screen and (max-width: 720px) {
        .register-success-popup {

            &__info-panel-container {
                display: none;

            }

            &__form-container {

                &__button-container {
                    width: 100%;
                }
            }
        }
    }
</style>