web/satellite: registation success page moved

page moved to separate route to be able to track conversion metrics Change-Id: I1506ac416056d652b9292d62c29f79bd75567c6a
2021-10-20 20:01:51 +03:00 · 2021-10-20 20:01:51 +03:00 · 0ed3ef0fe4
commit 0ed3ef0fe4
parent df44e8152d
6 changed files with 106 additions and 78 deletions
--- a/web/satellite/src/components/common/RegistrationSuccess.vue
+++ b/web/satellite/src/components/common/RegistrationSuccess.vue
@ -2,40 +2,46 @@
 // See LICENSE for copying information.

 <template>
-    <div class="register-success-area">
-        <div class="register-success-area__form-container">
-            <MailIcon />
-            <h2 class="register-success-area__form-container__title" aria-roledescription="title">You're almost there!</h2>
-            <p class="register-success-area__form-container__sub-title">
-                Check your email to confirm your account and get started.
-            </p>
-            <p class="register-success-area__form-container__text">
-                Didn't receive a verification email?
-                <b class="register-success-area__form-container__verification-cooldown__bold-text">
-                    {{ timeToEnableResendEmailButton }}
-                </b>
-            </p>
-            <div class="register-success-area__form-container__button-container">
-                <VButton
-                    label="Resend Email"
-                    width="450px"
-                    height="50px"
-                    :on-press="onResendEmailButtonClick"
-                    :is-disabled="isResendEmailButtonDisabled"
-                />
-            </div>
-            <p class="register-success-area__form-container__contact">
-                or
-                <a
-                    class="register-success-area__form-container__contact__link"
-                    href="https://supportdcs.storj.io/hc/en-us/requests/new"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Contact our support team
-                </a>
-            </p>
+    <div class="register-success-container">
+        <div class="register-success-container__logo-wrapper">
+            <LogoIcon class="logo" @click="onLogoClick" />
        </div>
+        <div class="register-success-area">
+            <div class="register-success-area__form-container">
+                <MailIcon />
+                <h2 class="register-success-area__form-container__title" aria-roledescription="title">You're almost there!</h2>
+                <p class="register-success-area__form-container__sub-title">
+                    Check your email to confirm your account and get started.
+                </p>
+                <p class="register-success-area__form-container__text">
+                    Didn't receive a verification email?
+                    <b class="register-success-area__form-container__verification-cooldown__bold-text">
+                        {{ timeToEnableResendEmailButton }}
+                    </b>
+                </p>
+                <div class="register-success-area__form-container__button-container">
+                    <VButton
+                        label="Resend Email"
+                        width="450px"
+                        height="50px"
+                        :on-press="onResendEmailButtonClick"
+                        :is-disabled="isResendEmailButtonDisabled"
+                    />
+                </div>
+                <p class="register-success-area__form-container__contact">
+                    or
+                    <a
+                        class="register-success-area__form-container__contact__link"
+                        href="https://supportdcs.storj.io/hc/en-us/requests/new"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Contact our support team
+                    </a>
+                </p>
+            </div>
+        </div>
+        <router-link :to="loginPath" class="register-success-area__login-link">Go to Login page</router-link>
    </div>
 </template>

@ -44,15 +50,18 @@ import { Component, Vue } from 'vue-property-decorator';

 import VButton from '@/components/common/VButton.vue';

+import LogoIcon from '@/../static/images/logo.svg';
 import MailIcon from '@/../static/images/register/mail.svg';

 import { AuthHttpApi } from '@/api/auth';
 import { LocalData } from '@/utils/localData';
+import { RouteConfig } from "@/router";

 // @vue/component
@Component({
    components: {
        VButton,
+        LogoIcon,
        MailIcon,
    },
 })
