me/pi-ku
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: route location state to drawer from login

Browse Source
This commit is contained in:
me
2026-05-06 21:21:28 +05:30
parent 9800174df1
commit e532507a0f
4 changed files with 322 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export default function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]"> <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-50 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
<Suspense fallback={<SplashScreen />}> <Suspense fallback={<SplashScreen />}>
<Routes> <Routes>
<Route path={ROUTES.HOME} element={<Home />} /> <Route path={ROUTES.HOME} element={<Home />} />
frontend/src/components/editor/ComposeCanvas.tsx
+315 -315
View File
@@ -15,393 +15,393 @@ const DEFAULT_FONT_FAMILY = "Playfair Display Variable";
const DEFAULT_FONT_COLOR = "#000"; const DEFAULT_FONT_COLOR = "#000";
export interface FabricObjectJSON { export interface FabricObjectJSON {
type: string; type: string;
name?: string; name?: string;
top: number; top: number;
left: number; left: number;
width: number; width: number;
height: number; height: number;
[key: string]: unknown; [key: string]: unknown;
} }
export interface FabricImageJSON extends FabricObjectJSON { export interface FabricImageJSON extends FabricObjectJSON {
type: "Image"; type: "Image";
src: string; src: string;
_customRawFile?: File; _customRawFile?: File;
} }
export interface CanvasJSON { export interface CanvasJSON {
objects: (FabricObjectJSON | FabricImageJSON)[]; objects: (FabricObjectJSON | FabricImageJSON)[];
canvasWidth?: number; canvasWidth?: number;
canvasHeight?: number; canvasHeight?: number;
} }
export interface CanvasStyle { export interface CanvasStyle {
fontFamily: string; fontFamily: string;
fontColor: string; fontColor: string;
} }
export type CanvasTools = { export type CanvasTools = {
addImage: (url: string, file: File) => void; addImage: (url: string, file: File) => void;
getData: () => CanvasJSON; getData: () => CanvasJSON;
getImages: () => { src: string; file: File }[]; getImages: () => { src: string; file: File }[];
loadData: (data: CanvasJSON) => Promise<void>; loadData: (data: CanvasJSON) => Promise<void>;
getStyle: () => CanvasStyle; getStyle: () => CanvasStyle;
}; };
export interface FabricImageWithFile extends fabric.FabricImage { export interface FabricImageWithFile extends fabric.FabricImage {
_customRawFile: File; _customRawFile: File;
} }
// NOTE: We use the same canvasData to render on both mobile and desktop viewports. // NOTE: We use the same canvasData to render on both mobile and desktop viewports.
// Instead of calculating the entire objects pad again, we apply a zoom multiplier (scale down or up) // Instead of calculating the entire objects pad again, we apply a zoom multiplier (scale down or up)
// over the last saved canvas size. // over the last saved canvas size.
const applyResponsiveViewport = ( const applyResponsiveViewport = (
canvas: fabric.Canvas, canvas: fabric.Canvas,
wrapper: HTMLDivElement, wrapper: HTMLDivElement,
logicalWidth: number, logicalWidth: number,
logicalHeight: number, logicalHeight: number,
) => { ) => {
const physicalWidth = wrapper.clientWidth || logicalWidth; const physicalWidth = wrapper.clientWidth || logicalWidth;
const zoomMultiplier = physicalWidth / logicalWidth; const zoomMultiplier = physicalWidth / logicalWidth;
const physicalHeight = Math.max(1, logicalHeight * zoomMultiplier); const physicalHeight = Math.max(1, logicalHeight * zoomMultiplier);
canvas.setDimensions({ canvas.setDimensions({
width: physicalWidth, width: physicalWidth,
height: physicalHeight, height: physicalHeight,
}); });
wrapper.style.height = `${physicalHeight}px`; wrapper.style.height = `${physicalHeight}px`;
canvas.setViewportTransform([zoomMultiplier, 0, 0, zoomMultiplier, 0, 0]); canvas.setViewportTransform([zoomMultiplier, 0, 0, zoomMultiplier, 0, 0]);
canvas.requestRenderAll(); canvas.requestRenderAll();
}; };
// to find the maximum height of the content to dynamically resize the canvas // to find the maximum height of the content to dynamically resize the canvas
// would've been wayyy easier only if canvas supported fit-content like CSS property :) // would've been wayyy easier only if canvas supported fit-content like CSS property :)
const measureLogicalContentHeight = ( const measureLogicalContentHeight = (
canvas: fabric.Canvas, canvas: fabric.Canvas,
minimumHeight = DEFAULT_LOGICAL_HEIGHT, minimumHeight = DEFAULT_LOGICAL_HEIGHT,
) => { ) => {
const maxBottom = canvas.getObjects().reduce((maxHeight, currObj) => { const maxBottom = canvas.getObjects().reduce((maxHeight, currObj) => {
const top = currObj.top; const top = currObj.top;
const height = currObj.getScaledHeight(); const height = currObj.getScaledHeight();
return Math.max(maxHeight, top + height); return Math.max(maxHeight, top + height);
}, 0); }, 0);
return Math.max(minimumHeight, maxBottom + PAD); return Math.max(minimumHeight, maxBottom + PAD);
}; };
const DEFAULT_INIT_TEXT = "Take a deep breath..."; const DEFAULT_INIT_TEXT = "Take a deep breath...";
interface ComposeCanvasProps { interface ComposeCanvasProps {
readOnly?: boolean; readOnly?: boolean;
initialData?: CanvasJSON | null; initialData?: CanvasJSON | null;
style?: CanvasStyle; style?: CanvasStyle;
ref?: React.Ref<CanvasTools>; ref?: React.Ref<CanvasTools>;
} }
export function ComposeCanvas({ export function ComposeCanvas({
readOnly = false, readOnly = false,
initialData = null, initialData = null,
style, style,
ref, ref,
}: ComposeCanvasProps) { }: ComposeCanvasProps) {
// wrapper is the parent div box // wrapper is the parent div box
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null); const canvasRef = useRef<HTMLCanvasElement>(null);
const fabricRef = useRef<fabric.Canvas | null>(null); const fabricRef = useRef<fabric.Canvas | null>(null);
const textboxRef = useRef<fabric.Textbox | null>(null); const textboxRef = useRef<fabric.Textbox | null>(null);
const deferredDataRef = useRef<CanvasJSON | null>(null); const deferredDataRef = useRef<CanvasJSON | null>(null);
const logicalSizeRef = useRef({ const logicalSizeRef = useRef({
width: BASE_WIDTH, width: BASE_WIDTH,
height: DEFAULT_LOGICAL_HEIGHT, height: DEFAULT_LOGICAL_HEIGHT,
}); });
// re-calculates height based on content and applies the zoom transform // re-calculates height based on content and applies the zoom transform
const syncViewport = useCallback(() => { const syncViewport = useCallback(() => {
if (!(fabricRef.current && wrapperRef.current)) return; if (!(fabricRef.current && wrapperRef.current)) return;
const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT; const minHeight = initialData?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT;
logicalSizeRef.current.height = measureLogicalContentHeight( logicalSizeRef.current.height = measureLogicalContentHeight(
fabricRef.current, fabricRef.current,
minHeight, minHeight,
);
applyResponsiveViewport(
fabricRef.current,
wrapperRef.current,
logicalSizeRef.current.width,
logicalSizeRef.current.height,
);
fabricRef.current.requestRenderAll();
}, [initialData]);
// auto focus the cursor into the main textbox no matter the latest element added
const focusTextbox = useCallback(
(textbox: fabric.Textbox) => {
if (readOnly || !fabricRef.current) return;
fabricRef.current.setActiveObject(textbox);
textbox.enterEditing();
// move the cursor to the end of the text
const textLength = textbox.text?.length ?? 0;
textbox.selectionStart = textLength;
textbox.selectionEnd = textLength;
fabricRef.current.requestRenderAll();
},
[readOnly],
); );
const loadContent = useCallback( applyResponsiveViewport(
async (data: CanvasJSON | null) => { fabricRef.current,
const canvas = fabricRef.current; wrapperRef.current,
const wrapper = wrapperRef.current; logicalSizeRef.current.width,
if (!(canvas && wrapper)) return; logicalSizeRef.current.height,
// clean the canvas everytime and set fresh
canvas.clear();
let textbox: fabric.Textbox | null = null;
// restore logical size from prev saved data if available (in case of existing letter)
logicalSizeRef.current = {
width: data?.canvasWidth ?? BASE_WIDTH,
height: data?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT,
};
if (data?.objects?.length) {
await canvas.loadFromJSON(data);
textbox = canvas.getObjects("Textbox")[0] as fabric.Textbox;
} else {
// Create a fresh letter if no data exists
textbox = new fabric.Textbox(DEFAULT_INIT_TEXT, {
name: "main-textbox",
originX: "left",
originY: "top",
left: PAD,
top: PAD,
width: BASE_WIDTH - PAD * 2,
fontSize: 18,
fontWeight: 500,
fontFamily: DEFAULT_FONT_FAMILY,
fill: DEFAULT_FONT_COLOR,
lineHeight: 1.5,
splitByGrapheme: false,
lockMovementX: true,
lockMovementY: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: false,
hasBorders: false,
objectCaching: false,
noScaleCache: false,
});
canvas.add(textbox);
}
if (!textbox) return;
// readonly contraints applicable for post seal view
textbox.selectable = !readOnly;
textbox.evented = !readOnly;
textbox.editable = !readOnly;
textbox.hasBorders = false;
textboxRef.current = textbox;
// observe and auto-resize the canvas height whenever typed
textbox.on("changed", syncViewport);
// trapping the focus into the textbox wherever clicked on canvas (except images)
canvas.on("mouse:down", (e) => {
if (!e.target || e.target === textbox) {
focusTextbox(textbox);
}
});
for (const img of canvas.getObjects("Image")) {
img.set({
hasControls: !readOnly,
hasBorders: !readOnly,
});
}
// NOTE: fabric refreshes fonts once the textbox is rendered after initial focus
await document.fonts.ready;
textbox.set("dirty", true);
syncViewport();
// Hack: Fabric needs a small initial delay to mount before it will accept focus.
// otherwise it goes to the front
if (!readOnly) {
setTimeout(() => focusTextbox(textbox), 200);
}
},
[readOnly, syncViewport, focusTextbox],
); );
useEffect(() => { fabricRef.current.requestRenderAll();
if (style && textboxRef.current) { }, [initialData]);
const textBox = textboxRef.current;
textBox.fontFamily = style.fontFamily || textBox.fontFamily; // auto focus the cursor into the main textbox no matter the latest element added
textBox.fill = style.fontColor || textBox.fill; const focusTextbox = useCallback(
syncViewport(); (textbox: fabric.Textbox) => {
if (readOnly || !fabricRef.current) return;
fabricRef.current.setActiveObject(textbox);
textbox.enterEditing();
// move the cursor to the end of the text
const textLength = textbox.text?.length ?? 0;
textbox.selectionStart = textLength;
textbox.selectionEnd = textLength;
fabricRef.current.requestRenderAll();
},
[readOnly],
);
const loadContent = useCallback(
async (data: CanvasJSON | null) => {
const canvas = fabricRef.current;
const wrapper = wrapperRef.current;
if (!(canvas && wrapper)) return;
// clean the canvas everytime and set fresh
canvas.clear();
let textbox: fabric.Textbox | null = null;
// restore logical size from prev saved data if available (in case of existing letter)
logicalSizeRef.current = {
width: data?.canvasWidth ?? BASE_WIDTH,
height: data?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT,
};
if (data?.objects?.length) {
await canvas.loadFromJSON(data);
textbox = canvas.getObjects("Textbox")[0] as fabric.Textbox;
} else {
// Create a fresh letter if no data exists
textbox = new fabric.Textbox(DEFAULT_INIT_TEXT, {
name: "main-textbox",
originX: "left",
originY: "top",
left: PAD,
top: PAD,
width: BASE_WIDTH - PAD * 2,
fontSize: 18,
fontWeight: 500,
fontFamily: DEFAULT_FONT_FAMILY,
fill: DEFAULT_FONT_COLOR,
lineHeight: 1.5,
splitByGrapheme: false,
lockMovementX: true,
lockMovementY: true,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: false,
hasBorders: false,
objectCaching: false,
noScaleCache: false,
});
canvas.add(textbox);
}
if (!textbox) return;
// readonly contraints applicable for post seal view
textbox.selectable = !readOnly;
textbox.evented = !readOnly;
textbox.editable = !readOnly;
textbox.hasBorders = false;
textboxRef.current = textbox;
// observe and auto-resize the canvas height whenever typed
textbox.on("changed", syncViewport);
// trapping the focus into the textbox wherever clicked on canvas (except images)
canvas.on("mouse:down", (e) => {
if (!e.target || e.target === textbox) {
focusTextbox(textbox);
} }
}, [style, syncViewport]); });
useEffect(() => { for (const img of canvas.getObjects("Image")) {
let isMounted = true; img.set({
let resizeObserver: ResizeObserver | null = null; hasControls: !readOnly,
let lastWidth = 0; hasBorders: !readOnly,
});
}
const initCanvas = async () => { // NOTE: fabric refreshes fonts once the textbox is rendered after initial focus
// HACK: actual font may change the text-width - small ux improvement await document.fonts.ready;
await document.fonts.ready; textbox.set("dirty", true);
syncViewport();
if (!(wrapperRef.current && canvasRef.current && isMounted)) return; // Hack: Fabric needs a small initial delay to mount before it will accept focus.
// otherwise it goes to the front
if (!readOnly) {
setTimeout(() => focusTextbox(textbox), 200);
}
},
[readOnly, syncViewport, focusTextbox],
);
let width = wrapperRef.current.clientWidth; useEffect(() => {
if (width === 0) { if (style && textboxRef.current) {
await new Promise((resolve) => requestAnimationFrame(resolve)); const textBox = textboxRef.current;
width = wrapperRef.current?.clientWidth || BASE_WIDTH; textBox.fontFamily = style.fontFamily || textBox.fontFamily;
} textBox.fill = style.fontColor || textBox.fill;
syncViewport();
}
}, [style, syncViewport]);
// init the fabric instance useEffect(() => {
const canvas = new fabric.Canvas(canvasRef.current, { let isMounted = true;
width, let resizeObserver: ResizeObserver | null = null;
height: DEFAULT_LOGICAL_HEIGHT, let lastWidth = 0;
selection: !readOnly,
preserveObjectStacking: true,
allowTouchScrolling: true,
enableRetinaScaling: true,
objectCaching: false,
});
// remove default fabric background to let our CSS show through const initCanvas = async () => {
// TODO: provision custom bg (color in scope, but how does img fit?) // HACK: actual font may change the text-width - small ux improvement
const wrapperEl = canvas.getElement().parentElement; await document.fonts.ready;
if (wrapperEl) wrapperEl.style.background = "transparent";
fabricRef.current = canvas; if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
await loadContent(initialData); let width = wrapperRef.current.clientWidth;
if (width === 0) {
await new Promise((resolve) => requestAnimationFrame(resolve));
width = wrapperRef.current?.clientWidth || BASE_WIDTH;
}
// sometimes loadData() may be called before the canvas finished the init render // init the fabric instance
// so we retry that stashed render right after the init const canvas = new fabric.Canvas(canvasRef.current, {
if (deferredDataRef.current) { width,
await loadContent(deferredDataRef.current); height: DEFAULT_LOGICAL_HEIGHT,
deferredDataRef.current = null; selection: !readOnly,
} preserveObjectStacking: true,
allowTouchScrolling: true,
enableRetinaScaling: true,
objectCaching: false,
});
// auto window resizing based width // remove default fabric background to let our CSS show through
lastWidth = wrapperRef.current.clientWidth; // TODO: provision custom bg (color in scope, but how does img fit?)
resizeObserver = new ResizeObserver(() => { const wrapperEl = canvas.getElement().parentElement;
const nextWidth = wrapperRef.current?.clientWidth; if (wrapperEl) wrapperEl.style.background = "transparent";
if (!nextWidth || nextWidth === lastWidth) return;
lastWidth = nextWidth;
syncViewport();
});
resizeObserver.observe(wrapperRef.current!);
};
initCanvas().then(); fabricRef.current = canvas;
return () => { await loadContent(initialData);
isMounted = false;
resizeObserver?.disconnect();
fabricRef.current?.dispose();
fabricRef.current = null;
textboxRef.current = null;
};
}, [initialData, loadContent, readOnly, syncViewport]);
// WHY?: fabric doesn't work like react with state and props based optimized re-renders. // sometimes loadData() may be called before the canvas finished the init render
// everytime we there's a change in the data, we should force the render, // so we retry that stashed render right after the init
// so we let the parent Editor component take control of this. if (deferredDataRef.current) {
useImperativeHandle(ref, () => ({ await loadContent(deferredDataRef.current);
addImage: (url: string, file: File) => { deferredDataRef.current = null;
if (!fabricRef.current) return; }
fabric.FabricImage.fromURL(url).then((img) => { // auto window resizing based width
img.scaleToWidth(Math.min(300, img.width)); lastWidth = wrapperRef.current.clientWidth;
img.set({ resizeObserver = new ResizeObserver(() => {
originX: "left", const nextWidth = wrapperRef.current?.clientWidth;
originY: "top", if (!nextWidth || nextWidth === lastWidth) return;
left: PAD, lastWidth = nextWidth;
top: PAD, syncViewport();
noScaleCache: false, });
objectCaching: false, resizeObserver.observe(wrapperRef.current!);
// WHY?: after image object clean-up, its src becomes local blob:// };
// but browser won't let us parse this blob:// into file afterwards. so we hold a local copy
_customRawFile: file,
} as Partial<FabricImageWithFile>);
fabricRef.current?.add(img); initCanvas().then();
fabricRef.current?.setActiveObject(img);
syncViewport(); return () => {
// clean up memory isMounted = false;
URL.revokeObjectURL(url); resizeObserver?.disconnect();
}); fabricRef.current?.dispose();
}, fabricRef.current = null;
textboxRef.current = null;
};
}, [initialData, loadContent, readOnly, syncViewport]);
getData: () => { // WHY?: fabric doesn't work like react with state and props based optimized re-renders.
if (!fabricRef.current) return { objects: [] }; // everytime we there's a change in the data, we should force the render,
syncViewport(); // so we let the parent Editor component take control of this.
useImperativeHandle(ref, () => ({
addImage: (url: string, file: File) => {
if (!fabricRef.current) return;
const json = fabricRef.current.toJSON() as CanvasJSON; fabric.FabricImage.fromURL(url).then((img) => {
json.canvasWidth = logicalSizeRef.current.width; img.scaleToWidth(Math.min(300, img.width));
json.canvasHeight = logicalSizeRef.current.height; img.set({
return json; originX: "left",
}, originY: "top",
left: PAD,
top: PAD,
noScaleCache: false,
objectCaching: false,
// WHY?: after image object clean-up, its src becomes local blob://
// but browser won't let us parse this blob:// into file afterwards. so we hold a local copy
_customRawFile: file,
} as Partial<FabricImageWithFile>);
getImages: () => { fabricRef.current?.add(img);
if (!fabricRef.current) return []; fabricRef.current?.setActiveObject(img);
const images = fabricRef.current.getObjects(
"Image",
) as FabricImageWithFile[];
return images.map((img) => ({
src: img.getSrc(),
file: img._customRawFile,
}));
},
loadData: async (data: CanvasJSON) => { syncViewport();
// if canvas isn't ready yet, stash the data and let the useEffect pick it up // clean up memory
if (!fabricRef.current) { URL.revokeObjectURL(url);
deferredDataRef.current = data; });
return; },
}
await loadContent(data);
},
getStyle: () => { getData: () => {
const textBox = textboxRef.current; if (!fabricRef.current) return { objects: [] };
syncViewport();
return { const json = fabricRef.current.toJSON() as CanvasJSON;
fontFamily: textBox?.fontFamily || DEFAULT_FONT_FAMILY, json.canvasWidth = logicalSizeRef.current.width;
fontColor: (textBox?.fill as string) || DEFAULT_FONT_COLOR, json.canvasHeight = logicalSizeRef.current.height;
}; return json;
}, },
}));
return ( getImages: () => {
<div if (!fabricRef.current) return [];
ref={wrapperRef} const images = fabricRef.current.getObjects(
className="relative bg-paper shadow-primary-content rounded-sm w-full outline-none overflow-hidden cursor-text" "Image",
> ) as FabricImageWithFile[];
<canvas return images.map((img) => ({
ref={canvasRef} src: img.getSrc(),
className="absolute top-0 left-0" file: img._customRawFile,
style={{ background: "transparent" }} }));
/> },
</div>
); loadData: async (data: CanvasJSON) => {
// if canvas isn't ready yet, stash the data and let the useEffect pick it up
if (!fabricRef.current) {
deferredDataRef.current = data;
return;
}
await loadContent(data);
},
getStyle: () => {
const textBox = textboxRef.current;
return {
fontFamily: textBox?.fontFamily || DEFAULT_FONT_FAMILY,
fontColor: (textBox?.fill as string) || DEFAULT_FONT_COLOR,
};
},
}));
return (
<div
ref={wrapperRef}
className="relative bg-paper shadow-primary-content rounded-sm w-full outline-none overflow-hidden cursor-text"
>
<canvas
ref={canvasRef}
className="absolute top-0 left-0"
style={{ background: "transparent" }}
/>
</div>
);
} }
ComposeCanvas.displayName = "ComposeCanvas"; ComposeCanvas.displayName = "ComposeCanvas";
frontend/src/components/login/WelcomeModal.tsx
+4 -5
View File
@@ -34,8 +34,7 @@ export default function WelcomeModal({
className="inline text-primary" className="inline text-primary"
weight="fill" weight="fill"
/> />
<div className="divider my-0"></div> <span className="divider my-0 block"></span>
<br />
Everything you write here is sealed with your password,{" "} Everything you write here is sealed with your password,{" "}
<span className="font-display text-success">cryptographically</span> <span className="font-display text-success">cryptographically</span>
, before it leaves your hands. , before it leaves your hands.
@@ -44,11 +43,11 @@ export default function WelcomeModal({
<div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3"> <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
<WarningIcon size={24} weight="fill" className="shrink-0 mt-0.5" /> <WarningIcon size={24} weight="fill" className="shrink-0 mt-0.5" />
<p className="text-sm font-medium text-primary-content"> <div className="text-sm font-medium text-primary-content">
If you ever happen to forget your password, your letters are lost If you ever happen to forget your password, your letters are lost
to time, forever. to time, forever.
<br /> <br />
<span className="font-bold mt-2"> <span className="font-bold mt-2 block">
I highly, highly recommend storing this password in your{" "} I highly, highly recommend storing this password in your{" "}
<a <a
href="https://www.privacyguides.org/en/passwords/" href="https://www.privacyguides.org/en/passwords/"
@@ -60,7 +59,7 @@ export default function WelcomeModal({
</a>{" "} </a>{" "}
or somewhere safe to remember it. or somewhere safe to remember it.
</span> </span>
</p> </div>
</div> </div>
<div className="modal-action w-full"> <div className="modal-action w-full">
frontend/src/pages/Login.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import { z } from "zod"; import { z } from "zod";
import { api, publicApi } from "../api/apiClient"; import { api, publicApi } from "../api/apiClient";
import Logo from "../components/Logo"; import Logo from "../components/Logo";
import WelcomeModal from "../components/login/WelcomeModal.tsx"; import WelcomeModal from "../components/login/WelcomeModal";
import FormField from "../components/ui/FormField"; import FormField from "../components/ui/FormField";
import Saajan from "../components/ui/Saajan"; import Saajan from "../components/ui/Saajan";
import { endpoints } from "../config/endpoints"; import { endpoints } from "../config/endpoints";
@@ -64,7 +64,7 @@ export default function Login() {
await setAuthStore(authData.access, userData, masterKey); await setAuthStore(authData.access, userData, masterKey);
navigate(nextRoute, { replace: true }); navigate(nextRoute, { replace: true, state: location.state });
} catch (err) { } catch (err) {
let message = let message =
"Sorry, we're experiencing technical issues.\nPlease try again later."; "Sorry, we're experiencing technical issues.\nPlease try again later.";