microboard-ui-temp 0.0.3

package/src/pages/SignupPage/PeopleIcon.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+interface Props {
+	width?: number;
+	height?: number;
+}
+
+export function PeopleIcon({ height = 24, width = 24 }: Props) {
+	return (
+		<svg
+			width={width}
+			height={height}
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M4 22C4 19.8783 4.84285 17.8434 6.34315 16.3431C7.84344 14.8429 9.87827 14 12 14C14.1217 14 16.1566 14.8429 17.6569 16.3431C19.1571 17.8434 20 19.8783 20 22H18C18 20.4087 17.3679 18.8826 16.2426 17.7574C15.1174 16.6321 13.5913 16 12 16C10.4087 16 8.88258 16.6321 7.75736 17.7574C6.63214 18.8826 6 20.4087 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"
+				fill="#14151A"
+			/>
+		</svg>
+	);
+}

package/src/pages/SignupPage/SignupPage.module.css

@@ -0,0 +1,52 @@
+.btns {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	margin: 8px 0 40px;
+}
+
+.login {
+	font-weight: 600 !important;
+}
+
+.checkboxWr {
+	margin: 8px 0 24px;
+}
+
+.newsletter {
+	font-family: "Manrope";
+	font-size: 14px;
+	color: #6f717c;
+}
+
+.newsletterLink {
+	color: #4778f5;
+	transition: all 0.35s;
+}
+
+.newsletterLink::after {
+	background-color: #4778f5;
+	height: 1px;
+	bottom: 1px;
+	transition: all 0.35s;
+}
+
+.newsletterLink:hover:after {
+	background-color: #ded1ff;
+	height: 1px;
+	bottom: 1px;
+}
+
+@media screen and (max-width: 640px) {
+	.btns {
+		margin-top: 16px;
+	}
+}
+
+.nameMsg {
+	font-size: 14px;
+	color: rgba(13, 17, 38, 0.4);
+}

package/src/pages/SignupPage/SignupPage.tsx

