Skip to content

Commit 21ee201

Browse files
mariopagliamariopaglia
authored
Merge pull request #316 from biandradee/test
feat: add user change password
2 parents fa48e3e + a78758f commit 21ee201

File tree

22 files changed

+1054
-38
lines changed

22 files changed

+1054
-38
lines changed

‎src/components/CancelModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
interface CancelModalProps {
22
handleConfirmCancel: () => void;
33
setCancelModal: (value: boolean) => void;
4-
}
4+
};
55

66
function CancelModal({
77
handleConfirmCancel,

‎src/components/LoginCard/UserForms/index.tsx

+16-2
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ import {
3535
MessageChecklist,
3636
} from '../styles';
3737
import { Popup } from '../PopUpRegisterSuccess/styles';
38+
import TermsModal from '../../Portal/ProfileModal/TermsModal';
39+
import PolicyModal from '../../Portal/ProfileModal/PolicyModal';
3840

3941
export const UserForms = (props: any): JSX.Element => {
4042
const [hasError, setHasError] = useState(false);
@@ -44,8 +46,18 @@ export const UserForms = (props: any): JSX.Element => {
4446
// eslint-disable-next-line @typescript-eslint/no-unused-vars
4547
const [isFormSubmitted, setIsFormSubmitted] = useState(false);
4648
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
49+
const [policyModal, setPolicyModal] = useState<boolean>(false);
50+
const [termsModal, setTermsModal] = useState<boolean>(false);
4751

4852

53+
const handlePolicyModal = () => {
54+
setPolicyModal(true);
55+
};
56+
57+
const handleTermsModal = () => {
58+
setTermsModal(true);
59+
};
60+
4961
const characters = /^(?=.{8,20}$).*$/;
5062
const letters = /^(?=.*[a-z])(?=.*[A-Z]).*$/;
5163
const number = /^(?=.*\d).*$/;
@@ -362,8 +374,8 @@ export const UserForms = (props: any): JSX.Element => {
362374
<CheckboxInput {...register('privacyTerms')} />
363375
<TermsLink>
364376
{/* TODO: Direcionar para as páginas correspondentes após criadas */}
365-
Li e aceito os <a href="/">Termos de Uso</a> e{' '}
366-
<br /> <a href="/">Política de Privacidade</a>
377+
Li e aceito os <a onClick={handleTermsModal}>Termos de Uso</a> e{' '}
378+
<br /> <a onClick={handlePolicyModal}>Política de Privacidade</a>
367379
</TermsLink>
368380
</Label>
369381
{hasError && (
@@ -405,6 +417,8 @@ export const UserForms = (props: any): JSX.Element => {
405417
/>
406418
) : null}
407419
<PopupHandler setPopup={setPopup} Popup={Popup} />
420+
{termsModal && <TermsModal setTermsModal={setTermsModal} />}
421+
{policyModal && <PolicyModal setPolicyModal={setPolicyModal} />}
408422
</>
409423
);
410424
};

‎src/components/Portal/Menu/index.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const Menu = () => {
4444
<Container>
4545
<PopUp>
4646
<MenuItems>
47-
<li onClick={handleNavigation}
47+
{/* <li onClick={handleNavigation}
4848
onKeyDown={handleKeyDown}
4949
tabIndex={0}
5050
>
@@ -53,7 +53,7 @@ const Menu = () => {
5353
Meu perfil
5454
</li>
5555
56-
<Border />
56+
<Border /> */}
5757

5858
{auth.user.type !== 'USER' && (
5959
<li
@@ -66,7 +66,7 @@ const Menu = () => {
6666
Anunciar vagas
6767
</li>
6868
)}
69-
<Border />
69+
{/* <Border /> */}
7070
<li
7171
onClick={() => {
7272
setVisible(!visible);
@@ -89,6 +89,7 @@ const Menu = () => {
8989
<li
9090
tabIndex={0}
9191
onKeyDown={handleKeyDown}
92+
onClick={() => navigate('/change-password')}
9293
>
9394
<img
9495
src={PasswordIcon}
@@ -99,14 +100,14 @@ const Menu = () => {
99100
</div>
100101
</>
101102
)}
102-
<Border />
103+
{/* <Border />
103104
<li
104105
tabIndex={0}
105106
onKeyDown={handleKeyDown}
106107
>
107108
<img src={TermsIcon} alt="termos" />
108109
Termo de uso e Privacidade
109-
</li>
110+
</li> */}
110111
<Border />
111112
<li onClick={logout}
112113
onKeyDown={handleKeyDown}

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

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useContext } from 'react';
77

88
interface CancelModalProps {
99
setCancelModal: (value: boolean) => void;
10+
open: boolean;
1011
}
1112

1213
function CancelModal({ setCancelModal }: CancelModalProps) {

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

+29-14
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,8 @@ export const ModalContent = styled.div`
88
padding: 60px 30px;
99
gap: 20px;
1010
position: fixed;
11-
12-
background: #FDFFFC;
13-
14-
border: 2px solid ${({ theme }) => theme.colors.primaryDark};
15-
border-radius: 10px;
11+
background: white;
12+
border-radius: 8px;
1613
1714
@media (max-width: 280px) {
1815
width: 100%;
@@ -25,6 +22,8 @@ export const ModalContent = styled.div`
2522

2623
export const ModalText = styled.p`
2724
display: flex;
25+
justify-content: center;
26+
align-items: center;
2827
flex-wrap: wrap;
2928
font-family: 'Radio Canada';
3029
font-style: normal;
@@ -35,36 +34,52 @@ export const ModalText = styled.p`
3534
color: ${({ theme }) => theme.colors.mutedDarker};
3635
3736
@media (max-width: 280px) {
38-
width: 80%;
39-
margin-top: 50px;
37+
width: 100%;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
text-align: center;
42+
font-size: 20px;
4043
}
4144
4245
@media (max-width: 480px) {
43-
width: 80%;
44-
margin-top: 50px;
46+
width: 100%;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
text-align: center;
51+
font-size: 20px;
4552
}
4653
`;
4754

4855
export const ModalTitle = styled.h1`
4956
display: flex;
57+
justify-content: center;
58+
align-items: center;
5059
flex-wrap: wrap;
5160
width: 370px;
5261
height: 48px;
5362
font-family: 'Radio Canada';
5463
font-style: normal;
5564
font-weight: 700;
56-
font-size: 40px;
65+
font-size: 30px;
5766
line-height: 48px;
5867
color: ${({ theme }) => theme.colors.primaryDark};
5968
6069
@media (max-width: 280px) {
61-
width: 80%;
62-
margin-right: 40px;
63-
70+
width: 100%;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
font-size: 25px;
6475
}
6576
6677
@media (max-width: 480px) {
67-
width: 80%;
78+
width: 100%;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
font-size: 25px;
6883
}
6984
`;
7085

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {
2+
ModalContent,
3+
ModalTitle,
4+
CloseModal,
5+
ModalCloseButton,
6+
} from './styles';
7+
import ModalIcon from '../../../../assets/imgs/mask-group.svg';
8+
import { useNavigate } from 'react-router';
9+
import { MaskBackground } from '../../../LoginCard/PopUpRegisterSuccess/styles';
10+
import { AuthContext } from '../../../../contexts/Auth/AuthContext';
11+
import { useContext, useEffect, useRef } from 'react';
12+
13+
interface ChangePasswordModalProps {
14+
setChangePasswordModal: (value: boolean) => void;
15+
}
16+
17+
const ChangePasswordModal = ({ setChangePasswordModal }: ChangePasswordModalProps ) => {
18+
const navigate = useNavigate();
19+
const auth = useContext(AuthContext);
20+
const modalRef = useRef<HTMLDivElement | null>(null);
21+
22+
const handleClick = () => {
23+
setChangePasswordModal (false);
24+
auth.user.type === 'USER' ?
25+
(navigate('/candidate-portal'))
26+
:
27+
(navigate('/company-portal'))
28+
setTimeout(() => window.location.reload(), 0)
29+
document.body.style.overflow = 'auto';
30+
}
31+
32+
useEffect(() => {
33+
const handleOutsideClick = (e: MouseEvent) => {
34+
if (modalRef.current && e.target instanceof Node && !modalRef.current.contains(e.target)) {
35+
setChangePasswordModal (false);
36+
handleClick();
37+
}
38+
};
39+
40+
document.addEventListener('click', handleOutsideClick);
41+
42+
return () => {
43+
document.removeEventListener('click', handleOutsideClick);
44+
};
45+
}, []);
46+
47+
return (
48+
<MaskBackground>
49+
<ModalContent ref={modalRef}>
50+
<CloseModal>
51+
<ModalCloseButton
52+
onClick={handleClick}
53+
>
54+
X
55+
</ModalCloseButton>
56+
</CloseModal>
57+
<div className="modal--texts">
58+
<ModalTitle>Senha atualizada com sucesso</ModalTitle>
59+
<img src={ModalIcon} alt="Sucesso" />
60+
</div>
61+
</ModalContent>
62+
</MaskBackground>
63+
);
64+
};
65+
66+
export default ChangePasswordModal;

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

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import styled from 'styled-components';
2+
3+
export const ModalContent = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
gap: 20px;
8+
position: fixed;
9+
background: white;
10+
border-radius: 8px;
11+
12+
img {
13+
width: 30%;
14+
}
15+
16+
.modal--texts {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
padding: 0 24px 24px 24px;
21+
}
22+
23+
@media (max-width: 540px) {
24+
width: 80%;
25+
}
26+
`;
27+
28+
export const ModalTitle = styled.h2`
29+
font-family: 'Radio Canada';
30+
font-style: normal;
31+
font-weight: 700;
32+
font-size: 30px;
33+
line-height: 48px;
34+
padding: 0 0 16px 0;
35+
color: ${({theme}) => theme.colors.primaryDark};
36+
37+
@media (max-width: 280px) {
38+
width: 100%;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
text-align: center;
43+
font-size: 18px;
44+
}
45+
46+
@media (max-width: 480px) {
47+
width: 100%;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
text-align: center;
52+
font-size: 18px;
53+
}
54+
`;
55+
56+
export const CloseModal = styled.div`
57+
display: flex;
58+
justify-content: flex-end;
59+
align-self: flex-end;
60+
padding-left: 150px;
61+
62+
@media (max-width: 280px) {
63+
margin-right: 10px;
64+
}
65+
66+
@media (max-width: 480px) {
67+
width: 80%;
68+
margin-top: 10px;
69+
}
70+
`;
71+
72+
export const ModalCloseButton = styled.button`
73+
width: 45px;
74+
height: 45px;
75+
background-color: #fff;
76+
color: ${({theme}) => theme.colors.primaryDark};
77+
font-weight: bold;
78+
border-radius: 8px;
79+
&:hover {
80+
background-color: red;
81+
border: 1px solid;
82+
color: #fff;
83+
}
84+
`;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const ModalContent = styled.div`
66
align-items: center;
77
gap: 20px;
88
position: fixed;
9-
background: #FDFFFC;
9+
background: white;
1010
1111
border: 2px solid ${({theme}) => theme.colors.primaryDark};
1212
border-radius: 10px;

0 commit comments

Comments
 (0)