microboard-ui-temp 0.0.3

package/src/pages/BoardPage.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable react/prop-types */
+import { LAST_BOARD_KEY } from "App/App";
+import { useAccount } from "App/useAccount";
+import { useBoardsList } from "App/useBoardsList";
+import { ACCESS_DENIED_MODAL } from "features/AccessDeniedModal";
+import { AppContext, useAppContext } from "features/AppContext";
+import { AppView } from "features/AppView";
+import { USER_PLAN_MODAL_ID } from "features/UserPlan";
+import Cookies from "js-cookie";
+import React, { useLayoutEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	useLocation,
+	useNavigate,
+	useParams,
+	useSearchParams,
+} from "react-router-dom";
+import { billingApi } from "shared/api";
+import { notify } from "shared/ui-lib/Toast";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import { pasteWelcomeBoardData } from "./WelcomePage/WelcomePage";
+
+export const BoardPage = (): JSX.Element => {
+	const { app } = useAppContext();
+	const board = app.getBoard();
+	const params = useParams<{ boardId: string }>();
+	const { t, i18n } = useTranslation();
+	const navigate = useNavigate();
+	const { search } = useLocation();
+	const [searchParams] = useSearchParams();
+	const codeSearch = searchParams.get("code");
+	const teamIdSearch = searchParams.get("team_id");
+	const isOpenMiroBoards = codeSearch && teamIdSearch;
+	const boardsList = useBoardsList();
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+
+	app.connection.onAccessDenied = async (
+		deniedBoardId: string,
+		forceUpdate = false,
+	) => {
+		if (
+			forceUpdate ||
+			(deniedBoardId === board.getBoardId() && !isOpenMiroBoards)
+		) {
+			openModal(ACCESS_DENIED_MODAL);
+			const deniedBoard = app.getConnectedBoard(deniedBoardId);
+			if (deniedBoard) {
+				deniedBoard.disconnect();
+			}
+			if (!account.isLoggedIn) {
+				await boardsList.removeBoard(board.getBoardId());
+			}
+			navigate("/boards/blank");
+			await app.openBoard("blank");
+			app.render();
+		}
+	};
+
+	useLayoutEffect(() => {
+		boardsList.loadBoards().then(() => {
+			if (params.boardId?.includes("local")) {
+				app.openBoardFromFile().then(() => {
+					navigate(`/boards/${params.boardId}${search}`, {
+						replace: true,
+					});
+					app.render();
+				});
+			} else if (params.boardId && params.boardId !== "blank") {
+				app.openBoard(
+					params.boardId,
+					searchParams.get("accessKey") || undefined,
+				).then(() => {
+					navigate(`/boards/${params.boardId}${search}`, {
+						replace: true,
+					});
+					app.render();
+				});
+			} else {
+				const lastSeenBoard = localStorage.getItem(LAST_BOARD_KEY);
+				const isFirstVisit = !Cookies.get("first_visit");
+				if (lastSeenBoard) {
+					app.openBoard(lastSeenBoard).then(() => {
+						navigate(`/boards/${lastSeenBoard}${search}`, {
+							replace: true,
+						});
+						app.render();
+					});
+				} else if (isFirstVisit) {
+					boardsList
+						.createBoard(t("board.welcomeBoardTitle"), true)
+						.then(boardId => {
+							app.openBoard(boardId).then(() => {
+								navigate(`/boards/${boardId}`, {
+									replace: true,
+								});
+								app.render();
+
+								const board = app.getBoard();
+								pasteWelcomeBoardData(board, i18n.language);
+							});
+						});
+				} else {
+					boardsList.createBoard().then(boardId => {
+						app.openBoard(boardId).then(() => {
+							navigate(`/boards/${boardId}`, {
+								replace: true,
+							});
+							app.render();
+						});
+					});
+				}
+			}
+
+			const paymentStatus = searchParams.get("paymentStatus");
+			if (paymentStatus) {
+				openModal(USER_PLAN_MODAL_ID);
+
+				if (paymentStatus === "success") {
+					billingApi
+						.verifyPayment()
+						.then(() => {
+							notify({
+								header: "Статус оплаты",
+								body: "Оплата успешно прошла",
+								variant: "success",
+							});
+							account.fetchBillingInfo();
+						})
+						.catch(() => {
+							notify({
+								header: "Статус оплаты",
+								body: "Произошла ошибка",
+								variant: "error",
+							});
+						});
+				}
+
+				if (paymentStatus === "error") {
+					notify({
+						header: "Статус оплаты",
+						body: "Произошла ошибка",
+						variant: "error",
+					});
+				}
+
+				searchParams.delete("paymentStatus");
+			}
+		});
+	}, []);
+
+	if (!board || !account.isInitialized) {
+		return <div></div>;
+	}
+
+	return (
+		<AppContext.Provider value={{ app, board }}>
+			<AppView />
+		</AppContext.Provider>
+	);
+};

