import * as React from 'react';
import {useState} from 'react';
import {LinearProgress, Stack, useMediaQuery} from "@mui/material";
import Tooltip from '@mui/material/Tooltip';
import Typography from "@mui/material/Typography";
import EditIcon from '@mui/icons-material/Edit';
import Container from "@mui/material/Container";
import Card from "@mui/material/Card";
import Button from "@mui/material/Button";
import {useTranslation} from "react-i18next";
import session from "../app/Session";
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import theme from "./theme";
import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import TextField from "@mui/material/TextField";
import DialogActions from "@mui/material/DialogActions";
import api from "../app/Api";
import routes from "./routes";
import IconButton from "@mui/material/IconButton";
import {useNavigate, useOutletContext} from "react-router-dom";
import {formatBytes} from "../app/utils";
const Account = () => {
if (!session.exists()) {
window.location.href = routes.app;
return <>>;
}
return (
);
};
const Basics = () => {
const { t } = useTranslation();
return (
Account
);
};
const Stats = () => {
const { t } = useTranslation();
const { account } = useOutletContext();
if (!account) {
return <>>; // TODO loading
}
const accountType = account.plan.code ?? "none";
const limits = account.limits;
const usage = account.usage;
const normalize = (value, max) => (value / max * 100);
return (
{t("Usage")}
{account?.role === "admin"
? <>Unlimited 👑>
: t(`account_type_${accountType}`)}
{usage.messages}
{limits.messages > 0 ? t("of {{limit}}", { limit: limits.messages }) : t("Unlimited")}
0 ? normalize(usage.messages, limits.messages) : 100} />
{usage.emails}
{limits.emails > 0 ? t("of {{limit}}", { limit: limits.emails }) : t("Unlimited")}
0 ? normalize(usage.emails, limits.emails) : 100} />
{formatBytes(usage.attachments_size)}
{limits.attachment_total_size > 0 ? t("of {{limit}}", { limit: formatBytes(limits.attachment_total_size) }) : t("Unlimited")}
0 ? normalize(usage.attachments_size, limits.attachment_total_size) : 100} />
);
};
const Delete = () => {
const { t } = useTranslation();
return (
{t("Delete account")}
);
};
const Username = () => {
const { t } = useTranslation();
const { account } = useOutletContext();
return (
{session.username()}
{account?.role === "admin"
? <>{" "}👑>
: ""}
)
};
const ChangePassword = () => {
const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
const labelId = "prefChangePassword";
const handleDialogOpen = () => {
setDialogKey(prev => prev+1);
setDialogOpen(true);
};
const handleDialogCancel = () => {
setDialogOpen(false);
};
const handleDialogSubmit = async (newPassword) => {
try {
await api.changePassword("http://localhost:2586", session.token(), newPassword);
setDialogOpen(false);
console.debug(`[Account] Password changed`);
} catch (e) {
console.log(`[Account] Error changing password`, e);
// TODO show error
}
};
return (
⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤
)
};
const ChangePasswordDialog = (props) => {
const { t } = useTranslation();
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const changeButtonEnabled = (() => {
return newPassword.length > 0 && newPassword === confirmPassword;
})();
return (
);
};
const DeleteAccount = () => {
const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
const labelId = "prefDeleteAccount";
const handleDialogOpen = () => {
setDialogKey(prev => prev+1);
setDialogOpen(true);
};
const handleDialogCancel = () => {
setDialogOpen(false);
};
const handleDialogSubmit = async (newPassword) => {
try {
await api.deleteAccount("http://localhost:2586", session.token());
setDialogOpen(false);
console.debug(`[Account] Account deleted`);
// TODO delete local storage
session.reset();
window.location.href = routes.app;
} catch (e) {
console.log(`[Account] Error deleting account`, e);
// TODO show error
}
};
return (
} onClick={handleDialogOpen}>
Delete account
)
};
const DeleteAccountDialog = (props) => {
const { t } = useTranslation();
const [username, setUsername] = useState("");
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const buttonEnabled = username === session.username();
return (
);
};
// FIXME duplicate code
const PrefGroup = (props) => {
return (
{props.children}
)
};
const Pref = (props) => {
return (
{props.title}
{props.description &&
{props.description}
}
{props.children}
);
};
export default Account;