Skip to content

Commit e45283f

Browse files
AhsanKhan7AhsanKhan7
committed
personal details UI updates
1 parent c056dcb commit e45283f

File tree

12 files changed

+483
-162
lines changed

12 files changed

+483
-162
lines changed

‎global.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ interface TUser {
4141
userName: string;
4242
email_opted_in: any;
4343
emailOptedIn: any;
44+
roles?: any;
45+
created?: any
4446
}
4547

4648
interface TOrganization {

‎src/ui/assets/successTick.png‎

5.87 KB
Loading

‎src/ui/assets/userImage.png‎

23.9 KB
Loading

‎src/ui/components/icons/assets/Share.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/ui/components/icons/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
6262
import { ReactComponent as Run } from './assets/Run.svg';
6363
import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
6464
import { ReactComponent as Pen } from './assets/Pen.svg';
65+
import { ReactComponent as Share } from './assets/Share.svg';
6566
// import { ReactComponent as Inprogress } from './assets/InProgress.svg';
6667
// import { ReactComponent as Cached } from './assets/Cached.svg';
6768
// import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -199,6 +200,7 @@ const icons = {
199200
useStroke: true,
200201
}),
201202
pen: createIcon({ Component: Pen, useStroke: true }),
203+
share: createIcon({ Component: Share, useStroke: true }),
202204

203205
// paginations
204206
paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

‎src/ui/layouts/common/PopupSmall/index.module.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import '../../../globalStyles.scss';
2+
3+
.dimmer {
4+
position: fixed;
5+
background: #424240;
6+
opacity: 0.5;
7+
height: 100vh;
8+
width: 100vw;
9+
top: 0;
10+
left: 0;
11+
z-index: 9999;
12+
}
13+
14+
.popup {
15+
background: #ffffff;
16+
border-radius: 4px;
17+
position: fixed;
18+
max-height: 70vh;
19+
min-height: 200px;
20+
// min-width: 528px;
21+
overflow-x: auto;
22+
}
23+
24+
@media (max-width: $md-breakpoint) {
25+
.popup {
26+
max-width: 80vw;
27+
min-width: 0;
28+
}
29+
}
30+
31+
.popupContainer {
32+
position: fixed;
33+
height: 100vh;
34+
width: 100vw;
35+
top: 0;
36+
left: 0;
37+
z-index: 99999;
38+
}
39+
40+
.popupClose {
41+
position: absolute;
42+
top: 1.5em;
43+
right: 1.5rem;
44+
}

‎src/ui/layouts/common/PopupSmall/index.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import OutsideClickHandler from 'react-outside-click-handler';
3+
4+
import { Box, FlexBox, icons, LinkBox } from '../../../components';
5+
6+
import styles from './index.module.scss';
7+
8+
const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
9+
10+
export const PopupSmall: React.FC<{ onClose: () => void }> = ({
11+
children,
12+
onClose,
13+
}) => (
14+
<>
15+
<Dimmer />
16+
<FlexBox
17+
alignItems="center"
18+
justifyContent="center"
19+
className={styles.popupContainer}
20+
>
21+
<Box className={styles.popup}>
22+
<OutsideClickHandler onOutsideClick={onClose}>
23+
<Box className={styles.popupClose}>
24+
<LinkBox onClick={onClose}>
25+
<icons.closeWithBorder />
26+
</LinkBox>
27+
</Box>
28+
<Box paddingVertical="xl" paddingHorizontal="xxxl">
29+
{children}
30+
</Box>
31+
</OutsideClickHandler>
32+
</Box>
33+
</FlexBox>
34+
</>
35+
);

