remove unused
This commit is contained in:
Alex Holliday committed
1 parent
a46e282633
commit
08e4b0c39e
7 files changed
-1526
No files matched your search
@@ -1,74 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Button from "@mui/material/Button";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import Icon from "@/Components/v1/Icon";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Proptypes from "prop-types";
|
||||
|
||||
const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
endIcon={
|
||||
<Icon
|
||||
name="ChevronDown"
|
||||
size={20}
|
||||
color="secondary.light"
|
||||
/>
|
||||
}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{t("teamPanel.addTeamMember.addMemberMenu")}
|
||||
</Button>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
sx={{
|
||||
"& .MuiPaper-root": {
|
||||
minWidth: anchorEl?.offsetWidth || "auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
handleInviteOpen();
|
||||
}}
|
||||
>
|
||||
{t("teamPanel.inviteTeamMember")}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
handleIsRegisterOpen(true);
|
||||
}}
|
||||
>
|
||||
{t("teamPanel.register")}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
AddMemberMenu.propTypes = {
|
||||
handleInviteOpen: Proptypes.func.isRequired,
|
||||
handleIsRegisterOpen: Proptypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AddMemberMenu;
|
||||
@@ -1,48 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { newOrChangedCredentials } from "../../../../../Validation/validation.js";
|
||||
import { useTranslation } from "react-i18next";
|
||||
const useAddTeamMember = () => {
|
||||
const { t } = useTranslation();
|
||||
const [errors, setErrors] = useState({});
|
||||
|
||||
const clearErrors = () => setErrors({});
|
||||
|
||||
const validateFields = (name, value, formData) => {
|
||||
const { error } = newOrChangedCredentials.validate(
|
||||
{ [name]: value },
|
||||
{ abortEarly: false, context: { password: formData.password } }
|
||||
);
|
||||
|
||||
setErrors((prev) => ({
|
||||
...prev,
|
||||
[name]: error?.details?.[0]?.message || "",
|
||||
}));
|
||||
};
|
||||
|
||||
const validateForm = (formData, role) => {
|
||||
const { error } = newOrChangedCredentials.validate(formData, {
|
||||
abortEarly: false,
|
||||
context: { password: formData.password },
|
||||
});
|
||||
const formErrors = {};
|
||||
if (error) {
|
||||
for (const err of error.details) {
|
||||
formErrors[err.path[0]] = err.message;
|
||||
}
|
||||
}
|
||||
if (!role[0] || role.length === 0) {
|
||||
formErrors.role = t(
|
||||
"teamPanel.registerTeamMember.auth.common.inputs.role.errors.empty"
|
||||
);
|
||||
}
|
||||
if (Object.keys(formErrors).length > 0) {
|
||||
setErrors(formErrors);
|
||||
return false;
|
||||
}
|
||||
setErrors({});
|
||||
return true;
|
||||
};
|
||||
|
||||
return { errors, setErrors, clearErrors, validateFields, validateForm };
|
||||
};
|
||||
export default useAddTeamMember;
|
||||
@@ -1,213 +0,0 @@
|
||||
import { Button, Stack } from "@mui/material";
|
||||
import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
|
||||
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
||||
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
||||
import { useGetInviteToken } from "../../../../Hooks/inviteHooks.js";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { createToast } from "../../../../Utils/toastUtils.jsx";
|
||||
import { useState } from "react";
|
||||
import PasswordTooltip from "../../../Auth/components/PasswordTooltip.jsx";
|
||||
import useAddTeamMember from "./hooks/useAddTeamMember.jsx";
|
||||
import usePasswordFeedback from "../../../Auth/hooks/usePasswordFeedback.jsx";
|
||||
import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const INITIAL_FORM_STATE = {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirm: "",
|
||||
teamId: "",
|
||||
};
|
||||
|
||||
const INITIAL_ROLE_STATE = ["user"];
|
||||
const AddTeamMember = ({ handleIsRegisterOpen, isRegisterOpen, onMemberAdded }) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const { errors, setErrors, clearErrors, validateFields, validateForm } =
|
||||
useAddTeamMember();
|
||||
const { feedback, handlePasswordFeedback } = usePasswordFeedback();
|
||||
const [getInviteToken, clearToken, isLoading, error, token, addTeamMember] =
|
||||
useGetInviteToken();
|
||||
const [form, setForm] = useState(INITIAL_FORM_STATE);
|
||||
const [role, setRole] = useState(INITIAL_ROLE_STATE);
|
||||
const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
|
||||
const closeAddMemberModal = () => {
|
||||
handleIsRegisterOpen(false);
|
||||
setForm(INITIAL_FORM_STATE);
|
||||
setRole(INITIAL_ROLE_STATE);
|
||||
clearErrors();
|
||||
clearToken();
|
||||
};
|
||||
|
||||
const onChange = (e) => {
|
||||
let { name, value } = e.target;
|
||||
if (name === "email") value = value.toLowerCase();
|
||||
const updatedForm = { ...form, [name]: value };
|
||||
validateFields(name, value, updatedForm);
|
||||
setForm(updatedForm);
|
||||
|
||||
if (name === "password" || name === "confirm") {
|
||||
handlePasswordFeedback(updatedForm, name, value, form, errors, setErrors);
|
||||
}
|
||||
};
|
||||
|
||||
const onsubmitAddMember = async (event) => {
|
||||
event.preventDefault();
|
||||
if (!validateForm(form, role)) return;
|
||||
try {
|
||||
setIsLoadingSubmit(true);
|
||||
await addTeamMember(form, role);
|
||||
createToast({
|
||||
body: t("teamPanel.registerToast.success"),
|
||||
});
|
||||
onMemberAdded();
|
||||
closeAddMemberModal();
|
||||
} catch (error) {
|
||||
const errorMsg = error.response?.data?.msg || error.message || "unknownError";
|
||||
createToast({
|
||||
type: "error",
|
||||
body: t(errorMsg),
|
||||
});
|
||||
} finally {
|
||||
setIsLoadingSubmit(false);
|
||||
}
|
||||
};
|
||||
const tErr = (key) => (key ? t([`teamPanel.registerTeamMember.${key}`, key]) : "");
|
||||
return (
|
||||
<>
|
||||
<GenericDialog
|
||||
title={t("teamPanel.addTeamMember.title")}
|
||||
description={t("teamPanel.addTeamMember.description")}
|
||||
open={isRegisterOpen}
|
||||
onClose={closeAddMemberModal}
|
||||
theme={theme}
|
||||
width={{ sm: "55%", md: "50%", lg: "40%", xl: "30%" }}
|
||||
>
|
||||
<TextInput
|
||||
name="firstName"
|
||||
label={t("auth.common.inputs.firstName.label")}
|
||||
isRequired={true}
|
||||
gap={theme.spacing(4)}
|
||||
placeholder={t("auth.common.inputs.firstName.placeholder")}
|
||||
value={form.firstName}
|
||||
onChange={onChange}
|
||||
error={errors.firstName ? true : false}
|
||||
helperText={errors.firstName ? tErr(errors.firstName) : null}
|
||||
sx={{ mb: errors.firstName ? theme.spacing(15) : theme.spacing(5) }}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
name="lastName"
|
||||
label={t("auth.common.inputs.lastName.label")}
|
||||
isRequired={true}
|
||||
gap={theme.spacing(4)}
|
||||
placeholder={t("auth.common.inputs.lastName.placeholder")}
|
||||
value={form.lastName}
|
||||
onChange={onChange}
|
||||
error={errors.lastName ? true : false}
|
||||
helperText={errors.lastName ? tErr(errors.lastName) : null}
|
||||
sx={{ mb: errors.lastName ? theme.spacing(15) : theme.spacing(5) }}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
type="email"
|
||||
label={t("auth.common.inputs.email.label")}
|
||||
name="email"
|
||||
gap={theme.spacing(4)}
|
||||
isRequired={true}
|
||||
id="input-team-member"
|
||||
placeholder={t("teamPanel.email")}
|
||||
value={form.email}
|
||||
onChange={onChange}
|
||||
error={errors.email ? true : false}
|
||||
helperText={errors.email ? tErr(errors.email) : null}
|
||||
sx={{ mb: errors.email ? theme.spacing(15) : theme.spacing(5) }}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t("teamPanel.role")}
|
||||
id="team-member-role"
|
||||
name="role"
|
||||
required={true}
|
||||
placeholder={t("teamPanel.selectRole")}
|
||||
isHidden={true}
|
||||
value={role[0] || ""}
|
||||
sx={{ mb: theme.spacing(5) }}
|
||||
onChange={(event) => setRole([event.target.value])}
|
||||
items={[
|
||||
{ _id: "admin", name: t("roles.admin") },
|
||||
{ _id: "user", name: t("roles.teamMember") },
|
||||
]}
|
||||
/>
|
||||
|
||||
<PasswordTooltip
|
||||
feedback={feedback}
|
||||
form={form}
|
||||
>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-password-input"
|
||||
name="password"
|
||||
label={t("auth.common.inputs.password.label")}
|
||||
isRequired={true}
|
||||
placeholder="••••••••••"
|
||||
value={form.password}
|
||||
onChange={onChange}
|
||||
error={errors.password && errors.password[0] ? true : false}
|
||||
endAdornment={<PasswordEndAdornment />}
|
||||
sx={{ mb: theme.spacing(5) }}
|
||||
/>
|
||||
</PasswordTooltip>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="register-confirm-input"
|
||||
name="confirm"
|
||||
label={t("auth.common.inputs.passwordConfirm.label")}
|
||||
gap={theme.spacing(4)}
|
||||
isRequired={true}
|
||||
placeholder={t("auth.common.inputs.passwordConfirm.placeholder")}
|
||||
autoComplete="current-password"
|
||||
value={form.confirm}
|
||||
onChange={onChange}
|
||||
error={errors.confirm && errors.confirm[0] ? true : false}
|
||||
endAdornment={<PasswordEndAdornment />}
|
||||
sx={{ mb: theme.spacing(5) }}
|
||||
/>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={theme.spacing(10)}
|
||||
mt={theme.spacing(8)}
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={closeAddMemberModal}
|
||||
disabled={isLoadingSubmit}
|
||||
>
|
||||
{t("teamPanel.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={onsubmitAddMember}
|
||||
disabled={isLoadingSubmit}
|
||||
>
|
||||
{t("teamPanel.addTeamMember.addButton")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</GenericDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
AddTeamMember.propTypes = {
|
||||
handleIsRegisterOpen: PropTypes.func.isRequired,
|
||||
isRegisterOpen: PropTypes.bool.isRequired,
|
||||
onMemberAdded: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AddTeamMember;
|
||||
@@ -1,302 +0,0 @@
|
||||
import TabPanel from "@mui/lab/TabPanel";
|
||||
import { useState } from "react";
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { Box, Stack, Typography, Button } from "@mui/material";
|
||||
import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
|
||||
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
||||
import { newOrChangedCredentials } from "../../../Validation/validation.js";
|
||||
import Alert from "@/Components/v1/Alert/index.jsx";
|
||||
import { update } from "../../../Features/Auth/authSlice.js";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { createToast } from "../../../Utils/toastUtils.jsx";
|
||||
import { getTouchedFieldErrors } from "../../../Validation/error.js";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { clearAuthState } from "../../../Features/Auth/authSlice.js";
|
||||
import TextLink from "@/Components/v1/TextLink/index.jsx";
|
||||
|
||||
const defaultPasswordsState = {
|
||||
password: "",
|
||||
newPassword: "",
|
||||
confirm: "",
|
||||
};
|
||||
|
||||
/**
|
||||
* PasswordPanel component manages the form for editing password.
|
||||
*
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
|
||||
const PasswordPanel = () => {
|
||||
const theme = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const SPACING_GAP = theme.spacing(12);
|
||||
|
||||
//redux state
|
||||
const { isLoading, authToken } = useSelector((state) => state.auth);
|
||||
|
||||
const idToName = {
|
||||
"edit-current-password": "password",
|
||||
"edit-new-password": "newPassword",
|
||||
"edit-confirm-password": "confirm",
|
||||
};
|
||||
|
||||
const [localData, setLocalData] = useState(defaultPasswordsState);
|
||||
const [errors, setErrors] = useState(defaultPasswordsState);
|
||||
const [touchedFields, setTouchedFields] = useState({
|
||||
password: false,
|
||||
newPassword: false,
|
||||
confirm: false,
|
||||
});
|
||||
|
||||
const handleChange = (event) => {
|
||||
const { value, id } = event.target;
|
||||
const name = idToName[id];
|
||||
|
||||
const updatedData = {
|
||||
...localData,
|
||||
[name]: value,
|
||||
};
|
||||
const updatedTouchedFields = {
|
||||
...touchedFields,
|
||||
[name]: true,
|
||||
};
|
||||
|
||||
const validation = newOrChangedCredentials.validate(
|
||||
{ ...updatedData },
|
||||
{ abortEarly: false, context: { password: updatedData.newPassword } }
|
||||
);
|
||||
|
||||
const updatedErrors = getTouchedFieldErrors(validation, updatedTouchedFields);
|
||||
|
||||
if (!touchedFields[name]) {
|
||||
setTouchedFields(updatedTouchedFields);
|
||||
}
|
||||
|
||||
setLocalData(updatedData);
|
||||
setErrors(updatedErrors);
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
// Check for expired/invalid token before submitting
|
||||
if (!authToken) {
|
||||
createToast({
|
||||
body: "Your session has expired. Please log in again.",
|
||||
});
|
||||
dispatch(clearAuthState());
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = newOrChangedCredentials.validate(localData, {
|
||||
abortEarly: false,
|
||||
context: { password: localData.newPassword },
|
||||
});
|
||||
|
||||
if (error) {
|
||||
const newErrors = {};
|
||||
error.details.forEach((err) => {
|
||||
newErrors[err.path[0]] = err.message;
|
||||
});
|
||||
setErrors(newErrors);
|
||||
} else {
|
||||
const action = await dispatch(update({ localData }));
|
||||
if (action.payload.success) {
|
||||
createToast({
|
||||
body: t(
|
||||
"passwordPanel.passwordChangedSuccess",
|
||||
"Your password was changed successfully."
|
||||
),
|
||||
});
|
||||
setLocalData({
|
||||
password: "",
|
||||
newPassword: "",
|
||||
confirm: "",
|
||||
});
|
||||
} else {
|
||||
// TODO: Check for other errors?
|
||||
createToast({
|
||||
body: t(
|
||||
"passwordPanel.passwordInputIncorrect",
|
||||
"Your password input was incorrect."
|
||||
),
|
||||
});
|
||||
setErrors({ password: "*" + action.payload.msg + "." });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
value="password"
|
||||
sx={{
|
||||
"& h1, & input": {
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
onSubmit={handleSubmit}
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
gap={theme.spacing(26)}
|
||||
maxWidth={"80ch"} // Keep maxWidth
|
||||
>
|
||||
<TextInput
|
||||
type="text"
|
||||
id="hidden-username"
|
||||
name="username"
|
||||
autoComplete="username"
|
||||
hidden={true}
|
||||
value=""
|
||||
/>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent={"flex-start"}
|
||||
alignItems={"center"}
|
||||
gap={SPACING_GAP}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
width="20ch"
|
||||
>
|
||||
{t("passwordPanel.currentPassword", "Current password")}
|
||||
</Typography>
|
||||
<TextInput
|
||||
type="password"
|
||||
id="edit-current-password"
|
||||
placeholder={t(
|
||||
"passwordPanel.enterCurrentPassword",
|
||||
"Enter your current password"
|
||||
)}
|
||||
autoComplete="current-password"
|
||||
value={localData.password}
|
||||
onChange={handleChange}
|
||||
error={errors[idToName["edit-current-password"]] ? true : false}
|
||||
helperText={
|
||||
errors[idToName["edit-current-password"]]
|
||||
? t(errors[idToName["edit-current-password"]])
|
||||
: ""
|
||||
}
|
||||
endAdornment={<PasswordEndAdornment />}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems={"flex-start"}
|
||||
gap={SPACING_GAP}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
width="20ch"
|
||||
>
|
||||
{t("passwordPanel.newPassword", "New password")}
|
||||
</Typography>
|
||||
|
||||
<TextInput
|
||||
type="password"
|
||||
id="edit-new-password"
|
||||
placeholder={t("passwordPanel.enterNewPassword", "Enter your new password")}
|
||||
autoComplete="new-password"
|
||||
value={localData.newPassword}
|
||||
onChange={handleChange}
|
||||
error={errors[idToName["edit-new-password"]] ? true : false}
|
||||
helperText={
|
||||
errors[idToName["edit-new-password"]]
|
||||
? t(errors[idToName["edit-new-password"]])
|
||||
: ""
|
||||
}
|
||||
endAdornment={<PasswordEndAdornment />}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems={"flex-start"}
|
||||
gap={SPACING_GAP}
|
||||
flexWrap={"wrap"}
|
||||
>
|
||||
<Typography
|
||||
component="h1"
|
||||
width="20ch"
|
||||
>
|
||||
{t("passwordPanel.confirmNewPassword", "Confirm new password")}
|
||||
</Typography>
|
||||
|
||||
<TextInput
|
||||
type="password"
|
||||
id="edit-confirm-password"
|
||||
placeholder={t("confirmPassword")}
|
||||
autoComplete="new-password"
|
||||
value={localData.confirm}
|
||||
onChange={handleChange}
|
||||
error={errors[idToName["edit-confirm-password"]] ? true : false}
|
||||
helperText={
|
||||
errors[idToName["edit-confirm-password"]]
|
||||
? t(errors[idToName["edit-confirm-password"]])
|
||||
: ""
|
||||
}
|
||||
endAdornment={<PasswordEndAdornment />}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
{Object.keys(errors).length > 0 && (
|
||||
<Box sx={{ maxWidth: "70ch" }}>
|
||||
<Alert
|
||||
variant="warning"
|
||||
body={t(
|
||||
"passwordPanel.passwordRequirements",
|
||||
"New password must contain at least 8 characters and must have at least one uppercase letter, one lowercase letter, one number and one special character."
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<TextLink
|
||||
text={"Forgot password?"}
|
||||
linkText={"Reset password"}
|
||||
state={{ from: location.pathname }}
|
||||
href={"/forgot-password"}
|
||||
/>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
type="submit"
|
||||
loading={isLoading}
|
||||
loadingIndicator={t("commonSaving", "Saving...")}
|
||||
disabled={
|
||||
Object.keys(errors).length > 0 ||
|
||||
Object.values(localData).filter((value) => value === "").length > 0
|
||||
}
|
||||
sx={{
|
||||
px: theme.spacing(12),
|
||||
}}
|
||||
>
|
||||
{t("commonSave", "Save")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</TabPanel>
|
||||
);
|
||||
};
|
||||
|
||||
PasswordPanel.propTypes = {
|
||||
// No props are being passed to this component, hence no specific PropTypes are defined.
|
||||
};
|
||||
|
||||
export default PasswordPanel;
|
||||
@@ -1,437 +0,0 @@
|
||||
import { useTheme } from "@emotion/react";
|
||||
import { useState } from "react";
|
||||
import TabPanel from "@mui/lab/TabPanel";
|
||||
import { Box, Button, Divider, Stack, Typography } from "@mui/material";
|
||||
import Avatar from "@/Components/v1/Avatar/index.jsx";
|
||||
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
||||
import ImageUpload from "@/Components/v1/Inputs/ImageUpload/index.jsx";
|
||||
import { newOrChangedCredentials } from "../../../Validation/validation.js";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { clearAuthState, deleteUser, update } from "../../../Features/Auth/authSlice.js";
|
||||
import { createToast } from "../../../Utils/toastUtils.jsx";
|
||||
import { logger } from "../../../Utils/Logger.js";
|
||||
import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
|
||||
import Dialog from "@/Components/v1/Dialog/index.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/**
|
||||
* ProfilePanel component displays a form for editing user profile information
|
||||
* and allows for actions like updating profile picture, credentials,
|
||||
* and deleting account.
|
||||
*
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
|
||||
const ProfilePanel = () => {
|
||||
const theme = useTheme();
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
const SPACING_GAP = theme.spacing(12);
|
||||
|
||||
//redux state
|
||||
const { user, isLoading } = useSelector((state) => state.auth);
|
||||
|
||||
const idToName = {
|
||||
"edit-first-name": "firstName",
|
||||
"edit-last-name": "lastName",
|
||||
// Disabled for now, will revisit in the future
|
||||
// "edit-email": "email",
|
||||
};
|
||||
|
||||
// Local state for form data, errors, and file handling
|
||||
const [localData, setLocalData] = useState({
|
||||
firstName: user.firstName,
|
||||
lastName: user.lastName,
|
||||
// email: user.email, // Disabled for now
|
||||
});
|
||||
const [errors, setErrors] = useState({});
|
||||
const [file, setFile] = useState();
|
||||
|
||||
// Handles input field changes and performs validation
|
||||
const handleChange = (event) => {
|
||||
errors["unchanged"] && clearError("unchanged");
|
||||
const { value, id } = event.target;
|
||||
const name = idToName[id];
|
||||
setLocalData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
|
||||
validateField({ [name]: value }, newOrChangedCredentials, name);
|
||||
};
|
||||
|
||||
// Validates input against provided schema and updates error state
|
||||
const validateField = (toValidate, schema, name = "picture") => {
|
||||
const { error } = schema.validate(toValidate, { abortEarly: false });
|
||||
setErrors((prev) => {
|
||||
const prevErrors = { ...prev };
|
||||
if (error) prevErrors[name] = error.details[0].message;
|
||||
else delete prevErrors[name];
|
||||
return prevErrors;
|
||||
});
|
||||
if (error) return true;
|
||||
};
|
||||
|
||||
// Clears specific error from errors state
|
||||
const clearError = (err) => {
|
||||
setErrors((prev) => {
|
||||
const updatedErrors = { ...prev };
|
||||
if (updatedErrors[err]) delete updatedErrors[err];
|
||||
return updatedErrors;
|
||||
});
|
||||
};
|
||||
|
||||
// Resets picture-related states and clears interval
|
||||
const removePicture = () => {
|
||||
errors["picture"] && clearError("picture");
|
||||
setFile(undefined);
|
||||
setLocalData((prev) => ({
|
||||
...prev,
|
||||
file: undefined,
|
||||
deleteProfileImage: true,
|
||||
}));
|
||||
};
|
||||
|
||||
// Opens the picture update modal
|
||||
const openPictureModal = () => {
|
||||
setIsOpen("picture");
|
||||
setFile(undefined);
|
||||
};
|
||||
|
||||
// Closes the picture update modal and resets related states
|
||||
const closePictureModal = () => {
|
||||
if (errors["picture"]) clearError("picture");
|
||||
setFile(undefined);
|
||||
setIsOpen("");
|
||||
};
|
||||
|
||||
// Updates profile image displayed on UI
|
||||
const handleUpdatePicture = () => {
|
||||
setLocalData((prev) => ({
|
||||
...prev,
|
||||
file: file?.src,
|
||||
deleteProfileImage: false,
|
||||
}));
|
||||
setIsOpen("");
|
||||
if (errors["unchanged"]) clearError("unchanged");
|
||||
};
|
||||
|
||||
// Handles form submission to update user profile
|
||||
const handleSaveProfile = async (event) => {
|
||||
event.preventDefault();
|
||||
const nameChanged =
|
||||
localData.firstName !== user.firstName || localData.lastName !== user.lastName;
|
||||
|
||||
const avatarChanged =
|
||||
localData.deleteProfileImage === true ||
|
||||
(localData.file && localData.file !== `data:image/png;base64,${user.avatarImage}`);
|
||||
|
||||
if (!nameChanged && !avatarChanged) {
|
||||
createToast({
|
||||
body: "Unable to update profile — no changes detected.",
|
||||
});
|
||||
setErrors({ unchanged: "unable to update profile" });
|
||||
return;
|
||||
}
|
||||
|
||||
const action = await dispatch(update({ localData }));
|
||||
if (action.payload.success) {
|
||||
createToast({
|
||||
body: "Your profile data was changed successfully.",
|
||||
});
|
||||
} else {
|
||||
createToast({
|
||||
body: "There was an error updating your profile data.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Removes current profile image from UI
|
||||
const handleDeletePicture = () => {
|
||||
setLocalData((prev) => ({
|
||||
...prev,
|
||||
deleteProfileImage: true,
|
||||
}));
|
||||
setFile(undefined);
|
||||
errors["unchanged"] && clearError("unchanged");
|
||||
};
|
||||
|
||||
// Initiates the account deletion process
|
||||
const handleDeleteAccount = async () => {
|
||||
const action = await dispatch(deleteUser());
|
||||
if (action.payload.success) {
|
||||
dispatch(clearAuthState());
|
||||
} else {
|
||||
if (action.payload) {
|
||||
// dispatch errors
|
||||
createToast({
|
||||
body: action.payload.msg,
|
||||
});
|
||||
} else {
|
||||
// unknown errors
|
||||
createToast({
|
||||
body: "Unknown error.",
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Modal state and control functions
|
||||
const [isOpen, setIsOpen] = useState("");
|
||||
const isModalOpen = (name) => isOpen === name;
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
value="profile"
|
||||
sx={{
|
||||
"& h1, & p, & input": {
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
{/* This 0.9 is a bit magic numbering, refactor */}
|
||||
<Box flex={0.9}>
|
||||
<Typography component="h1">{t("FirstName")}</Typography>
|
||||
</Box>
|
||||
<TextInput
|
||||
id="edit-first-name"
|
||||
value={localData.firstName}
|
||||
placeholder="Enter your first name"
|
||||
autoComplete="given-name"
|
||||
onChange={handleChange}
|
||||
error={errors[idToName["edit-first-name"]] ? true : false}
|
||||
helperText={
|
||||
errors[idToName["edit-first-name"]]
|
||||
? t(errors[idToName["edit-first-name"]])
|
||||
: ""
|
||||
}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
<Box flex={0.9}>
|
||||
<Typography component="h1">{t("LastName")}</Typography>
|
||||
</Box>
|
||||
<TextInput
|
||||
id="edit-last-name"
|
||||
placeholder="Enter your last name"
|
||||
autoComplete="family-name"
|
||||
value={localData.lastName}
|
||||
onChange={handleChange}
|
||||
error={errors[idToName["edit-last-name"]] ? true : false}
|
||||
helperText={
|
||||
errors[idToName["edit-last-name"]]
|
||||
? t(errors[idToName["edit-last-name"]])
|
||||
: ""
|
||||
}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
<Stack flex={0.9}>
|
||||
<Typography component="h1">{t("auth.common.inputs.email.label")}</Typography>
|
||||
<Typography
|
||||
component="p"
|
||||
sx={{ opacity: 0.6 }}
|
||||
>
|
||||
{t("EmailDescriptionText")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<TextInput
|
||||
id="edit-email"
|
||||
value={user.email}
|
||||
placeholder="Enter your email"
|
||||
autoComplete="email"
|
||||
onChange={() => logger.warn("disabled")}
|
||||
disabled={true}
|
||||
flex={1}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
<Stack flex={0.9}>
|
||||
<Typography component="h1">{t("YourPhoto")}</Typography>
|
||||
<Typography
|
||||
component="p"
|
||||
sx={{ opacity: 0.6 }}
|
||||
>
|
||||
{t("PhotoDescriptionText")}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
flex={1}
|
||||
gap={"8px"}
|
||||
>
|
||||
<Avatar
|
||||
src={
|
||||
localData?.deleteProfileImage
|
||||
? "/static/images/avatar/2.jpg"
|
||||
: localData?.file
|
||||
? localData.file
|
||||
: ""
|
||||
}
|
||||
sx={{ marginRight: "8px" }}
|
||||
/>
|
||||
<Button
|
||||
variant="contained" // CAIO_REIVEW
|
||||
color="error"
|
||||
onClick={handleDeletePicture}
|
||||
>
|
||||
{t("delete")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained" // CAIO_REVIEW
|
||||
color="accent"
|
||||
onClick={openPictureModal}
|
||||
>
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Divider
|
||||
aria-hidden="true"
|
||||
width="0"
|
||||
sx={{
|
||||
marginY: theme.spacing(1),
|
||||
}}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Box width="fit-content">
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleSaveProfile}
|
||||
loading={isLoading}
|
||||
loadingIndicator="Saving..."
|
||||
disabled={Object.keys(errors).length !== 0 && !errors?.picture && true}
|
||||
sx={{ px: theme.spacing(12) }}
|
||||
>
|
||||
{t("save")}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Divider
|
||||
aria-hidden="true"
|
||||
sx={{
|
||||
marginY: theme.spacing(20),
|
||||
borderColor: theme.palette.primary.lowContrast,
|
||||
}}
|
||||
/>
|
||||
{!user.role.includes("demo") && (
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
>
|
||||
<Box mb={theme.spacing(6)}>
|
||||
<Typography component="h1">{t("DeleteAccountTitle")}</Typography>
|
||||
<Typography
|
||||
component="p"
|
||||
sx={{ opacity: 0.6 }}
|
||||
>
|
||||
{t("DeleteDescriptionText")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="error"
|
||||
onClick={() => setIsOpen("delete")}
|
||||
>
|
||||
{t("DeleteAccountButton")}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
<Dialog
|
||||
open={isModalOpen("delete")}
|
||||
theme={theme}
|
||||
title={t("DeleteWarningTitle")}
|
||||
description={t("DeleteAccountWarning")}
|
||||
onCancel={() => setIsOpen("")}
|
||||
confirmationButtonLabel={t("DeleteAccountButton")}
|
||||
onConfirm={handleDeleteAccount}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
|
||||
<GenericDialog
|
||||
title={"Upload Image"}
|
||||
open={isModalOpen("picture")}
|
||||
onClose={closePictureModal}
|
||||
theme={theme}
|
||||
>
|
||||
<ImageUpload
|
||||
src={
|
||||
file?.src
|
||||
? file.src
|
||||
: localData?.deleteProfileImage
|
||||
? ""
|
||||
: localData?.file
|
||||
? localData.file
|
||||
: user?.avatarImage
|
||||
? `data:image/png;base64,${user.avatarImage}`
|
||||
: ""
|
||||
}
|
||||
onChange={(newFile) => {
|
||||
if (newFile) {
|
||||
setFile(newFile);
|
||||
clearError("unchanged");
|
||||
}
|
||||
}}
|
||||
previewIsRound
|
||||
maxSize={3 * 1024 * 1024}
|
||||
/>
|
||||
<Stack
|
||||
direction="row"
|
||||
mt={theme.spacing(10)}
|
||||
gap={theme.spacing(5)}
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
onClick={removePicture}
|
||||
>
|
||||
{t("remove")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleUpdatePicture}
|
||||
disabled={!!errors.picture || !file?.src}
|
||||
>
|
||||
{t("update")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</GenericDialog>
|
||||
</TabPanel>
|
||||
);
|
||||
};
|
||||
|
||||
ProfilePanel.propTypes = {
|
||||
// No props are being passed to this component, hence no specific PropTypes are defined.
|
||||
};
|
||||
|
||||
export default ProfilePanel;
|
||||
@@ -1,353 +0,0 @@
|
||||
import { useTheme } from "@emotion/react";
|
||||
import TabPanel from "@mui/lab/TabPanel";
|
||||
import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
|
||||
import { newOrChangedCredentials } from "../../../Validation/validation.js";
|
||||
import { networkService } from "../../../main.jsx";
|
||||
import { createToast } from "../../../Utils/toastUtils.jsx";
|
||||
import Select from "@/Components/v1/Inputs/Select/index.jsx";
|
||||
import { GenericDialog } from "@/Components/v1/Dialog/genericDialog.jsx";
|
||||
import AddTeamMember from "./AddTeamMember/index.jsx";
|
||||
import DataTable from "@/Components/v1/Table/index.jsx";
|
||||
import { useGetInviteToken } from "../../../Hooks/inviteHooks.js";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useIsSuperAdmin } from "@/Hooks/useIsAdmin.js";
|
||||
import AddMemberMenu from "./AddMemberMenu/index.jsx";
|
||||
|
||||
const TeamPanel = () => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const SPACING_GAP = theme.spacing(12);
|
||||
|
||||
const [toInvite, setToInvite] = useState({
|
||||
email: "",
|
||||
role: ["user"],
|
||||
});
|
||||
const [data, setData] = useState([]);
|
||||
const [members, setMembers] = useState([]);
|
||||
const [filter, setFilter] = useState("all");
|
||||
const [isDisabled, setIsDisabled] = useState(true);
|
||||
const [errors, setErrors] = useState({});
|
||||
const [isSendingInvite, setIsSendingInvite] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [getInviteToken, clearToken, isLoading, error, token] = useGetInviteToken();
|
||||
const isSuperAdmin = useIsSuperAdmin();
|
||||
|
||||
const headers = [
|
||||
{
|
||||
id: "name",
|
||||
content: t("teamPanel.table.name"),
|
||||
render: (row) => {
|
||||
return (
|
||||
<Stack>
|
||||
<Typography color={theme.palette.primary.contrastTextSecondary}>
|
||||
{row.firstName + " " + row.lastName}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{t("teamPanel.table.created")}{" "}
|
||||
{new Date(row.createdAt).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Stack>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ id: "email", content: t("teamPanel.table.email"), render: (row) => row.email },
|
||||
{
|
||||
id: "role",
|
||||
content: t("teamPanel.table.role"),
|
||||
render: (row) => row.role,
|
||||
},
|
||||
];
|
||||
const [refreshTrigger, setRefreshTrigger] = useState(false);
|
||||
const refreshTeamList = () => {
|
||||
setRefreshTrigger((prev) => !prev);
|
||||
};
|
||||
useEffect(() => {
|
||||
const fetchTeam = async () => {
|
||||
try {
|
||||
const response = await networkService.getAllUsers();
|
||||
setMembers(response.data.data);
|
||||
} catch (error) {
|
||||
createToast({
|
||||
body: error.message || "Error fetching team members.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
fetchTeam();
|
||||
}, [refreshTrigger]);
|
||||
|
||||
useEffect(() => {
|
||||
const ROLE_MAP = {
|
||||
superadmin: t("roles.superAdmin"),
|
||||
admin: t("roles.admin"),
|
||||
user: t("roles.teamMember"),
|
||||
demo: t("roles.demoUser"),
|
||||
};
|
||||
let team = members;
|
||||
if (filter !== "all")
|
||||
team = members.filter((member) => {
|
||||
if (filter === "admin") {
|
||||
return member.role.includes("admin") || member.role.includes("superadmin");
|
||||
}
|
||||
return member.role.includes(filter);
|
||||
});
|
||||
|
||||
team = team.map((member) => ({
|
||||
...member,
|
||||
id: member.id,
|
||||
role: member.role.map((role) => ROLE_MAP[role]).join(","),
|
||||
}));
|
||||
setData(team);
|
||||
}, [members, filter, t]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDisabled(Object.keys(errors).length !== 0 || toInvite.email === "");
|
||||
}, [errors, toInvite.email]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isRegisterOpen, setIsRegisterOpen] = useState(false);
|
||||
const handleIsRegisterOpen = (open) => {
|
||||
setIsRegisterOpen(open);
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
const { value } = event.target;
|
||||
const newEmail = value?.toLowerCase() || value;
|
||||
setToInvite((prev) => ({
|
||||
...prev,
|
||||
email: newEmail,
|
||||
}));
|
||||
|
||||
const validation = newOrChangedCredentials.validate(
|
||||
{ email: newEmail },
|
||||
{ abortEarly: false }
|
||||
);
|
||||
|
||||
setErrors((prev) => {
|
||||
const updatedErrors = { ...prev };
|
||||
|
||||
if (validation.error) {
|
||||
updatedErrors.email = validation.error.details[0].message;
|
||||
} else {
|
||||
delete updatedErrors.email;
|
||||
}
|
||||
return updatedErrors;
|
||||
});
|
||||
};
|
||||
|
||||
const handleGetToken = async () => {
|
||||
await getInviteToken({ email: toInvite.email, role: toInvite.role });
|
||||
};
|
||||
const handleInviteMember = async () => {
|
||||
if (!toInvite.email) {
|
||||
setErrors((prev) => ({ ...prev, email: "Email is required." }));
|
||||
return;
|
||||
}
|
||||
setIsSendingInvite(true);
|
||||
if (!toInvite.role.includes("user") || !toInvite.role.includes("admin"))
|
||||
setToInvite((prev) => ({ ...prev, role: ["user"] }));
|
||||
|
||||
const { error } = newOrChangedCredentials.validate(
|
||||
{ email: toInvite.email },
|
||||
{
|
||||
abortEarly: false,
|
||||
}
|
||||
);
|
||||
|
||||
if (error) {
|
||||
setErrors((prev) => ({ ...prev, email: error.details[0].message }));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await networkService.sendInvitationToken({
|
||||
email: toInvite.email,
|
||||
role: toInvite.role,
|
||||
});
|
||||
closeInviteModal();
|
||||
createToast({
|
||||
body: "Member invited. They will receive an email with details on how to create their account.",
|
||||
});
|
||||
} catch (error) {
|
||||
createToast({
|
||||
body: error?.response?.data?.msg || error.message || "Unknown error.",
|
||||
});
|
||||
} finally {
|
||||
setIsSendingInvite(false);
|
||||
}
|
||||
};
|
||||
|
||||
const closeInviteModal = () => {
|
||||
setIsOpen(false);
|
||||
clearToken();
|
||||
setToInvite({ email: "", role: ["0"] });
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
return (
|
||||
<TabPanel
|
||||
value="team"
|
||||
sx={{
|
||||
"& h1": {
|
||||
color: theme.palette.primary.contrastTextTertiary,
|
||||
},
|
||||
"& .MuiTable-root .MuiTableBody-root .MuiTableCell-root, & .MuiTable-root p + p":
|
||||
{
|
||||
color: theme.palette.primary.contrastTextSecondary,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
component="form"
|
||||
noValidate
|
||||
spellCheck="false"
|
||||
gap={SPACING_GAP}
|
||||
>
|
||||
<Typography component="h1">{t("teamPanel.teamMembers")}</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="flex-end"
|
||||
gap={theme.spacing(6)}
|
||||
sx={{ fontSize: 14 }}
|
||||
>
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(filter === "all").toString()}
|
||||
onClick={() => setFilter("all")}
|
||||
>
|
||||
{t("teamPanel.filter.all")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(filter === "admin").toString()}
|
||||
onClick={() => setFilter("admin")}
|
||||
>
|
||||
{t("roles.superAdmin")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="group"
|
||||
filled={(filter === "user").toString()}
|
||||
onClick={() => setFilter("user")}
|
||||
>
|
||||
{t("teamPanel.filter.member")}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Stack>
|
||||
|
||||
<AddTeamMember
|
||||
handleIsRegisterOpen={handleIsRegisterOpen}
|
||||
isRegisterOpen={isRegisterOpen}
|
||||
onMemberAdded={refreshTeamList}
|
||||
/>
|
||||
<AddMemberMenu
|
||||
handleInviteOpen={() => setIsOpen(true)}
|
||||
handleIsRegisterOpen={handleIsRegisterOpen}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<DataTable
|
||||
headers={headers}
|
||||
data={data}
|
||||
config={{
|
||||
emptyView: t("teamPanel.noMembers"),
|
||||
rowSX: {
|
||||
cursor: isSuperAdmin ? "pointer" : "default",
|
||||
},
|
||||
onRowClick: (row) => {
|
||||
if (isSuperAdmin) {
|
||||
navigate(`/account/team/${row.id}`);
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<GenericDialog
|
||||
title={t("teamPanel.inviteNewTeamMember")}
|
||||
description={t("teamPanel.inviteDescription")}
|
||||
open={isOpen}
|
||||
onClose={closeInviteModal}
|
||||
theme={theme}
|
||||
>
|
||||
<TextInput
|
||||
marginBottom={SPACING_GAP}
|
||||
type="email"
|
||||
id="input-team-member"
|
||||
placeholder={t("teamPanel.email")}
|
||||
value={toInvite.email}
|
||||
onChange={handleChange}
|
||||
error={errors.email ? true : false}
|
||||
helperText={t(errors.email)}
|
||||
/>
|
||||
<Select
|
||||
id="team-member-role"
|
||||
placeholder={t("teamPanel.selectRole")}
|
||||
isHidden={true}
|
||||
value={toInvite.role[0]}
|
||||
onChange={(event) =>
|
||||
setToInvite((prev) => ({
|
||||
...prev,
|
||||
role: [event.target.value],
|
||||
}))
|
||||
}
|
||||
items={[
|
||||
{ _id: "admin", name: t("roles.admin") },
|
||||
{ _id: "user", name: t("roles.teamMember") },
|
||||
]}
|
||||
/>
|
||||
{token && <Typography>{t("teamPanel.inviteLink")}</Typography>}
|
||||
{token && (
|
||||
<TextInput
|
||||
id="invite-token"
|
||||
value={token}
|
||||
/>
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
gap={theme.spacing(4)}
|
||||
mt={theme.spacing(8)}
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<Button
|
||||
loading={isSendingInvite}
|
||||
variant="contained" // CAIO_REVIEW
|
||||
color="error"
|
||||
onClick={closeInviteModal}
|
||||
>
|
||||
{t("teamPanel.cancel")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleGetToken}
|
||||
loading={isSendingInvite}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{t("teamPanel.getToken")}
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="accent"
|
||||
onClick={handleInviteMember}
|
||||
loading={isSendingInvite}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{t("teamPanel.emailToken")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</GenericDialog>
|
||||
</TabPanel>
|
||||
);
|
||||
};
|
||||
|
||||
TeamPanel.propTypes = {
|
||||
// No props are being passed to this component, hence no specific PropTypes are defined.
|
||||
};
|
||||
|
||||
export default TeamPanel;
|
||||
@@ -1,99 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Box, Tab, useTheme } from "@mui/material";
|
||||
import CustomTabList from "@/Components/v1/Tab/index.jsx";
|
||||
import TabContext from "@mui/lab/TabContext";
|
||||
import ProfilePanel from "./components/ProfilePanel.jsx";
|
||||
import PasswordPanel from "./components/PasswordPanel.jsx";
|
||||
import TeamPanel from "./components/TeamPanel.jsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/**
|
||||
* Account component renders a settings page with tabs for Profile, Password, and Team settings.
|
||||
* @param {string} [props.open] - Specifies the initially open tab: 'profile', 'password', or 'team'.
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const Account = ({ open = "profile" }) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [focusedTab, setFocusedTab] = useState(null); // Track focused tab
|
||||
const tab = open;
|
||||
const handleTabChange = (event, newTab) => {
|
||||
navigate(`/account/${newTab}`);
|
||||
};
|
||||
const { user } = useSelector((state) => state.auth);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const requiredRoles = ["superadmin", "admin"];
|
||||
let tabList = [
|
||||
{ name: t("menu.profile"), value: "profile" },
|
||||
{ name: t("menu.password"), value: "password" },
|
||||
{ name: t("menu.team"), value: "team" },
|
||||
];
|
||||
|
||||
const hideTeams = !requiredRoles.some((role) => user.role.includes(role));
|
||||
|
||||
if (hideTeams) {
|
||||
tabList = [
|
||||
{ name: t("menu.profile"), value: "profile" },
|
||||
{ name: t("menu.password"), value: "password" },
|
||||
];
|
||||
}
|
||||
|
||||
// Remove password for demo
|
||||
if (user.role.includes("demo")) {
|
||||
tabList = [{ name: t("menu.profile"), value: "profile" }];
|
||||
}
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
const currentIndex = tabList.findIndex((item) => item.value === tab);
|
||||
if (event.key === "Tab") {
|
||||
const nextIndex = (currentIndex + 1) % tabList.length;
|
||||
setFocusedTab(tabList[nextIndex].value);
|
||||
} else if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
navigate(`/account/${focusedTab}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocus = (tabName) => {
|
||||
setFocusedTab(tabName);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
px={theme.spacing(20)}
|
||||
py={theme.spacing(12)}
|
||||
>
|
||||
<TabContext value={tab}>
|
||||
<CustomTabList
|
||||
value={tab}
|
||||
onChange={handleTabChange}
|
||||
aria-label="account tabs"
|
||||
>
|
||||
{tabList.map((item, index) => (
|
||||
<Tab
|
||||
label={item.name}
|
||||
key={index}
|
||||
value={item.value}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => handleFocus(item.value)}
|
||||
tabIndex={index}
|
||||
/>
|
||||
))}
|
||||
</CustomTabList>
|
||||
<ProfilePanel />
|
||||
<PasswordPanel />
|
||||
{!hideTeams && <TeamPanel />}
|
||||
</TabContext>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Account.propTypes = {
|
||||
open: PropTypes.oneOf(["profile", "password", "team"]),
|
||||
};
|
||||
|
||||
export default Account;
|
||||
Reference in new issue
Block a user