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
This commit is contained in:
Jeremy Wharton 2023-06-26 10:20:59 -05:00 committed by Storj Robot
parent 9374edfac9
commit bcce6023c3

View File

@ -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;