microboard-ui-temp 0.0.3

package/src/pages/RestorePasswordPage/RestorePasswordPage.tsx

@@ -0,0 +1,197 @@
+import { useAccount } from "App/useAccount";
+import { Tail } from "pages/layouts/AuthLayout/Tail";
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	Link as RRDLink,
+	useNavigate,
+	useSearchParams,
+} from "react-router-dom";
+import { UiButton } from "shared/ui-lib/UiButton";
+import { Input } from "shared/ui-lib/Input";
+import { Link } from "shared/ui-lib/Link";
+import { PasswordChanged } from "features/Widgets/form-notifications/password-changed";
+import styles from "./RestorePasswordPage.module.css";
+import { AuthForm } from "entities/account";
+
+export const RestorePasswordPage: React.FC = () => {
+	const { t } = useTranslation();
+	const [isDisabled, setIsDisabled] = useState(true);
+	const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+	const [newPassError, setNewPassError] = useState<string>("");
+	const [error, setError] = useState<string>("");
+	const formRef = useRef<HTMLFormElement>(null);
+	const [searchParams, _] = useSearchParams();
+	const [isPasswordChanged, setIsPasswordChanged] = useState<boolean>(false);
+	const navigate = useNavigate();
+	const account = useAccount();
+
+	const checkForm = (): void => {
+		const form = formRef.current;
+		if (!form) {
+			setIsDisabled(true);
+			setError("");
+			return;
+		}
+		const newPassword = form?.newPassword?.value;
+		const repeatedPassword = form?.repeatedPassword?.value;
+		if (!newPassword || !repeatedPassword) {
+			setIsDisabled(true);
+			setError("");
+			return;
+		}
+
+		const MIN_PASSWORD_LENGTH = 8;
+
+		if (repeatedPassword.length < MIN_PASSWORD_LENGTH) {
+			setIsDisabled(true);
+			setError("");
+			return;
+		}
+
+		if (newPassword !== repeatedPassword) {
+			setIsDisabled(true);
+			setError(t("auth.passwordDoNotMatch"));
+			return;
+		}
+		setError("");
+		setIsDisabled(false);
+	};
+
+	const checkNewPassword = (): void => {
+		const form = formRef.current;
+		if (!form) {
+			setIsDisabled(true);
+			return;
+		}
+		const newPassword = form?.newPassword?.value;
+
+		const MIN_PASSWORD_LENGTH = 8;
+
+		if (newPassword.length < MIN_PASSWORD_LENGTH) {
+			setIsDisabled(true);
+			return;
+		}
+
+		setNewPassError("");
+	};
+
+	const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		const form = formRef.current;
+
+		if (!form) {
+			return;
+		}
+
+		if (!searchParams.get("token")) {
+			return;
+		}
+
+		setIsDisabled(true);
+		setIsSubmitLoading(true);
+		account
+			.restorePassword(searchParams.get("token")!, form.newPassword.value)
+			.then(() => {
+				setIsPasswordChanged(true);
+			})
+			.catch(error => {
+				if (`${error?.status}` === "409") {
+					setError(t("auth.passwordMustBeDifferent"));
+					return;
+				}
+				setError(error?.message || "Unhandled error");
+			})
+			.finally(() => {
+				setIsDisabled(false);
+				setIsSubmitLoading(false);
+			});
+	};
+
+	if (isPasswordChanged) {
+		return (
+			<div className={styles.passwordChanged}>
+				<PasswordChanged />
+				<UiButton
+					onClick={() => navigate("/auth/sign-in")}
+					variant="primary"
+					size="lg"
+					className={styles.btn}
+				>
+					{t("auth.backToLogIn")}
+				</UiButton>
+			</div>
+		);
+	}
+
+	if (!searchParams.get("token")) {
+		console.log("token not provided", searchParams);
+
+		return (
+			<div>
+				<p className={styles.error}>
+					{t("auth.restorationTokenIsNotProvided")}
+				</p>
+				<Link to="/auth/forgot-password">
+					{t("auth.restorePassword")}
+				</Link>
+				<UiButton variant="primary" size="lg">
+					<RRDLink to="/auth/sign-in" className={styles.link}>
+						{t("common.backToMain")}
+					</RRDLink>
+				</UiButton>
+			</div>
+		);
+	}
+
+	return (
+		<AuthForm
+			ref={formRef}
+			onSubmit={onSubmit}
+			title={t("auth.resetPassword")}
+			id="restore-password"
+		>
+			<Input
+				password
+				label={t("auth.passwordMustBeDifferent")}
+				placeholder={t("auth.newPassword")}
+				id="newPassword"
+				errorText={newPassError}
+				hasError={!!newPassError.length}
+				onBlur={() => {
+					checkForm();
+					checkNewPassword();
+				}}
+			/>
+			<Input
+				password
+				placeholder={t("auth.newPassword")}
+				id="repeatedPassword"
+				onInput={checkForm}
+				errorText={error}
+				helperText={t("auth.passwordAtLeast")}
+				hasError={!!error.length}
+			/>
+			<div className={styles.btns}>
+				<UiButton
+					variant="primary"
+					disabled={isDisabled}
+					type="submit"
+					className={styles.submit}
+					loading={isSubmitLoading}
+					size="lg"
+				>
+					{t("auth.submit")}
+					<Tail />
+				</UiButton>
+				<UiButton
+					variant="ghost"
+					onClick={() => navigate("/auth/sign-in")}
+					size="lg"
+				>
+					{t("auth.backToLogIn")}
+				</UiButton>
+			</div>
+		</AuthForm>
+	);
+};

