various fixes after review

quantified-uncertainty · Nov 24, 2023 · a8b65e4 · a8b65e4
1 parent d54e0a9
commit a8b65e4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/packages/hub/src/app/groups/[slug]/invite-link/AcceptGroupInvitePage.tsx b/packages/hub/src/app/groups/[slug]/invite-link/AcceptGroupInvitePage.tsx
@@ -92,6 +92,7 @@ export const AcceptGroupInvitePage: FC<{
 
   return (
     <div>
+      <p className="mb-4">{`You've been invited to join ${group.slug} group.`}</p>
       <MutationButton<
         AcceptGroupInvitePageMutation,
         "AcceptReusableGroupInviteTokenResult"

diff --git a/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx b/packages/hub/src/app/groups/[slug]/members/GroupReusableInviteSection.tsx
@@ -38,19 +38,24 @@ export const GroupReusableInviteSection: FC<Props> = ({ groupRef }) => {
     if (!group.reusableInviteToken) {
       return undefined;
     }
-    const relativeInviteLink = groupInviteLink({
+    const routeArgs = {
       groupSlug: group.slug,
       inviteToken: group.reusableInviteToken,
-    });
+    };
+    const fullLink = groupInviteLink(routeArgs);
+    const blurredLink = groupInviteLink({ ...routeArgs, blur: true });
 
-    return `${origin}${relativeInviteLink}`;
+    return {
+      full: `${origin}${fullLink}`,
+      blurred: `${origin}${blurredLink}`,
+    };
   }, [group.reusableInviteToken, group.slug, origin]);
 
   const copy = () => {
     if (!inviteLink) {
       return;
     }
-    navigator.clipboard.writeText(inviteLink);
+    navigator.clipboard.writeText(inviteLink.full);
     toast("Copied to clipboard", "confirmation");
   };
 
@@ -68,15 +73,13 @@ export const GroupReusableInviteSection: FC<Props> = ({ groupRef }) => {
                 size={24}
                 className="text-slate-400 group-hover:text-slate-500"
               />
-              <code className="text-xs">{inviteLink}</code>
+              <code className="text-xs">{inviteLink.blurred}</code>
             </div>
           </TextTooltip>
         ) : (
           <Skeleton height={36} />
         )
-      ) : (
-        <div className="text-slate-400">Invite link is not configured.</div>
-      )}
+      ) : null}
       <div className="flex gap-2 mt-4">
         <MutationButton<
           GroupReusableInviteSection_CreateMutation,

diff --git a/packages/hub/src/routes.ts b/packages/hub/src/routes.ts
@@ -200,8 +200,16 @@ export function termsOfServiceRoute() {
 export function groupInviteLink(params: {
   groupSlug: string;
   inviteToken: string;
+  blur?: boolean;
 }) {
+  let token = params.inviteToken;
+  if (params.blur) {
+    const visibleLength = 4;
+    token =
+      token.substring(0, visibleLength) +
+      "•".repeat(token.length - visibleLength);
+  }
   return `${groupRoute({
     slug: params.groupSlug,
-  })}/invite-link?token=${params.inviteToken}`;
+  })}/invite-link?token=${token}`;
 }