microboard-ui-temp 0.0.3

package/src/pages/SelectBoardPage/SelectBoardPage.tsx

@@ -0,0 +1,419 @@
+import { useAccount } from "App/useAccount";
+import { useBoardsList } from "App/useBoardsList";
+import { TFunction } from "i18next";
+import { getEmbedUrl } from "./getEmbedUrl";
+import { useForceUpdate } from "shared/lib/useForceUpdate";
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Folder } from "entities/Folder";
+import { boardsApiV2 } from "shared/apiV2";
+import { AccessKeyType } from "shared/apiV2/boards";
+import { useAppContext } from "features/AppContext";
+import { Icon, Logo } from "shared/ui-lib/Icon";
+import { Selector, type SelectorHandle } from "shared/ui-lib/Selector";
+import { Logout } from "features/UserPanel/icons/Logout";
+import { UserAvatar } from "features/UserPanel/UserAvatar/UserAvatar";
+import { UserDropDown } from "features/UserPanel/UserDropdown/UserDropdown";
+import style from "./SelectBoardPage.module.css";
+import { UiButton } from "shared/ui-lib/UiButton";
+
+const getName = (i18t: TFunction, name?: string | null): string =>
+	name || i18t("board.untitled");
+
+export const SelectBoardPage: React.FC = () => {
+	const { app } = useAppContext();
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const forceUpdate = useForceUpdate();
+	const boardsList = useBoardsList();
+	const account = useAccount();
+	const isAuth = account.isLoggedIn;
+	const newBoardRef = useRef<HTMLInputElement>(null);
+	const selectorRef = useRef<SelectorHandle<false>>(null);
+	const userPanelRef = useRef<HTMLDivElement>(null);
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [selected, setSelected] = useState<
+		boardsApiV2.Board | null | "addNew"
+	>(null);
+	const [newBoardName, setNewBoardName] = useState(t("board.untitled"));
+
+	function handleError(er: unknown): void {
+		window.opener?.postMessage(
+			{
+				error: er,
+			},
+			"*",
+		);
+		// "*" - ANY OPENER ORIGIN, REPLACE HERE
+	}
+
+	function successMessageToParent(
+		boardId: string,
+		accessKey: string,
+		name: string,
+	): void {
+		window.opener?.postMessage(
+			{
+				success: {
+					visitorsLink: `${getEmbedUrl()}/boards/${boardId}?titlePanel=false&accessKey=${accessKey}`,
+					authorLink: `${getEmbedUrl()}/boards/${boardId}?titlePanel=false`,
+					name,
+				},
+			},
+			"*",
+		);
+		// "*" - ANY OPENER ORIGIN, REPLACE HERE
+	}
+
+	async function handleSuccess(
+		boardId: string,
+		name?: string | null,
+		authorKey?: string,
+	): Promise<void> {
+		const accessKeyType = selectorRef.current?.getSelectedOptions().value;
+
+		if (!accessKeyType) {
+			throw new Error("Error creating access key");
+		}
+
+		const { data: accessKey } = await boardsApiV2.createAccessKey(
+			boardId,
+			{
+				keyType: accessKeyType as AccessKeyType,
+			},
+			authorKey,
+		);
+
+		if (!accessKey) {
+			throw new Error("Error creating access key");
+		}
+
+		successMessageToParent(boardId, accessKey.accessKey, getName(t, name));
+	}
+
+	useEffect(() => {
+		if (selected === "addNew" && newBoardRef.current) {
+			newBoardRef.current.focus();
+			newBoardRef.current.select();
+		}
+	}, [selected]);
+
+	useEffect(() => {
+		const fetchBoards = async (): Promise<void> => {
+			await app.boardsList.loadBoards();
+		};
+
+		fetchBoards();
+	}, []);
+
+	const handleEmbed = async (): Promise<void> => {
+		try {
+			if (selected === "addNew") {
+				const createdId = await boardsList.createBoard(
+					newBoardRef.current?.value,
+					true,
+				);
+				const unauthedData = app.storage.getCreatedBoard(createdId);
+				if (unauthedData) {
+					handleSuccess(
+						unauthedData.id,
+						unauthedData.title,
+						unauthedData.authorKey ?? undefined,
+					);
+				} else {
+					handleSuccess(createdId, newBoardRef.current?.value);
+				}
+			} else if (selected) {
+				setLoading(true);
+				const res = boardsList.getBoardInfo(selected.id);
+				if (!res) {
+					setLoading(false);
+					// selected.notFound = true;
+					// TODO fixed not found boards
+					setSelected({ ...selected, notFound: true });
+					boardsList.subject.publish();
+					// app.storage.subject.publish();
+					forceUpdate();
+				} else {
+					handleSuccess(
+						res.id,
+						res.title,
+						res.authorKey ?? undefined,
+					);
+				}
+			}
+		} catch (er) {
+			setLoading(false);
+			handleError(er);
+		}
+	};
+
+	return (
+		<>
+			<div className={style.container}>
+				<div className={style.header} style={{ position: "relative" }}>
+					<div className={style.logo}>
+						<Logo id="logo" />
+						<div className={style.headerTitle}>Microboard</div>
+					</div>
+					<div
+						ref={userPanelRef}
+						className={`${style.profile} ${!isAuth && style.unAuth}`}
+						onClick={() => setIsDropdownOpen(prev => !prev)}
+					>
+						<UserAvatar src={account.info?.avatar} />
+						<UserDropDown
+							openerRef={userPanelRef}
+							isOpen={isDropdownOpen}
+							setIsDropdownOpen={setIsDropdownOpen}
+							customTop={50}
+							email={account.info?.email}
+							buttons={
+								isAuth
+									? [
+											<UiButton
+												key="userDropDown2"
+												variant="ghost"
+												onClick={async () => {
+													await account.logout();
+												}}
+												size="lg"
+											>
+												<Logout /> {t("auth.logout")}
+											</UiButton>,
+										]
+									: [
+											<UiButton
+												key="userDropDown1"
+												onClick={() => {
+													setIsDropdownOpen(false);
+													navigate(
+														"/auth/sign-in?backToSelect=true",
+													);
+												}}
+												variant="ghost"
+												size="lg"
+											>
+												<Icon
+													iconName="SignIn"
+													width={20}
+													height={20}
+												/>{" "}
+												{t("auth.signIn")}
+											</UiButton>,
+											<UiButton
+												key="userDropDown2"
+												variant="ghost"
+												onClick={() => {
+													setIsDropdownOpen(false);
+													navigate(
+														"/auth/sign-up?backToSelect=true",
+													);
+												}}
+												size="lg"
+											>
+												<Icon
+													iconName="BoxedPlus"
+													width={20}
+													height={20}
+												/>{" "}
+												{t("auth.signUp")}
+											</UiButton>,
+										]
+							}
+						/>
+					</div>
+				</div>
+				<div className={style.title}>
+					{!selected && t("embedding.title")}
+					{selected && t("embedding.customize")}
+				</div>
+				{!selected && (
+					<>
+						<div
+							className={style.addContainer}
+							onClick={() => setSelected("addNew")}
+						>
+							<button
+								className={style.add}
+								onClick={() => setSelected("addNew")}
+							>
+								<Icon
+									iconName="addButton"
+									width={16}
+									height={16}
+								/>
+							</button>
+							<span>{t("embedding.addNew")}</span>
+						</div>
+						<Folder
+							folder={boardsList.getRootFolder()}
+							handleOpenBoard={board => setSelected(board)}
+						/>
+						<Folder
+							folder={boardsList.getSharedFolder()}
+							handleOpenBoard={board => setSelected(board)}
+						/>
+					</>
+				)}
+				{selected && selected !== "addNew" && (
+					<div className={style.selected}>
+						<span className={style.selectedIcon}>
+							<Icon
+								iconName="EmbedBoardIcon"
+								width={20}
+								height={20}
+							/>
+						</span>
+						<span>{selected.title}</span>
+					</div>
+				)}
+				{selected === "addNew" && (
+					<div className={style.search}>
+						<input
+							type="text"
+							placeholder={t("embedding.newBoardPlaceholder")}
+							ref={newBoardRef}
+							value={newBoardName}
+							onChange={event =>
+								setNewBoardName(event.target.value)
+							}
+						/>
+					</div>
+				)}
+				{selected && (
+					<>
+						{/* {selected !== "addNew" &&
+							<Selector
+								label={t("embedding.startingView")}
+								options={[
+									{
+										value: "full",
+										label: (
+											<span>
+												{t("embedding.fullBoard")}
+											</span>
+										),
+									},
+									// TODO add frames
+								]}
+							/>} */}
+						{selected === "addNew" ||
+						boardsList.getBoardInfo(selected.id) ? (
+							<div className={style.selectorsContainer}>
+								<Selector
+									ref={selectorRef}
+									label={t("embedding.allVisitors")}
+									options={[
+										{
+											value: "edit",
+											label: (
+												<div
+													className={
+														style.selectorText
+													}
+												>
+													{
+														<Icon
+															style={{
+																marginRight:
+																	"10px",
+															}}
+															iconName="canEdit"
+															width={20}
+															height={20}
+														/>
+													}{" "}
+													{t("embedding.canEdit")}
+												</div>
+											),
+										},
+										{
+											value: "view",
+											label: (
+												<div
+													className={
+														style.selectorText
+													}
+												>
+													{
+														<Icon
+															style={{
+																marginRight:
+																	"10px",
+															}}
+															iconName="canView"
+															width={20}
+															height={20}
+														/>
+													}{" "}
+													{t("embedding.canView")}
+												</div>
+											),
+										},
+									]}
+								/>
+							</div>
+						) : (
+							!selected.notFound && (
+								<div className={style.infoMessage}>
+									<div>
+										<Icon
+											iconName="Info"
+											width={16}
+											height={16}
+										/>
+										{t("embedding.notOwner")}
+									</div>
+									<div className={style.secondary}>
+										{t("embedding.optionsUnavailable")}
+									</div>
+								</div>
+							)
+						)}
+						{selected !== "addNew" && selected.notFound && (
+							<div
+								className={`${style.infoMessage} ${style.error}`}
+							>
+								<div>
+									<Icon
+										iconName="Info"
+										width={16}
+										height={16}
+									/>
+									{t("modalInfo.accessDenied.title")}
+								</div>
+								<div className={style.secondary}>
+									{t("modalInfo.accessDenied.description")}
+								</div>
+							</div>
+						)}
+						<div className={style.buttonContainer}>
+							<UiButton
+								className={`${style.button} ${style.primary}`}
+								onClick={handleEmbed}
+								disabled={
+									loading ||
+									(selected !== "addNew" && selected.notFound)
+								}
+								size="sm"
+							>
+								{t("embedding.embedBoardButton")}
+							</UiButton>
+							<UiButton
+								className={`${style.button} ${style.secondary}`}
+								onClick={() => setSelected(null)}
+								disabled={loading}
+								size="sm"
+							>
+								{t("embedding.back")}
+							</UiButton>
+						</div>
+					</>
+				)}
+			</div>
+		</>
+	);
+};

