v1.5: Add login module and GPT selection feature

2023-07-12 18:04:12 +08:00
parent 329b9c7c95
commit 49fffe8cbe
17 changed files with 375 additions and 31 deletions
@@ -1 +1,72 @@
-export {};
+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);
+              }
+            }}
+            type="danger"
+          />
+        </div>
+
+      </div>
+    </ErrorBoundary>
+  );
+}