Show a dedicated registration notice page when further action is required after registering

This commit is contained in:
tusooa 2023-07-25 10:46:27 -04:00
parent f5b4b5f777
commit 82c0044963
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
4 changed files with 40 additions and 6 deletions

View File

@ -0,0 +1 @@
Show a dedicated registration notice page when further action is required after registering

View File

@ -83,6 +83,8 @@ const registration = {
signedIn: (state) => !!state.users.currentUser, signedIn: (state) => !!state.users.currentUser,
isPending: (state) => state.users.signUpPending, isPending: (state) => state.users.signUpPending,
serverValidationErrors: (state) => state.users.signUpErrors, serverValidationErrors: (state) => state.users.signUpErrors,
signUpNotice: (state) => state.users.signUpNotice,
hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
termsOfService: (state) => state.instance.tos, termsOfService: (state) => state.instance.tos,
accountActivationRequired: (state) => state.instance.accountActivationRequired, accountActivationRequired: (state) => state.instance.accountActivationRequired,
accountApprovalRequired: (state) => state.instance.accountApprovalRequired, accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
@ -107,8 +109,12 @@ const registration = {
if (!this.v$.$invalid) { if (!this.v$.$invalid) {
try { try {
await this.signUp(this.user) const status = await this.signUp(this.user)
this.$router.push({ name: 'friends' }) if (status === 'ok') {
this.$router.push({ name: 'friends' })
} else {
// display sign up notice, do not switch anywhere
}
} catch (error) { } catch (error) {
console.warn('Registration failed: ', error) console.warn('Registration failed: ', error)
this.setCaptcha() this.setCaptcha()

View File

@ -3,7 +3,10 @@
<div class="panel-heading"> <div class="panel-heading">
{{ $t('registration.registration') }} {{ $t('registration.registration') }}
</div> </div>
<div class="panel-body"> <div
v-if="!hasSignUpNotice"
class="panel-body"
>
<form <form
class="registration-form" class="registration-form"
@submit.prevent="submit(user)" @submit.prevent="submit(user)"
@ -307,6 +310,11 @@
</div> </div>
</form> </form>
</div> </div>
<div v-else>
<p class="registration-notice">
{{ signUpNotice.message }}
</p>
</div>
</div> </div>
</template> </template>
@ -404,6 +412,10 @@ $validations-cRed: #f04124;
} }
} }
.registration-notice {
margin: 0.6em;
}
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
.registration-form .container { .registration-form .container {
flex-direction: column-reverse; flex-direction: column-reverse;

View File

@ -250,6 +250,7 @@ export const mutations = {
signUpPending (state) { signUpPending (state) {
state.signUpPending = true state.signUpPending = true
state.signUpErrors = [] state.signUpErrors = []
state.signUpNotice = {}
}, },
signUpSuccess (state) { signUpSuccess (state) {
state.signUpPending = false state.signUpPending = false
@ -257,6 +258,12 @@ export const mutations = {
signUpFailure (state, errors) { signUpFailure (state, errors) {
state.signUpPending = false state.signUpPending = false
state.signUpErrors = errors state.signUpErrors = errors
state.signUpNotice = {}
},
signUpNotice (state, notice) {
state.signUpPending = false
state.signUpErrors = []
state.signUpNotice = notice
} }
} }
@ -287,6 +294,7 @@ export const defaultState = {
usersByNameObject: {}, usersByNameObject: {},
signUpPending: false, signUpPending: false,
signUpErrors: [], signUpErrors: [],
signUpNotice: {},
relationships: {} relationships: {}
} }
@ -524,9 +532,16 @@ const users = {
const data = await rootState.api.backendInteractor.register( const data = await rootState.api.backendInteractor.register(
{ params: { ...userInfo } } { params: { ...userInfo } }
) )
store.commit('signUpSuccess')
store.commit('setToken', data.access_token) if (data.access_token) {
store.dispatch('loginUser', data.access_token) store.commit('signUpSuccess')
store.commit('setToken', data.access_token)
store.dispatch('loginUser', data.access_token)
return 'ok'
} else { // Request succeeded, but user cannot login yet.
store.commit('signUpNotice', data)
return 'request_sent'
}
} catch (e) { } catch (e) {
const errors = e.message const errors = e.message
store.commit('signUpFailure', errors) store.commit('signUpFailure', errors)