74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { IconButton } from "./button";
|
|
import { showConfirm } from "./ui-lib";
|
|
|
|
import Locale from "../locales";
|
|
import { Path } from "../constant";
|
|
import { ErrorBoundary } from "./error";
|
|
|
|
import styles from "./settings.module.scss";
|
|
|
|
import CloseIcon from "../icons/close.svg";
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
|
|
|
|
export function Settings() {
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const keydownEvent = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
navigate(Path.Home);
|
|
}
|
|
};
|
|
document.addEventListener("keydown", keydownEvent);
|
|
return () => {
|
|
document.removeEventListener("keydown", keydownEvent);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<div className="window-header">
|
|
<div className="window-header-title">
|
|
<div className="window-header-main-title">
|
|
{Locale.Settings.Title}
|
|
</div>
|
|
<div className="window-header-sub-title">
|
|
{Locale.Settings.SubTitle}
|
|
</div>
|
|
</div>
|
|
<div className="window-actions">
|
|
<div className="window-action-button"></div>
|
|
<div className="window-action-button"></div>
|
|
<div className="window-action-button">
|
|
<IconButton
|
|
icon={<CloseIcon />}
|
|
onClick={() => navigate(Path.Home)}
|
|
bordered
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles["settings"]}>
|
|
<div className={styles["logout-button"]}>
|
|
<IconButton
|
|
icon={<FontAwesomeIcon icon={faRightFromBracket} />}
|
|
text={Locale.Settings.Danger.Logout.Action}
|
|
onClick={async () => {
|
|
if (await showConfirm(Locale.Settings.Danger.Logout.Confirm)) {
|
|
// navigate(Path.Logout);
|
|
window.location.href = '/logout';
|
|
}
|
|
}}
|
|
type="danger"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|