feat: added logic and components for authentication and registration …

…popups

package.json

@@ -20,6 +20,7 @@
 	},
 	"dependencies": {
 		"dotenv": "^16.3.1",
+		"js-cookie": "^3.0.5",
 		"normalize.css": "8.0.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -39,6 +40,7 @@
 		"@testing-library/jest-dom": "6.1.4",
 		"@testing-library/react": "14.0.0",
 		"@types/jest": "29.5.6",
+		"@types/js-cookie": "^3.0.6",
 		"@types/node": "20.8.5",
 		"@types/react": "^18.2.15",
 		"@types/react-dom": "^18.2.7",

src/App.css

@@ -43,3 +43,10 @@
 /* .read-the-docs {
 	color: #888;
 } */
+
+.app {
+	background: white;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}

src/App.tsx

@@ -8,7 +8,8 @@ import { useAuth } from './hooks/use-auth.ts';
 import Product from '@pages/product/index.tsx';
 import Catalog from '@pages/catalog/index.tsx';
 import { URLS } from '@data/constants.ts';
-
+import PopupLogin from '@components/popups/popup-login';
+import PopupRegistration from '@components/popups/popup-registration';
 // импорт временных массивов для отображения каталогов и продуктов
 // временное решение для верстки, потом удалить
 
@@ -22,18 +23,22 @@ function App() {
 	const { isLoggedIn } = useAuth();
 
 	return (
-		<Layout>
-			<Routes>
-				<Route path="/" element={<Home />} />
-				<Route path={URLS.CATALOG} element={<Catalog />} />
-				<Route
-					path={URLS.PROFILE}
-					element={<ProtectedRoute element={Profile} loggedIn={isLoggedIn} />}
-				/>
-				<Route path="/catalog/category/subcategory/id" element={<Product />} />
-				<Route path={URLS.LOGIN} element={<Login />} />
-			</Routes>
-		</Layout>
+		<div className="app">
+			<Layout>
+				<Routes>
+					<Route path="/" element={<Home />} />
+					<Route path={URLS.CATALOG} element={<Catalog />} />
+					<Route
+						path={URLS.PROFILE}
+						element={<ProtectedRoute element={Profile} loggedIn={isLoggedIn} />}
+					/>
+					<Route path="/catalog/:category/:subcategory/:id" element={<Product />} />
+					<Route path={URLS.LOGIN} element={<Login />} />
+				</Routes>
+			</Layout>
+			<PopupLogin />
+			<PopupRegistration />
+		</div>
 	);
 }
 

src/components/Button/button.module.scss

@@ -23,6 +23,11 @@
 	}
 
 	transition: 0.5s;