@ -63,6 +72,8 @@ export default class RegistrationSuccess extends Vue {

    private readonly auth: AuthHttpApi = new AuthHttpApi();

+    public readonly loginPath: string = RouteConfig.Login.path;
+
    /**
     * Lifecycle hook after initial render.
     * Starts resend email button availability countdown.
@ -81,6 +92,13 @@ export default class RegistrationSuccess extends Vue {
        }
    }

+    /**
+     * Reloads page.
+     */
+    public onLogoClick(): void {
+        location.replace(RouteConfig.Register.path);
+    }
+
    /**
     * Checks if page is inside iframe.
     */
@ -134,19 +152,40 @@ export default class RegistrationSuccess extends Vue {
 </script>

 <style scoped lang="scss">
+    .register-success-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-family: 'font_regular', sans-serif;
+        background-color: #f5f6fa;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow-y: scroll;
+
+        &__logo-wrapper {
+            text-align: center;
+            margin-top: 60px;
+        }
+    }
+
    .register-success-area {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'font_regular', sans-serif;
+        background-color: #fff;
+        border-radius: 20px;
+        width: 75%;
+        height: 50vh;
+        margin-top: 50px;
+        padding: 70px 90px 30px 90px;
+        max-width: 1200px;

        &__form-container {
-            padding: 100px;
-            max-width: 395px;
            text-align: center;
-            border-radius: 20px;
-            background-color: #fff;
-            box-shadow: 0 0 19px 9px #ddd;
            display: flex;
            flex-direction: column;
            align-items: center;
@ -165,6 +204,7 @@ export default class RegistrationSuccess extends Vue {
                color: #252525;
                margin: 0;
                max-width: 350px;
+                text-align: center;
            }

            &__text {
@ -207,11 +247,21 @@ export default class RegistrationSuccess extends Vue {
                }
            }
        }
+
+        &__login-link {
+            font-family: 'font_bold', sans-serif;
+            text-decoration: none;
+            font-size: 14px;
+            color: #376fff;
+            margin-top: 50px;
+            padding-bottom: 50px;
+        }
    }

    @media screen and (max-width: 650px) {

        .register-success-area {
+            height: auto;

            &__form-container {
                padding: 50px;
@ -226,6 +276,7 @@ export default class RegistrationSuccess extends Vue {
    @media screen and (max-width: 500px) {

        .register-success-area {
+            height: auto;

            &__form-container {
                padding: 50px 20px;
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@ -43,6 +43,7 @@ import UploadObject from "@/components/onboardingTour/steps/cliFlow/UploadObject
 import ListObject from "@/components/onboardingTour/steps/cliFlow/ListObject.vue";
 import DownloadObject from "@/components/onboardingTour/steps/cliFlow/DownloadObject.vue";
 import ShareObject from "@/components/onboardingTour/steps/cliFlow/ShareObject.vue";
+import RegistrationSuccess from "@/components/common/RegistrationSuccess.vue";
 import SuccessScreen from "@/components/onboardingTour/steps/cliFlow/SuccessScreen.vue";

 import store from '@/store';
@ -65,6 +66,7 @@ export abstract class RouteConfig {
    public static Root = new NavigationLink('/', 'Root');
    public static Login = new NavigationLink('/login', 'Login');
    public static Register = new NavigationLink('/signup', 'Register');
+    public static RegisterSuccess = new NavigationLink('/signup-success', 'RegisterSuccess');
    public static ForgotPassword = new NavigationLink('/forgot-password', 'Forgot Password');
    public static ResetPassword = new NavigationLink('/password-recovery', 'Reset Password');
    public static Account = new NavigationLink('/account', 'Account');
@ -129,6 +131,7 @@ export abstract class RouteConfig {
 export const notProjectRelatedRoutes = [
    RouteConfig.Login.name,
    RouteConfig.Register.name,
+    RouteConfig.RegisterSuccess.name,
    RouteConfig.ForgotPassword.name,
    RouteConfig.ResetPassword.name,
    RouteConfig.Billing.name,
@ -151,6 +154,11 @@ export const router = new Router({
            name: RouteConfig.Register.name,
            component: RegisterArea,
        },
+        {
+            path: RouteConfig.RegisterSuccess.path,
+            name: RouteConfig.RegisterSuccess.name,
+            component: RegistrationSuccess,
+        },
        {
            path: RouteConfig.ForgotPassword.path,
            name: RouteConfig.ForgotPassword.name,
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@ -21,7 +21,6 @@ class ViewsState {
        public isFreeCreditsDropdownShown = false,
        public isAvailableBalanceDropdownShown = false,
        public isPeriodsDropdownShown = false,
-        public isSuccessfulRegistrationShown = false,
        public isEditProfilePopupShown = false,
        public isChangePasswordPopupShown = false,
        public isPaymentSelectionShown = false,
@ -94,10 +93,6 @@ export const appStateModule = {
        [APP_STATE_MUTATIONS.TOGGLE_PERIODS_DROPDOWN](state: State): void {
            state.appState.isPeriodsDropdownShown = !state.appState.isPeriodsDropdownShown;
        },
-        // Mutation changing 'successful registration' area visibility.
-        [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION](state: State): void {
-            state.appState.isSuccessfulRegistrationShown = !state.appState.isSuccessfulRegistrationShown;
-        },
        // Mutation changing 'successful password reset' area visibility.
        [APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET](state: State): void {
            state.appState.isSuccessfulPasswordResetShown = !state.appState.isSuccessfulPasswordResetShown;
@ -238,13 +233,6 @@ export const appStateModule = {

            commit(APP_STATE_MUTATIONS.TOGGLE_PAYMENT_SELECTION, value);
        },
-        [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION]: function ({commit, state}: AppContext): void {
-            if (!state.appState.isSuccessfulRegistrationShown) {
-                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
-            }
-
-            commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION);
-        },
        [APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_PASSWORD_RESET]: function ({commit, state}: AppContext): void {
            if (!state.appState.isSuccessfulPasswordResetShown) {
                commit(APP_STATE_MUTATIONS.CLOSE_ALL);
--- a/web/satellite/src/store/mutationConstants.ts
+++ b/web/satellite/src/store/mutationConstants.ts
@ -20,7 +20,6 @@ export const APP_STATE_MUTATIONS = {
    TOGGLE_FREE_CREDITS_DROPDOWN: 'TOGGLE_FREE_CREDITS_DROPDOWN',
    TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'TOGGLE_AVAILABLE_BALANCE_DROPDOWN',
    TOGGLE_PERIODS_DROPDOWN: 'TOGGLE_PERIODS_DROPDOWN',
-    TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION',
    TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
    TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP',
    TOGGLE_EDIT_PROFILE_POPUP: 'TOGGLE_EDIT_PROFILE_POPUP',
--- a/web/satellite/src/utils/constants/actionNames.ts
+++ b/web/satellite/src/utils/constants/actionNames.ts
@ -12,7 +12,6 @@ export const APP_STATE_ACTIONS = {
    TOGGLE_FREE_CREDITS_DROPDOWN: 'toggleFreeCreditsDropdown',
    TOGGLE_AVAILABLE_BALANCE_DROPDOWN: 'toggleAvailableBalanceDropdown',
    TOGGLE_PERIODS_DROPDOWN: 'togglePeriodsDropdown',
-    TOGGLE_SUCCESSFUL_REGISTRATION: 'TOGGLE_SUCCESSFUL_REGISTRATION',
    TOGGLE_SUCCESSFUL_PASSWORD_RESET: 'TOGGLE_SUCCESSFUL_PASSWORD_RESET',
    TOGGLE_SUCCESSFUL_PROJECT_CREATION_POPUP: 'toggleSuccessfulProjectCreationPopup',
    TOGGLE_EDIT_PROFILE_POPUP: 'toggleEditProfilePopup',
--- a/web/satellite/src/views/RegisterArea.vue
+++ b/web/satellite/src/views/RegisterArea.vue
@ -23,7 +23,6 @@
            </div>
            <div class="register-area__input-area">
                <div
-                    v-if="!isRegistrationSuccessful"
                    class="register-area__input-area__container"
                    :class="{ 'professional-container': isProfessional }"
                >
@ -50,7 +49,7 @@
                            </div>
                        </div>
                    </div>
-                    <div class="register-area__input-area__toggle__conatainer">
+                    <div class="register-area__input-area__toggle__container">
                        <ul class="register-area__input-area__toggle__wrapper">
                            <li
                                class="register-area__input-area__toggle__personal"
@ -203,8 +202,6 @@
                    </div>
                    <p class="register-area__input-area__container__button" @click.prevent="onCreateClick">Sign Up</p>
                </div>
-
-                <RegistrationSuccess v-if="isRegistrationSuccessful" />
            </div>
        </div>
        <div class="register-area__input-area__login-container">
@ -220,7 +217,6 @@ import VueRecaptcha from 'vue-recaptcha';
 import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
 import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
 import PasswordStrength from '@/components/common/PasswordStrength.vue';
-import RegistrationSuccess from '@/components/common/RegistrationSuccess.vue';
 import SelectInput from '@/components/common/SelectInput.vue';

 import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
@ -234,7 +230,6 @@ import { AuthHttpApi } from '@/api/auth';
 import { RouteConfig } from '@/router';
 import { PartneredSatellite } from '@/types/common';
 import { User } from '@/types/users';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 import { LocalData } from '@/utils/localData';
 import { MetaUtils } from '@/utils/meta';
 import { Validator } from '@/utils/validation';
@ -243,7 +238,6 @@ import { Validator } from '@/utils/validation';
@Component({
    components: {
        HeaderlessInput,
-        RegistrationSuccess,
        BottomArrowIcon,
        ErrorIcon,
        SelectedCheckIcon,
@ -306,16 +300,6 @@ export default class RegisterArea extends Vue {
        recaptcha: VueRecaptcha;
    }

-    /**
-     * Lifecycle hook on component destroy.
-     * Sets view to default state.
-     */
-    public beforeDestroy(): void {
-        if (this.isRegistrationSuccessful) {
-            this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION);
-        }
-    }
-
    /**
     * Lifecycle hook after initial render.
     * Sets up variables from route params.
@ -330,13 +314,6 @@ export default class RegisterArea extends Vue {
        }
    }

-    /**
-     * Indicates if registration successful area shown.
-     */
-    public get isRegistrationSuccessful(): boolean {
-        return this.$store.state.appStateModule.appState.isSuccessfulRegistrationShown;
-    }
-
    /**
     * Toggles satellite selection dropdown visibility (Tardigrade).
     */
@ -559,6 +536,13 @@ export default class RegisterArea extends Vue {
        return isNoErrors;
    }

+    /**
+     * Detect if user uses Brave browser
+     */
+    public async detectBraveBrowser(): Promise<boolean> {
+        return (navigator['brave'] && await navigator['brave'].isBrave() || false)
+    }
+
    /**
     * Creates user and toggles successful registration area visibility.
     */
@ -579,8 +563,7 @@ export default class RegisterArea extends Vue {
        try {
            this.userId = await this.auth.register(this.user, this.secret, this.recaptchaResponseToken);
            LocalData.setUserId(this.userId);
-
-            await this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION);
+            await this.detectBraveBrowser() ? await this.$router.push(RouteConfig.RegisterSuccess.path) : location.replace(RouteConfig.RegisterSuccess.path);
        } catch (error) {
            if (this.$refs.recaptcha) {
                this.$refs.recaptcha.reset();