@@ -0,0 +1,282 @@
+import { useAccount } from "App/useAccount";
+import { AuthForm } from "entities/account";
+import { Icon } from "shared/ui-lib/Icon";
+import { Tail } from "pages/layouts/AuthLayout/Tail";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { createSearchParams, useNavigate } from "react-router-dom";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Checkbox } from "shared/ui-lib/Checkbox";
+import { Input } from "shared/ui-lib/Input/Input";
+import { OuterLink } from "shared/ui-lib/OuterLink";
+import isEmail from "validator/lib/isEmail";
+import styles from "./SignupPage.module.css";
+import { EmailIcon } from "./EmailIcon";
+import { LockIcon } from "./LockIcon";
+import { useUiModalContext } from "shared/ui-lib/UiModal";
+import {
+	ERROR_SIGNUP_NOTIFY,
+	SignupErrorNotification,
+} from "features/Notifications";
+
+export const SignupPage = (): React.ReactElement => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const formRef = React.useRef<HTMLFormElement>(null);
+	const [showNameInput, setShowNameInput] = useState(true);
+	const [username, setUsername] = useState("");
+	const [newsletter, setNewsletter] = useState<boolean>(true);
+	const [isDisabled, setIsDisabled] = useState(true);
+	const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+	const [error, setError] = useState<string>("");
+	const [emailError, setEmailError] = useState<string>("");
+	const account = useAccount();
+	const { openModal } = useUiModalContext();
+
+	const next = (): void => {
+		if (isDisabled) {
+			return;
+		}
+
+		setShowNameInput(false);
+	};
+
+	const checkEmail = (): boolean => {
+		const email = formRef.current?.email.value;
+		if (email && !isEmail(email)) {
+			setEmailError(t("auth.enterAValidEmailAddress"));
+			return false;
+		}
+		setEmailError("");
+		return true;
+	};
+
+	const checkForm = (): boolean => {
+		if (formRef.current && formRef.current.email) {
+			formRef.current.email.value = formRef.current.email.value.trim();
+		}
+
+		const form = formRef.current;
+		if (!form) {
+			setIsDisabled(true);
+			return false;
+		}
+		const email = form?.email?.value;
+		const password = form?.password?.value;
+		if (!email || !password) {
+			setError("");
+			setIsDisabled(true);
+			if (email && !checkEmail()) {
+				return false;
+			}
+			return false;
+		}
+
+		if (!isEmail(email)) {
+			setIsDisabled(true);
+			setEmailError(t("auth.enterAValidEmailAddress"));
+			return false;
+		}
+
+		const MIN_PASSWORD_LENGTH = 8;
+		// const MAX_PASSWORD_LENGTH = 14;
+		if (password.length < MIN_PASSWORD_LENGTH) {
+			setIsDisabled(true);
+			// setError(t("auth.passwordLengthError"));
+			return false;
+		}
+		setError("");
+		setEmailError("");
+		setIsDisabled(false);
+		return true;
+	};
+
+	const checkName = (val: string): void => {
+		if (val.length < 1) {
+			setError(t("auth.nameLengthShortError"));
+			setIsDisabled(true);
+			return;
+		}
+		if (val.length > 50) {
+			setError(t("auth.nameLengthLongError"));
+			setIsDisabled(true);
+			return;
+		}
+		setIsDisabled(false);
+		setError("");
+	};
+
+	const onSubmit = async (
+		event: React.FormEvent<HTMLFormElement>,
+	): Promise<void> => {
+		event.preventDefault();
+		checkName(username);
+		if (!username || error) {
+			return;
+		} else {
+			setShowNameInput(false);
+		}
+		if (!checkForm()) {
+			return;
+		}
+
+		setIsDisabled(true);
+		setIsSubmitLoading(true);
+
+		account
+			.register(
+				event.currentTarget.email.value,
+				event.currentTarget.password.value,
+				username,
+				newsletter,
+			)
+			.then(res => res.data)
+			.catch(error => {
+				if (`${error?.status}` === "409") {
+					setError(t("auth.userAlreadyExists"));
+				}
+			})
+			.then(data => {
+				if (data) {
+					navigate({
+						pathname: "/auth/verify",
+						search: createSearchParams({
+							...Object.fromEntries(
+								new URLSearchParams(location.search),
+							),
+							userId: `${data.id}`,
+							email: data.email,
+						}).toString(),
+					});
+				}
+			})
+			.catch(error => {
+				// setErrorMessage(error.message);
+				if (error.status === 500 || error.status === 400) {
+					openModal(ERROR_SIGNUP_NOTIFY);
+				}
+			})
+			.finally(() => {
+				setIsDisabled(false);
+				setIsSubmitLoading(false);
+			});
+	};
+
+	const onNewsletterChange = (checked: boolean): void =>
+		setNewsletter(checked);
+
+	// const dbCheckForm = checkForm;
+
+	return (
+		<>
+			<AuthForm
+				onSubmit={onSubmit}
+				ref={formRef}
+				id="sign-up"
+				title={t("auth.signUpForFree")}
+				showAnotherAuthWay
+			>
+				{showNameInput ? (
+					<Input
+						id="name"
+						onChange={ev => {
+							setUsername(ev.target.value);
+							checkName(ev.target.value);
+						}}
+						prefixIcon={
+							<Icon iconName="human" width={20} height={20} />
+						}
+						iconColor="rgba(13, 17, 38, 0.4)"
+						placeholder={t("auth.name")}
+						hasError={!!error}
+						errorText={error}
+						helperText={error ? "" : t("auth.nameDesc")}
+					/>
+				) : (
+					<>
+						<Input
+							prefixIcon={<EmailIcon />}
+							id="email"
+							type="text"
+							placeholder={t("auth.emailPlaceholder")}
+							onBlur={checkForm}
+							hasError={!!emailError}
+							errorText={emailError}
+						/>
+						<Input
+							prefixIcon={<LockIcon />}
+							id="password"
+							errorText={error}
+							password
+							hasError={!!error}
+							placeholder={t("auth.passwordPlaceholder")}
+							helperText={t("auth.passwordAtLeast")}
+							onInput={checkForm}
+						/>
+					</>
+				)}
+
+				<div className={styles.btns}>
+					{showNameInput ? (
+						<UiButton
+							variant="primary"
+							disabled={isDisabled}
+							type="button"
+							onClick={ev => {
+								ev.preventDefault();
+								next();
+							}}
+							size="lg"
+						>
+							{t("auth.next")}
+						</UiButton>
+					) : (
+						<>
+							<Checkbox
+								checked
+								onChange={onNewsletterChange}
+								className={styles.checkboxWr}
+							>
+								<span className={styles.newsletter}>
+									{t("auth.newsletter")}
+									<OuterLink
+										href={
+											"https://microboard.io/privacy-policy"
+										}
+										className={styles.newsletterLink}
+									>
+										{" "}
+										Microboard.io
+									</OuterLink>
+								</span>
+							</Checkbox>
+							<UiButton
+								type="submit"
+								disabled={isDisabled}
+								loading={isSubmitLoading}
+								variant="primary"
+								size="lg"
+							>
+								{t("auth.submit")}
+								<Tail />
+							</UiButton>
+						</>
+					)}
+					<UiButton
+						variant="ghost"
+						onClick={ev => {
+							ev.preventDefault();
+							navigate(`/auth/sign-in${location.search}`);
+						}}
+						className={styles.login}
+						type="button"
+						size="lg"
+					>
+						{t("auth.signIn")}
+					</UiButton>
+				</div>
+			</AuthForm>
+			<SignupErrorNotification />
+		</>
+	);
+};

package/src/pages/SignupPage/index.ts

@@ -0,0 +1 @@
+export { SignupPage as SignupView } from "./SignupPage";

package/src/pages/TestPage.tsx

@@ -0,0 +1,52 @@
+import { getApiUrl } from "Config";
+import React, { useEffect, useRef } from "react";
+
+export const TestPage: React.FC = () => {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const script1 = document.createElement("script");
+		script1.src = `${getApiUrl()}/embed.js`;
+		document.body.appendChild(script1);
+
+		return () => {
+			document.body.removeChild(script1);
+		};
+	}, []);
+
+	return (
+		<div
+			style={{
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+			}}
+		>
+			<button
+				style={{ border: "1px solid black" }}
+				onClick={() =>
+					(window as any).microboardOpener.selectBoard({
+						success: data => {
+							console.log("SUCCESS", data);
+							const { visitorsLink } = data;
+							if (containerRef.current) {
+								containerRef.current.innerHTML = `<iframe src="${visitorsLink}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>`;
+							}
+						},
+						error: console.error,
+						cancel: console.warn,
+					})
+				}
+			>
+				Открыть окно
+			</button>
+			<div
+				style={{
+					flexGrow: 1,
+				}}
+				ref={containerRef}
+			/>
+		</div>
+	);
+};

package/src/pages/VerifyMailPage/VerifyMailPage.module.css

@@ -0,0 +1,20 @@
+.checkEmail {
+	align-self: flex-start;
+	font-size: 14px;
+
+	margin-bottom: 10px;
+}
+
+.email {
+	font-weight: 700;
+}
+
+.btns {
+	width: 100%;
+
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	margin-top: 32px;
+}