‎src/ui/layouts/common/SuccessPopup/index.module.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@import '../../../globalStyles.scss';
2+
3+
.dimmer {
4+
position: fixed;
5+
background: #424240;
6+
opacity: 0.5;
7+
height: 100vh;
8+
width: 100vw;
9+
top: 0;
10+
left: 0;
11+
z-index: 9999;
12+
}
13+
14+
.popup {
15+
background: #ffffff;
16+
border-radius: 4px;
17+
position: fixed;
18+
max-height: 70vh;
19+
height: 385px;
20+
width: 336px;
21+
overflow-x: auto;
22+
23+
p {
24+
color: #424240;
25+
font-size: 24px;
26+
font-weight: 400;
27+
line-height: 31px;
28+
text-align: center;
29+
margin-top: 17px;
30+
}
31+
}
32+
33+
@media (max-width: $md-breakpoint) {
34+
.popup {
35+
max-width: 80vw;
36+
min-width: 0;
37+
}
38+
}
39+
40+
.popupContainer {
41+
position: fixed;
42+
height: 100vh;
43+
width: 100vw;
44+
top: 0;
45+
left: 0;
46+
z-index: 99999;
47+
}
48+
49+
.popupClose {
50+
position: absolute;
51+
top: 1.5em;
52+
right: 1.5rem;
53+
}

‎src/ui/layouts/common/SuccessPopup/index.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import OutsideClickHandler from 'react-outside-click-handler';
3+
import { Box, FlexBox, icons, LinkBox } from '../../../components';
4+
import styles from './index.module.scss';
5+
import successTick from '../../../assets/successTick.png'
6+
7+
8+
const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
9+
10+
export const SuccessPopup: React.FC<{ text: string, onClose: () => void }> = ({
11+
text,
12+
onClose,
13+
}) => (
14+
<>
15+
<Dimmer />
16+
<FlexBox
17+
alignItems="center"
18+
justifyContent="center"
19+
className={styles.popupContainer}
20+
>
21+
<Box className={styles.popup}>
22+
<OutsideClickHandler onOutsideClick={onClose}>
23+
<Box className={styles.popupClose}>
24+
<LinkBox onClick={onClose}>
25+
<icons.closeWithBorder />
26+
</LinkBox>
27+
</Box>
28+
<Box paddingVertical="xl" paddingHorizontal="xxxl" marginTop='xl'>
29+
30+
<FlexBox.Row justifyContent='center'>
31+
<img src={successTick} alt='success-tick' />
32+
</FlexBox.Row>
33+
34+
<Box>
35+
<p>{text}</p>
36+
</Box>
37+
38+
</Box>
39+
</OutsideClickHandler>
40+
</Box>
41+
</FlexBox>
42+
</>
43+
);