package/src/pages/SelectBoardPage/getEmbedUrl.ts

@@ -0,0 +1,3 @@
+export function getEmbedUrl(): string {
+	return `${location.protocol}//${location.host}`;
+}

package/src/pages/SelectBoardPage/index.ts

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

package/src/pages/SigninPage/SigninPage.module.css

@@ -0,0 +1,17 @@
+.btns {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	margin: 8px 0 40px;
+}
+
+.btn {
+	min-height: 40px;
+}
+
+.forgot {
+	font-weight: 600 !important;
+}

package/src/pages/SigninPage/SigninPage.tsx

@@ -0,0 +1,201 @@
+import { LAST_BOARD_KEY_QS } from "App/App";
+import { useAccount } from "App/useAccount";
+import { useBoardsList } from "App/useBoardsList";
+import { AuthForm } from "entities/account";
+import { Tail } from "pages/layouts/AuthLayout/Tail";
+import { EmailIcon } from "pages/SignupPage/EmailIcon";
+import { LockIcon } from "pages/SignupPage/LockIcon";
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { createSearchParams, useNavigate } from "react-router-dom";
+import { isEmail } from "shared/lib/regex";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Input } from "shared/ui-lib/Input/Input";
+import styles from "./SigninPage.module.css";
+import {
+	ERROR_SIGNIN_NOTIFY,
+	SigninErrorNotification,
+} from "features/Notifications";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+
+export const SigninPage: React.FC = (): React.ReactElement => {
+	const { t } = useTranslation();
+	// const [errorMessage, setErrorMessage] = useState<string | null>(null);
+	const [submitDisabled, setSubmitDisabled] = useState(true);
+	const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+	const navigate = useNavigate();
+	const formRef = useRef<HTMLFormElement>(null);
+	const [emailError, setEmailError] = useState<string>("");
+	const [errorText, setErrorText] = useState<string>("");
+	const account = useAccount();
+	const boards = useBoardsList();
+	const { openModal } = useUiModalContext();
+
+	const onSubmit = async (
+		event: React.FormEvent<HTMLFormElement>,
+	): Promise<void> => {
+		event.preventDefault();
+
+		const form = formRef.current;
+		const email = form?.email.value;
+		const password = form?.password.value;
+		const searchParams = createSearchParams(window.location.search);
+
+		setIsSubmitLoading(true);
+		setSubmitDisabled(true);
+		account
+			.login(email, password)
+			.then(async () => {
+				setErrorText("");
+				if (searchParams.get("backToSelect") === "true") {
+					navigate("/selectBoard");
+				} else if (localStorage.getItem(LAST_BOARD_KEY_QS)) {
+					navigate(
+						`/boards/${localStorage.getItem(LAST_BOARD_KEY_QS)}`,
+					);
+				} else {
+					const boardId = await boards.createBoard();
+					if (boardId) {
+						navigate(`/boards/${boardId}`);
+					}
+				}
+				await account.fetchAccountInfo();
+				await account.onLogin?.();
+			})
+			.catch(error => {
+				// setErrorMessage(error.message);
+				console.log(error);
+				console.log(
+					"sign in error:",
+					error?.message === "User not activated",
+				);
+				if (error.status === 400) {
+					openModal(ERROR_SIGNIN_NOTIFY);
+				}
+				if (error?.message === "User not activated") {
+					const form = formRef.current;
+					const email = form?.email.value;
+					navigate({
+						pathname: "/auth/verify",
+						search: createSearchParams({
+							...Object.fromEntries(searchParams),
+							email: email,
+						}).toString(),
+					});
+				} else {
+					setErrorText(t("auth.incorrectEmailOrPassword"));
+				}
+			})
+			.finally(() => {
+				setIsSubmitLoading(false);
+				setSubmitDisabled(false);
+			});
+	};
+
+	const checkEmail = (): boolean => {
+		if (formRef.current && formRef.current.email) {
+			formRef.current.email.value = formRef.current.email.value.trim();
+		}
+
+		const email = formRef.current?.email.value;
+		if (email && !isEmail(email)) {
+			setEmailError(t("auth.enterAValidEmailAddress"));
+			return false;
+		}
+		setEmailError("");
+		return true;
+	};
+
+	const checkForm = (): void => {
+		const form = formRef.current;
+		const email = form?.email.value;
+		const password = form?.password.value;
+
+		if (!email || !password) {
+			setErrorText("");
+			setEmailError("");
+			setSubmitDisabled(true);
+			if (email && !checkEmail()) {
+				return;
+			}
+			return;
+		}
+
+		if (!isEmail(email)) {
+			setSubmitDisabled(true);
+			setEmailError(t("auth.enterAValidEmailAddress"));
+			return;
+		}
+
+		setEmailError("");
+		setSubmitDisabled(false);
+	};
+
+	const dbCheckForm = checkForm;
+
+	return (
+		<>
+			<AuthForm
+				title={t("auth.signIn")}
+				id="signin-form"
+				onSubmit={onSubmit}
+				ref={formRef}
+				showPolicies
+				showAnotherAuthWay
+			>
+				<Input
+					id="email"
+					prefixIcon={<EmailIcon />}
+					placeholder={t("auth.emailPlaceholder")}
+					hasError={!!emailError.length}
+					errorText={emailError}
+					onBlur={checkEmail}
+				/>
+				<Input
+					id="password"
+					prefixIcon={<LockIcon />}
+					placeholder={t("auth.passwordPlaceholder")}
+					password
+					onInput={dbCheckForm}
+					errorText={errorText}
+					hasError={!!errorText}
+				/>
+
+				<div className={styles.btns}>
+					<UiButton
+						type="submit"
+						disabled={submitDisabled}
+						loading={isSubmitLoading}
+						variant="primary"
+						size="lg"
+					>
+						{t("auth.submit")}
+						<Tail />
+					</UiButton>
+
+					<UiButton
+						variant="secondary"
+						className={styles.forgot}
+						onClick={() =>
+							navigate(`/auth/forgot-password${location.search}`)
+						}
+						size="lg"
+					>
+						{t("auth.forgotPassword")}
+					</UiButton>
+
+					<UiButton
+						variant="ghost"
+						onClick={() =>
+							navigate(`/auth/sign-up${location.search}`)
+						}
+						size="lg"
+					>
+						{t("auth.signUpForFree")}
+					</UiButton>
+				</div>
+			</AuthForm>
+			<SigninErrorNotification />
+		</>
+	);
+};

