@nestbotics/nct_frontend_common_components
Version:
A collection of reusable React components with theme management and styling utilities
297 lines (289 loc) • 10.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = AccountMenu;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactRouterDom = require("react-router-dom");
var _material = require("@mui/material");
var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
var _Logout = _interopRequireDefault(require("@mui/icons-material/Logout"));
var _Theme = require("../../theme/Theme");
var _AccountCircle = _interopRequireDefault(require("@mui/icons-material/AccountCircle"));
var _UserDataProvider = require("../../context/UserDataProvider");
var _jsCookie = _interopRequireDefault(require("js-cookie"));
var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
var _axios = _interopRequireDefault(require("axios"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// import Avatar from '@mui/material/Avatar';
// import PersonAdd from '@mui/icons-material/PersonAdd';
// import Swal from 'sweetalert2';
// import Settings from '@mui/icons-material/Settings';
// Optional toast import - fallback to console if not available
var toast;
try {
var toastModule = require('react-hot-toast');
toast = toastModule.toast || toastModule.default;
} catch (e) {
toast = {
success: function success(message) {
return console.log('Success:', message);
},
error: function error(message) {
return console.error('Error:', message);
},
loading: function loading(message) {
return console.log('Loading:', message);
}
};
}
// import AccessTimeIcon from '@mui/icons-material/AccessTime';
function AccountMenu(_ref) {
var _user$logintime, _user$logintime2;
var color = _ref.color;
var _useContext = (0, _react.useContext)(_UserDataProvider.userDataContext),
user = _useContext.user,
setLogoutToast = _useContext.setLogoutToast,
setUser = _useContext.setUser;
var navigate = (0, _reactRouterDom.useNavigate)();
var theme = (0, _material.useTheme)();
var colors = (0, _Theme.tokens)(theme.palette.mode);
var _React$useState = React.useState(null),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var open = Boolean(anchorEl);
var _useState = (0, _react.useState)(Date.now()),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
lastActivity = _useState2[0],
setLastActivity = _useState2[1];
var resetTimeout = (0, _react.useCallback)(function () {
setLastActivity(Date.now());
}, []);
(0, _react.useEffect)(function () {
var events = ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'];
var handleActivity = function handleActivity() {
resetTimeout();
};
events.forEach(function (event) {
window.addEventListener(event, handleActivity);
});
var checkTimeout = setInterval(function () {
if (Date.now() - lastActivity > 60000 * 5) {
// 1 minute
_jsCookie.default.remove('authToken');
_jsCookie.default.remove('userName');
setUser(null);
localStorage.setItem('needsRefresh', 'true');
window.location.href = '/';
toast.error('Session timed out. Please log in again.', {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
}
}, 1000); // Check every second
return function () {
events.forEach(function (event) {
window.removeEventListener(event, handleActivity);
});
clearInterval(checkTimeout);
};
}, [lastActivity, navigate, resetTimeout, setUser]);
var handleClick = function handleClick(event) {
setAnchorEl(event.currentTarget);
};
var handleClose = function handleClose() {
setAnchorEl(null);
};
var config = {
headers: {
Authorization: "Bearer ".concat(user.token)
}
};
var handleLogout = function handleLogout() {
// Remove cookies
_jsCookie.default.remove('authToken');
_jsCookie.default.remove('userName');
// Optionally, show a toast notification
toast.success("Logout Successfully", {
style: {
background: '#333',
color: '#fff',
borderRadius: '10px',
padding: '10px 14px'
}
});
// Update context and navigate to the login page
setLogoutToast(true);
setUser(null); // Clear user context if applicable
navigate("/", {
replace: true
});
window.location.href = "/";
// Close the menu
handleClose();
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
display: 'flex',
alignItems: 'center',
textAlign: 'center',
'& .css-14l4p2d-MuiButtonBase-root-MuiIconButton-root': {
marginLeft: '5px'
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
title: "User Profile",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
onClick: handleClick,
size: "small",
sx: {
ml: 0
},
"aria-controls": open ? 'account-menu' : undefined,
"aria-haspopup": "true",
"aria-expanded": open ? 'true' : undefined,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AccountCircle.default, {
sx: {
height: 30,
width: 34,
color: 'white'
}
})
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
anchorEl: anchorEl,
id: "account-menu",
open: open,
onClose: handleClose
// onClick={handleClose}
,
PaperProps: {
elevation: 0,
sx: {
backgroundColor: '#141414',
height: '195px',
width: '180px',
padding: '4px 4px',
overflow: 'visible',
color: 'white',
mt: 1.5,
'& .MuiAvatar-root': {
width: 32,
height: 50,
ml: -0.5,
mr: 1
},
'&::before': {
content: '""',
display: 'block',
position: 'absolute',
top: 0,
right: 14,
width: 20,
height: 10,
bgcolor: '#141414',
clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
transform: 'translateY(-50%)',
zIndex: 0
}
}
},
transformOrigin: {
horizontal: 'right',
vertical: 'top'
},
anchorOrigin: {
horizontal: 'right',
vertical: 'bottom'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
sx: {
display: 'flex',
flexDirection: 'column',
gap: '4px',
justifyContent: 'center',
alignItems: 'center'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
sx: {
paddingLeft: '5px',
color: "white"
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Person.default, {
fontSize: "medium",
color: "white"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: user.name
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
sx: {
justifyContent: 'center'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
gap: '4px'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "text-[13px]",
children: "LOGIN TIME"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: 'flex',
gap: '7px'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "text-xs",
children: (_user$logintime = user.logintime) === null || _user$logintime === void 0 ? void 0 : _user$logintime.split(' ')[0]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "text-xs",
children: (_user$logintime2 = user.logintime) === null || _user$logintime2 === void 0 ? void 0 : _user$logintime2.split(' ')[1]
})]
})]
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
onClick: handleLogout,
sx: {
justifyContent: 'center',
gap: '5px',
backgroundColor: '#452970',
borderRadius: '8px',
color: 'white',
'&:hover': {
backgroundColor: '#3e2a67' // Change this to the color you want on hover
}
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Logout.default, {
fontSize: "small"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: "Logout"
})]
})]
})]
});
}