package/src/pages/ForgotPasswordPage/ForgotPasswordPage.module.css

@@ -0,0 +1,82 @@
+.title {
+	font-family: "Manrope", "Arial";
+	font-weight: 600;
+	text-align: center;
+	margin-bottom: 32px;
+}
+
+.description {
+	font-family: "Manrope", "Arial";
+	margin-bottom: 16px;
+	display: flex;
+	gap: 12px;
+}
+
+.submitBtn {
+	margin-top: 32px;
+}
+
+.btns {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.requested {
+	width: 500px;
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+}
+
+.backToLogin {
+	margin-top: 32px;
+	width: 100%;
+}
+
+.resetPassword {
+	font-weight: 600;
+	font-size: 48px;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+}
+
+.resetPasswordParagraph {
+	font-weight: 500;
+	font-size: 16px;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+}
+
+@media screen and (max-width: 640px) {
+	.submitBtn {
+		margin-top: 24px;
+	}
+
+	.title {
+		margin-bottom: 24px;
+	}
+
+	.requested {
+		width: 100%;
+	}
+
+	.resetPassword {
+		font-size: 30px;
+		font-weight: 600;
+	}
+
+	.resetPasswordParagraph {
+		font-size: 16px;
+		text-align: center;
+	}
+
+	.backToLogin {
+		margin-top: 32px;
+	}
+}

package/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -0,0 +1,148 @@
+import { getApiUrl } from "Config";
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Input } from "shared/ui-lib/Input";
+import styles from "./ForgotPasswordPage.module.css";
+import { isEmail } from "shared/lib/regex";
+import { useNavigate } from "react-router-dom";
+import { Tail } from "pages/layouts/AuthLayout/Tail";
+import { SuccessIcon } from "./SuccessIcon";
+
+export const ForgotPasswordPage: React.FC = () => {
+	const { t } = useTranslation();
+	const formRef = useRef<HTMLFormElement>(null);
+	const [requested, setRequested] = useState<boolean>(false);
+	const [disabled, setDisabled] = useState<boolean>(true);
+	const [isSubmitLoading, setIsSubmitLoading] = useState<boolean>(false);
+	const [error, setError] = useState<string>("");
+	const navigate = useNavigate();
+
+	const checkForm = (): boolean => {
+		if (!formRef.current) {
+			return false;
+		}
+
+		const email = formRef.current.email.value;
+
+		if (!isEmail(email)) {
+			// setError(t("auth.enterAValidEmailAddress"));
+			setDisabled(true);
+			return false;
+		}
+
+		setDisabled(false);
+		setError("");
+		return true;
+	};
+
+	const checkFormWithError = (): void => {
+		const isFormError = checkForm();
+
+		if (!isFormError) {
+			setError(t("auth.enterAValidEmailAddress"));
+		} else {
+			setError("");
+		}
+	};
+
+	const dbCheckForm = checkForm;
+
+	const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+
+		if (!formRef.current) {
+			return;
+		}
+		setDisabled(true);
+		setIsSubmitLoading(true);
+		fetch(getApiUrl("/auth/password/restore/request"), {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ email: formRef.current.email.value || "" }),
+		})
+			.then(async response => {
+				if (response.ok) {
+					return response.json();
+				} else {
+					const data = await response.json();
+					return Promise.reject(data);
+				}
+			})
+			.then(() => {
+				setRequested(true);
+			})
+			.catch(error => {
+				if (error?.message === "User not found") {
+					setError(t("auth.userNotFound"));
+					return;
+				}
+			})
+			.finally(() => {
+				setDisabled(false);
+				setIsSubmitLoading(false);
+			});
+	};
+
+	if (requested) {
+		return (
+			<div className={styles.requested}>
+				<div>
+					<SuccessIcon />
+				</div>
+				<h1 className={styles.resetPassword}>
+					{t("auth.resetPassword")}
+				</h1>
+				<p className={styles.resetPasswordParagraph}>
+					{t("auth.requestReceivedSuccessfully")}
+				</p>
+				<UiButton
+					variant="primary"
+					onClick={() => navigate(`/auth/sign-in${location.search}`)}
+					className={styles.backToLogin}
+					size="lg"
+				>
+					{t("auth.backToLogIn")}
+				</UiButton>
+			</div>
+		);
+	}
+
+	return (
+		<form ref={formRef} onSubmit={onSubmit}>
+			<h1 className={styles.title}>{t("auth.forgotPassword")}</h1>
+			<Input
+				id="email"
+				label={t("auth.enterEmailForLink")}
+				placeholder={t("auth.emailPlaceholder")}
+				hasError={!!error.length}
+				errorText={error}
+				onBlur={checkFormWithError}
+				onInput={dbCheckForm}
+			/>
+			<div className={styles.btns}>
+				<UiButton
+					type="submit"
+					disabled={disabled}
+					className={styles.submitBtn}
+					loading={isSubmitLoading}
+					variant="primary"
+					size="lg"
+				>
+					{t("auth.submit")} <Tail />
+				</UiButton>
+				<UiButton
+					variant="ghost"
+					onClick={() => {
+						navigate(`/auth/sign-in${location.search}`);
+					}}
+					size="lg"
+				>
+					{t("auth.backToLogIn")}
+				</UiButton>
+			</div>
+		</form>
+	);
+};