package/src/pages/SigninPage/index.ts

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

package/src/pages/SignupPage/EmailIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface Props {
+	width?: number;
+	height?: number;
+}
+
+export const EmailIcon: React.FC<Props> = ({ width = 20, height = 20 }) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M2.49935 2.5H17.4993C17.7204 2.5 17.9323 2.5878 18.0886 2.74408C18.2449 2.90036 18.3327 3.11232 18.3327 3.33333V16.6667C18.3327 16.8877 18.2449 17.0996 18.0886 17.2559C17.9323 17.4122 17.7204 17.5 17.4993 17.5H2.49935C2.27834 17.5 2.06637 17.4122 1.91009 17.2559C1.75381 17.0996 1.66602 16.8877 1.66602 16.6667V3.33333C1.66602 3.11232 1.75381 2.90036 1.91009 2.74408C2.06637 2.5878 2.27834 2.5 2.49935 2.5V2.5ZM16.666 6.03167L10.0593 11.9483L3.33268 6.01333V15.8333H16.666V6.03167ZM3.75852 4.16667L10.0502 9.71833L16.251 4.16667H3.75852Z"
+				fill="#0D1126"
+				fillOpacity="0.4"
+			/>
+		</svg>
+	);
+};

package/src/pages/SignupPage/LockIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+interface Props {
+	width?: number;
+	height?: number;
+}
+
+export const LockIcon: React.FC<Props> = ({ width = 20, height = 20 }) => {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M15 6.66634H16.6667C16.8877 6.66634 17.0996 6.75414 17.2559 6.91042C17.4122 7.0667 17.5 7.27866 17.5 7.49967V17.4997C17.5 17.7207 17.4122 17.9327 17.2559 18.0889C17.0996 18.2452 16.8877 18.333 16.6667 18.333H3.33333C3.11232 18.333 2.90036 18.2452 2.74408 18.0889C2.5878 17.9327 2.5 17.7207 2.5 17.4997V7.49967C2.5 7.27866 2.5878 7.0667 2.74408 6.91042C2.90036 6.75414 3.11232 6.66634 3.33333 6.66634H5V5.83301C5 4.50693 5.52678 3.23516 6.46447 2.29747C7.40215 1.35979 8.67392 0.833008 10 0.833008C11.3261 0.833008 12.5979 1.35979 13.5355 2.29747C14.4732 3.23516 15 4.50693 15 5.83301V6.66634ZM4.16667 8.33301V16.6663H15.8333V8.33301H4.16667ZM9.16667 11.6663H10.8333V13.333H9.16667V11.6663ZM5.83333 11.6663H7.5V13.333H5.83333V11.6663ZM12.5 11.6663H14.1667V13.333H12.5V11.6663ZM13.3333 6.66634V5.83301C13.3333 4.94895 12.9821 4.10111 12.357 3.47598C11.7319 2.85086 10.8841 2.49967 10 2.49967C9.11594 2.49967 8.2681 2.85086 7.64298 3.47598C7.01786 4.10111 6.66667 4.94895 6.66667 5.83301V6.66634H13.3333Z"
+				fill="#0D1126"
+				fillOpacity="0.4"
+			/>
+		</svg>
+	);
+};