‎src/ui/layouts/settings/PasswordPopup.tsx‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* eslint-disable */
2+
import React, { useState } from 'react';
3+
import { useDispatch } from 'react-redux';
4+
import {
5+
Box,
6+
FlexBox,
7+
H3,
8+
PrimaryButton,
9+
FormPasswordField
10+
} from '../../components';
11+
import { getTranslateByScope } from '../../../services';
12+
import { PopupSmall } from '../common/PopupSmall';
13+
import { SuccessPopup } from '../common/SuccessPopup';
14+
import {
15+
showToasterAction,
16+
sessionActions,
17+
} from '../../../redux/actions';
18+
import { toasterTypes } from '../../../constants';
19+
import { loginAction } from '../../../redux/actions/session/loginAction';
20+
21+
export const PasswordPopup: React.FC<{
22+
user: any;
23+
username: any;
24+
setPopupOpen: (attr: boolean) => void;
25+
}> = ({ user, username, setPopupOpen }) => {
26+
const [submitting, setSubmitting] = useState(false);
27+
const [currentPassword, setCurrentPassword] = useState('');
28+
const [newPassword, setNewPassword] = useState('');
29+
const [confirmPassword, setConfirmPassword] = useState('');
30+
const [passwordSuccess, setPasswordSuccess] = useState(false);
31+
32+
33+
const dispatch = useDispatch();
34+
const translate = getTranslateByScope('ui.layouts.PersonalDetails');
35+
36+
37+
38+
const forgotPassword = () => {
39+
if (newPassword !== confirmPassword) {
40+
dispatch(
41+
showToasterAction({
42+
description: 'Password not Matched',
43+
type: toasterTypes.failure,
44+
}),
45+
);
46+
} else {
47+
setSubmitting(true);
48+
dispatch(
49+
loginAction({
50+
password: currentPassword,
51+
username: username,
52+
onFailure: (err) => {
53+
dispatch(
54+
showToasterAction({
55+
description: err,
56+
type: toasterTypes.failure,
57+
}),
58+
);
59+
setSubmitting(false);
60+
},
61+
onSuccess: async () => {
62+
dispatch(
63+
sessionActions.forgotPassword({
64+
userId: user?.id,
65+
password: newPassword,
66+
// @ts-ignore
67+
onFailure: (errorText) => {
68+
setSubmitting(false);
69+
dispatch(
70+
showToasterAction({
71+
description: errorText,
72+
type: toasterTypes.failure,
73+
}),
74+
);
75+
},
76+
onSuccess: () => {
77+
setSubmitting(false);
78+
setPasswordSuccess(true)
79+
setNewPassword('');
80+
setConfirmPassword('');
81+
setCurrentPassword('');
82+
},
83+
}),
84+
);
85+
},
86+
}),
87+
);
88+
}
89+
};
90+
91+
return (
92+
<PopupSmall onClose={() => setPopupOpen(false)} >
93+
94+
{!passwordSuccess ?
95+
<>
96+
<FlexBox.Row justifyContent="center">
97+
<H3 bold color="darkGrey">
98+
Update Password
99+
</H3>
100+
</FlexBox.Row>
101+
102+
<FlexBox.Row justifyContent='center' style={{ width: '400px', margin: '0 auto' }} >
103+
<Box marginBottom="lg" marginTop="xl" style={{ width: '100%'}}>
104+
<Box marginBottom="lg">
105+
<FormPasswordField
106+
label={translate('form.passwordChange.currentPassword.label')}
107+
labelColor="#000"
108+
placeholder={translate(
109+
'form.passwordChange.currentPassword.placeholder',
110+
)}
111+
value={currentPassword}
112+
onChange={(val: string) => setCurrentPassword(val)}
113+
error={{
114+
hasError: currentPassword.trim() === undefined,
115+
text: translate(
116+
'form.passwordChange.currentPassword.required',
117+
),
118+
}}
119+
showPasswordOption
120+
/>
121+
</Box>
122+
<Box marginBottom="lg">
123+
<FormPasswordField
124+
label={translate('form.passwordChange.newPassword.label')}
125+
labelColor="#000"
126+
placeholder={translate(
127+
'form.passwordChange.newPassword.placeholder',
128+
)}
129+
value={newPassword}
130+
onChange={(val: string) => setNewPassword(val)}
131+
error={{
132+
hasError: newPassword.trim() === undefined,
133+
text: translate('form.passwordChange.newPassword.required'),
134+
}}
135+
showPasswordOption
136+
/>
137+
</Box>
138+
<Box marginBottom="lg">
139+
<FormPasswordField
140+
label={translate('form.passwordChange.confirmPassword.label')}
141+
labelColor="#000"
142+
placeholder={translate(
143+
'form.passwordChange.confirmPassword.placeholder',
144+
)}
145+
value={confirmPassword}
146+
onChange={(val: string) => setConfirmPassword(val)}
147+
error={{
148+
hasError: confirmPassword.trim() === undefined,
149+
text: translate(
150+
'form.passwordChange.confirmPassword.required',
151+
),
152+
}}
153+
showPasswordOption
154+
/>
155+
</Box>
156+
</Box>
157+
</FlexBox.Row>
158+
159+
<FlexBox.Row marginLeft="sm" marginRight="sm" marginBottom="md" justifyContent='end' >
160+
<PrimaryButton
161+
id='pwReset'
162+
onClick={forgotPassword}
163+
loading={submitting}
164+
// eslint-disable-next-line
165+
disabled={newPassword.trim() === '' || confirmPassword.trim() === ''}
166+
>
167+
{translate('passwordReset.button')}
168+
</PrimaryButton>
169+
</FlexBox.Row>
170+
</>
171+
:
172+
<SuccessPopup text='Password updated Successfully' onClose={() => setPasswordSuccess(false)} />
173+
}
174+
175+
</PopupSmall>
176+
);
177+
};

0 commit comments

Comments
 (0)