feat: add user change password

src/components/CancelModal.tsx

@@ -1,7 +1,7 @@
 interface CancelModalProps {
     handleConfirmCancel: () => void;
     setCancelModal: (value: boolean) => void;
-}
+};
 
 function CancelModal({
     handleConfirmCancel,

src/components/LoginCard/UserForms/index.tsx

@@ -35,6 +35,8 @@ import {
     MessageChecklist,
 } from '../styles';
 import { Popup } from '../PopUpRegisterSuccess/styles';
+import TermsModal from '../../Portal/ProfileModal/TermsModal';
+import PolicyModal from '../../Portal/ProfileModal/PolicyModal';
 
 export const UserForms = (props: any): JSX.Element => {
     const [hasError, setHasError] = useState(false);
@@ -44,8 +46,18 @@ export const UserForms = (props: any): JSX.Element => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [isFormSubmitted, setIsFormSubmitted] = useState(false);
     const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+    const [policyModal, setPolicyModal] = useState<boolean>(false);
+    const [termsModal, setTermsModal] = useState<boolean>(false);
 
 
+    const handlePolicyModal = () => {
+        setPolicyModal(true);
+    };
+
+    const handleTermsModal = () => {
+        setTermsModal(true);
+    };
+
     const characters = /^(?=.{8,20}$).*$/;
     const letters = /^(?=.*[a-z])(?=.*[A-Z]).*$/;
     const number = /^(?=.*\d).*$/;
@@ -362,8 +374,8 @@ export const UserForms = (props: any): JSX.Element => {
                             <CheckboxInput {...register('privacyTerms')} />
                             <TermsLink>
                                 {/* TODO: Direcionar para as páginas correspondentes após criadas */}
-                                Li e aceito os <a href="/">Termos de Uso</a> e{' '}
-                                <br /> <a href="/">Política de Privacidade</a>
+                                Li e aceito os <a onClick={handleTermsModal}>Termos de Uso</a> e{' '}
+                                <br /> <a onClick={handlePolicyModal}>Política de Privacidade</a>
                             </TermsLink>
                         </Label>
                         {hasError && (
@@ -405,6 +417,8 @@ export const UserForms = (props: any): JSX.Element => {
                 />
             ) : null}
             <PopupHandler setPopup={setPopup} Popup={Popup} />
+            {termsModal && <TermsModal setTermsModal={setTermsModal} />}
+            {policyModal && <PolicyModal setPolicyModal={setPolicyModal} />}
         </>
     );
 };

src/components/Portal/Menu/index.tsx

@@ -44,7 +44,7 @@ const Menu = () => {
         <Container>
             <PopUp>
                 <MenuItems>
-                    <li onClick={handleNavigation}
+                    {/* <li onClick={handleNavigation}
                         onKeyDown={handleKeyDown}
                         tabIndex={0}
                     >
@@ -53,7 +53,7 @@ const Menu = () => {
                         Meu perfil
                     </li>
 
-                    <Border />
+                    <Border /> */}
 
                     {auth.user.type !== 'USER' && (
                         <li
@@ -66,7 +66,7 @@ const Menu = () => {
                             Anunciar vagas
                         </li>
                     )}
-                    <Border />
+                    {/* <Border /> */}
                     <li
                         onClick={() => {
                             setVisible(!visible);
@@ -89,6 +89,7 @@ const Menu = () => {
                                 <li
                                     tabIndex={0}
                                     onKeyDown={handleKeyDown}
+                                    onClick={() => navigate('/change-password')}
                                 >
                                     <img
                                         src={PasswordIcon}
@@ -99,14 +100,14 @@ const Menu = () => {
                             </div>
                         </>
                     )}
-                    <Border />
+                    {/* <Border />
                     <li
                         tabIndex={0}
                         onKeyDown={handleKeyDown}
                     >
                         <img src={TermsIcon} alt="termos" />
                         Termo de uso e Privacidade
-                    </li>
+                    </li> */}
                     <Border />
                     <li onClick={logout}
                         onKeyDown={handleKeyDown}

src/components/Portal/ProfileModal/CancelModal/index.tsx

@@ -7,6 +7,7 @@ import { useContext } from 'react';
 
 interface CancelModalProps {
     setCancelModal: (value: boolean) => void;
+    open: boolean;
 }
 
 function CancelModal({ setCancelModal }: CancelModalProps) {

src/components/Portal/ProfileModal/CancelModal/styles.ts

@@ -8,11 +8,8 @@ export const ModalContent = styled.div`
     padding: 60px 30px;
     gap: 20px;
     position: fixed;
-
-    background: #FDFFFC;
-
-    border: 2px solid ${({ theme }) => theme.colors.primaryDark};
-    border-radius: 10px;
+    background: white;
+    border-radius: 8px;
 
     @media (max-width: 280px) {
         width: 100%;
@@ -25,6 +22,8 @@ export const ModalContent = styled.div`
 
 export const ModalText = styled.p`
     display: flex;
+    justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
     font-family: 'Radio Canada';
     font-style: normal;
@@ -35,36 +34,52 @@ export const ModalText = styled.p`
     color: ${({ theme }) => theme.colors.mutedDarker};
 
     @media (max-width: 280px) {
-        width: 80%;
-        margin-top: 50px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 20px;
     }
 
     @media (max-width: 480px) {
-        width: 80%;
-        margin-top: 50px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 20px;
     }
 `;
 
 export const ModalTitle = styled.h1`
     display: flex;
+    justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
     width: 370px;
     height: 48px;
     font-family: 'Radio Canada';
     font-style: normal;
     font-weight: 700;
-    font-size: 40px;
+    font-size: 30px;
     line-height: 48px;
     color: ${({ theme }) => theme.colors.primaryDark};
 
     @media (max-width: 280px) {
-        width: 80%;
-        margin-right: 40px;
-
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 25px;
     }
 
     @media (max-width: 480px) {
-        width: 80%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 25px;    
     }
 `;
 

src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx

@@ -0,0 +1,66 @@
+import {
+    ModalContent,
+    ModalTitle,
+    CloseModal,
+    ModalCloseButton,
+} from './styles';
+import ModalIcon from '../../../../assets/imgs/mask-group.svg';
+import { useNavigate } from 'react-router';
+import { MaskBackground } from '../../../LoginCard/PopUpRegisterSuccess/styles';
+import { AuthContext } from '../../../../contexts/Auth/AuthContext';
+import { useContext, useEffect, useRef } from 'react';
+
+interface ChangePasswordModalProps {
+    setChangePasswordModal: (value: boolean) => void;
+}
+
+const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalProps ) => {
+    const navigate = useNavigate();
+    const auth = useContext(AuthContext);
+    const modalRef = useRef<HTMLDivElement | null>(null);
+
+    const handleClick = () => {
+        setChangePasswordModal (false);
+        auth.user.type === 'USER' ?
+            (navigate('/candidate-portal'))
+            :
+            (navigate('/company-portal'))
+        setTimeout(() => window.location.reload(), 0)
+        document.body.style.overflow = 'auto';
+    }
+
+    useEffect(() => {
+        const handleOutsideClick = (e: MouseEvent) => {
+            if (modalRef.current && e.target instanceof Node && !modalRef.current.contains(e.target)) {
+                setChangePasswordModal (false);
+                handleClick();
+            }
+        };
+
+        document.addEventListener('click', handleOutsideClick);
+
+        return () => {
+            document.removeEventListener('click', handleOutsideClick);
+        };
+    }, []);
+
+    return (
+        <MaskBackground>
+            <ModalContent ref={modalRef}>
+                <CloseModal>
+                    <ModalCloseButton
+                        onClick={handleClick}
+                    >
+                        X
+                    </ModalCloseButton>
+                </CloseModal>
+                <div className="modal--texts">
+                    <ModalTitle>Senha atualizada com sucesso</ModalTitle>
+                    <img src={ModalIcon} alt="Sucesso" />
+                </div>
+            </ModalContent>
+        </MaskBackground>
+    );
+};
+
+export default ChangePasswordModal;

src/components/Portal/ProfileModal/ChangePasswordModal/styles.ts

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+
+export const ModalContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    position: fixed;
+    background: white;
+    border-radius: 8px;
+
+    img {
+        width: 30%;
+    }
+
+    .modal--texts {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 0 24px 24px 24px;
+    }
+
+    @media (max-width: 540px) {
+        width: 80%;
+    }
+`;
+
+export const ModalTitle = styled.h2`
+    font-family: 'Radio Canada';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 30px;
+    line-height: 48px;
+    padding: 0 0 16px 0;
+    color: ${({theme}) => theme.colors.primaryDark};
+
+    @media (max-width: 280px) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 18px;
+    }
+
+    @media (max-width: 480px) {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 18px;
+    }
+`;
+
+export const CloseModal = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    align-self: flex-end;
+    padding-left: 150px;
+
+    @media (max-width: 280px) {
+        margin-right: 10px;
+    }
+
+    @media (max-width: 480px) {
+        width: 80%;
+        margin-top: 10px;
+    }
+`;
+
+export const ModalCloseButton = styled.button`
+    width: 45px;
+    height: 45px;
+    background-color: #fff;
+    color: ${({theme}) => theme.colors.primaryDark};
+    font-weight: bold;
+    border-radius: 8px;
+    &:hover {
+        background-color: red;
+        border: 1px solid;
+        color: #fff;
+    }
+    `;

src/components/Portal/ProfileModal/ConfirmModal/styles.ts

@@ -6,7 +6,7 @@ export const ModalContent = styled.div`
     align-items: center;
     gap: 20px;
     position: fixed;
-    background: #FDFFFC;
+    background: white;
 
     border: 2px solid ${({theme}) => theme.colors.primaryDark};
     border-radius: 10px;