Added congratulations page after registration. Implemented Account confirmation argument validation. (#1253)

* Added congratulations page after registration. Implemented Account confirmation argument validation.
This commit is contained in:
Bogdan Artemenko 2019-02-07 09:12:20 +02:00 committed by GitHub
parent bfe8060f4d
commit 899b064a59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 104 additions and 17 deletions

View File

@ -37,6 +37,8 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
'addTeamMemberPopupButtonSVG',
'sortTeamMemberByDropdown',
'sortTeamMemberByDropdownButton',
'createAccountButton',
'successfulRegistrationPopup',
]
};
},

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

@ -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);
},

View File

@ -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: {

View File

@ -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',
};

View File

@ -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 = {

View File

@ -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;

View File

@ -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 {