package/src/pages/RestorePasswordPage/index.ts

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

package/src/pages/SelectBoardPage/SelectBoardPage.module.css

@@ -0,0 +1,247 @@
+.container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	max-height: 100vh;
+	flex-direction: column;
+	margin: 0 auto;
+	padding: 16px;
+	gap: 12px;
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@media (min-width: 768px) {
+	.container {
+		max-width: 800px;
+		border-radius: 0;
+		box-shadow: none;
+	}
+}
+
+.folders {
+	flex: 1 1 100%;
+	overflow: auto;
+	height: calc(100% - 100px);
+}
+
+.folders > * {
+	padding: 0;
+}
+
+.folders::-webkit-scrollbar {
+	appearance: none;
+	width: 4px;
+}
+
+.folders::-webkit-scrollbar-button {
+	display: none;
+}
+
+.folders::-webkit-scrollbar-thumb {
+	display: block;
+	background-color: rgba(222, 225, 232, 1);
+	border-radius: 2px;
+}
+
+.addContainer {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.add {
+	padding: 8px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	background: #924fe8;
+	color: #ffffff;
+	border: none;
+	box-shadow: 0px 1px 2px rgba(20, 21, 26, 0.05);
+	border-radius: 10px;
+}
+
+.add:hover {
+	background: #7c3aed;
+}
+
+.search {
+	display: flex;
+	align-items: center;
+	padding-right: 10px;
+	border: 1px solid #dee0e3;
+	border-radius: 8px;
+	background-color: #ffffff;
+	cursor: text;
+}
+
+.search:focus-within {
+	border: 1px solid #b78af0;
+	box-shadow: 0 2px 6px rgba(200, 178, 255, 0.5);
+}
+
+.search input {
+	flex: 1;
+	padding: 10px 14px;
+	border: none;
+	outline: none;
+	background: none;
+	font-size: 1.5rem;
+	font-weight: 300;
+}
+
+.search input::placeholder {
+	color: #9ca3af;
+	font-weight: 200;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.logo {
+	display: flex;
+	margin-left: 4px;
+}
+
+.embedBoardIcon {
+	margin: 0px 4px;
+}
+
+.headerTitle {
+	margin: 0px 8px;
+}
+
+.title {
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+	color: var(--text-base-primary);
+}
+
+.header h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	color: #111827;
+}
+
+.header .profile {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background-color: #e9eaec;
+	color: #696b76;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.profile.unAuth {
+	background-color: #717684;
+	color: white;
+}
+
+.selectorsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-top: 6px;
+	margin-bottom: 18px;
+}
+
+.selectorText {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+}
+
+.buttonContainer {
+	display: flex;
+	gap: 16px;
+}
+
+.button {
+	padding: 10px 12px;
+	border: none;
+	border-radius: 12px;
+	font-size: 14px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+.button.primary {
+	background: var(--text-base-primary);
+	box-shadow: 0px 1px 2px rgba(20, 21, 26, 0.05);
+	color: #fff;
+}
+
+.button.secondary {
+	background-color: #f3f4f6;
+	color: #111827;
+}
+
+.button.primary:hover {
+	background-color: #333;
+}
+
+.button.secondary:hover {
+	background-color: #e5e7eb;
+}
+
+.infoMessage {
+	display: flex;
+	flex-direction: column;
+	background-color: #fef4ec;
+	color: #f48e2f;
+	padding: 12px;
+	border-radius: 8px;
+	gap: 2px;
+	font-size: 14px;
+}
+
+.infoMessage div {
+	margin: 0;
+	display: flex;
+	gap: 2px;
+	align-items: center;
+	color: var(--text-base-primary);
+}
+
+.infoMessage .secondary {
+	color: var(--text-base-secondary);
+}
+
+.infoMessage.error {
+	background-color: #fdf2f1;
+	color: #e6483d;
+}
+
+.selected {
+	display: flex;
+	gap: 6px;
+	padding: 6px 8px;
+	background-color: rgb(246, 241, 252);
+	border-radius: 10px;
+}
+
+.selectedIcon {
+	color: rgb(105, 107, 117);
+	display: grid;
+	place-items: center;
+}