From 899b064a5916fd27497e034773707dadd23589ff Mon Sep 17 00:00:00 2001
From: Bogdan Artemenko <artemenkobogdan@gmail.com>
Date: Thu, 7 Feb 2019 09:12:20 +0200
Subject: [PATCH] Added congratulations page after registration. Implemented
 Account confirmation argument validation. (#1253)

* Added congratulations page after registration. Implemented Account confirmation argument validation.
---
 web/satellite/src/App.vue                     |  2 +
 web/satellite/src/api/users.ts                | 37 +++++++++++++++++++
 .../common/RegistrationSuccessPopup.vue       | 19 ++++++++--
 web/satellite/src/store/modules/appState.ts   | 15 +++++++-
 web/satellite/src/store/modules/users.ts      | 14 ++++---
 web/satellite/src/store/mutationConstants.ts  |  1 +
 .../src/utils/constants/actionNames.ts        |  2 +
 web/satellite/src/views/Dashboard.vue         | 20 +++++++++-
 web/satellite/src/views/Register.vue          | 11 +++---
 9 files changed, 104 insertions(+), 17 deletions(-)

diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index 51610f132..9808af400 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -37,6 +37,8 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
                 'addTeamMemberPopupButtonSVG',
                 'sortTeamMemberByDropdown',
 				'sortTeamMemberByDropdownButton',
+                'createAccountButton',
+                'successfulRegistrationPopup',
             ]
         };
     },
diff --git a/web/satellite/src/api/users.ts b/web/satellite/src/api/users.ts
index aa31a4c88..d8e12006a 100644
--- a/web/satellite/src/api/users.ts
+++ b/web/satellite/src/api/users.ts
@@ -247,3 +247,40 @@ export async function deleteAccountRequest(password: string): Promise<RequestRes
 
     return result;
 }
+
+// Performs graphQL request.
+// Returns Token string.
+// Throws an exception if error occurs
+export async function activateAccountRequest(token: string): Promise<RequestResponse<string>> {
+	let result: RequestResponse<string> = {
+		errorMessage: '',
+		isSuccess: false,
+		data: ''
+	};
+
+	try {
+		let response = await apolloManager.mutate(
+			{
+				mutation: gql(`
+				    mutation {
+				        activateAccount(input: "${token}") {
+				            token
+				        }
+				    }
+				`),
+				fetchPolicy: 'no-cache'
+
+			}
+		);
+
+		if (response.errors) {
+			result.errorMessage = response.errors[0].message;
+		} else {
+			result.isSuccess = true;
+		}
+	} catch (e) {
+		result.errorMessage = e.message;
+	}
+
+	return result;
+}
diff --git a/web/satellite/src/components/common/RegistrationSuccessPopup.vue b/web/satellite/src/components/common/RegistrationSuccessPopup.vue
index 48ce9f7ce..ce1d0d29f 100644
--- a/web/satellite/src/components/common/RegistrationSuccessPopup.vue
+++ b/web/satellite/src/components/common/RegistrationSuccessPopup.vue
@@ -2,8 +2,8 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="register-success-popup-container">
-        <div v-if="true" class="register-success-popup">
+    <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"/>
@@ -36,12 +36,25 @@
 <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,
-            }
+            },
         }
     )
 
diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts
index 777d9f944..377521091 100644
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import { APP_STATE_MUTATIONS } from '../mutationConstants';
-import {APP_STATE_ACTIONS} from "@/utils/constants/actionNames";
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
 
 export const appStateModule = {
 	state: {
@@ -16,6 +16,7 @@ export const appStateModule = {
             isDeleteAccountPopupShown: false,
             isNewAPIKeyPopupShown: false,
             isSortProjectMembersByPopupShown: false,
+            isSuccessfulRegistrationPopupShown: false,
         },
 	},
 	mutations: {
@@ -55,6 +56,10 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.TOGGLE_NEW_API_KEY_POPUP](state: any): void {
             state.appState.isNewAPIKeyPopupShown = !state.appState.isNewAPIKeyPopupShown;
         },
+		// Mutation changing 'successful registration' popup visibility
+		[APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP](state: any): void {
+			state.appState.isSuccessfulRegistrationPopupShown = !state.appState.isSuccessfulRegistrationPopupShown;
+		},
 
         // Mutation that closes each popup/dropdown
         [APP_STATE_MUTATIONS.CLOSE_ALL](state: any): void {
@@ -66,6 +71,7 @@ export const appStateModule = {
             state.appState.isDeleteAccountPopupShown = false;
             state.appState.isSortProjectMembersByPopupShown = false;
             state.appState.isNewAPIKeyPopupShown = false;
+			state.appState.isSuccessfulRegistrationPopupShown = false;
         },
 	},
 	actions: {
@@ -126,6 +132,13 @@ export const appStateModule = {
 
             commit(APP_STATE_MUTATIONS.TOGGLE_NEW_API_KEY_POPUP);
         },
+		[APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP]: function ({commit, state}: any): void {
+			if (!state.appState.isSuccessfullRegistrationPopupShown) {
+				commit(APP_STATE_MUTATIONS.CLOSE_ALL);
+			}
+
+			commit(APP_STATE_MUTATIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP);
+		},
         closePopups: function ({commit}: any): void {
             commit(APP_STATE_MUTATIONS.CLOSE_ALL);
         },
diff --git a/web/satellite/src/store/modules/users.ts b/web/satellite/src/store/modules/users.ts
index eedeb75ab..fd9ea682e 100644
--- a/web/satellite/src/store/modules/users.ts
+++ b/web/satellite/src/store/modules/users.ts
@@ -3,10 +3,11 @@
 
 import { USER_MUTATIONS } from '../mutationConstants';
 import {
-    deleteAccountRequest,
-    updateAccountRequest,
-    changePasswordRequest,
-    getUserRequest
+	deleteAccountRequest,
+	updateAccountRequest,
+	changePasswordRequest,
+	getUserRequest,
+	activateAccountRequest
 } from '@/api/users';
 
 export const usersModule = {
@@ -69,7 +70,10 @@ export const usersModule = {
 		},
         clearUser: function({commit}: any) {
             commit(USER_MUTATIONS.CLEAR);
-        }
+        },
+		activateAccount: async function ({commit}, temporaryToken: string): Promise<RequestResponse<string>> {
+			return await activateAccountRequest(temporaryToken);
+		}
 	},
 
 	getters: {
diff --git a/web/satellite/src/store/mutationConstants.ts b/web/satellite/src/store/mutationConstants.ts
index 5e0aa12b7..bd55dd1ef 100644
--- a/web/satellite/src/store/mutationConstants.ts
+++ b/web/satellite/src/store/mutationConstants.ts
@@ -55,5 +55,6 @@ export const APP_STATE_MUTATIONS = {
     TOGGLE_DELETE_ACCOUNT_DROPDOWN: 'TOGGLE_DELETE_ACCOUNT_DROPDOWN',
 	TOGGLE_SORT_PM_BY_DROPDOWN: 'TOGGLE_SORT_PM_BY_DROPDOWN',
 	TOGGLE_NEW_API_KEY_POPUP: "TOGGLE_NEW_API_KEY_POPUP",
+	TOGGLE_SUCCESSFUL_REGISTRATION_POPUP: 'TOGGLE_SUCCESSFUL_REGISTRATION_POPUP',
     CLOSE_ALL: 'CLOSE_ALL',
 };
diff --git a/web/satellite/src/utils/constants/actionNames.ts b/web/satellite/src/utils/constants/actionNames.ts
index afeb397f2..e51e10d49 100644
--- a/web/satellite/src/utils/constants/actionNames.ts
+++ b/web/satellite/src/utils/constants/actionNames.ts
@@ -10,6 +10,7 @@ export const APP_STATE_ACTIONS = {
     TOGGLE_DEL_ACCOUNT: 'toggleDeleteAccountPopup',
     TOGGLE_NEW_API_KEY: "toggleNewAPIKeyPopup",
 	TOGGLE_SORT_PM_BY_DROPDOWN: 'toggleSortProjectMembersByPopup',
+	TOGGLE_SUCCESSFUL_REGISTRATION_POPUP: 'toggleSuccessfulRegistrationPopup',
 	CLOSE_POPUPS: 'closePopups',
 };
 
@@ -49,6 +50,7 @@ export const USER_ACTIONS = {
 	DELETE: 'deleteAccount',
 	GET: 'getUser',
 	CLEAR: 'clearUser',
+	ACTIVATE: 'activateAccount',
 };
 
 export const API_KEYS_ACTIONS = {
diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue
index fbdef05a5..220f7eff5 100644
--- a/web/satellite/src/views/Dashboard.vue
+++ b/web/satellite/src/views/Dashboard.vue
@@ -17,17 +17,33 @@
 import { Component, Vue } from 'vue-property-decorator';
 import DashboardHeader from '@/components/header/Header.vue';
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
-import { removeToken } from '@/utils/tokenManager';
+import { removeToken, setToken } from '@/utils/tokenManager';
 import { NOTIFICATION_ACTIONS, PROJETS_ACTIONS, PM_ACTIONS, USER_ACTIONS } from '@/utils/constants/actionNames';
+import ROUTES from '@/utils/constants/routerConstants';
 
 @Component({
     beforeMount: async function() {
+    	const activationTokenParam = this.$route.query['activationToken'];
+
+    	if(activationTokenParam) {
+			const response = await this.$store.dispatch(USER_ACTIONS.ACTIVATE, activationTokenParam);
+			if(!response.isSuccess) {
+				this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, 'Unable to activate account');
+				this.$router.push(ROUTES.LOGIN);
+
+				removeToken();
+
+				return;
+            }
+
+			setToken(response.data);
+        }
         // TODO: should place here some animation while all needed data is fetching
         let response: RequestResponse<User> = await this.$store.dispatch(USER_ACTIONS.GET);
 
         if (!response.isSuccess) {
             this.$store.dispatch(NOTIFICATION_ACTIONS.ERROR, response.errorMessage);
-            this.$router.push('/login');
+            this.$router.push(ROUTES.LOGIN);
             removeToken();
 
             return;
diff --git a/web/satellite/src/views/Register.vue b/web/satellite/src/views/Register.vue
index e16946b65..21d1ac4b5 100644
--- a/web/satellite/src/views/Register.vue
+++ b/web/satellite/src/views/Register.vue
@@ -61,7 +61,7 @@
                                 :isCheckboxError="isTermsAcceptedError"/>
                         <h2>I agree to the Storj Bridge Hosting <a>Terms & Conditions</a></h2>
                     </div>
-                    <Button class="register-area__scrollable__form-area__create-button" label="Create Account"
+                    <Button id="createAccountButton" class="register-area__scrollable__form-area__create-button" label="Create Account"
                             width="100%" height="48px" :onPress="onCreateClick"/>
                 </div>
             </div>
@@ -69,7 +69,7 @@
         </div>
 
         <img class="layout-image" src="../../static/images/register/RegisterImage.svg"/>
-        <!--<RegistrationSuccessPopup />-->
+        <RegistrationSuccessPopup />
     </div>
 </template>
 
@@ -78,10 +78,9 @@ import { Component, Vue } from 'vue-property-decorator';
 import HeaderedInput from '@/components/common/HeaderedInput.vue';
 import Checkbox from '@/components/common/Checkbox.vue';
 import Button from '@/components/common/Button.vue';
-import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup';
+import RegistrationSuccessPopup from '@/components/common/RegistrationSuccessPopup.vue';
 import { validateEmail, validatePassword } from '@/utils/validation';
-import ROUTES from '../utils/constants/routerConstants';
-import { NOTIFICATION_ACTIONS } from '../utils/constants/actionNames';
+import { APP_STATE_ACTIONS, NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
 import { createUserRequest } from '@/api/users';
 
 @Component(
@@ -156,7 +155,7 @@ import { createUserRequest } from '@/api/users';
                     return;
                 }
 
-                this.$router.push(ROUTES.LOGIN.path);
+                this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_SUCCESSFUL_REGISTRATION_POPUP);
             }
         },
         data: function (): RegisterData {