Hide member emails from non-admins (#327)

* feat(workspace): sanitize member emails for non-admin users in workspace router

* feat(workspace): add email visibility setting and update member display logic

* fix(workspace): update default value for showEmailsToMembers column to true

* - Removed unnecessary type assertions
- Added anonymous name handling (anonymous_[publicId]) in the API
- Removed placeholder logic
- Reverted null check
- Avoided as unknown cast

apps/web/src/views/members/index.tsx

@@ -54,6 +54,7 @@ export default function MembersPage() {
     memberStatus,
     isLastRow,
     showSkeleton,
+    showPendingIcon,
   }: {
     memberPublicId?: string;
     memberId?: string | null | undefined;
@@ -64,6 +65,7 @@ export default function MembersPage() {
     memberStatus?: string;
     isLastRow?: boolean;
     showSkeleton?: boolean;
+    showPendingIcon?: boolean;
   }) => {
     return (
       <tr className="rounded-b-lg">
@@ -82,6 +84,7 @@ export default function MembersPage() {
                   name={memberName ?? ""}
                   email={memberEmail ?? ""}
                   imageUrl={memberImage ? getAvatarUrl(memberImage) : undefined}
+                  icon={showPendingIcon ? "?" : undefined}
                 />
               )}
             </div>
@@ -93,20 +96,26 @@ export default function MembersPage() {
                       "mr-2 truncate text-xs font-medium text-neutral-900 dark:text-dark-1000 sm:text-sm",
                       showSkeleton &&
                         "md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+                      showPendingIcon &&
+                        "italic text-neutral-500 dark:text-dark-900",
                     )}
                   >
                     {memberName}
                   </p>
                 </div>
-                <p
-                  className={twMerge(
-                    "truncate text-xs text-dark-900 sm:text-sm",
-                    showSkeleton &&
-                      "h-3 w-[175px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
-                  )}
-                >
-                  {memberEmail}
-                </p>
+                {((workspace.role === "admin" ||
+                  data?.showEmailsToMembers === true) ||
+                  showSkeleton) && (
+                  <p
+                    className={twMerge(
+                      "truncate text-xs text-dark-900 sm:text-sm",
+                      showSkeleton &&
+                        "h-3 w-[175px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
+                    )}
+                  >
+                    {memberEmail}
+                  </p>
+                )}
               </div>
             </div>
           </div>
@@ -246,19 +255,24 @@ export default function MembersPage() {
                   </thead>
                   <tbody className="divide-y divide-light-600 overflow-visible bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
                     {!isLoading &&
-                      data?.members.map((member, index) => (
-                        <TableRow
-                          key={member.publicId}
-                          memberPublicId={member.publicId}
-                          memberId={member.user?.id}
-                          memberName={member.user?.name}
-                          memberEmail={member.user?.email ?? member.email}
-                          memberImage={member.user?.image}
-                          memberRole={member.role}
-                          memberStatus={member.status}
-                          isLastRow={index === data.members.length - 1}
-                        />
-                      ))}
+                      data?.members.map((member, index) => {
+                        const isPendingInvite = member.status === "invited";
+
+                        return (
+                          <TableRow
+                            key={member.publicId}
+                            memberPublicId={member.publicId}
+                            memberId={member.user?.id}
+                            memberName={member.user?.name}
+                            memberEmail={member.user?.email ?? member.email}
+                            memberImage={member.user?.image}
+                            memberRole={member.role}
+                            memberStatus={member.status}
+                            isLastRow={index === data.members.length - 1}
+                            showPendingIcon={isPendingInvite}
+                          />
+                        );
+                      })}
 
                     {isLoading && (
                       <>

apps/web/src/views/settings/WorkspaceSettings.tsx

@@ -17,6 +17,7 @@ import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
+import UpdateWorkspaceEmailVisibilityForm from "./components/UpdateWorkspaceEmailVisibilityForm";
 import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
 import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
@@ -79,6 +80,14 @@ export default function WorkspaceSettings() {
           workspaceDescription={workspace.description ?? ""}
         />
 
+        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
+          {t`Email visibility`}
+        </h2>
+        <UpdateWorkspaceEmailVisibilityForm
+          workspacePublicId={workspace.publicId}
+          showEmailsToMembers={workspaceData?.showEmailsToMembers ?? false}
+        />
+
         {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
           !hasActiveSubscription(subscriptions, "pro") &&
           !hasActiveSubscription(subscriptions, "team") && (

apps/web/src/views/settings/components/UpdateWorkspaceEmailVisibilityForm.tsx

@@ -0,0 +1,53 @@
+import { t } from "@lingui/core/macro";
+import { useEffect, useState } from "react";
+
+import Toggle from "~/components/Toggle";
+import { api } from "~/utils/api";
+
+export default function UpdateWorkspaceEmailVisibilityForm({
+  workspacePublicId,
+  showEmailsToMembers,
+}: {
+  workspacePublicId: string;
+  showEmailsToMembers: boolean;
+}) {
+  const utils = api.useUtils();
+  const [isChecked, setIsChecked] = useState(showEmailsToMembers);
+
+  useEffect(() => {
+    setIsChecked(showEmailsToMembers);
+  }, [showEmailsToMembers]);
+
+  const updateWorkspace = api.workspace.update.useMutation({
+    onSuccess: () => {
+      void utils.workspace.byId.invalidate({
+        workspacePublicId,
+      });
+    },
+  });
+
+  const handleToggle = () => {
+    const newValue = !isChecked;
+    setIsChecked(newValue);
+    updateWorkspace.mutate({
+      workspacePublicId,
+      showEmailsToMembers: newValue,
+    });
+  };
+
+  return (
+    <div className="mb-8 flex items-center justify-between">
+      <div className="flex-1">
+        <p className="text-sm text-neutral-500 dark:text-dark-900">
+          {t`Allow workspace members to see each other's email addresses`}
+        </p>
+      </div>
+      <Toggle
+        isChecked={isChecked}
+        onChange={handleToggle}
+        label=""
+        disabled={updateWorkspace.isPending}
+      />
+    </div>
+  );
+}