import * as React from "react";
import { useContext, useState } from "react";
import {
Alert,
CardActions,
CardContent,
Chip,
FormControl,
FormControlLabel,
LinearProgress,
Link,
Portal,
Radio,
RadioGroup,
Select,
Snackbar,
Stack,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
useMediaQuery,
Tooltip,
Typography,
Container,
Card,
Button,
Dialog,
DialogTitle,
DialogContent,
TextField,
IconButton,
MenuItem,
DialogContentText,
useTheme,
} from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import { Trans, useTranslation } from "react-i18next";
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import i18n from "i18next";
import humanizeDuration from "humanize-duration";
import CelebrationIcon from "@mui/icons-material/Celebration";
import CloseIcon from "@mui/icons-material/Close";
import { ContentCopy, Public } from "@mui/icons-material";
import AddIcon from "@mui/icons-material/Add";
import routes from "./routes";
import { formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";
import accountApi, { LimitBasis, Role, SubscriptionInterval, SubscriptionStatus } from "../app/AccountApi";
import { Pref, PrefGroup } from "./Pref";
import db from "../app/db";
import UpgradeDialog from "./UpgradeDialog";
import { AccountContext } from "./App";
import DialogFooter from "./DialogFooter";
import { Paragraph } from "./styles";
import { IncorrectPasswordError, UnauthorizedError } from "../app/errors";
import { ProChip } from "./SubscriptionPopup";
import session from "../app/Session";
const Account = () => {
if (!session.exists()) {
window.location.href = routes.app;
return <>>;
}
return (
);
};
const Basics = () => {
const { t } = useTranslation();
return (
{t("account_basics_title")}
);
};
const Username = () => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const labelId = "prefUsername";
return (
{session.username()}
{account?.role === 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 handleDialogClose = () => {
setDialogOpen(false);
};
return (
⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤
);
};
const ChangePasswordDialog = (props) => {
const theme = useTheme();
const { t } = useTranslation();
const [error, setError] = useState("");
const [currentPassword, setCurrentPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const handleDialogSubmit = async () => {
try {
console.debug(`[Account] Changing password`);
await accountApi.changePassword(currentPassword, newPassword);
props.onClose();
} catch (e) {
console.log(`[Account] Error changing password`, e);
if (e instanceof IncorrectPasswordError) {
setError(t("account_basics_password_dialog_current_password_incorrect"));
} else if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
}
};
return (
);
};
const AccountType = () => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const [upgradeDialogKey, setUpgradeDialogKey] = useState(0);
const [upgradeDialogOpen, setUpgradeDialogOpen] = useState(false);
const [showPortalError, setShowPortalError] = useState(false);
if (!account) {
return <>>;
}
const handleUpgradeClick = () => {
setUpgradeDialogKey((k) => k + 1);
setUpgradeDialogOpen(true);
};
const handleManageBilling = async () => {
try {
const response = await accountApi.createBillingPortalSession();
window.open(response.redirect_url, "billing_portal");
} catch (e) {
console.log(`[Account] Error opening billing portal`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setShowPortalError(true);
}
}
};
let accountType;
if (account.role === Role.ADMIN) {
const tierSuffix = account.tier
? t("account_basics_tier_admin_suffix_with_tier", {
tier: account.tier.name,
})
: t("account_basics_tier_admin_suffix_no_tier");
accountType = `${t("account_basics_tier_admin")} ${tierSuffix}`;
} else if (!account.tier) {
accountType = config.enable_payments ? t("account_basics_tier_free") : t("account_basics_tier_basic");
} else {
accountType = account.tier.name;
if (account.billing?.interval === SubscriptionInterval.MONTH) {
accountType += ` (${t("account_basics_tier_interval_monthly")})`;
} else if (account.billing?.interval === SubscriptionInterval.YEAR) {
accountType += ` (${t("account_basics_tier_interval_yearly")})`;
}
}
return (
0}
title={t("account_basics_tier_title")}
description={t("account_basics_tier_description")}
>
{accountType}
{account.billing?.paid_until && !account.billing?.cancel_at && (
)}
{config.enable_payments && account.role === Role.USER && !account.billing?.subscription && (
}
onClick={handleUpgradeClick}
sx={{ ml: 1 }}
>
{t("account_basics_tier_upgrade_button")}
)}
{config.enable_payments && account.role === Role.USER && account.billing?.subscription && (
)}
{config.enable_payments && account.role === Role.USER && account.billing?.customer && (
)}
{config.enable_payments && (
setUpgradeDialogOpen(false)}
/>
)}
{account.billing?.status === SubscriptionStatus.PAST_DUE && (
{t("account_basics_tier_payment_overdue")}
)}
{account.billing?.cancel_at > 0 && (
{t("account_basics_tier_canceled_subscription", {
date: formatShortDate(account.billing.cancel_at),
})}
)}
setShowPortalError(false)}
message={t("account_usage_cannot_create_portal_session")}
/>
);
};
const PhoneNumbers = () => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
const [snackOpen, setSnackOpen] = useState(false);
const labelId = "prefPhoneNumbers";
const handleDialogOpen = () => {
setDialogKey((prev) => prev + 1);
setDialogOpen(true);
};
const handleDialogClose = () => {
setDialogOpen(false);
};
const handleCopy = (phoneNumber) => {
navigator.clipboard.writeText(phoneNumber);
setSnackOpen(true);
};
const handleDelete = async (phoneNumber) => {
try {
await accountApi.deletePhoneNumber(phoneNumber);
} catch (e) {
console.log(`[Account] Error deleting phone number`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
}
}
};
if (!config.enable_calls) {
return null;
}
if (account?.limits.calls === 0) {
return (
{t("account_basics_phone_numbers_title")}
{config.enable_payments && }
>
}
description={t("account_basics_phone_numbers_description")}
>
{t("account_usage_calls_none")}
);
}
return (
{account?.phone_numbers?.map((phoneNumber) => (
{phoneNumber}
}
variant="outlined"
onClick={() => handleCopy(phoneNumber)}
onDelete={() => handleDelete(phoneNumber)}
/>
))}
{!account?.phone_numbers && {t("account_basics_phone_numbers_no_phone_numbers_yet")}}
setSnackOpen(false)}
message={t("account_basics_phone_numbers_copied_to_clipboard")}
/>
);
};
const AddPhoneNumberDialog = (props) => {
const theme = useTheme();
const { t } = useTranslation();
const [error, setError] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
const [channel, setChannel] = useState("sms");
const [code, setCode] = useState("");
const [sending, setSending] = useState(false);
const [verificationCodeSent, setVerificationCodeSent] = useState(false);
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const verifyPhone = async () => {
try {
setSending(true);
await accountApi.verifyPhoneNumber(phoneNumber, channel);
setVerificationCodeSent(true);
} catch (e) {
console.log(`[Account] Error sending verification`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
} finally {
setSending(false);
}
};
const checkVerifyPhone = async () => {
try {
setSending(true);
await accountApi.addPhoneNumber(phoneNumber, code);
props.onClose();
} catch (e) {
console.log(`[Account] Error confirming verification`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
} finally {
setSending(false);
}
};
const handleDialogSubmit = async () => {
if (!verificationCodeSent) {
await verifyPhone();
} else {
await checkVerifyPhone();
}
};
const handleCancel = () => {
if (verificationCodeSent) {
setVerificationCodeSent(false);
setCode("");
} else {
props.onClose();
}
};
return (
);
};
const Stats = () => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
if (!account) {
return <>>;
}
const normalize = (value, max) => Math.min((value / max) * 100, 100);
return (
{t("account_usage_title")}
{(account.role === Role.ADMIN || account.limits.reservations > 0) && (
{account.stats.reservations.toLocaleString()}
{account.role === Role.USER
? t("account_usage_of_limit", {
limit: account.limits.reservations.toLocaleString(),
})
: t("account_usage_unlimited")}
0
? normalize(account.stats.reservations, account.limits.reservations)
: 100
}
/>
)}
{t("account_usage_messages_title")}
>
}
>
{account.stats.messages.toLocaleString()}
{account.role === Role.USER
? t("account_usage_of_limit", {
limit: account.limits.messages.toLocaleString(),
})
: t("account_usage_unlimited")}
{config.enable_emails && (
{t("account_usage_emails_title")}
>
}
>
{account.stats.emails.toLocaleString()}
{account.role === Role.USER
? t("account_usage_of_limit", {
limit: account.limits.emails.toLocaleString(),
})
: t("account_usage_unlimited")}
)}
{config.enable_calls && (account.role === Role.ADMIN || account.limits.calls > 0) && (
{t("account_usage_calls_title")}
>
}
>
{account.stats.calls.toLocaleString()}
{account.role === Role.USER
? t("account_usage_of_limit", {
limit: account.limits.calls.toLocaleString(),
})
: t("account_usage_unlimited")}
0 ? normalize(account.stats.calls, account.limits.calls) : 100}
/>
)}
{formatBytes(account.stats.attachment_total_size)}
{account.role === Role.USER
? t("account_usage_of_limit", {
limit: formatBytes(account.limits.attachment_total_size),
})
: t("account_usage_unlimited")}
{config.enable_reservations && account.role === Role.USER && account.limits.reservations === 0 && (
{t("account_usage_reservations_title")}
{config.enable_payments && }
>
}
>
{t("account_usage_reservations_none")}
)}
{config.enable_calls && account.role === Role.USER && account.limits.calls === 0 && (
{t("account_usage_calls_title")}
{config.enable_payments && }
>
}
>
{t("account_usage_calls_none")}
)}
{account.role === Role.USER && account.limits.basis === LimitBasis.IP && (
{t("account_usage_basis_ip_description")}
)}
);
};
const InfoIcon = () => (
);
const Tokens = () => {
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
const tokens = account?.tokens || [];
const handleCreateClick = () => {
setDialogKey((prev) => prev + 1);
setDialogOpen(true);
};
const handleDialogClose = () => {
setDialogOpen(false);
};
return (
{t("account_tokens_title")}
,
}}
/>
{tokens?.length > 0 && }
);
};
const TokensTable = (props) => {
const { t } = useTranslation();
const [snackOpen, setSnackOpen] = useState(false);
const [upsertDialogKey, setUpsertDialogKey] = useState(0);
const [upsertDialogOpen, setUpsertDialogOpen] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [selectedToken, setSelectedToken] = useState(null);
const tokens = (props.tokens || []).sort((a, b) => {
if (a.token === session.token()) {
return -1;
}
if (b.token === session.token()) {
return 1;
}
return a.token.localeCompare(b.token);
});
const handleEditClick = (token) => {
setUpsertDialogKey((prev) => prev + 1);
setSelectedToken(token);
setUpsertDialogOpen(true);
};
const handleDialogClose = () => {
setUpsertDialogOpen(false);
setDeleteDialogOpen(false);
setSelectedToken(null);
};
const handleDeleteClick = async (token) => {
setSelectedToken(token);
setDeleteDialogOpen(true);
};
const handleCopy = async (token) => {
await navigator.clipboard.writeText(token);
setSnackOpen(true);
};
return (
{t("account_tokens_table_token_header")}
{t("account_tokens_table_label_header")}
{t("account_tokens_table_expires_header")}
{t("account_tokens_table_last_access_header")}
{tokens.map((token) => (
{token.token.slice(0, 12)}
...
handleCopy(token.token)}>
{token.token === session.token() && {t("account_tokens_table_current_session")}}
{token.token !== session.token() && (token.label || "-")}
{token.expires ? formatShortDateTime(token.expires) : {t("account_tokens_table_never_expires")}}
{formatShortDateTime(token.last_access)}
openUrl(`https://whatismyipaddress.com/ip/${token.last_origin}`)}>
{token.token !== session.token() && (
<>
handleEditClick(token)} aria-label={t("account_tokens_dialog_title_edit")}>
handleDeleteClick(token)} aria-label={t("account_tokens_dialog_title_delete")}>
>
)}
{token.token === session.token() && (
)}
))}
setSnackOpen(false)}
message={t("account_tokens_table_copied_to_clipboard")}
/>
);
};
const TokenDialog = (props) => {
const theme = useTheme();
const { t } = useTranslation();
const [error, setError] = useState("");
const [label, setLabel] = useState(props.token?.label || "");
const [expires, setExpires] = useState(props.token ? -1 : 0);
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const editMode = !!props.token;
const handleSubmit = async () => {
try {
if (editMode) {
await accountApi.updateToken(props.token.token, label, expires);
} else {
await accountApi.createToken(label, expires);
}
props.onClose();
} catch (e) {
console.log(`[Account] Error creating token`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
}
};
return (
);
};
const TokenDeleteDialog = (props) => {
const { t } = useTranslation();
const [error, setError] = useState("");
const handleSubmit = async () => {
try {
await accountApi.deleteToken(props.token.token);
props.onClose();
} catch (e) {
console.log(`[Account] Error deleting token`, e);
if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
}
};
return (
);
};
const Delete = () => {
const { t } = useTranslation();
return (
{t("account_delete_title")}
);
};
const DeleteAccount = () => {
const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
const handleDialogOpen = () => {
setDialogKey((prev) => prev + 1);
setDialogOpen(true);
};
const handleDialogClose = () => {
setDialogOpen(false);
};
return (
} onClick={handleDialogOpen}>
{t("account_delete_title")}
);
};
const DeleteAccountDialog = (props) => {
const theme = useTheme();
const { t } = useTranslation();
const { account } = useContext(AccountContext);
const [error, setError] = useState("");
const [password, setPassword] = useState("");
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const handleSubmit = async () => {
try {
await accountApi.delete(password);
await db().delete();
console.debug(`[Account] Account deleted`);
await session.resetAndRedirect(routes.app);
} catch (e) {
console.log(`[Account] Error deleting account`, e);
if (e instanceof IncorrectPasswordError) {
setError(t("account_basics_password_dialog_current_password_incorrect"));
} else if (e instanceof UnauthorizedError) {
await session.resetAndRedirect(routes.login);
} else {
setError(e.message);
}
}
};
return (
);
};
export default Account;