feat: invite workspace members via link (#196)
* feat: add workspace invite links schema * feat: update workspace invite schema * feat: add repo funcs and share link toggle * feat: redirect to next param on authentication * feat: add invite page * feat: switch to workspace on invite success * refactor: tweak light mode styles * feat(cloud): update subscription for cloud * feat: only allow admin users to create links * chore: add translations
This commit is contained in:
Henry
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { env } from "next-runtime-env";
|
||||
@@ -17,6 +17,8 @@ export default function LoginPage() {
|
||||
const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
|
||||
const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
|
||||
|
||||
const redirect = useSearchParams().get("next");
|
||||
|
||||
const handleMagicLinkSent = (value: boolean, recipient: string) => {
|
||||
setIsMagicLinkSent(value);
|
||||
setMagicLinkRecipient(recipient);
|
||||
@@ -61,7 +63,11 @@ export default function LoginPage() {
|
||||
<Trans>
|
||||
Don't have an account?{" "}
|
||||
<span className="underline">
|
||||
<Link href="/signup">Sign up</Link>
|
||||
<Link
|
||||
href={redirect ? `/signup?next=${redirect}` : "/signup"}
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</span>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { Trans } from "@lingui/react/macro";
|
||||
import { env } from "next-runtime-env";
|
||||
@@ -17,6 +17,8 @@ export default function SignUpPage() {
|
||||
const [isMagicLinkSent, setIsMagicLinkSent] = useState<boolean>(false);
|
||||
const [magicLinkRecipient, setMagicLinkRecipient] = useState<string>("");
|
||||
|
||||
const redirect = useSearchParams().get("next");
|
||||
|
||||
const { data } = authClient.useSession();
|
||||
|
||||
if (data?.user.id) router.push("/boards");
|
||||
@@ -86,7 +88,9 @@ export default function SignUpPage() {
|
||||
<Trans>
|
||||
Already have an account?{" "}
|
||||
<span className="underline">
|
||||
<Link href="/login">Sign in</Link>
|
||||
<Link href={redirect ? `/login?next=${redirect}` : "/login"}>
|
||||
Sign in
|
||||
</Link>
|
||||
</span>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
171
apps/web/src/views/invite/index.tsx
Normal file
171
apps/web/src/views/invite/index.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { t } from "@lingui/core/macro";
|
||||
import { env } from "next-runtime-env";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { authClient } from "@kan/auth/client";
|
||||
|
||||
import Button from "~/components/Button";
|
||||
import LoadingSpinner from "~/components/LoadingSpinner";
|
||||
import { PageHead } from "~/components/PageHead";
|
||||
import PatternedBackground from "~/components/PatternedBackground";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
export default function InvitePage() {
|
||||
const router = useRouter();
|
||||
const { code } = router.query;
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { data: session, isPending: isSessionLoading } =
|
||||
authClient.useSession();
|
||||
|
||||
const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
|
||||
|
||||
const inviteCode = Array.isArray(code) ? code[0] : code;
|
||||
|
||||
const acceptInviteMutation = api.member.acceptInviteLink.useMutation({
|
||||
onSuccess: (result) => {
|
||||
if (result.success) {
|
||||
return router.push(
|
||||
`/boards?workspacePublicId=${result.workspacePublicId}`,
|
||||
);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
if (error.data?.code === "CONFLICT") {
|
||||
return router.push(`/boards`);
|
||||
}
|
||||
|
||||
setError(
|
||||
error.message ||
|
||||
t`Failed to accept invitation. Please try again later, or contact customer support.`,
|
||||
);
|
||||
setIsProcessing(false);
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
data: inviteInfo,
|
||||
isLoading: isInviteInfoLoading,
|
||||
isError: isInviteInfoError,
|
||||
} = api.member.getInviteByCode.useQuery(
|
||||
{ inviteCode: inviteCode ?? "" },
|
||||
{
|
||||
enabled: !!inviteCode,
|
||||
retry: false,
|
||||
},
|
||||
);
|
||||
|
||||
// Auto accept invite if user is logged in
|
||||
useEffect(() => {
|
||||
if (session?.user.id && inviteCode && inviteInfo && !error) {
|
||||
setIsProcessing(true);
|
||||
setError(null);
|
||||
|
||||
acceptInviteMutation.mutate({
|
||||
inviteCode,
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [session?.user.id, inviteCode, inviteInfo, error]);
|
||||
|
||||
if (
|
||||
!isInviteInfoError &&
|
||||
!error &&
|
||||
(session?.user.id || isInviteInfoLoading || isSessionLoading)
|
||||
) {
|
||||
return (
|
||||
<>
|
||||
<PageHead title={t`Join workspace`} />
|
||||
<PatternedBackground />
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const PageWrapper = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<>
|
||||
<PageHead title={t`Join workspace | kan.bn`} />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
if (isInviteInfoError || (!isInviteInfoLoading && !inviteInfo)) {
|
||||
return (
|
||||
<PageWrapper>
|
||||
<div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
|
||||
<PatternedBackground />
|
||||
<div className="z-10 w-full max-w-md space-y-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
|
||||
{t`Invalid invitation`}
|
||||
</h2>
|
||||
<p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
|
||||
{t`This invitation link is invalid or has expired.`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Button href="/" variant="primary">
|
||||
{t`Go Home`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWrapper>
|
||||
<div className="relative flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
|
||||
<PatternedBackground />
|
||||
<div className="z-10 w-full max-w-[400px] space-y-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-light-1000 dark:text-dark-1000">
|
||||
{t`Join workspace`}
|
||||
</h2>
|
||||
{!error ? (
|
||||
<p className="mt-4 text-center text-sm text-light-900 dark:text-dark-800">
|
||||
{isCloudEnv
|
||||
? t`You've been invited to join a workspace on kan.bn.`
|
||||
: t`You've been invited to join a workspace.`}
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-4 text-center text-sm text-red-500">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center gap-2">
|
||||
{session?.user.id ? (
|
||||
<Button href={`/boards`} variant="primary" size="md">
|
||||
{t`Go to app`}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
href={`/login?next=/invite/${inviteCode}`}
|
||||
disabled={isProcessing}
|
||||
variant="primary"
|
||||
size="md"
|
||||
>
|
||||
{t`Sign In`}
|
||||
</Button>
|
||||
<Button
|
||||
href={`/signup?next=/invite/${inviteCode}`}
|
||||
disabled={isProcessing}
|
||||
variant="primary"
|
||||
size="md"
|
||||
>
|
||||
{t`Sign Up`}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,12 @@ import { t } from "@lingui/core/macro";
|
||||
import { env } from "next-runtime-env";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { HiXMark } from "react-icons/hi2";
|
||||
import {
|
||||
HiInformationCircle,
|
||||
HiMiniCheck,
|
||||
HiOutlineDocumentDuplicate,
|
||||
HiXMark,
|
||||
} from "react-icons/hi2";
|
||||
import { z } from "zod";
|
||||
|
||||
import type { InviteMemberInput } from "@kan/api/types";
|
||||
@@ -31,7 +36,11 @@ export function InviteMemberForm({
|
||||
userId: string | undefined;
|
||||
}) {
|
||||
const utils = api.useUtils();
|
||||
const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false);
|
||||
const [isShareInviteLinkEnabled, setIsShareInviteLinkEnabled] =
|
||||
useState(false);
|
||||
const [inviteLink, setInviteLink] = useState<string>("");
|
||||
const [isLoadingInviteLink, setIsLoadingInviteLink] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const { closeModal } = useModal();
|
||||
const { workspace } = useWorkspace();
|
||||
const { showPopup } = usePopup();
|
||||
@@ -56,6 +65,21 @@ export function InviteMemberForm({
|
||||
|
||||
const refetchBoards = () => utils.board.all.refetch();
|
||||
|
||||
// Fetch active invite link on component mount
|
||||
const { data: activeInviteLink, refetch: refetchInviteLink } =
|
||||
api.member.getActiveInviteLink.useQuery(
|
||||
{ workspacePublicId: workspace.publicId || "" },
|
||||
{ enabled: !!workspace.publicId },
|
||||
);
|
||||
|
||||
// Set initial state based on active invite link
|
||||
useEffect(() => {
|
||||
if (activeInviteLink) {
|
||||
setIsShareInviteLinkEnabled(activeInviteLink.isActive);
|
||||
setInviteLink(activeInviteLink.inviteLink || "");
|
||||
}
|
||||
}, [activeInviteLink]);
|
||||
|
||||
const inviteMember = api.member.invite.useMutation({
|
||||
onSuccess: async () => {
|
||||
closeModal();
|
||||
@@ -64,7 +88,7 @@ export function InviteMemberForm({
|
||||
},
|
||||
onError: (error) => {
|
||||
reset();
|
||||
if (!isCreateAnotherEnabled) closeModal();
|
||||
if (!isShareInviteLinkEnabled) closeModal();
|
||||
|
||||
if (error.data?.code === "CONFLICT") {
|
||||
showPopup({
|
||||
@@ -82,6 +106,36 @@ export function InviteMemberForm({
|
||||
},
|
||||
});
|
||||
|
||||
const createInviteLink = api.member.createInviteLink.useMutation({
|
||||
onSuccess: (data) => {
|
||||
setInviteLink(data.inviteLink);
|
||||
setIsLoadingInviteLink(false);
|
||||
},
|
||||
onError: () => {
|
||||
setIsLoadingInviteLink(false);
|
||||
showPopup({
|
||||
header: t`Error creating invite link`,
|
||||
message: t`Please try again later.`,
|
||||
icon: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const deactivateInviteLink = api.member.deactivateInviteLink.useMutation({
|
||||
onSuccess: () => {
|
||||
setInviteLink("");
|
||||
setIsLoadingInviteLink(false);
|
||||
},
|
||||
onError: () => {
|
||||
setIsLoadingInviteLink(false);
|
||||
showPopup({
|
||||
header: t`Error deactivating invite link`,
|
||||
message: t`Please try again later.`,
|
||||
icon: "error",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const teamSubscription = getSubscriptionByPlan(subscriptions, "team");
|
||||
const proSubscription = getSubscriptionByPlan(subscriptions, "pro");
|
||||
|
||||
@@ -109,6 +163,43 @@ export function InviteMemberForm({
|
||||
inviteMember.mutate(member);
|
||||
};
|
||||
|
||||
const handleInviteLinkToggle = async () => {
|
||||
setIsLoadingInviteLink(true);
|
||||
|
||||
if (isShareInviteLinkEnabled && workspace.publicId) {
|
||||
// Deactivate invite link
|
||||
await deactivateInviteLink.mutateAsync({
|
||||
workspacePublicId: workspace.publicId,
|
||||
});
|
||||
setIsShareInviteLinkEnabled(false);
|
||||
} else {
|
||||
// Create new invite link
|
||||
await createInviteLink.mutateAsync({
|
||||
workspacePublicId: workspace.publicId,
|
||||
});
|
||||
setIsShareInviteLinkEnabled(true);
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(inviteLink);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
showPopup({
|
||||
header: t`Invite link copied`,
|
||||
message: t`Invite link copied to clipboard`,
|
||||
icon: "success",
|
||||
});
|
||||
} catch (error) {
|
||||
showPopup({
|
||||
header: t`Error`,
|
||||
message: t`Failed to copy invite link`,
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpgrade = async () => {
|
||||
const { data, error } = await authClient.subscription.upgrade({
|
||||
plan: "team",
|
||||
@@ -173,6 +264,34 @@ export function InviteMemberForm({
|
||||
}}
|
||||
errorMessage={errors.email?.message}
|
||||
/>
|
||||
{isShareInviteLinkEnabled && inviteLink && (
|
||||
<div className="my-4">
|
||||
<div className="relative">
|
||||
<Input
|
||||
value={inviteLink}
|
||||
className="pr-10 text-sm text-light-900 dark:text-dark-900"
|
||||
readOnly
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-light-900 hover:text-light-950 dark:text-dark-900 dark:hover:text-dark-950"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
{copied ? (
|
||||
<HiMiniCheck className="h-5 w-5 text-green-600" />
|
||||
) : (
|
||||
<HiOutlineDocumentDuplicate className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-start gap-1">
|
||||
<HiInformationCircle className="mt-0.5 h-4 w-4 text-dark-900" />
|
||||
<p className="text-xs text-gray-500 dark:text-dark-900">
|
||||
{t`Anyone with this link can join your workspace`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
|
||||
<div className="mt-3 rounded-md bg-light-100 p-3 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900">
|
||||
@@ -205,11 +324,9 @@ export function InviteMemberForm({
|
||||
{(hasTeamSubscription || hasProSubscription) &&
|
||||
env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
|
||||
<Toggle
|
||||
label={t`Invite another`}
|
||||
isChecked={isCreateAnotherEnabled}
|
||||
onChange={() =>
|
||||
setIsCreateAnotherEnabled(!isCreateAnotherEnabled)
|
||||
}
|
||||
label={t`Share invite link`}
|
||||
isChecked={isShareInviteLinkEnabled}
|
||||
onChange={handleInviteLinkToggle}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
@@ -226,7 +343,7 @@ export function InviteMemberForm({
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={inviteMember.isPending}
|
||||
disabled={inviteMember.isPending || isShareInviteLinkEnabled}
|
||||
isLoading={inviteMember.isPending}
|
||||
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user