package/src/pages/ForgotPasswordPage/SuccessIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+interface Props extends React.SVGProps<SVGSVGElement> {}
+
+export const SuccessIcon: React.FC<Props> = () => {
+	return (
+		<svg
+			width="60"
+			height="60"
+			viewBox="0 0 60 60"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M30 55C16.1925 55 5 43.8075 5 30C5 16.1925 16.1925 5 30 5C43.8075 5 55 16.1925 55 30C55 43.8075 43.8075 55 30 55ZM30 50C35.3043 50 40.3914 47.8929 44.1421 44.1421C47.8929 40.3914 50 35.3043 50 30C50 24.6957 47.8929 19.6086 44.1421 15.8579C40.3914 12.1071 35.3043 10 30 10C24.6957 10 19.6086 12.1071 15.8579 15.8579C12.1071 19.6086 10 24.6957 10 30C10 35.3043 12.1071 40.3914 15.8579 44.1421C19.6086 47.8929 24.6957 50 30 50V50ZM27.5075 40L16.9 29.3925L20.435 25.8575L27.5075 32.93L41.6475 18.7875L45.185 22.3225L27.5075 40Z"
+				fill="#26BD6C"
+			/>
+		</svg>
+	);
+};

package/src/pages/ForgotPasswordPage/index.ts

@@ -0,0 +1 @@
+export { ForgotPasswordPage } from "./ForgotPasswordPage";

package/src/pages/HTMLSnapshot/HTMLSnapshot.tsx

@@ -0,0 +1,60 @@
+import { useAccount } from "App/useAccount";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { api, HTTPError } from "shared/api";
+
+const HTMLSnapshot = (): JSX.Element => {
+	const { uid } = useParams();
+	const uniquePass = window.location.search;
+	const [htmlContent, setHtmlContent] = useState("");
+	const [errStatus, setErrStatus] = useState<null | number>(null);
+	const account = useAccount();
+
+	useEffect(() => {
+		account.init();
+	}, []);
+
+	useEffect(() => {
+		if (!account.isInitialized) {
+			return;
+		}
+
+		const fetchSnapshot = async (): Promise<void> => {
+			setErrStatus(null);
+			try {
+				const { data } = await api.get<{ htmlContent: string }>(
+					`/media/snapshot/${uid}${uniquePass}`,
+				);
+				if (!data) {
+					throw new Error();
+				}
+				setHtmlContent(data.htmlContent);
+			} catch (error) {
+				if (error instanceof HTTPError && error.status) {
+					setErrStatus(error.status);
+				}
+				console.error("Ошибка при загрузке snapshot:", error);
+			}
+		};
+
+		fetchSnapshot();
+	}, [uid, account]);
+
+	if (errStatus === 404) {
+		return <div>Not found</div>;
+	} else if (errStatus) {
+		return <div>Unkown error</div>;
+	} else if (!htmlContent || !account.isInitialized) {
+		return <div>Loading...</div>;
+	}
+
+	return (
+		<iframe
+			title="HTML Snapshot"
+			srcDoc={htmlContent}
+			style={{ width: "100%", height: "100vh", border: "none" }}
+		/>
+	);
+};
+
+export default HTMLSnapshot;

package/src/pages/HTMLSnapshot/index.ts

@@ -0,0 +1 @@
+export { default as HTMLSnapshot } from "./HTMLSnapshot";

package/src/pages/RestorePasswordPage/RestorePasswordPage.module.css

@@ -0,0 +1,46 @@
+.passwordChanged {
+	display: flex;
+	flex-direction: column;
+	gap: 64px;
+}
+
+.error {
+	color: #e6483d;
+	margin-bottom: 12px;
+}
+
+.link {
+	color: white;
+	text-decoration: none;
+}
+
+.link:visited {
+	text-decoration: none;
+	color: white;
+}
+
+.submit {
+	margin-top: 32px;
+}
+
+.btns {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.btn {
+	width: 100%;
+}
+
+@media screen and (max-width: 640px) {
+	.submit {
+		margin-top: 24px;
+	}
+
+	.passwordChanged {
+		gap: 32px;
+	}
+}