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

2 files changed, 21 insertions, 3 deletions

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index b88bdeec..ca1fed94 100644
--- a/src/components/registration/registration.js
+++ b/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()
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 7438a5f4..5c913f94 100644
--- a/src/components/registration/registration.vue
+++ b/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;