Merge pull request #19 from omthakare16/main

added UserButton Component + token in headers if not null

Author: ghoshbishakh

.eslintrc.js

@@ -18,5 +18,8 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['react'],
-  rules: {},
+  rules: {
+    'max-len': 'off',
+    'require-jsdoc': 'off',
+  },
 };

package.json

@@ -23,7 +23,10 @@
   "devDependencies": {
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "@mui/material": "^5.13.5",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "eslint": "^8.41.0",

src/api/api.js

@@ -22,14 +22,18 @@ const commonAPICall = async (
       'Content-Type': 'application/json',
     },
 ) => {
+  const token = tokenLocalStorage();
   const FULLPATH = BASE_URL + PATH;
+  if (token) {
+    headers = {
+      ...headers,
+      Authorization: `Bearer ${token}`,
+    };
+  }
   const response = await fetch(FULLPATH, {
     method: METHOD,
     body: BODY,
-    headers: {
-      ...headers,
-      Authorization: `Bearer ${tokenLocalStorage()}`,
-    },
+    headers: headers,
   });
 
   return response;

src/components/UserButton/UserButton.jsx

@@ -0,0 +1,179 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {useUser} from '../../hooks/useUser/useUser.jsx';
+import {useEasyauth} from '../../hooks/useEasyauth/useEasyauth.jsx';
+import PropTypes from 'prop-types';
+import {iconUser} from '../uiComponents/iconUser.js';
+import {Box, Modal} from '@mui/material';
+import {UserProfile} from '../UserProfile/UserProfile.jsx';
+
+
+export const UserButton = ({position, profileRedirect}) => {
+  const auth = useEasyauth();
+  const {user} = useUser();
+  const [isOpen, setIsOpen] = useState(false);
+  const cardRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+
+  const ProfileModal = () => {
+    const handleClose = () => {
+      setOpen(false);
+    };
+    return (
+      <>
+        <Modal open={open} onClose={handleClose}>
+          <Box>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              <UserProfile />
+            </div>
+          </Box>
+        </Modal>
+      </>
+    );
+  };
+
+  const handleButtonClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleLogout = () => {
+    auth.removeUser();
+  };
+
+  const handleAccount = () => {
+    setIsOpen(false);
+    if (!profileRedirect) {
+      setOpen(true);
+    }
+  };
+
+  const cardStyle = {
+    position: 'absolute',
+    top: '50px',
+    borderRadius: '8px',
+    backgroundColor: '#fff',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    padding: '10px',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (cardRef.current && !cardRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  if (position === 'left') {
+    cardStyle.left = '0';
+  } else if (position === 'right') {
+    cardStyle.right = '0';
+  } else {
+    cardStyle.right = '0';
+  }
+
+  return (
+    <>
+      <div style={{position: 'relative', display: 'inline-block'}}>
+        <button
+          style={{
+            width: '40px',
+            height: '40px',
+            borderRadius: '50%',
+            padding: '0',
+            border: 'none',
+            backgroundColor: '#ccc',
+          }}
+          onClick={handleButtonClick}
+        >
+          <img
+            src={iconUser()}
+            alt="profile icon"
+            style={{width: '100%', height: '100%'}}
+          />
+        </button>
+
+        <ProfileModal/>
+        {isOpen && (
+          <div ref={cardRef} style={cardStyle}>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: '10px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              <img
+                src={iconUser()}
+                alt="Profile Icon"
+                style={{width: '30px', height: '30px', marginRight: '10px'}}
+              />
+              <div
+                style={{
+                  color: 'black',
+                  fontSize: '16px',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {user.email}
+              </div>
+            </div>
+            <button
+              style={{
+                backgroundColor: '#007bff',
+                color: '#fff',
+                padding: '5px 10px',
+                marginBottom: '10px',
+                border: 'none',
+                borderRadius: '3px',
+                cursor: 'pointer',
+              }}
+              onClick={handleLogout}
+            >
+              Logout
+            </button>
+            <a
+              href={profileRedirect}
+              style={{
+                backgroundColor: '#17a2b8',
+              }}
+            >
+              <button
+                style={{
+                  backgroundColor: '#17a2b8',
+                  color: '#fff',
+                  padding: '5px 10px',
+                  border: 'none',
+                  borderRadius: '3px',
+                  cursor: 'pointer',
+                }}
+                onClick={handleAccount}
+              >
+                Account
+              </button>
+            </a>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+
+UserButton.propTypes = {
+  position: PropTypes.string,
+  profileRedirect: PropTypes.string,
+};

src/components/UserProfile/UserProfile.jsx

@@ -2,6 +2,13 @@ import React, {useEffect, useState} from 'react';
 import {useEasyauth} from '../../hooks/useEasyauth/useEasyauth.jsx';
 import PropTypes from 'prop-types';
 import {getProfile} from '../../api/api.js';
+import {
+  Box,
+  Chip,
+  Divider,
+  PopoverPaper,
+  Typography,
+} from '@mui/material';
 
 export const UserProfile = ({loader}) => {
   const auth = useEasyauth();
@@ -19,12 +26,33 @@ export const UserProfile = ({loader}) => {
       return loader||'Lodaing...';
     } else {
       return (
-        <ul>
-          <li>Email: {profile.email}</li>
-          <li>Email verified: {JSON.stringify(profile.emailVerified)}</li>
-          <li>Phone: {profile.phone}</li>
-          <li>Phone verified: {JSON.stringify(profile.phoneVerified)}</li>
-        </ul>
+        <PopoverPaper sx={{m: 2, p: 2, width: 300}}>
+          <Box sx={{display: 'flex', alignItems: 'center', marginBottom: 2}}>
+            <Typography variant="h6" sx={{flexGrow: 1}}>
+          Profile
+            </Typography>
+            <Divider />
+          </Box>
+          <Typography variant="button">Email</Typography>
+          <Divider />
+          {profile.email}{' '}
+          <Chip
+
+            size="small"
+            color={profile.emailVerified ? 'success' : 'error'}
+            label={profile.emailVerified ? 'Verified' : 'Not Verified'}
+          />
+          <ul />
+          <Typography variant="button">Phone </Typography>
+          <Divider />
+          {profile.phone}{' '}
+          <Chip
+            size="small"
+            color={profile.phoneVerified ? 'success' : 'error'}
+            label={profile.phoneVerified ? 'Verified' : 'Not Verified'}
+          />
+
+        </PopoverPaper>
       );
     }
   } else {

src/components/uiComponents/iconUser.js

@@ -5,3 +5,4 @@ export * from './components/SignedInAndSignedOut/SignedIn.jsx';
 export * from './components/SignedInAndSignedOut/SignedOut.jsx';
 export * from './hooks/useUser/useUser.jsx';
 export * from './hooks/useStripe/useStripe.jsx';
+export * from './components/UserButton/UserButton.jsx';