SouJunior · Marcelo8173 · Aug 12, 2024 · Jun 25, 2024 · Jun 28, 2024 · Jun 29, 2024
diff --git a/README.md b/README.md
@@ -51,8 +51,6 @@ REACT_APP_GOOGLE_ANALYTICS_KEY= # GA do SouJunior
 REACT_APP_URL= # link do backend
 REACT_APP_URL_JOBS= # link da api de jobs
 
-
-
 ## Rodando localmente ▶
 
 Inicie o servidor
@@ -87,12 +85,12 @@ Esse projeto é usado pela [SouJunior](https://github.com/SouJunior).
 
 ## Feedback 💬
 
-Se você tiver algum feedback, por favor nos deixe saber por meio do nosso [site](https://soujunior.tech). Ou fazendo uma [contribuição](#contribuição).
+Se você tiver algum feedback, por favor nos deixe saber por meio do nosso [site](https://soujunior.tech). Ou fazendo uma [contribuição](#contribuição-).
 
 ## Contribuição 💙
 
 Contribuições são sempre bem-vindas!
 
-Veja `contribuindo.md` para saber como começar.
+Veja [`contribuindo.md`](contribuindo.md) para saber como começar.
 
 [Voltar ao 🔝](#vagas-frontend)
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Radio+Canada:wght@600&display=swap" rel="stylesheet">
-
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','GTM-5XLZKKV9');</script>
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-1TSQDBDCNZ"></script>
     <script>
@@ -53,6 +58,16 @@
 </head>
 
 <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+        <iframe 
+            src="https://www.googletagmanager.com/ns.html?id=GTM-5XLZKKV9"
+            height="0"
+            width="0"
+            style="display:none;visibility:hidden">
+        </iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 </body>

diff --git a/src/components/CancelModal.tsx b/src/components/CancelModal.tsx
@@ -1,7 +1,7 @@
 interface CancelModalProps {
     handleConfirmCancel: () => void;
     setCancelModal: (value: boolean) => void;
-}
+};
 
 function CancelModal({
     handleConfirmCancel,

diff --git a/src/components/FooterDefault/index.tsx b/src/components/FooterDefault/index.tsx
@@ -41,7 +41,7 @@ const FooterDefault = () => {
                                 rel="noreferrer"
                                 target="_blank"
                             >
-                                Site Sou Junior
+                                Site SouJunior
                             </a>
                             <li>
                                 <a
@@ -67,15 +67,6 @@ const FooterDefault = () => {
                                 SouJunior Labs
                             </a>
                         </li>
-                        <li>
-                            <a
-                                href="https://discord.com/invite/564CDre9F3"
-                                rel="noreferrer"
-                                target="_blank"
-                            >
-                                SouJunior Talk
-                            </a>
-                        </li>
                     </ul>
                 </div>
                 <div>

diff --git a/src/components/FooterDefault/styles.ts b/src/components/FooterDefault/styles.ts
@@ -138,31 +138,25 @@ export const Grid = styled.ul`
 export const FacebookIcon = styled(TiSocialFacebook)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
 
 export const YouTubeIcon = styled(BsYoutube)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
 export const GitHubIcon = styled(BsGithub)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
 export const LinkedInIcon = styled(AiFillLinkedin)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
 export const InstagramIcon = styled(RiInstagramFill)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
 export const TelegramIcon = styled(BsTelegram)`
     width: 20px;
     height: 20px;
-    color: #212121;
 `;
diff --git a/src/components/LoginCard/UserForms/index.tsx b/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} />}
         </>
     );
 };
diff --git a/src/components/Portal/Menu/index.tsx b/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}

diff --git a/src/components/Portal/ProfileModal/CancelModal/index.tsx b/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) {

diff --git a/src/components/Portal/ProfileModal/CancelModal/styles.ts b/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;    
     }
 `;
 

diff --git a/src/components/Portal/ProfileModal/ChangePasswordModal/index.tsx b/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;