3 files changed, 63 insertions, 13 deletions

diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index 9c6747e1..082e2836 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -185,6 +185,9 @@
     "changeNickname": "Change nickname.",
     "changeBookmarkVisibility": "Change bookmark visibility.",
     "myRegisterCode": "My register code:",
+    "myRegisterCodeDesc": "Click to create a new register code.",
+    "renewRegisterCode": "Renew Register Code",
+    "renewRegisterCodeDesc": "Confirm to renew register code? The old one will no longer be used.",
     "dialogChangePassword": {
       "title": "Change Password",
       "prompt": "You are changing your password. You need to input the correct old password. After change, you need to login again and all old login will be invalid.",
diff --git a/FrontEnd/src/locales/zh/translation.json b/FrontEnd/src/locales/zh/translation.json
index 130ebe66..1b538f2a 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -185,6 +185,9 @@
     "changeNickname": "更改昵称",
     "changeBookmarkVisibility": "修改书签时间线可见性",
     "myRegisterCode": "我的注册码：",
+    "myRegisterCodeDesc": "点击以创建新的注册码。",
+    "renewRegisterCode": "创建新的注册码",
+    "renewRegisterCodeDesc": "确定要创建新的注册码吗？旧的注册码将无法再使用。",
     "dialogChangePassword": {
       "title": "修改密码",
       "prompt": "您正在修改密码，您需要输入正确的旧密码。成功修改后您需要重新登陆，而且以前所有的登录都会失效。",
diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx
index 633bb209..f5d26e69 100644
--- a/FrontEnd/src/views/settings/index.tsx
+++ b/FrontEnd/src/views/settings/index.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classnames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
+import { convertI18nText, I18nText, UiLogicError } from "@/common";
 import { useUser, userService } from "@/services/user";
 import { getHttpUserClient } from "@/http/user";
 import { TimelineVisibility } from "@/http/timeline";
@@ -69,10 +69,12 @@ function SettingItemContainer({
       className={classnames(
         "row settings-item mx-0",
         first && "first",
+        onClick && "clickable",
         className
       )}
+      onClick={onClick}
     >
-      <div className="px-0 col col-12 col-sm-auto" onClick={onClick}>
+      <div className="px-0 col col-12 col-sm-auto">
         <div className={classNames(danger && "cru-color-danger")}>
           {convertI18nText(title, t)}
         </div>
@@ -87,16 +89,8 @@ function SettingItemContainer({
 
 type ButtonSettingItemProps = SettingItemContainerWithoutChildrenProps;
 
-const ButtonSettingItem: React.FC<ButtonSettingItemProps> = ({
-  className,
-  ...props
-}) => {
-  return (
-    <SettingItemContainer
-      className={classNames("clickable", className)}
-      {...props}
-    />
-  );
+const ButtonSettingItem: React.FC<ButtonSettingItemProps> = ({ ...props }) => {
+  return <SettingItemContainer {...props} />;
 };
 
 interface SelectSettingItemProps
@@ -145,9 +139,18 @@ const SettingsPage: React.FC = (_) => {
   const navigate = useNavigate();
 
   const [dialog, setDialog] = useState<
-    null | "changepassword" | "changeavatar" | "changenickname" | "logout"
+    | null
+    | "changepassword"
+    | "changeavatar"
+    | "changenickname"
+    | "logout"
+    | "renewregistercode"
   >(null);
 
+  const [registerCode, setRegisterCode] = useState<undefined | null | string>(
+    undefined
+  );
+
   const [bookmarkVisibility, setBookmarkVisibility] =
     useState<TimelineVisibility>();
 
@@ -163,6 +166,20 @@ const SettingsPage: React.FC = (_) => {
     }
   }, [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 (
@@ -170,6 +187,19 @@ const SettingsPage: React.FC = (_) => {
       <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>{registerCode}</code>
+              )}
+            </SettingItemContainer>
             <ButtonSettingItem
               title="settings.changeAvatar"
               onClick={() => setDialog("changeavatar")}
@@ -263,6 +293,20 @@ const SettingsPage: React.FC = (_) => {
           });
         }}
       />
+      <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)}