mirror of
https://github.com/docmost/docmost.git
synced 2026-05-07 06:23:06 +08:00
Merge branch 'main' into fix/conf-anchor
This commit is contained in:
@@ -693,5 +693,16 @@
|
||||
"Failed to update trash retention": "Failed to update trash retention",
|
||||
"Removed page restriction": "Removed page restriction",
|
||||
"Added page permission": "Added page permission",
|
||||
"Removed page permission": "Removed page permission"
|
||||
"Removed page permission": "Removed page permission",
|
||||
"Verifying your email": "Verifying your email",
|
||||
"Please wait...": "Please wait...",
|
||||
"Verification failed. The link may have expired.": "Verification failed. The link may have expired.",
|
||||
"Check your email": "Check your email",
|
||||
"We sent a verification link to {{email}}.": "We sent a verification link to {{email}}.",
|
||||
"We sent a verification link to your email.": "We sent a verification link to your email.",
|
||||
"Click the link to verify your email and access your workspace.": "Click the link to verify your email and access your workspace.",
|
||||
"Resend verification email": "Resend verification email",
|
||||
"Verification email sent. Please check your inbox.": "Verification email sent. Please check your inbox.",
|
||||
"Failed to resend verification email. Please try again.": "Failed to resend verification email. Please try again.",
|
||||
"We've sent you an email with your associated workspaces.": "We've sent you an email with your associated workspaces."
|
||||
}
|
||||
|
||||
@@ -38,6 +38,7 @@ import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
|
||||
import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
|
||||
import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
|
||||
import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
|
||||
import VerifyEmail from "@/ee/pages/verify-email.tsx";
|
||||
|
||||
export default function App() {
|
||||
const { t } = useTranslation();
|
||||
@@ -63,6 +64,7 @@ export default function App() {
|
||||
<>
|
||||
<Route path={"/create"} element={<CreateWorkspace />} />
|
||||
<Route path={"/select"} element={<CloudLogin />} />
|
||||
<Route path={"/verify-email"} element={<VerifyEmail />} />
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
@@ -5,3 +5,15 @@ export async function getJoinedWorkspaces(): Promise<Partial<IWorkspace[]>> {
|
||||
const req = await api.post<Partial<IWorkspace[]>>("/workspace/joined");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
export async function findWorkspacesByEmail(email: string): Promise<void> {
|
||||
await api.post("/workspace/find-by-email", { email });
|
||||
}
|
||||
|
||||
export async function verifyEmail(data: { token: string }): Promise<void> {
|
||||
await api.post("/workspace/verify-email", data);
|
||||
}
|
||||
|
||||
export async function resendVerificationEmail(data: { email: string; sig: string }): Promise<void> {
|
||||
await api.post("/workspace/resend-verification", data);
|
||||
}
|
||||
|
||||
@@ -20,14 +20,21 @@ import APP_ROUTE from "@/lib/app-route.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import JoinedWorkspaces from "@/ee/components/joined-workspaces.tsx";
|
||||
import { useJoinedWorkspacesQuery } from "@/ee/cloud/query/cloud-query.ts";
|
||||
import { findWorkspacesByEmail } from "@/ee/cloud/service/cloud-service.ts";
|
||||
|
||||
const formSchema = z.object({
|
||||
hostname: z.string().min(1, { message: "subdomain is required" }),
|
||||
});
|
||||
|
||||
const findWorkspaceSchema = z.object({
|
||||
email: z.string().email({ message: "Please enter a valid email" }),
|
||||
});
|
||||
|
||||
export function CloudLoginForm() {
|
||||
const { t } = useTranslation();
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [isFindLoading, setIsFindLoading] = useState<boolean>(false);
|
||||
const [findEmailSent, setFindEmailSent] = useState<boolean>(false);
|
||||
const { data: joinedWorkspaces } = useJoinedWorkspacesQuery();
|
||||
|
||||
const form = useForm<any>({
|
||||
@@ -37,6 +44,13 @@ export function CloudLoginForm() {
|
||||
},
|
||||
});
|
||||
|
||||
const findForm = useForm<any>({
|
||||
validate: zod4Resolver(findWorkspaceSchema),
|
||||
initialValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(data: { hostname: string }) {
|
||||
setIsLoading(true);
|
||||
|
||||
@@ -54,6 +68,19 @@ export function CloudLoginForm() {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
async function onFindSubmit(data: { email: string }) {
|
||||
setIsFindLoading(true);
|
||||
|
||||
try {
|
||||
await findWorkspacesByEmail(data.email);
|
||||
setFindEmailSent(true);
|
||||
} catch {
|
||||
findForm.setFieldError("email", "An error occurred. Please try again.");
|
||||
}
|
||||
|
||||
setIsFindLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container size={420} className={classes.container}>
|
||||
@@ -83,6 +110,38 @@ export function CloudLoginForm() {
|
||||
{t("Continue")}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<Divider my="lg" label="or" labelPosition="center" />
|
||||
|
||||
{findEmailSent ? (
|
||||
<Text ta="center" size="sm" c="dimmed">
|
||||
{t("We've sent you an email with your associated workspaces.")}
|
||||
</Text>
|
||||
) : (
|
||||
<form onSubmit={findForm.onSubmit(onFindSubmit)}>
|
||||
<Text fw={600} mb="xs">
|
||||
{t("Find your workspaces")}
|
||||
</Text>
|
||||
<TextInput
|
||||
type="email"
|
||||
placeholder="name@company.com"
|
||||
description={t(
|
||||
"We'll send a list of your workspaces to this email.",
|
||||
)}
|
||||
withErrorStyles={false}
|
||||
{...findForm.getInputProps("email")}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
mt="md"
|
||||
variant="light"
|
||||
loading={isFindLoading}
|
||||
>
|
||||
{t("Send")}
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||
import { Container, Title, Text, Button, Box } from "@mantine/core";
|
||||
import classes from "../../features/auth/components/auth.module.css";
|
||||
import {
|
||||
verifyEmail,
|
||||
resendVerificationEmail,
|
||||
} from "@/ee/cloud/service/cloud-service.ts";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import APP_ROUTE from "@/lib/app-route.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function VerifyEmail() {
|
||||
const { t } = useTranslation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const token = searchParams.get("token");
|
||||
const rawEmail = searchParams.get("email");
|
||||
const email = rawEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(rawEmail) ? rawEmail : null;
|
||||
const sig = searchParams.get("sig");
|
||||
const [isResending, setIsResending] = useState(false);
|
||||
const [resent, setResent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
handleVerify(token);
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
async function handleVerify(verifyToken: string) {
|
||||
try {
|
||||
await verifyEmail({ token: verifyToken });
|
||||
navigate(APP_ROUTE.HOME);
|
||||
} catch (err) {
|
||||
notifications.show({
|
||||
message: t("Verification failed. The link may have expired."),
|
||||
color: "red",
|
||||
});
|
||||
navigate(APP_ROUTE.AUTH.LOGIN);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleResend() {
|
||||
if (!email || !sig) return;
|
||||
setIsResending(true);
|
||||
|
||||
try {
|
||||
await resendVerificationEmail({ email, sig });
|
||||
setResent(true);
|
||||
} catch {
|
||||
notifications.show({
|
||||
message: t("Failed to resend verification email. Please try again."),
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
|
||||
setIsResending(false);
|
||||
}
|
||||
|
||||
if (token) {
|
||||
return (
|
||||
<Container size={420} className={classes.container}>
|
||||
<Box p="xl" className={classes.containerBox}>
|
||||
<Title order={2} ta="center" fw={500} mb="md">
|
||||
{t("Verifying your email")}
|
||||
</Title>
|
||||
<Text ta="center" c="dimmed">
|
||||
{t("Please wait...")}
|
||||
</Text>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container size={420} className={classes.container}>
|
||||
<Box p="xl" className={classes.containerBox}>
|
||||
<Title order={2} ta="center" fw={500} mb="md">
|
||||
{t("Check your email")}
|
||||
</Title>
|
||||
<Text ta="center" c="dimmed" mb="md">
|
||||
{email
|
||||
? t("We sent a verification link to {{email}}.", { email })
|
||||
: t("We sent a verification link to your email.")}
|
||||
</Text>
|
||||
<Text ta="center" size="sm" c="dimmed" mb="lg">
|
||||
{t("Click the link to verify your email and access your workspace.")}
|
||||
</Text>
|
||||
{email && sig && !resent && (
|
||||
<Button
|
||||
fullWidth
|
||||
variant="light"
|
||||
onClick={handleResend}
|
||||
loading={isResending}
|
||||
>
|
||||
{t("Resend verification email")}
|
||||
</Button>
|
||||
)}
|
||||
{resent && (
|
||||
<Text ta="center" size="sm" c="dimmed">
|
||||
{t("Verification email sent. Please check your inbox.")}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -22,11 +22,11 @@ import APP_ROUTE from "@/lib/app-route.ts";
|
||||
|
||||
const formSchema = z.object({
|
||||
workspaceName: z.string().trim().max(50).optional(),
|
||||
name: z.string().min(1).max(50),
|
||||
name: z.string().min(1, { message: "Name is required" }).max(50),
|
||||
email: z
|
||||
.email()
|
||||
.min(1, { message: "email is required" }),
|
||||
password: z.string().min(8),
|
||||
.email({ message: "Invalid email address" })
|
||||
.min(1, { message: "Email is required" }),
|
||||
password: z.string().min(8, { message: "Password must be at least 8 characters" }),
|
||||
});
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
|
||||
import { RESET } from "jotai/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { isCloud } from "@/lib/config.ts";
|
||||
import { exchangeTokenRedirectUrl } from "@/ee/utils.ts";
|
||||
import { exchangeTokenRedirectUrl, getHostnameUrl } from "@/ee/utils.ts";
|
||||
|
||||
export default function useAuth() {
|
||||
const { t } = useTranslation();
|
||||
@@ -52,9 +52,18 @@ export default function useAuth() {
|
||||
}
|
||||
} catch (err) {
|
||||
setIsLoading(false);
|
||||
console.log(err);
|
||||
|
||||
const message = err.response?.data?.message;
|
||||
if (isCloud() && message?.includes("verify your email")) {
|
||||
const sig = err.response?.data?.emailSignature;
|
||||
navigate(
|
||||
`${APP_ROUTE.AUTH.VERIFY_EMAIL}?email=${encodeURIComponent(data.email)}${sig ? `&sig=${sig}` : ""}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
notifications.show({
|
||||
message: err.response?.data.message,
|
||||
message,
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
@@ -92,6 +101,17 @@ export default function useAuth() {
|
||||
try {
|
||||
if (isCloud()) {
|
||||
const res = await createWorkspace(data);
|
||||
|
||||
if (res?.requiresEmailVerification) {
|
||||
const hostname = res?.workspace?.hostname;
|
||||
if (hostname) {
|
||||
window.location.href =
|
||||
getHostnameUrl(hostname) +
|
||||
`/verify-email?email=${encodeURIComponent(data.email)}&sig=${res.emailSignature}`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const hostname = res?.workspace?.hostname;
|
||||
const exchangeToken = res?.exchangeToken;
|
||||
if (hostname && exchangeToken) {
|
||||
|
||||
@@ -51,3 +51,4 @@ export async function getCollabToken(): Promise<ICollabToken> {
|
||||
const req = await api.post<ICollabToken>("/auth/collab-token");
|
||||
return req.data;
|
||||
}
|
||||
|
||||
|
||||
@@ -24,7 +24,12 @@ function CommentActions({
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button size="compact-sm" loading={isLoading} onClick={onSave}>
|
||||
<Button
|
||||
size="compact-sm"
|
||||
loading={isLoading}
|
||||
onClick={onSave}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
>
|
||||
{t("Save")}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
@@ -27,6 +27,9 @@ import { extractPageSlugId } from "@/lib";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
|
||||
import { IconArrowUp, IconMessageOff } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
|
||||
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
|
||||
|
||||
function CommentListWithTabs() {
|
||||
const { t } = useTranslation();
|
||||
@@ -345,6 +348,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
|
||||
const [content, setContent] = useState("");
|
||||
const { ref, focused } = useFocusWithin();
|
||||
const commentEditorRef = useRef(null);
|
||||
const [currentUser] = useAtom(currentUserAtom);
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
onSave(null, content);
|
||||
@@ -363,6 +367,14 @@ const PageCommentInput = ({ onSave, isLoading }) => {
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<Group wrap="nowrap" align="flex-start" gap="xs">
|
||||
<CustomAvatar
|
||||
size="sm"
|
||||
avatarUrl={currentUser?.user?.avatarUrl}
|
||||
name={currentUser?.user?.name}
|
||||
style={{ flexShrink: 0, marginTop: 10 }}
|
||||
/>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<CommentEditor
|
||||
ref={commentEditorRef}
|
||||
onUpdate={setContent}
|
||||
@@ -370,12 +382,15 @@ const PageCommentInput = ({ onSave, isLoading }) => {
|
||||
editable={true}
|
||||
placeholder={t("Add a comment...")}
|
||||
/>
|
||||
</div>
|
||||
</Group>
|
||||
{focused && (
|
||||
<ActionIcon
|
||||
variant="filled"
|
||||
radius="xl"
|
||||
size="sm"
|
||||
onClick={handleSave}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
loading={isLoading}
|
||||
style={{ position: "absolute", right: 8, bottom: 30 }}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
import {
|
||||
ActionIcon,
|
||||
Modal,
|
||||
Text,
|
||||
Tooltip,
|
||||
useComputedColorScheme,
|
||||
} from "@mantine/core";
|
||||
@@ -29,10 +30,12 @@ import {
|
||||
DrawIoEmbed,
|
||||
DrawIoEmbedRef,
|
||||
EventExit,
|
||||
EventExport,
|
||||
EventSave,
|
||||
} from "react-drawio";
|
||||
import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
|
||||
import { IAttachment } from "@/features/attachments/types/attachment.types";
|
||||
import { modals } from "@mantine/modals";
|
||||
import classes from "../common/toolbar-menu.module.css";
|
||||
|
||||
export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
@@ -41,6 +44,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
const [initialXML, setInitialXML] = useState<string>("");
|
||||
const drawioRef = useRef<DrawIoEmbedRef>(null);
|
||||
const computedColorScheme = useComputedColorScheme();
|
||||
const isDirtyRef = useRef(false);
|
||||
const isSavingRef = useRef(false);
|
||||
|
||||
const editorState = useEditorState({
|
||||
editor,
|
||||
@@ -131,33 +136,13 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
editor.commands.deleteSelection();
|
||||
}, [editor]);
|
||||
|
||||
const handleOpen = useCallback(async () => {
|
||||
if (!editorState?.src) return;
|
||||
const saveData = useCallback(async (svgXml: string) => {
|
||||
if (isSavingRef.current) return;
|
||||
|
||||
isSavingRef.current = true;
|
||||
|
||||
try {
|
||||
const url = getFileUrl(editorState.src);
|
||||
const request = await fetch(url, {
|
||||
credentials: "include",
|
||||
cache: "no-store",
|
||||
});
|
||||
const blob = await request.blob();
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = () => {
|
||||
const base64data = (reader.result || "") as string;
|
||||
setInitialXML(base64data);
|
||||
};
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
open();
|
||||
}
|
||||
}, [editorState?.src, open]);
|
||||
|
||||
const handleSave = useCallback(
|
||||
async (data: EventSave) => {
|
||||
const svgString = decodeBase64ToSvgString(data.xml);
|
||||
const svgString = decodeBase64ToSvgString(svgXml);
|
||||
const fileName = "diagram.drawio.svg";
|
||||
const drawioSVGFile = await svgStringToFile(svgString, fileName);
|
||||
|
||||
@@ -179,10 +164,85 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
|
||||
isDirtyRef.current = false;
|
||||
} finally {
|
||||
isSavingRef.current = false;
|
||||
}
|
||||
}, [editor, editorState?.attachmentId]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (!isDirtyRef.current) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: t("Unsaved changes"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("You have unsaved changes that will be lost.")}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Discard"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
isDirtyRef.current = false;
|
||||
close();
|
||||
},
|
||||
[editor, editorState?.attachmentId, close],
|
||||
);
|
||||
});
|
||||
}, [close, t]);
|
||||
|
||||
const handleOpen = useCallback(async () => {
|
||||
if (!editorState?.src) return;
|
||||
|
||||
try {
|
||||
const url = getFileUrl(editorState.src);
|
||||
const request = await fetch(url, {
|
||||
credentials: "include",
|
||||
cache: "no-store",
|
||||
});
|
||||
const blob = await request.blob();
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
reader.onloadend = () => {
|
||||
const base64data = (reader.result || "") as string;
|
||||
setInitialXML(base64data);
|
||||
};
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
isDirtyRef.current = false;
|
||||
open();
|
||||
}
|
||||
}, [editorState?.src, open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
|
||||
drawioRef.current.exportDiagram({ format: "xmlsvg" });
|
||||
}
|
||||
}, 60_000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [opened]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [opened, handleClose]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -276,7 +336,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
</div>
|
||||
</BaseBubbleMenu>
|
||||
|
||||
<Modal.Root opened={opened} onClose={close} fullScreen>
|
||||
<Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ overflow: "hidden" }}>
|
||||
<Modal.Body>
|
||||
@@ -285,6 +345,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
ref={drawioRef}
|
||||
xml={initialXML}
|
||||
baseUrl={getDrawioUrl()}
|
||||
autosave
|
||||
urlParameters={{
|
||||
ui: computedColorScheme === "light" ? "kennedy" : "dark",
|
||||
spin: true,
|
||||
@@ -296,13 +357,19 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
|
||||
if (data.parentEvent !== "save") {
|
||||
return;
|
||||
}
|
||||
handleSave(data);
|
||||
saveData(data.xml).then(() => close()).catch(() => {});
|
||||
}}
|
||||
onClose={(data: EventExit) => {
|
||||
if (data.parentEvent) {
|
||||
return;
|
||||
}
|
||||
close();
|
||||
handleClose();
|
||||
}}
|
||||
onAutoSave={() => {
|
||||
isDirtyRef.current = true;
|
||||
}}
|
||||
onExport={(data: EventExport) => {
|
||||
saveData(data.data).catch(() => {});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
Text,
|
||||
useComputedColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { uploadFile } from "@/features/page/services/page-service.ts";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import { getDrawioUrl } from "@/lib/config.ts";
|
||||
@@ -14,6 +14,7 @@ import {
|
||||
DrawIoEmbed,
|
||||
DrawIoEmbedRef,
|
||||
EventExit,
|
||||
EventExport,
|
||||
EventSave,
|
||||
} from "react-drawio";
|
||||
import { IAttachment } from "@/features/attachments/types/attachment.types";
|
||||
@@ -21,6 +22,7 @@ import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
|
||||
import clsx from "clsx";
|
||||
import { IconEdit } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { modals } from "@mantine/modals";
|
||||
|
||||
export default function DrawioView(props: NodeViewProps) {
|
||||
const { t } = useTranslation();
|
||||
@@ -30,16 +32,24 @@ export default function DrawioView(props: NodeViewProps) {
|
||||
const [initialXML, setInitialXML] = useState<string>("");
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const computedColorScheme = useComputedColorScheme();
|
||||
const isDirtyRef = useRef(false);
|
||||
const isSavingRef = useRef(false);
|
||||
|
||||
const handleOpen = async () => {
|
||||
if (!editor.isEditable) {
|
||||
return;
|
||||
}
|
||||
isDirtyRef.current = false;
|
||||
open();
|
||||
};
|
||||
|
||||
const handleSave = async (data: EventSave) => {
|
||||
const svgString = decodeBase64ToSvgString(data.xml);
|
||||
const saveData = async (svgXml: string, updateSrc = true) => {
|
||||
if (isSavingRef.current) return;
|
||||
|
||||
isSavingRef.current = true;
|
||||
|
||||
try {
|
||||
const svgString = decodeBase64ToSvgString(svgXml);
|
||||
const fileName = "diagram.drawio.svg";
|
||||
const drawioSVGFile = await svgStringToFile(svgString, fileName);
|
||||
|
||||
@@ -53,19 +63,77 @@ export default function DrawioView(props: NodeViewProps) {
|
||||
attachment = await uploadFile(drawioSVGFile, pageId);
|
||||
}
|
||||
|
||||
if (updateSrc) {
|
||||
updateAttributes({
|
||||
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
|
||||
title: attachment.fileName,
|
||||
size: attachment.fileSize,
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
} else {
|
||||
updateAttributes({
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
}
|
||||
|
||||
close();
|
||||
isDirtyRef.current = false;
|
||||
} finally {
|
||||
isSavingRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (!isDirtyRef.current) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: t("Unsaved changes"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("You have unsaved changes that will be lost.")}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Discard"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
isDirtyRef.current = false;
|
||||
close();
|
||||
},
|
||||
});
|
||||
}, [close, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (isDirtyRef.current && !isSavingRef.current && drawioRef.current) {
|
||||
drawioRef.current.exportDiagram({ format: "xmlsvg" });
|
||||
}
|
||||
}, 30_000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [opened]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [opened, handleClose]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle>
|
||||
<Modal.Root opened={opened} onClose={close} fullScreen>
|
||||
<Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ overflow: "hidden" }}>
|
||||
<Modal.Body>
|
||||
@@ -74,6 +142,7 @@ export default function DrawioView(props: NodeViewProps) {
|
||||
ref={drawioRef}
|
||||
xml={initialXML}
|
||||
baseUrl={getDrawioUrl()}
|
||||
autosave
|
||||
urlParameters={{
|
||||
ui: computedColorScheme === "light" ? "kennedy" : "dark",
|
||||
spin: true,
|
||||
@@ -85,13 +154,19 @@ export default function DrawioView(props: NodeViewProps) {
|
||||
if (data.parentEvent !== "save") {
|
||||
return;
|
||||
}
|
||||
handleSave(data);
|
||||
saveData(data.xml, true).then(() => close()).catch(() => {});
|
||||
}}
|
||||
onClose={(data: EventExit) => {
|
||||
if (data.parentEvent) {
|
||||
return;
|
||||
}
|
||||
close();
|
||||
handleClose();
|
||||
}}
|
||||
onAutoSave={() => {
|
||||
isDirtyRef.current = true;
|
||||
}}
|
||||
onExport={(data: EventExport) => {
|
||||
saveData(data.data, false).catch(() => {});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
|
||||
import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
|
||||
import { lazy, Suspense, useCallback, useState } from "react";
|
||||
import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Node as PMNode } from "@tiptap/pm/model";
|
||||
import {
|
||||
EditorMenuProps,
|
||||
@@ -10,9 +10,11 @@ import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Group,
|
||||
Text,
|
||||
Tooltip,
|
||||
useComputedColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { modals } from "@mantine/modals";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
@@ -52,6 +54,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
});
|
||||
const [excalidrawData, setExcalidrawData] = useState<any>(null);
|
||||
const computedColorScheme = useComputedColorScheme();
|
||||
const isDirtyRef = useRef(false);
|
||||
const isSavingRef = useRef(false);
|
||||
const isInitialLoadRef = useRef(true);
|
||||
const lastFingerprintRef = useRef("");
|
||||
|
||||
const editorState = useEditorState({
|
||||
editor,
|
||||
@@ -160,15 +166,20 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
isDirtyRef.current = false;
|
||||
isInitialLoadRef.current = true;
|
||||
open();
|
||||
}
|
||||
}, [editorState?.src, open]);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!excalidrawAPI) {
|
||||
const saveData = useCallback(async () => {
|
||||
if (!excalidrawAPI || isSavingRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
isSavingRef.current = true;
|
||||
|
||||
try {
|
||||
const { exportToSvg } = await import("@excalidraw/excalidraw");
|
||||
|
||||
const svg = await exportToSvg({
|
||||
@@ -209,8 +220,55 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
|
||||
isDirtyRef.current = false;
|
||||
} finally {
|
||||
isSavingRef.current = false;
|
||||
}
|
||||
}, [editor, excalidrawAPI, editorState?.attachmentId]);
|
||||
|
||||
const handleSaveAndExit = useCallback(async () => {
|
||||
try {
|
||||
await saveData();
|
||||
close();
|
||||
}, [editor, excalidrawAPI, editorState?.attachmentId, close]);
|
||||
} catch {
|
||||
// save failed, modal stays open
|
||||
}
|
||||
}, [saveData, close]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (!isDirtyRef.current) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: t("Unsaved changes"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("You have unsaved changes that will be lost.")}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Discard"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
isDirtyRef.current = false;
|
||||
close();
|
||||
},
|
||||
});
|
||||
}, [close, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (isDirtyRef.current && !isSavingRef.current) {
|
||||
saveData().catch(() => {});
|
||||
}
|
||||
}, 60_000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [opened, saveData]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -317,7 +375,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
zIndex: 200,
|
||||
}}
|
||||
isOpen={opened}
|
||||
onRequestClose={close}
|
||||
onRequestClose={handleClose}
|
||||
disableCloseOnBgClick={true}
|
||||
contentProps={{
|
||||
style: {
|
||||
@@ -332,10 +390,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
bg="var(--mantine-color-body)"
|
||||
p="xs"
|
||||
>
|
||||
<Button onClick={handleSave} size={"compact-sm"}>
|
||||
<Button onClick={handleSaveAndExit} size={"compact-sm"}>
|
||||
{t("Save & Exit")}
|
||||
</Button>
|
||||
<Button onClick={close} color="red" size={"compact-sm"}>
|
||||
<Button onClick={handleClose} color="red" size={"compact-sm"}>
|
||||
{t("Exit")}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -343,6 +401,18 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
|
||||
<Suspense fallback={null}>
|
||||
<ExcalidrawComponent
|
||||
excalidrawAPI={(api) => setExcalidrawAPI(api)}
|
||||
onChange={(elements, _appState, files) => {
|
||||
const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
|
||||
if (isInitialLoadRef.current) {
|
||||
lastFingerprintRef.current = fingerprint;
|
||||
isInitialLoadRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (fingerprint !== lastFingerprintRef.current) {
|
||||
lastFingerprintRef.current = fingerprint;
|
||||
isDirtyRef.current = true;
|
||||
}
|
||||
}}
|
||||
initialData={{
|
||||
...excalidrawData,
|
||||
scrollToContent: true,
|
||||
|
||||
@@ -7,7 +7,14 @@ import {
|
||||
Text,
|
||||
useComputedColorScheme,
|
||||
} from "@mantine/core";
|
||||
import { lazy, Suspense, useState } from "react";
|
||||
import {
|
||||
lazy,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { uploadFile } from "@/features/page/services/page-service.ts";
|
||||
import { svgStringToFile } from "@/lib";
|
||||
import { useDisclosure } from "@mantine/hooks";
|
||||
@@ -20,6 +27,7 @@ import { IconEdit } from "@tabler/icons-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useHandleLibrary } from "@excalidraw/excalidraw";
|
||||
import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
|
||||
import { modals } from "@mantine/modals";
|
||||
|
||||
const ExcalidrawComponent = lazy(() =>
|
||||
import("@excalidraw/excalidraw").then((module) => ({
|
||||
@@ -42,18 +50,28 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
const computedColorScheme = useComputedColorScheme();
|
||||
|
||||
const isDirtyRef = useRef(false);
|
||||
const isSavingRef = useRef(false);
|
||||
const isInitialLoadRef = useRef(true);
|
||||
const lastFingerprintRef = useRef("");
|
||||
|
||||
const handleOpen = async () => {
|
||||
if (!editor.isEditable) {
|
||||
return;
|
||||
}
|
||||
isDirtyRef.current = false;
|
||||
isInitialLoadRef.current = true;
|
||||
open();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!excalidrawAPI) {
|
||||
const saveData = useCallback(async (updateSrc = true) => {
|
||||
if (!excalidrawAPI || isSavingRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
isSavingRef.current = true;
|
||||
|
||||
try {
|
||||
const { exportToSvg } = await import("@excalidraw/excalidraw");
|
||||
|
||||
const svg = await exportToSvg({
|
||||
@@ -86,15 +104,68 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
attachment = await uploadFile(excalidrawSvgFile, pageId);
|
||||
}
|
||||
|
||||
if (updateSrc) {
|
||||
updateAttributes({
|
||||
src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
|
||||
title: attachment.fileName,
|
||||
size: attachment.fileSize,
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
} else {
|
||||
updateAttributes({
|
||||
attachmentId: attachment.id,
|
||||
});
|
||||
}
|
||||
|
||||
isDirtyRef.current = false;
|
||||
} finally {
|
||||
isSavingRef.current = false;
|
||||
}
|
||||
}, [excalidrawAPI, editor, attachmentId, updateAttributes]);
|
||||
|
||||
const handleSaveAndExit = useCallback(async () => {
|
||||
try {
|
||||
await saveData();
|
||||
close();
|
||||
};
|
||||
} catch {
|
||||
/* empty */
|
||||
}
|
||||
}, [saveData, close]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
if (!isDirtyRef.current) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
modals.openConfirmModal({
|
||||
title: t("Unsaved changes"),
|
||||
children: (
|
||||
<Text size="sm">
|
||||
{t("You have unsaved changes that will be lost.")}
|
||||
</Text>
|
||||
),
|
||||
centered: true,
|
||||
labels: { confirm: t("Discard"), cancel: t("Cancel") },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
isDirtyRef.current = false;
|
||||
close();
|
||||
},
|
||||
});
|
||||
}, [close, t]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!opened) return;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (isDirtyRef.current && !isSavingRef.current) {
|
||||
saveData(false).catch(() => {});
|
||||
}
|
||||
}, 30_000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [opened, saveData]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper data-drag-handle>
|
||||
@@ -105,7 +176,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
zIndex: 200,
|
||||
}}
|
||||
isOpen={opened}
|
||||
onRequestClose={close}
|
||||
onRequestClose={handleClose}
|
||||
disableCloseOnBgClick={true}
|
||||
contentProps={{
|
||||
style: {
|
||||
@@ -120,10 +191,10 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
bg="var(--mantine-color-body)"
|
||||
p="xs"
|
||||
>
|
||||
<Button onClick={handleSave} size={"compact-sm"}>
|
||||
<Button onClick={handleSaveAndExit} size={"compact-sm"}>
|
||||
{t("Save & Exit")}
|
||||
</Button>
|
||||
<Button onClick={close} color="red" size={"compact-sm"}>
|
||||
<Button onClick={handleClose} color="red" size={"compact-sm"}>
|
||||
{t("Exit")}
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -131,6 +202,18 @@ export default function ExcalidrawView(props: NodeViewProps) {
|
||||
<Suspense fallback={null}>
|
||||
<ExcalidrawComponent
|
||||
excalidrawAPI={(api) => setExcalidrawAPI(api)}
|
||||
onChange={(elements, _appState, files) => {
|
||||
const fingerprint = `${elements.length}:${elements.reduce((s, e) => s + (e.version || 0), 0)}:${Object.keys(files).length}`;
|
||||
if (isInitialLoadRef.current) {
|
||||
lastFingerprintRef.current = fingerprint;
|
||||
isInitialLoadRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (fingerprint !== lastFingerprintRef.current) {
|
||||
lastFingerprintRef.current = fingerprint;
|
||||
isDirtyRef.current = true;
|
||||
}
|
||||
}}
|
||||
initialData={{
|
||||
...excalidrawData,
|
||||
scrollToContent: true,
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ActionIcon, Anchor, Text } from "@mantine/core";
|
||||
import { IconFileDescription } from "@tabler/icons-react";
|
||||
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
import { usePageQuery } from "@/features/page/queries/page-query.ts";
|
||||
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
|
||||
import {
|
||||
buildPageUrl,
|
||||
buildSharedPageUrl,
|
||||
@@ -13,17 +14,23 @@ import classes from "./mention.module.css";
|
||||
export default function MentionView(props: NodeViewProps) {
|
||||
const { node } = props;
|
||||
const { label, entityType, entityId, slugId, anchorId } = node.attrs;
|
||||
const isPageMention = entityType === "page";
|
||||
const { spaceSlug, pageSlug } = useParams();
|
||||
const { shareId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const location = useLocation();
|
||||
const isShareRoute = location.pathname.startsWith("/share");
|
||||
|
||||
const {
|
||||
data: page,
|
||||
isLoading,
|
||||
isError,
|
||||
} = usePageQuery({ pageId: entityType === "page" ? slugId : null });
|
||||
} = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
|
||||
|
||||
const location = useLocation();
|
||||
const isShareRoute = location.pathname.startsWith("/share");
|
||||
const { data: sharedPage } = useSharePageQuery({
|
||||
pageId: isPageMention && isShareRoute ? slugId : undefined,
|
||||
});
|
||||
|
||||
const currentPageSlugId = extractPageSlugId(pageSlug);
|
||||
const isSamePage = currentPageSlugId === slugId;
|
||||
@@ -39,10 +46,12 @@ export default function MentionView(props: NodeViewProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const sharePageTitle = sharedPage?.page?.title || label;
|
||||
|
||||
const shareSlugUrl = buildSharedPageUrl({
|
||||
shareId,
|
||||
pageSlugId: slugId,
|
||||
pageTitle: label,
|
||||
pageTitle: sharePageTitle,
|
||||
anchorId,
|
||||
});
|
||||
|
||||
@@ -54,21 +63,59 @@ export default function MentionView(props: NodeViewProps) {
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{entityType === "page" && isError && (
|
||||
<Text component="span" c="dimmed" size="sm">
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{entityType === "page" && !isError && (
|
||||
{isPageMention && isShareRoute && (
|
||||
<Anchor
|
||||
component={Link}
|
||||
fw={500}
|
||||
to={
|
||||
isShareRoute
|
||||
? shareSlugUrl
|
||||
: buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)
|
||||
}
|
||||
to={shareSlugUrl}
|
||||
onClick={handleClick}
|
||||
underline="never"
|
||||
className={classes.pageMentionLink}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
color="gray"
|
||||
component="span"
|
||||
size={18}
|
||||
style={{ verticalAlign: "text-bottom" }}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<span className={classes.pageMentionText}>
|
||||
{sharePageTitle}
|
||||
</span>
|
||||
</Anchor>
|
||||
)}
|
||||
|
||||
{isPageMention && !isShareRoute && isError && (
|
||||
<Anchor
|
||||
component={Link}
|
||||
fw={500}
|
||||
to={buildPageUrl(spaceSlug, slugId, label, anchorId)}
|
||||
onClick={handleClick}
|
||||
underline="never"
|
||||
className={classes.pageMentionLink}
|
||||
>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
color="gray"
|
||||
component="span"
|
||||
size={18}
|
||||
style={{ verticalAlign: "text-bottom" }}
|
||||
>
|
||||
<IconFileDescription size={18} />
|
||||
</ActionIcon>
|
||||
<span className={classes.pageMentionText}>
|
||||
{label}
|
||||
</span>
|
||||
</Anchor>
|
||||
)}
|
||||
|
||||
{isPageMention && !isShareRoute && !isError && (
|
||||
<Anchor
|
||||
component={Link}
|
||||
fw={500}
|
||||
to={buildPageUrl(page?.space?.slug || spaceSlug, slugId, page?.title || label, anchorId)}
|
||||
onClick={handleClick}
|
||||
underline="never"
|
||||
className={classes.pageMentionLink}
|
||||
|
||||
@@ -25,9 +25,9 @@ export default function SubpagesView(props: NodeViewProps) {
|
||||
// Get subpages from shared tree if we're in a shared context
|
||||
const sharedSubpages = useSharedPageSubpages(currentPageId);
|
||||
|
||||
const { data, isLoading, error } = useGetSidebarPagesQuery({
|
||||
pageId: currentPageId,
|
||||
});
|
||||
const { data, isLoading, error } = useGetSidebarPagesQuery(
|
||||
shareId ? null : { pageId: currentPageId },
|
||||
);
|
||||
|
||||
const subpages = useMemo(() => {
|
||||
// If we're in a shared context, use the shared subpages
|
||||
|
||||
@@ -113,7 +113,7 @@ export async function getInvitationById(data: {
|
||||
|
||||
export async function createWorkspace(
|
||||
data: ISetupWorkspace,
|
||||
): Promise<{ workspace: IWorkspace } & { exchangeToken: string }> {
|
||||
): Promise<{ workspace: IWorkspace; exchangeToken?: string; requiresEmailVerification?: boolean; emailSignature?: string }> {
|
||||
const req = await api.post("/workspace/create", data);
|
||||
return req.data;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ const APP_ROUTE = {
|
||||
SELECT_WORKSPACE: "/select",
|
||||
MFA_CHALLENGE: "/login/mfa",
|
||||
MFA_SETUP_REQUIRED: "/login/mfa/setup",
|
||||
VERIFY_EMAIL: "/verify-email",
|
||||
},
|
||||
SETTINGS: {
|
||||
ACCOUNT: {
|
||||
|
||||
@@ -107,6 +107,7 @@
|
||||
"sanitize-filename-ts": "1.0.2",
|
||||
"socket.io": "^4.8.3",
|
||||
"stripe": "^17.5.0",
|
||||
"tlds": "^1.261.0",
|
||||
"tmp-promise": "^3.0.3",
|
||||
"tseep": "^1.3.1",
|
||||
"typesense": "^2.1.0",
|
||||
|
||||
@@ -25,6 +25,7 @@ import { CacheModule } from '@nestjs/cache-manager';
|
||||
import KeyvRedis from '@keyv/redis';
|
||||
import { LoggerModule } from './common/logger/logger.module';
|
||||
import { ClsModule } from 'nestjs-cls';
|
||||
import { NoopAuditModule } from './integrations/audit/audit.module';
|
||||
|
||||
const enterpriseModules = [];
|
||||
try {
|
||||
@@ -47,6 +48,7 @@ try {
|
||||
middleware: { mount: true },
|
||||
}),
|
||||
LoggerModule,
|
||||
NoopAuditModule,
|
||||
CoreModule,
|
||||
DatabaseModule,
|
||||
EnvironmentModule,
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { containsDomain } from './no-urls.validator';
|
||||
|
||||
// containsDomain returns true if value contains a domain-like pattern
|
||||
// The full NoUrls validator also checks for https:// URLs separately
|
||||
|
||||
describe('containsDomain', () => {
|
||||
describe('bare domains with real TLDs — should block', () => {
|
||||
it.each([
|
||||
'example.com',
|
||||
'example.net',
|
||||
'example.org',
|
||||
'example.io',
|
||||
'example.co',
|
||||
'example.dev',
|
||||
'example.app',
|
||||
'example.me',
|
||||
'example.info',
|
||||
'example.tech',
|
||||
'example.aero',
|
||||
'example.cloud',
|
||||
'example.museum',
|
||||
'example.abc',
|
||||
'example.uk',
|
||||
'example.de',
|
||||
'example.fr',
|
||||
'example.ru',
|
||||
])('blocks "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('domains with paths — should block', () => {
|
||||
it.each([
|
||||
'example.com/reset',
|
||||
'example.com/reset-password',
|
||||
'click example.com/page',
|
||||
'go to example.net/login',
|
||||
])('blocks "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('multi-part domains — should block', () => {
|
||||
it.each([
|
||||
'Foo.com.net',
|
||||
'Foo.com.',
|
||||
'Foo.mine.net',
|
||||
'Foo.mine.ne',
|
||||
'sub.example.com',
|
||||
'login.example.co.uk',
|
||||
])('blocks "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('domain in sentence — should block', () => {
|
||||
it.each([
|
||||
'Reset your password at example.com',
|
||||
'URGENT click example.com/reset',
|
||||
'Visit example.org for details',
|
||||
'go to mysite.io now',
|
||||
])('blocks "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('case insensitive — should block', () => {
|
||||
it.each(['EXAMPLE.COM', 'Example.Com', 'example.COM'])('blocks "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('fake TLDs — should allow', () => {
|
||||
it.each([
|
||||
'Foo.mine',
|
||||
'Foo.blarg',
|
||||
'Foo.qqq',
|
||||
'Foo.zz',
|
||||
'Foo.abcd',
|
||||
'Foo.abcde',
|
||||
'Foo.abcdef',
|
||||
'Foo.abcdefg',
|
||||
])('allows "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('too short suffix — should allow', () => {
|
||||
it.each(['Foo.a', 'Foo.c', 'A.B'])('allows "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('multi-part with fake TLD — should allow', () => {
|
||||
it.each(['Foo.mine.', 'Foo.mine.n'])('allows "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('emails — should allow', () => {
|
||||
it.each([
|
||||
'user@example.com',
|
||||
'admin@company.org',
|
||||
'test@sub.domain.co.uk',
|
||||
])('allows "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('normal names — should allow', () => {
|
||||
it.each([
|
||||
'John Smith',
|
||||
'Dr. Smith',
|
||||
'A. B. Charlie',
|
||||
'John',
|
||||
'Mary Jane',
|
||||
"O'Brien",
|
||||
'Jean-Pierre',
|
||||
'José García',
|
||||
])('allows "%s"', (value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('IP addresses — should allow', () => {
|
||||
it.each(['192.168.1.1', '10.0.0.1', '127.0.0.1'])(
|
||||
'allows "%s"',
|
||||
(value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
describe('edge cases — should allow', () => {
|
||||
it.each(['', ' ', '.', '..', 'hello', '.com', 'a.b'])(
|
||||
'allows "%s"',
|
||||
(value) => {
|
||||
expect(containsDomain(value)).toBe(false);
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { registerDecorator, ValidationOptions } from 'class-validator';
|
||||
import * as tlds from 'tlds';
|
||||
|
||||
const URL_PATTERN = /https?:\/\//i;
|
||||
const tldSet = new Set(tlds.map((t) => t.toLowerCase()));
|
||||
|
||||
export function containsDomain(value: string): boolean {
|
||||
const tokens = value.split(/\s+/);
|
||||
for (const token of tokens) {
|
||||
if (token.includes('@')) continue;
|
||||
const segments = token.split('.');
|
||||
for (let i = 1; i < segments.length; i++) {
|
||||
const suffix = segments[i].replace(/[^\w].*/g, '');
|
||||
if (segments[i - 1] && suffix && tldSet.has(suffix.toLowerCase())) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function NoUrls(validationOptions?: ValidationOptions) {
|
||||
return function (object: object, propertyName: string) {
|
||||
registerDecorator({
|
||||
name: 'noUrls',
|
||||
target: object.constructor,
|
||||
propertyName,
|
||||
options: {
|
||||
message: 'Must not contain URLs or domain names',
|
||||
...validationOptions,
|
||||
},
|
||||
validator: {
|
||||
validate(value: unknown) {
|
||||
if (typeof value !== 'string') return true;
|
||||
if (URL_PATTERN.test(value)) return false;
|
||||
if (containsDomain(value)) return false;
|
||||
return true;
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
export enum UserTokenType {
|
||||
FORGOT_PASSWORD = 'forgot-password',
|
||||
EMAIL_VERIFICATION = 'email-verification',
|
||||
}
|
||||
|
||||
@@ -1,5 +1,37 @@
|
||||
import { BadRequestException } from '@nestjs/common';
|
||||
import { Workspace } from '@docmost/db/types/entity.types';
|
||||
import { createHmac } from 'node:crypto';
|
||||
|
||||
export function computeEmailSignature(
|
||||
email: string,
|
||||
workspaceId: string,
|
||||
appSecret: string,
|
||||
): string {
|
||||
return createHmac('sha256', appSecret)
|
||||
.update(`${email.toLowerCase()}:${workspaceId}`)
|
||||
.digest('hex');
|
||||
}
|
||||
|
||||
export function throwIfEmailNotVerified(opts: {
|
||||
isCloud: boolean;
|
||||
emailVerifiedAt: Date | null;
|
||||
email: string;
|
||||
workspaceId: string;
|
||||
appSecret: string;
|
||||
}): void {
|
||||
if (!opts.isCloud || opts.emailVerifiedAt) return;
|
||||
|
||||
const emailSignature = computeEmailSignature(
|
||||
opts.email,
|
||||
opts.workspaceId,
|
||||
opts.appSecret,
|
||||
);
|
||||
throw new BadRequestException({
|
||||
message:
|
||||
'Please verify your email address. Check your inbox for the verification link.',
|
||||
emailSignature,
|
||||
});
|
||||
}
|
||||
|
||||
export function validateSsoEnforcement(workspace: Workspace) {
|
||||
if (workspace.enforceSso) {
|
||||
|
||||
@@ -7,11 +7,13 @@ import {
|
||||
} from 'class-validator';
|
||||
import { CreateUserDto } from './create-user.dto';
|
||||
import { Transform, TransformFnParams } from 'class-transformer';
|
||||
import { NoUrls } from '../../../common/validators/no-urls.validator';
|
||||
|
||||
export class CreateAdminUserDto extends CreateUserDto {
|
||||
@IsNotEmpty()
|
||||
@MinLength(1)
|
||||
@MaxLength(50)
|
||||
@NoUrls()
|
||||
@Transform(({ value }: TransformFnParams) => value?.trim())
|
||||
name: string;
|
||||
|
||||
|
||||
@@ -7,12 +7,14 @@ import {
|
||||
MinLength,
|
||||
} from 'class-validator';
|
||||
import { Transform, TransformFnParams } from 'class-transformer';
|
||||
import { NoUrls } from '../../../common/validators/no-urls.validator';
|
||||
|
||||
export class CreateUserDto {
|
||||
@IsOptional()
|
||||
@MinLength(1)
|
||||
@MaxLength(50)
|
||||
@IsString()
|
||||
@NoUrls()
|
||||
@Transform(({ value }: TransformFnParams) => value?.trim())
|
||||
name: string;
|
||||
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
isUserDisabled,
|
||||
nanoIdGen,
|
||||
} from '../../../common/helpers';
|
||||
import { throwIfEmailNotVerified } from '../auth.util';
|
||||
import { ChangePasswordDto } from '../dto/change-password.dto';
|
||||
import { MailService } from '../../../integrations/mail/mail.service';
|
||||
import ChangePasswordEmail from '@docmost/transactional/emails/change-password-email';
|
||||
@@ -36,6 +37,7 @@ import {
|
||||
AUDIT_SERVICE,
|
||||
IAuditService,
|
||||
} from '../../../integrations/audit/audit.service';
|
||||
import { EnvironmentService } from '../../../integrations/environment/environment.service';
|
||||
|
||||
@Injectable()
|
||||
export class AuthService {
|
||||
@@ -46,6 +48,7 @@ export class AuthService {
|
||||
private userTokenRepo: UserTokenRepo,
|
||||
private mailService: MailService,
|
||||
private domainService: DomainService,
|
||||
private environmentService: EnvironmentService,
|
||||
@InjectKysely() private readonly db: KyselyDB,
|
||||
@Inject(AUDIT_SERVICE) private readonly auditService: IAuditService,
|
||||
) {}
|
||||
@@ -69,6 +72,14 @@ export class AuthService {
|
||||
throw new UnauthorizedException(errorMessage);
|
||||
}
|
||||
|
||||
throwIfEmailNotVerified({
|
||||
isCloud: this.environmentService.isCloud(),
|
||||
emailVerifiedAt: user.emailVerifiedAt,
|
||||
email: user.email,
|
||||
workspaceId,
|
||||
appSecret: this.environmentService.getAppSecret(),
|
||||
});
|
||||
|
||||
user.lastLoginAt = new Date();
|
||||
await this.userRepo.updateLastLogin(user.id, workspaceId);
|
||||
|
||||
@@ -247,6 +258,14 @@ export class AuthService {
|
||||
template: emailTemplate,
|
||||
});
|
||||
|
||||
if (this.environmentService.isCloud() && !user.emailVerifiedAt) {
|
||||
await this.userRepo.updateUser(
|
||||
{ emailVerifiedAt: new Date() },
|
||||
user.id,
|
||||
workspace.id,
|
||||
);
|
||||
}
|
||||
|
||||
// Check if user has MFA enabled or workspace enforces MFA
|
||||
const userHasMfa = user?.['mfa']?.isEnabled || false;
|
||||
const workspaceEnforcesMfa = workspace.enforceMfa || false;
|
||||
|
||||
@@ -20,10 +20,6 @@ import { AuditContextMiddleware } from '../common/middlewares/audit-context.midd
|
||||
import { ShareModule } from './share/share.module';
|
||||
import { NotificationModule } from './notification/notification.module';
|
||||
import { WatcherModule } from './watcher/watcher.module';
|
||||
import {
|
||||
AUDIT_SERVICE,
|
||||
NoopAuditService,
|
||||
} from '../integrations/audit/audit.service';
|
||||
import { ClsMiddleware } from 'nestjs-cls';
|
||||
|
||||
@Module({
|
||||
@@ -43,13 +39,6 @@ import { ClsMiddleware } from 'nestjs-cls';
|
||||
NotificationModule,
|
||||
WatcherModule,
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: AUDIT_SERVICE,
|
||||
useClass: NoopAuditService,
|
||||
},
|
||||
],
|
||||
exports: [AUDIT_SERVICE],
|
||||
})
|
||||
export class CoreModule implements NestModule {
|
||||
configure(consumer: MiddlewareConsumer) {
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
MinLength,
|
||||
} from 'class-validator';
|
||||
import { UserRole } from '../../../common/helpers/types/permission';
|
||||
import { NoUrls } from '../../../common/validators/no-urls.validator';
|
||||
|
||||
export class InviteUserDto {
|
||||
@IsArray()
|
||||
@@ -44,6 +45,7 @@ export class AcceptInviteDto extends InvitationIdDto {
|
||||
@MinLength(2)
|
||||
@MaxLength(60)
|
||||
@IsString()
|
||||
@NoUrls()
|
||||
name: string;
|
||||
|
||||
@MinLength(8)
|
||||
|
||||
@@ -244,7 +244,7 @@ export class WorkspaceService {
|
||||
await this.billingQueue.add(
|
||||
QueueJob.WELCOME_EMAIL,
|
||||
{ userId: user.id },
|
||||
{ delay: 60 * 1000 }, // 1m
|
||||
{ delay: 30 * 60 * 1000 }, // 30m
|
||||
);
|
||||
} catch (err) {
|
||||
this.logger.error(err);
|
||||
|
||||
+1
-1
Submodule apps/server/src/ee updated: 88706944ac...9970c21c81
@@ -0,0 +1,14 @@
|
||||
import { Global, Module } from '@nestjs/common';
|
||||
import { AUDIT_SERVICE, NoopAuditService } from './audit.service';
|
||||
|
||||
@Global()
|
||||
@Module({
|
||||
providers: [
|
||||
{
|
||||
provide: AUDIT_SERVICE,
|
||||
useClass: NoopAuditService,
|
||||
},
|
||||
],
|
||||
exports: [AUDIT_SERVICE],
|
||||
})
|
||||
export class NoopAuditModule {}
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
validateSync,
|
||||
} from 'class-validator';
|
||||
import { plainToInstance } from 'class-transformer';
|
||||
import { IsISO6391 } from '../../common/validator/is-iso6391';
|
||||
import { IsISO6391 } from '../../common/validators/is-iso6391';
|
||||
|
||||
export class EnvironmentVariables {
|
||||
@IsNotEmpty()
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
actorName: string;
|
||||
@@ -23,19 +23,7 @@ export const CommentCreateEmail = ({
|
||||
<strong>{pageTitle}</strong>.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={pageUrl} style={button}>
|
||||
View
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={pageUrl}>View</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
actorName: string;
|
||||
@@ -23,19 +23,7 @@ export const CommentMentionEmail = ({
|
||||
<strong>{pageTitle}</strong>.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={pageUrl} style={button}>
|
||||
View
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={pageUrl}>View</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
actorName: string;
|
||||
@@ -23,19 +23,7 @@ export const CommentResolvedEmail = ({
|
||||
<strong>{pageTitle}</strong>.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={pageUrl} style={button}>
|
||||
View
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={pageUrl}>View</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
inviteLink: string;
|
||||
@@ -17,19 +17,7 @@ export const InvitationEmail = ({ inviteLink }: Props) => {
|
||||
Please click the button below to accept this invitation.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={inviteLink} style={button}>
|
||||
Accept Invite
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={inviteLink}>Accept Invite</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
actorName: string;
|
||||
@@ -19,19 +19,7 @@ export const PageMentionEmail = ({ actorName, pageTitle, pageUrl }: Props) => {
|
||||
<strong>{pageTitle}</strong>.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={pageUrl} style={button}>
|
||||
View
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={pageUrl}>View</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Section, Text, Button } from '@react-email/components';
|
||||
import { Section, Text } from '@react-email/components';
|
||||
import * as React from 'react';
|
||||
import { button, content, paragraph } from '../css/styles';
|
||||
import { MailBody } from '../partials/partials';
|
||||
import { content, paragraph } from '../css/styles';
|
||||
import { EmailButton, MailBody } from '../partials/partials';
|
||||
|
||||
interface Props {
|
||||
actorName: string;
|
||||
@@ -25,19 +25,7 @@ export const PermissionGrantedEmail = ({
|
||||
<strong>{pageTitle}</strong>.
|
||||
</Text>
|
||||
</Section>
|
||||
<Section
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingLeft: '15px',
|
||||
paddingBottom: '15px',
|
||||
}}
|
||||
>
|
||||
<Button href={pageUrl} style={button}>
|
||||
View
|
||||
</Button>
|
||||
</Section>
|
||||
<EmailButton href={pageUrl}>View</EmailButton>
|
||||
</MailBody>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { container, footer, h1, logo, main } from '../css/styles';
|
||||
import { button as buttonStyle, container, footer, h1, logo, main } from '../css/styles';
|
||||
import {
|
||||
Body,
|
||||
Container,
|
||||
@@ -35,6 +35,47 @@ export function MailHeader() {
|
||||
);
|
||||
}
|
||||
|
||||
interface EmailButtonProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function EmailButton({ href, children }: EmailButtonProps) {
|
||||
return (
|
||||
<table
|
||||
role="presentation"
|
||||
cellPadding="0"
|
||||
cellSpacing="0"
|
||||
style={{ margin: '0 0 15px 15px' }}
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
style={{
|
||||
backgroundColor: buttonStyle.backgroundColor,
|
||||
borderRadius: buttonStyle.borderRadius,
|
||||
textAlign: 'center' as const,
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
style={{
|
||||
color: buttonStyle.color,
|
||||
fontFamily: buttonStyle.fontFamily,
|
||||
fontSize: buttonStyle.fontSize,
|
||||
textDecoration: 'none',
|
||||
display: 'inline-block',
|
||||
padding: '8px 16px',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailFooter() {
|
||||
return (
|
||||
<Section style={footer}>
|
||||
|
||||
@@ -67,6 +67,7 @@ async function bootstrap() {
|
||||
'/api/sso/google',
|
||||
'/api/workspace/create',
|
||||
'/api/workspace/joined',
|
||||
'/api/workspace/find-by-email',
|
||||
];
|
||||
|
||||
if (
|
||||
|
||||
Generated
+9
@@ -681,6 +681,9 @@ importers:
|
||||
stripe:
|
||||
specifier: ^17.5.0
|
||||
version: 17.5.0
|
||||
tlds:
|
||||
specifier: ^1.261.0
|
||||
version: 1.261.0
|
||||
tmp-promise:
|
||||
specifier: ^3.0.3
|
||||
version: 3.0.3
|
||||
@@ -9837,6 +9840,10 @@ packages:
|
||||
tiptap-extension-global-drag-handle@0.1.18:
|
||||
resolution: {integrity: sha512-jwFuy1K8DP3a4bFy76Hpc63w1Sil0B7uZ3mvhQomVvUFCU787Lg2FowNhn7NFzeyok761qY2VG+PZ/FDthWUdg==}
|
||||
|
||||
tlds@1.261.0:
|
||||
resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
|
||||
hasBin: true
|
||||
|
||||
tldts-core@6.1.72:
|
||||
resolution: {integrity: sha512-FW3H9aCaGTJ8l8RVCR3EX8GxsxDbQXuwetwwgXA2chYdsX+NY1ytCBl61narjjehWmCw92tc1AxlcY3668CU8g==}
|
||||
|
||||
@@ -21145,6 +21152,8 @@ snapshots:
|
||||
|
||||
tiptap-extension-global-drag-handle@0.1.18: {}
|
||||
|
||||
tlds@1.261.0: {}
|
||||
|
||||
tldts-core@6.1.72: {}
|
||||
|
||||
tldts@6.1.72:
|
||||
|
||||
Reference in New Issue
Block a user