Skip to content

Commit a106b57

Browse files
omthakare16omthakare16
committed
added ui to UserProfile + added postion and profileRedirect Prop in UserButton
1 parent 57a0ad3 commit a106b57

File tree

4 files changed

+161
-89
lines changed

4 files changed

+161
-89
lines changed

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@
2323
"devDependencies": {
2424
"@babel/preset-env": "^7.22.4",
2525
"@babel/preset-react": "^7.22.3",
26+
"@emotion/react": "^11.11.1",
27+
"@emotion/styled": "^11.11.0",
2628
"@microsoft/eslint-formatter-sarif": "^3.0.0",
29+
"@mui/material": "^5.13.5",
2730
"@rollup/plugin-commonjs": "^25.0.0",
2831
"@rollup/plugin-node-resolve": "^15.1.0",
2932
"eslint": "^8.41.0",

‎src/components/UserButton/UserButton.jsx‎

Lines changed: 121 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,40 @@ import React, {useState, useRef, useEffect} from 'react';
22
import {useUser} from '../../hooks/useUser/useUser.jsx';
33
import {useEasyauth} from '../../hooks/useEasyauth/useEasyauth.jsx';
44
import PropTypes from 'prop-types';
5+
import {iconUser} from '../uiComponents/iconUser.js';
6+
import {Box, Modal} from '@mui/material';
7+
import {UserProfile} from '../UserProfile/UserProfile.jsx';
58

69

7-
export const UserButton = ({position}) => {
10+
export const UserButton = ({position, profileRedirect}) => {
811
const auth = useEasyauth();
912
const {user} = useUser();
1013
const [isOpen, setIsOpen] = useState(false);
1114
const cardRef = useRef(null);
15+
const [open, setOpen] = useState(false);
16+
17+
18+
const ProfileModal = () => {
19+
const handleClose = () => {
20+
setOpen(false);
21+
};
22+
return (
23+
<>
24+
<Modal open={open} onClose={handleClose}>
25+
<Box>
26+
<div
27+
style={{
28+
display: 'flex',
29+
justifyContent: 'center',
30+
}}
31+
>
32+
<UserProfile />
33+
</div>
34+
</Box>
35+
</Modal>
36+
</>
37+
);
38+
};
1239

1340
const handleButtonClick = () => {
1441
setIsOpen(!isOpen);
@@ -19,9 +46,22 @@ export const UserButton = ({position}) => {
1946
};
2047

2148
const handleAccount = () => {
22-
// Redirect to account page
49+
setIsOpen(false);
50+
if (!profileRedirect) {
51+
setOpen(true);
52+
}
2353
};
2454

55+
const cardStyle = {
56+
position: 'absolute',
57+
top: '50px',
58+
borderRadius: '8px',
59+
backgroundColor: '#fff',
60+
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
61+
padding: '10px',
62+
display: 'flex',
63+
flexDirection: 'column',
64+
};
2565
useEffect(() => {
2666
function handleClickOutside(event) {
2767
if (cardRef.current && !cardRef.current.contains(event.target)) {
@@ -34,18 +74,6 @@ export const UserButton = ({position}) => {
3474
document.removeEventListener('mousedown', handleClickOutside);
3575
};
3676
}, []);
37-
38-
const cardStyle = {
39-
position: 'absolute',
40-
top: '50px',
41-
borderRadius: '8px',
42-
backgroundColor: '#fff',
43-
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
44-
padding: '10px',
45-
display: 'flex',
46-
flexDirection: 'column',
47-
};
48-
4977
if (position === 'left') {
5078
cardStyle.left = '0';
5179
} else if (position === 'right') {
@@ -55,87 +83,97 @@ export const UserButton = ({position}) => {
5583
}
5684

5785
return (
58-
<div style={{position: 'relative', display: 'inline-block'}}>
59-
<button
60-
style={{
61-
width: '40px',
62-
height: '40px',
63-
borderRadius: '50%',
64-
padding: '0',
65-
border: 'none',
66-
backgroundColor: '#ccc',
67-
}}
68-
onClick={handleButtonClick}
69-
>
70-
<img
71-
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHGUlEQVR4nO2Ye2xTVRzHb84pimaJyksSAUGJzgVUgk7mO2o0aowGA8xtuK1bW1gftwzjAx8Fjc7ESEwUhwOCzg1HGd3Wdd27Xbv2ss05UDcQfPFmsgeKTFZkfM25dxtlHe1tt+E/+yW/LFvXez/f3/ne3/ndw3HjMR7jMfJYYqYK3hNHjMIaYvDupLy3jfJCN+W956QUuolBaGWfEYNnjUJfv4gzgXD/e2Q2zaRG4UPK7zpKjbsgJi8ESa9feo5Q3pPF6RtmXHlwvXsq5YUvKC/4BsH9U5YAUQSovt5H9e5sLtM55Yqwk1WNCZRv6BoWPBIBBpb1oHp3JzG448eOXN08gfINm6ixAVKOugBIWbeR3Wu04a8lxgb7RfixFOAC0TnL2D1HC35CIPwYCtC5QHV1INq6as5kvmrE/JTftUkCkwFu3IUbTc14rOAgktx/QtXig/Lbs1hc04XYL3/FpLeaZAugLDMc2SOCJ0YhMRTwQF61SsCT5kNYta8PhrY+ZPx4Huo956Bs8eHlb3uR0HgWS7w9WLDlACbw9ZIAQz/8oACXnwAnqNYJonMsi4xe2ziZ8kKHLHijB/E1ncj86cJl4ZcK/2Cx5wyed/2NuIJDmMBgDUEEaCUBNMPRxakjaLFin5dTfYMHT5oPyoZ/1nkaT9X8hegNbRKsCB9EgNYBmlGzITx6fcOMy25SQz3/pieobYaDf7zqFB62dyFqtSOgAw36fxCeZa2PU1fPkl99g/ChrOrr3Xgs/+ew4R8p78YDZV2Yvb5Fggzwf4AA0JXVWfLoTSCU9x4ZbH3BBKyoRJKrOyL4+6ydiMn9DVRdFsI+tcxCoCurjrKhMSQ/myqDD2R+qbJB9d3ZiOAXFndgfsEx0LSSwPYZUH0moBoKTUVsSAHEIKyRLSDditTGnojg79r5B2K+OQKqtAzbPofYB3RFFYi64vXQAnivJRwBi6tORgQ/b0c75uQckAQEVH+ofQYElO+QswKt4VgoNuf7iOCjC05g6nte0LTiENWvEeHZ80Y0FT+EFEAN3i7ZAlZUYhJvE3fYcOHn5h/D1ZpCsQhyqk81laDq8g4ZAjw+2QJY5VILseDzlvDgtx3H5HfrQZMLJMAAeP/qMwGVoJoKUFV5r0wBQ6fGIFOl2g5F8jYs+nq/bPjp63eDJn0lPkMBnefy1QdVlckS0BUoIEiyFpheAsXyrxG9vlHcYYPZZvJaF2jCVtDUnRLssNa51Pti9ZmA9LLQFiIGb2tYAlgyiPQSkKQ8RKm3YXZWPWK2HsD87UfFVjln4z5MXevA1co8kMQvJfhQ1lk5UP1+eLUdJN0W+iEmvMcStgBxJVxsiUFTdoAk5oLEbwFZlgOyNAckfjNI4leS55lthq28Y3jriALs4rVJmk1OG/WsEcdc3j+Hg+7/TByJ/V5MtLWgqlLQlJ2gydulTNkhrtBg1YfCa/2tUx1oHRUTYGMr8FpIAezQSZrRPTKT/a9bAl/BOkWZVGU2IrAen1YEqmQ/S6S/s9mHwQ2Aa4f63q/r9FtHuqYNCpX1XnnDnL7+8OCLRtB0g2ZUg2rsIuDMt+sQt7kVL9hPIMH9F5KbepDUcAaLa7vxhOUw5n+2G9NeqwZNtUgroimXLBPgeybgUniaVnqIM5nkneZRvTvr4ozOcuClw+/lg1WO3SS9BPM/bsLy+lPQtZ7Hyh/+FYe7tBYfUpp7sbzpLF5q+AdLhR686OnBC+4zeLToOGauc4t7iLgqrNqX8b240aWXgiqtH3CyQ++cQXUu36Ui/JJVTGXDlNWVSKg9CX5vn2z45+r+xjMOacOLzf8NUVqrNA8xWE2g7yX4kl7u5dKb5Atgq6CryxY7y9BkS64qxS3rXNDu6Y0Y/omqP/FoxSnEFbXjhtXloMnsQS/1g++3DlshZfGnXNixSphEdXUdg11DPOaoFS948zsOGFv/HTH8Q/Zu3G/rQmzxSVyfaQdNNoOmWf3gS9nvnZzaGtm5KdE64y8KcIodZEpmOXR7fKMGf5+1E/cUd+DOgmO4Rl0oiWDgEjxrDku4kQTVOjeK/VpTAYXSgvjK9lGHX2A5iTsL/8Cc7L2giXmgKYUSvLLkM27EscRMSUZ1EWuT8z4Sxgw+xtyO2wtO4LrVdtCkfJDUEhtnciq4UQm19VqSbKlKquscU/i5245jxuf7QBJyK9g9udGMm7f+PvHpwl/3jiX8nLxjmJrV2MaZnBO5sYq47ObsBPepC6MNP2vTgQuT3qgK8wQuwoh5vybm4S3NPy/znB4x/K25RzBtnXN/VGZhNHel47Y3rQ8u/MTV9pT1cF+48Lfk7O2b9ra9NUqX9wD3v4fJpJj7hvnVO9ZZdt/9ifP0PVtazseZf0dccTtii07g7vxfEL2h6fzs9ytPT391e8tkfe4r7DvceIzHeHAjjf8A9Uxu/X2SjTsAAAAASUVORK5CYII="
72-
style={{width: '100%', height: '100%'}}
73-
/>
74-
</button>
75-
76-
{isOpen && (
77-
<div
78-
ref={cardRef}
79-
style={cardStyle}
86+
<>
87+
<div style={{position: 'relative', display: 'inline-block'}}>
88+
<button
89+
style={{
90+
width: '40px',
91+
height: '40px',
92+
borderRadius: '50%',
93+
padding: '0',
94+
border: 'none',
95+
backgroundColor: '#ccc',
96+
}}
97+
onClick={handleButtonClick}
8098
>
81-
<div
82-
style={{
83-
display: 'flex',
84-
alignItems: 'center',
85-
marginBottom: '10px',
86-
overflow: 'hidden',
87-
textOverflow: 'ellipsis',
88-
}}
89-
>
90-
<img
91-
src="data:image/png;base64,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"
92-
alt="Profile Icon"
93-
style={{width: '30px', height: '30px', marginRight: '10px'}}
94-
/>
99+
<img
100+
src={iconUser()}
101+
alt="profile icon"
102+
style={{width: '100%', height: '100%'}}
103+
/>
104+
</button>
105+
106+
<ProfileModal/>
107+
{isOpen && (
108+
<div ref={cardRef} style={cardStyle}>
95109
<div
96110
style={{
97-
color: 'black',
98-
fontSize: '16px',
111+
display: 'flex',
112+
alignItems: 'center',
113+
marginBottom: '10px',
99114
overflow: 'hidden',
100115
textOverflow: 'ellipsis',
101116
}}
102117
>
103-
{user.email}
118+
<img
119+
src={iconUser()}
120+
alt="Profile Icon"
121+
style={{width: '30px', height: '30px', marginRight: '10px'}}
122+
/>
123+
<div
124+
style={{
125+
color: 'black',
126+
fontSize: '16px',
127+
overflow: 'hidden',
128+
textOverflow: 'ellipsis',
129+
}}
130+
>
131+
{user.email}
132+
</div>
104133
</div>
134+
<button
135+
style={{
136+
backgroundColor: '#007bff',
137+
color: '#fff',
138+
padding: '5px 10px',
139+
marginBottom: '10px',
140+
border: 'none',
141+
borderRadius: '3px',
142+
cursor: 'pointer',
143+
}}
144+
onClick={handleLogout}
145+
>
146+
Logout
147+
</button>
148+
<a
149+
href={profileRedirect}
150+
style={{
151+
backgroundColor: '#17a2b8',
152+
}}
153+
>
154+
<button
155+
style={{
156+
backgroundColor: '#17a2b8',
157+
color: '#fff',
158+
padding: '5px 10px',
159+
border: 'none',
160+
borderRadius: '3px',
161+
cursor: 'pointer',
162+
}}
163+
onClick={handleAccount}
164+
>
165+
Account
166+
</button>
167+
</a>
105168
</div>
106-
<button
107-
style={{
108-
backgroundColor: '#007bff',
109-
color: '#fff',
110-
padding: '5px 10px',
111-
marginBottom: '10px',
112-
border: 'none',
113-
borderRadius: '3px',
114-
cursor: 'pointer',
115-
}}
116-
onClick={handleLogout}
117-
>
118-
Logout
119-
</button>
120-
<button
121-
style={{
122-
backgroundColor: '#17a2b8',
123-
color: '#fff',
124-
padding: '5px 10px',
125-
border: 'none',
126-
borderRadius: '3px',
127-
cursor: 'pointer',
128-
}}
129-
onClick={handleAccount}
130-
>
131-
Account
132-
</button>
133-
</div>
134-
)}
135-
</div>
169+
)}
170+
</div>
171+
</>
136172
);
137173
};
138174

175+
139176
UserButton.propTypes = {
140177
position: PropTypes.string,
178+
profileRedirect: PropTypes.string,
141179
};

‎src/components/UserProfile/UserProfile.jsx‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import React, {useEffect, useState} from 'react';
22
import {useEasyauth} from '../../hooks/useEasyauth/useEasyauth.jsx';
33
import PropTypes from 'prop-types';
44
import {getProfile} from '../../api/api.js';
5+
import {
6+
Box,
7+
Chip,
8+
Divider,
9+
PopoverPaper,
10+
Typography,
11+
} from '@mui/material';
512

613
export const UserProfile = ({loader}) => {
714
const auth = useEasyauth();
@@ -19,12 +26,33 @@ export const UserProfile = ({loader}) => {
1926
return loader||'Lodaing...';
2027
} else {
2128
return (
22-
<ul>
23-
<li>Email: {profile.email}</li>
24-
<li>Email verified: {JSON.stringify(profile.emailVerified)}</li>
25-
<li>Phone: {profile.phone}</li>
26-
<li>Phone verified: {JSON.stringify(profile.phoneVerified)}</li>
27-
</ul>
29+
<PopoverPaper sx={{m: 2, p: 2, width: 300}}>
30+
<Box sx={{display: 'flex', alignItems: 'center', marginBottom: 2}}>
31+
<Typography variant="h6" sx={{flexGrow: 1}}>
32+
Profile
33+
</Typography>
34+
<Divider />
35+
</Box>
36+
<Typography variant="button">Email</Typography>
37+
<Divider />
38+
{profile.email}{' '}
39+
<Chip
40+
41+
size="small"
42+
color={profile.emailVerified ? 'success' : 'error'}
43+
label={profile.emailVerified ? 'Verified' : 'Not Verified'}
44+
/>
45+
<ul />
46+
<Typography variant="button">Phone </Typography>
47+
<Divider />
48+
{profile.phone}{' '}
49+
<Chip
50+
size="small"
51+
color={profile.phoneVerified ? 'success' : 'error'}
52+
label={profile.phoneVerified ? 'Verified' : 'Not Verified'}
53+
/>
54+
55+
</PopoverPaper>
2856
);
2957
}
3058
} else {

‎src/components/uiComponents/iconUser.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)