From 0e183074b326cf04a23ae1f1ba8dcc56166df485 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 20 Jul 2023 20:44:15 +0800
Subject: ...

---
 FrontEnd/src/pages/setting/index.tsx | 335 +++++++++++++++++++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 FrontEnd/src/pages/setting/index.tsx

(limited to 'FrontEnd/src/pages/setting/index.tsx')

diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
new file mode 100644
index 00000000..00503dcf
--- /dev/null
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -0,0 +1,335 @@
+import { useState, ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
+
+import { useC, I18nText } from "@/common";
+import { useUser, userService } from "@/services/user";
+import { getHttpUserClient } from "@/http/user";
+import { TimelineVisibility } from "@/http/timeline";
+
+import ConfirmDialog from "../common/dialog/ConfirmDialog";
+import Card from "../common/Card";
+import Spinner from "../common/Spinner";
+import ChangePasswordDialog from "./ChangePasswordDialog";
+import ChangeAvatarDialog from "./ChangeAvatarDialog";
+import ChangeNicknameDialog from "./ChangeNicknameDialog";
+
+import "./index.css";
+import { pushAlert } from "@/services/alert";
+
+interface SettingSectionProps {
+  title: I18nText;
+  children: ReactNode;
+}
+
+function SettingSection({ title, children }: SettingSectionProps) {
+  const c = useC();
+
+  return (
+    <Card>
+      <h2 className="">{c(title)}</h2>
+      {children}
+    </Card>
+  );
+}
+
+interface SettingItemContainerWithoutChildrenProps {
+  title: I18nText;
+  subtext?: I18nText;
+  first?: boolean;
+  danger?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  onClick?: () => void;
+}
+
+interface SettingItemContainerProps
+  extends SettingItemContainerWithoutChildrenProps {
+  children?: React.ReactNode;
+}
+
+function SettingItemContainer({
+  title,
+  subtext,
+  first,
+  danger,
+  children,
+  style,
+  className,
+  onClick,
+}: SettingItemContainerProps): JSX.Element {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={style}
+      className={classNames(
+        "row settings-item mx-0",
+        first && "first",
+        onClick && "clickable",
+        className,
+      )}
+      onClick={onClick}
+    >
+      <div className="px-0 col col-auto">
+        <div className={classNames(danger && "cru-color-danger")}>
+          {convertI18nText(title, t)}
+        </div>
+        <small className="d-block cru-color-secondary">
+          {convertI18nText(subtext, t)}
+        </small>
+      </div>
+      <div className="col col-auto">{children}</div>
+    </div>
+  );
+}
+
+type ButtonSettingItemProps = SettingItemContainerWithoutChildrenProps;
+
+const ButtonSettingItem: React.FC<ButtonSettingItemProps> = ({ ...props }) => {
+  return <SettingItemContainer {...props} />;
+};
+
+interface SelectSettingItemProps
+  extends SettingItemContainerWithoutChildrenProps {
+  options: {
+    value: string;
+    label: I18nText;
+  }[];
+  value?: string;
+  onSelect: (value: string) => void;
+}
+
+const SelectSettingsItem: React.FC<SelectSettingItemProps> = ({
+  options,
+  value,
+  onSelect,
+  ...props
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <SettingItemContainer {...props}>
+      {value == null ? (
+        <Spinner />
+      ) : (
+        <select
+          value={value}
+          onChange={(e) => {
+            onSelect(e.target.value);
+          }}
+        >
+          {options.map(({ value, label }) => (
+            <option key={value} value={value}>
+              {convertI18nText(label, t)}
+            </option>
+          ))}
+        </select>
+      )}
+    </SettingItemContainer>
+  );
+};
+
+const SettingsPage: React.FC = () => {
+  const { i18n } = useTranslation();
+  const user = useUser();
+  const navigate = useNavigate();
+
+  const [dialog, setDialog] = useState<
+    | null
+    | "changepassword"
+    | "changeavatar"
+    | "changenickname"
+    | "logout"
+    | "renewregistercode"
+  >(null);
+
+  const [registerCode, setRegisterCode] = useState<undefined | null | string>(
+    undefined,
+  );
+
+  const [bookmarkVisibility, setBookmarkVisibility] =
+    useState<TimelineVisibility>();
+
+  React.useEffect(() => {
+    if (user != null) {
+      void getHttpUserClient()
+        .getBookmarkVisibility(user.username)
+        .then(({ visibility }) => {
+          setBookmarkVisibility(visibility);
+        });
+    } else {
+      setBookmarkVisibility(undefined);
+    }
+  }, [user]);
+
+  React.useEffect(() => {
+    setRegisterCode(undefined);
+  }, [user]);
+
+  React.useEffect(() => {
+    if (user != null && registerCode === undefined) {
+      void getHttpUserClient()
+        .getRegisterCode(user.username)
+        .then((code) => {
+          setRegisterCode(code.registerCode ?? null);
+        });
+    }
+  }, [user, registerCode]);
+
+  const language = i18n.language.slice(0, 2);
+
+  return (
+    <>
+      <div className="container">
+        {user ? (
+          <SettingSection title="settings.subheaders.account">
+            <SettingItemContainer
+              title="settings.myRegisterCode"
+              subtext="settings.myRegisterCodeDesc"
+              onClick={() => setDialog("renewregistercode")}
+            >
+              {registerCode === undefined ? (
+                <Spinner />
+              ) : registerCode === null ? (
+                <span>Noop</span>
+              ) : (
+                <code
+                  className="register-code"
+                  onClick={(event) => {
+                    void navigator.clipboard
+                      .writeText(registerCode)
+                      .then(() => {
+                        pushAlert({
+                          type: "success",
+                          message: "settings.myRegisterCodeCopied",
+                        });
+                      });
+                    event.stopPropagation();
+                  }}
+                >
+                  {registerCode}
+                </code>
+              )}
+            </SettingItemContainer>
+            <ButtonSettingItem
+              title="settings.changeAvatar"
+              onClick={() => setDialog("changeavatar")}
+              first
+            />
+            <ButtonSettingItem
+              title="settings.changeNickname"
+              onClick={() => setDialog("changenickname")}
+            />
+            <SelectSettingsItem
+              title="settings.changeBookmarkVisibility"
+              options={[
+                {
+                  value: "Private",
+                  label: "visibility.private",
+                },
+                {
+                  value: "Register",
+                  label: "visibility.register",
+                },
+                {
+                  value: "Public",
+                  label: "visibility.public",
+                },
+              ]}
+              value={bookmarkVisibility}
+              onSelect={(value) => {
+                void getHttpUserClient()
+                  .putBookmarkVisibility(user.username, {
+                    visibility: value as TimelineVisibility,
+                  })
+                  .then(() => {
+                    setBookmarkVisibility(value as TimelineVisibility);
+                  });
+              }}
+            />
+            <ButtonSettingItem
+              title="settings.changePassword"
+              onClick={() => setDialog("changepassword")}
+              danger
+            />
+            <ButtonSettingItem
+              title="settings.logout"
+              onClick={() => {
+                setDialog("logout");
+              }}
+              danger
+            />
+          </SettingSection>
+        ) : null}
+        <SettingSection title="settings.subheaders.customization">
+          <SelectSettingsItem
+            title="settings.languagePrimary"
+            subtext="settings.languageSecondary"
+            options={[
+              {
+                value: "zh",
+                label: {
+                  type: "custom",
+                  value: "中文",
+                },
+              },
+              {
+                value: "en",
+                label: {
+                  type: "custom",
+                  value: "English",
+                },
+              },
+            ]}
+            value={language}
+            onSelect={(value) => {
+              void i18n.changeLanguage(value);
+            }}
+            first
+          />
+        </SettingSection>
+      </div>
+      <ChangePasswordDialog
+        open={dialog === "changepassword"}
+        close={() => setDialog(null)}
+      />
+      <ConfirmDialog
+        title="settings.dialogConfirmLogout.title"
+        body="settings.dialogConfirmLogout.prompt"
+        onClose={() => setDialog(null)}
+        open={dialog === "logout"}
+        onConfirm={() => {
+          void userService.logout().then(() => {
+            navigate("/");
+          });
+        }}
+      />
+      <ConfirmDialog
+        title="settings.renewRegisterCode"
+        body="settings.renewRegisterCodeDesc"
+        onClose={() => setDialog(null)}
+        open={dialog === "renewregistercode"}
+        onConfirm={() => {
+          if (user == null) throw new UiLogicError();
+          void getHttpUserClient()
+            .renewRegisterCode(user.username)
+            .then(() => {
+              setRegisterCode(undefined);
+            });
+        }}
+      />
+      <ChangeAvatarDialog
+        open={dialog === "changeavatar"}
+        close={() => setDialog(null)}
+      />
+      <ChangeNicknameDialog
+        open={dialog === "changenickname"}
+        close={() => setDialog(null)}
+      />
+    </>
+  );
+};
+
+export default SettingsPage;
-- 
cgit v1.2.3