From bcce6023c3c85d45a560c54ecf7ff8ea9f005599 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Mon, 26 Jun 2023 10:20:59 -0500
Subject: [PATCH] web/satellite: show custom invitation text in registration
 page

This change makes the registration page to display custom text for
users that have been invited to a project.

References #5353

Change-Id: Ib20760f79ef29327b66316817010ca1dc00ff2ce
---
 .../src/views/registration/RegisterArea.vue   | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/satellite/src/views/registration/RegisterArea.vue b/web/satellite/src/views/registration/RegisterArea.vue
index c3e092ce2..00349d842 100644
--- a/web/satellite/src/views/registration/RegisterArea.vue
+++ b/web/satellite/src/views/registration/RegisterArea.vue
@@ -89,6 +89,9 @@
                             </ul>
                         </div>
                     </div>
+                    <p v-if="inviterName && inviterEmail && projectName" class="register-area__input-area__container__invitation-text">
+                        {{ inviterName }} ({{ inviterEmail }}) has invited you to the project {{ projectName }} on Storj. Create an account on the {{ satelliteName }} region to join {{ inviterName }} in the project.
+                    </p>
                     <div class="register-area__input-area__toggle__container">
                         <ul class="register-area__input-area__toggle__wrapper">
                             <li
@@ -279,7 +282,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import { computed, ComputedRef, onBeforeMount, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 
@@ -323,7 +326,11 @@ const storageNeeds = ref<StorageNeed>();
 const viewConfig = ref<ViewConfig | null>(null);
 
 // DCS logic
-const secret = ref('');
+const secret = queryRef('token');
+
+const inviterName = queryRef('inviter');
+const inviterEmail = queryRef('inviter_email');
+const projectName = queryRef('project');
 
 const isTermsAccepted = ref(false);
 const password = ref('');
@@ -373,10 +380,6 @@ const route = useRoute();
  * Sets up variables from route params and loads config.
  */
 onBeforeMount(() => {
-    if (route.query.token) {
-        secret.value = route.query.token.toString();
-    }
-
     if (route.query.partner) {
         user.value.partner = route.query.partner.toString();
     }
@@ -393,6 +396,17 @@ onBeforeMount(() => {
     }
 });
 
+/**
+ * queryRef returns a computed reference to a query parameter.
+ * Nonexistent keys or keys with no value produce an empty string.
+ */
+function queryRef(key: string): ComputedRef<string> {
+    return computed((): string => {
+        const param = route.query[key] || '';
+        return (typeof param === 'string') ? param : (param[0] || '');
+    });
+}
+
 /**
  * Redirects to chosen satellite.
  */
@@ -1141,6 +1155,11 @@ async function createUser(): Promise<void> {
                     }
                 }
 
+                &__invitation-text {
+                    font-size: 16px;
+                    line-height: 24px;
+                }
+
                 &__warning {
                     margin-top: 30px;
                     padding: 15px;