feat(frontend): add logout confirmation bb-365 (#382)

* feat: slicing form design ui bb-9

* fix: remove lint css root folder bb-0

* feat: make toggle visibility password bb-9

* feat: add user data in redux store bb-9

* feat: make validation confirm password bb-9

* fix: refactor unused code and comment bb-9

* style: adjust css variabel to match with other bb-9

* refactor: make other props instead className bb-9

* style: adjust css variabel conflict bb-9

* chore: release-1.6.0 (#95)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* refactor: using getValidClassNames and seperate each style in component bb-9

* fix: handle conflict in app.tsx bb-9

* style: change all changelog file bb-9

* refactor: remove unused img and code bb-9

* style: change folder structure and handle typo name in class bb-9

* fix: solve UI issue in # UI bb-9

* feat: redirect user to root after # bb-9

* feat: navigate user to root path bb-9

* refactor: remove use navigate in # form bb-9

* feat: add error handling # bb-9

* fix: up to date package-lock with main bb-9

* feat: remove try catch block bb-9

* feat: follow rules and messages from doc validation bb-209

* feat: disabled button when schema invalid bb-209

* feat: add mode onchange in react hook form bb-209

* refactor: remove unused user validation schema bb-209

* refactor: remove unused validation & seperate const for user bb-209

* fix: remove confirm input in schema validation bb-209

* refactor: remove duplicate message for confirm input bb-209

* style: add type in variabel no error bb-209

* refactor: remove unused message in user validation bb-209

* style: change email placeholder bb-209

* style: change no error input const in user modules bb-209

* style: create constan folder in user module bb-209

* fix: show error popup auth & reorder password validation bb-209

* chore: change package-lock.json bb-209

* fix: change regex rule for email bb-209

* fix: change email rule validation bb-209

* refactor: make notification as global for any page bb-209

* feat: show logout confirmation bb-365

* refactor: wrap logout confirm popup using dialog tag bb-365

* fix: set false logout popup as default state bb-365

* style: add class for img tag bb-365

* style: change variabel popup into meaningful bb-365

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Farid Shabanov <61088675+fshabanov@users.noreply.github.com>

apps/frontend/src/libs/components/components.ts

@@ -8,6 +8,7 @@ export { Input } from "./input/input.js";
 export { Link } from "./link/link.js";
 export { Loader } from "./loader/loader.js";
 export { Notification } from "./notification/notification.js";
+export { Popup } from "./popup/popup.js";
 export { ProgressBar } from "./progress-bar/progress-bar.js";
 export { ProtectedRoute } from "./protected-route/protected-route.js";
 export { QuizCategoriesForm } from "./quiz-categories-form/quiz-categories-form.js";

apps/frontend/src/libs/components/popup/popup.tsx

@@ -0,0 +1,50 @@
+import { Button } from "~/libs/components/components.js";
+
+import styles from "./styles.module.css";
+
+type Properties = {
+	closeButtonLabel: string;
+	confirmButtonLabel: string;
+	icon: string;
+	isOpen: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+	title: string;
+};
+
+const Popup: React.FC<Properties> = ({
+	closeButtonLabel,
+	confirmButtonLabel,
+	icon,
+	isOpen = false,
+	onClose,
+	onConfirm,
+	title,
+}: Properties) => {
+	return (
+		<dialog className={styles["logout-dialog"]} open={isOpen}>
+			<div className={styles["popup-container"]}>
+				<div className={styles["contents-container"]}>
+					{icon && (
+						<div className={styles["icon"]}>
+							<img alt={icon} className={styles["img"]} src={icon} />
+						</div>
+					)}
+					<div className={styles["contents"]}>
+						<h1 className={styles["title"]}>{title}</h1>
+						<div className={styles["buttons-content"]}>
+							<Button label={closeButtonLabel} onClick={onClose} />
+							<Button
+								isPrimary={false}
+								label={confirmButtonLabel}
+								onClick={onConfirm}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</dialog>
+	);
+};
+
+export { Popup };

apps/frontend/src/libs/components/popup/styles.module.css

@@ -0,0 +1,36 @@
+.logout-dialog {
+	width: 100vw;
+	border: none;
+}
+
+.popup-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100vw;
+	height: 100vh;
+	background-color: rgb(0 0 0 / 50%);
+}
+
+.contents-container {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+	align-items: center;
+	padding: 40px 60px;
+	background-color: white;
+	border-radius: 35px;
+}
+
+.icon .img {
+	width: 100px;
+}
+
+.buttons-content {
+	display: flex;
+	gap: 16px;
+	margin-top: 40px;
+}

apps/frontend/src/libs/components/sidebar/sidebar.tsx

@@ -1,10 +1,13 @@
-import { Button } from "~/libs/components/components.js";
+import runImg from "~/assets/img/run.svg";
+import { Button, Popup } from "~/libs/components/components.js";
 import { SIDEBAR_ITEMS } from "~/libs/constants/constants.js";
+import { PopupMessage } from "~/libs/enums/enums.js";
 import { getValidClassNames } from "~/libs/helpers/helpers.js";
 import {
 	useAppDispatch,
 	useCallback,
 	useLocation,
+	useState,
 } from "~/libs/hooks/hooks.js";
 import { actions as authActions } from "~/modules/auth/auth.js";
 
@@ -24,10 +27,15 @@ const Sidebar: React.FC<Properties> = ({
 
 	const dispatch = useAppDispatch();
 
-	const handleSignOut = useCallback(
-		() => void dispatch(authActions.logOut()),
-		[dispatch],
-	);
+	const [isLogoutPopupOpen, setIsLogoutPopupOpen] = useState<boolean>(false);
+
+	const handleSignOut = useCallback(() => {
+		setIsLogoutPopupOpen((previousState) => !previousState);
+	}, [setIsLogoutPopupOpen]);
+
+	const handleConfirmLogout = useCallback(() => {
+		void dispatch(authActions.logOut());
+	}, [dispatch]);
 
 	return (
 		<div
@@ -64,6 +72,16 @@ const Sidebar: React.FC<Properties> = ({
 				})}
 				<Button label="Sign out" onClick={handleSignOut} />
 			</div>
+
+			<Popup
+				closeButtonLabel="No"
+				confirmButtonLabel="Yes"
+				icon={runImg}
+				isOpen={isLogoutPopupOpen}
+				onClose={handleSignOut}
+				onConfirm={handleConfirmLogout}
+				title={PopupMessage.LOGOUT_CONFIRM}
+			/>
 		</div>
 	);
 };

apps/frontend/src/libs/enums/enums.ts

@@ -1,6 +1,7 @@
 export { AppRoute } from "./app-route.enum.js";
 export { DataStatus } from "./data-status.enum.js";
 export { NotificationMessage } from "./notification-message.enum.js";
+export { PopupMessage } from "./popup-message.enum.js";
 export {
 	APIPath,
 	AppEnvironment,

apps/frontend/src/libs/enums/popup-message.enum.ts

@@ -0,0 +1,5 @@
+const PopupMessage = {
+	LOGOUT_CONFIRM: "Are you sure you want to exit?",
+} as const;
+
+export { PopupMessage };