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

changelog.d/registration-notice.add

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

src/components/registration/registration.js

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

src/components/registration/registration.vue

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

src/modules/users.js

@@ -250,6 +250,7 @@ export const mutations = {
   signUpPending (state) {
     state.signUpPending = true
     state.signUpErrors = []
+    state.signUpNotice = {}
   },
   signUpSuccess (state) {
     state.signUpPending = false
@@ -257,6 +258,12 @@ export const mutations = {
   signUpFailure (state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
+    state.signUpNotice = {}
+  },
+  signUpNotice (state, notice) {
+    state.signUpPending = false
+    state.signUpErrors = []
+    state.signUpNotice = notice
   }
 }
 
@@ -287,6 +294,7 @@ export const defaultState = {
   usersByNameObject: {},
   signUpPending: false,
   signUpErrors: [],
+  signUpNotice: {},
   relationships: {}
 }
 
@@ -524,9 +532,16 @@ const users = {
         const data = await rootState.api.backendInteractor.register(
           { params: { ...userInfo } }
         )
-        store.commit('signUpSuccess')
-        store.commit('setToken', data.access_token)
-        store.dispatch('loginUser', data.access_token)
+
+        if (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) {
         const errors = e.message
         store.commit('signUpFailure', errors)