Handle invitation links

#121

src/router/index.ts

@@ -31,8 +31,9 @@ const router = createRouter({
         title: "Login",
       },
       props: (route) => ({
-        returnPath: route.query.return_path ?? undefined,
+        returnPath: route.query.next ?? undefined,
         loginError: route.query.login_error ?? undefined,
+        invitationToken: route.query.invitation_token ?? undefined,
       }),
     },
     {

src/views/LoginView.vue

@@ -11,6 +11,7 @@ const router = useRouter();
 const props = defineProps<{
   returnPath?: string;
   loginError?: string;
+  invitationToken?: string;
 }>();
 
 const store = useUserStore();
@@ -24,9 +25,17 @@ onBeforeMount(() => {
   }
 });
 
-const returnPathQuery = computed<string>(() =>
-  props.returnPath ? `&next=${encodeURI(props.returnPath)}` : "",
-);
+const loginPath = computed<string>(() => {
+  const loginUrl = new URL(`${OpenAPI.BASE}/auth/login?provider=lifescience`);
+  console.log(props);
+  if (props.returnPath) {
+    loginUrl.searchParams.append("next", encodeURI(props.returnPath));
+  }
+  if (props.invitationToken) {
+    loginUrl.searchParams.append("invitation_token", props.invitationToken);
+  }
+  return loginUrl.href;
+});
 
 onMounted(() => {
   errorToast = new Toast("#loginErrorToast");
@@ -69,15 +78,16 @@ onMounted(() => {
   <div
     class="card text-center ms-md-auto position-fixed top-50 start-50 translate-middle shadow"
   >
-    <div class="card-header">Login</div>
+    <div v-if="invitationToken" class="card-header">Invitation</div>
+    <div v-else class="card-header">Login</div>
     <div class="card-body">
-      <p class="card-text text-secondary">
+      <p v-if="invitationToken" class="card-text text-secondary">
+        Connect your CloWM account with your LifeScience account
+      </p>
+      <p v-else class="card-text text-secondary">
         Login to this service with LifeScience
       </p>
-      <a
-        :href="`${OpenAPI.BASE}/auth/login?provider=lifescience${returnPathQuery}`"
-        class="m-2"
-      >
+      <a :href="loginPath" class="m-2">
         <img src="/src/assets/images/ls-login.png" alt="[LS Login]" />
       </a>
     </div>