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:
parent
bfe8060f4d
commit
899b064a59
@ -37,6 +37,8 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
|
||||
'addTeamMemberPopupButtonSVG',
|
||||
'sortTeamMemberByDropdown',
|
||||
'sortTeamMemberByDropdownButton',
|
||||
'createAccountButton',
|
||||
'successfulRegistrationPopup',
|
||||
]
|
||||
};
|
||||
},
|
||||
|
@ -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
@ -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);
|
||||
},
|
||||
|
@ -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: {
|
||||
|
@ -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',
|
||||
};
|
||||
|
@ -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 = {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user