+
+	&:disabled {
+		background-color: black;
+		cursor: not-allowed;
+	}
 }
 
 .green-button__active {

src/components/Button/index.tsx

@@ -5,16 +5,28 @@ type ButtonProps = {
 	buttonStyle: string;
 	classNameActive?: string;
 	onClick?: () => void;
+	disabled?: boolean;
+	classNames?: string;
+	type?: 'button' | 'submit' | 'reset';
 };
 
-const Button = ({ buttonText, buttonStyle, classNameActive, onClick }: ButtonProps) => {
+const Button = ({
+	buttonText,
+	buttonStyle,
+	classNameActive,
+	onClick,
+	disabled,
+	classNames,
+	type,
+}: ButtonProps) => {
 	return (
 		<button
-			type="button"
-			className={`${styles[buttonStyle]}  ${
+			type={type ? type : 'button'}
+			className={`${styles[buttonStyle]} ${
 				classNameActive ? styles[classNameActive] : ''
-			}`}
+			} ${classNames ? classNames : ''}`}
 			onClick={onClick}
+			disabled={disabled}
 		>
 			{buttonText}
 		</button>

src/components/navigation-icons/index.tsx

@@ -2,24 +2,49 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useAuth } from '../../hooks/use-auth.ts';
 import styles from './navigation-icons.module.scss';
+import { usePopup } from '@hooks/use-popup.ts';
 
 const NavigationIcons: React.FC = () => {
 	const { isLoggedIn } = useAuth();
+	const { handleOpenPopup } = usePopup();
 
 	return (
 		<div className={styles.navigation__icons}>
-			<Link
-				className={`${styles.navigation__icon} ${styles.navigation__icon_search}`}
-				to={''}
-			></Link>
-			<Link
-				className={`${styles.navigation__icon} ${styles.navigation__icon_busket}`}
-				to={''}
-			></Link>
-			<Link
-				className={`${styles.navigation__icon} ${styles.navigation__icon_profile}`}
-				to={isLoggedIn ? '/profile' : ''}
-			></Link>
+			{isLoggedIn ? (
+				<div className={styles['navigation__iconsContainer']}>
+					<button
+						className={`${styles.navigation__icon} ${styles.navigation__icon_search}`}
+						type="button"
+						onClick={() => handleOpenPopup('openPopupLogin')}
+					/>
+					<Link
+						className={`${styles.navigation__icon} ${styles.navigation__icon_busket}`}
+						to={''}
+					></Link>
+					<Link
+						className={`${styles.navigation__icon} ${styles.navigation__icon_profile}`}
+						to={isLoggedIn ? '/profile' : ''}
+					></Link>
+				</div>
+			) : (
+				<div className={styles['navigation__iconsContainer']}>
+					<button
+						className={`${styles.navigation__icon} ${styles.navigation__icon_search}`}
+						type="button"
+						onClick={() => handleOpenPopup('openPopupLogin')}
+					/>
+					<button
+						className={`${styles.navigation__icon} ${styles.navigation__icon_busket}`}
+						type="button"
+						onClick={() => handleOpenPopup('openPopupLogin')}
+					/>
+					<button
+						className={`${styles.navigation__icon} ${styles.navigation__icon_profile}`}
+						type="button"
+						onClick={() => handleOpenPopup('openPopupLogin')}
+					/>
+				</div>
+			)}
 		</div>
 	);
 };

src/components/navigation-icons/navigation-icons.module.scss

@@ -1,7 +1,7 @@
 @use '../../scss/mixins' as *;
 @use '../../scss/base.scss' as *;
 
-.navigation__icons {
+.navigation__iconsContainer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -15,6 +15,10 @@
 
 .navigation__icon {
 	@extend %header-icon;
+
+	border: none;
+	background-color: white;
+	background-position: center;
 }
 
 .navigation__icon_search {

src/components/popup/index.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import styles from './popup.module.scss';
+
+type PopupProps = {
+	openPopup: boolean;
+	onClickClose: () => void;
+	children: ReactNode;
+	additionalClasses?: string;
+};
+
+const Popup: React.FC<PopupProps> = ({
+	openPopup,
+	onClickClose,
+	children,
+	additionalClasses,
+}) => {
+	return (
+		<div className={openPopup ? styles['popup__open'] : styles['popup']}>
+			<div className={`${styles['popup__inner']} ${additionalClasses}`}>
+				<button
+					className={styles['popup__button']}
+					type="button"
+					onClick={onClickClose}
+				/>
+				{children}
+			</div>
+		</div>
+	);
+};
+
+export default Popup;

src/components/popup/popup.module.scss

@@ -0,0 +1,47 @@
+@use '../../scss/mixins' as *;
+@use '../../scss/_variables' as *;
+
+.popup {
+	display: none;
+}
+
+.popup__open {
+	display: flex;
+	justify-content: center;
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	background: rgb(3 3 3 / 60%);
+	backdrop-filter: blur(10px);
+	z-index: 1111;
+}
+
+.popup__inner {
+	margin-top: 124px;
+	position: relative;
+	border-radius: 16px;
+	background-color: white;
+	height: fit-content;
+	box-sizing: border-box;
+	box-shadow: 0 0 50px rgb(255 255 255 / 73%);
+	width: fit-content;
+}
+
+.popup__button {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	width: 24px;
+	height: 24px;
+	flex-shrink: 0;
+	fill: var(--inactive, #b8b8b8);
+	background-image: url('../../assets/images/button-close-popup.svg');
+	background-position: center;
+	border: none;
+	transition: 0.3s;
+	cursor: pointer;
+
+	&:hover {
+		opacity: 0.7;
+	}
+}