From 37e9027cda925981601736d91787203cb3e5973a Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Fri, 7 Jun 2024 13:13:03 +0200
Subject: [PATCH] go back and login button on access denied
---
.../AccessDeniedModal.component.tsx | 45 ++++++++++++++++---
.../ModalLayout/ModalLayout.component.tsx | 6 ++-
src/constants/common.ts | 2 +
3 files changed, 45 insertions(+), 8 deletions(-)
diff --git a/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx b/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx
index 3b0b9333..970bff09 100644
--- a/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx
+++ b/src/components/FunctionalArea/Modal/AccessDeniedModal/AccessDeniedModal.component.tsx
@@ -1,14 +1,47 @@
-import Link from 'next/link';
import React from 'react';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { loginUserSelector } from '@/redux/user/user.selectors';
+import { openLoginModal } from '@/redux/modal/modal.slice';
+import { MINUS_ONE } from '@/constants/common';
+import { Button } from '@/shared/Button';
export const AccessDeniedModal: React.FC = () => {
+ const dispatch = useAppDispatch();
+ const login = useAppSelector(loginUserSelector);
+
+ const isAnonymousLogin = !login;
+
+ const handleGoBack = async (e: React.FormEvent<HTMLButtonElement>): Promise<void> => {
+ e.preventDefault();
+ window.history.go(MINUS_ONE);
+ };
+
+ const handleLogin = async (e: React.FormEvent<HTMLButtonElement>): Promise<void> => {
+ e.preventDefault();
+ dispatch(openLoginModal());
+ };
+
return (
<div className="w-[400px] border border-t-[#E1E0E6] bg-white p-[24px]">
- <div className="mb-10 text-right">
- <Link href="/" className="ml-auto text-xs">
- Contact admin
- </Link>
- </div>
+ {isAnonymousLogin && (
+ <div className="grid grid-cols-2 gap-2">
+ <div className="mb-10">
+ <Button
+ className="ring-transparent hover:ring-transparent"
+ variantStyles="secondary"
+ onClick={handleGoBack}
+ >
+ Go back to previous page
+ </Button>
+ </div>
+ <div className="mb-10">
+ <Button className="w-full text-center" onClick={handleLogin}>
+ Login to your account
+ </Button>
+ </div>
+ </div>
+ )}
</div>
);
};
diff --git a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx b/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
index 044fc845..b2630c62 100644
--- a/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
+++ b/src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx
@@ -34,13 +34,15 @@ export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
)}
>
<div className="flex items-center justify-between bg-white p-[24px] text-xl">
- {modalName === 'error-report' && (
+ {(modalName === 'error-report' || modalName === 'access-denied') && (
<div className="font-bold text-red-500">
<Icon name="info" className={twMerge('mr-4 fill-red-500')} />
{modalTitle}
</div>
)}
- {modalName !== 'error-report' && <div> {modalTitle} </div>}
+ {modalName !== 'error-report' && modalName !== 'access-denied' && (
+ <div> {modalTitle} </div>
+ )}
{modalName !== 'logged-in-menu' && (
<button type="button" onClick={handleCloseModal} aria-label="close button">
diff --git a/src/constants/common.ts b/src/constants/common.ts
index c3a1b1d0..9bdcd648 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -2,6 +2,8 @@ export const SIZE_OF_EMPTY_ARRAY = 0;
export const SIZE_OF_ARRAY_WITH_FOUR_ELEMENTS = 4;
export const SIZE_OF_ARRAY_WITH_ONE_ELEMENT = 1;
+export const MINUS_ONE = -1;
+
export const ZERO = 0;
export const FIRST_ARRAY_ELEMENT = 0;
--
GitLab