feat: #2 add access control by

access code

app/components/settings.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 
 import EmojiPicker, { Theme as EmojiTheme } from "emoji-picker-react";
 
@@ -17,6 +17,7 @@ import {
   Theme,
   ALL_MODELS,
   useUpdateStore,
+  useAccessStore,
 } from "../store";
 import { Avatar } from "./home";
 
@@ -38,7 +39,7 @@ function SettingItem(props: {
           <div className={styles["settings-sub-title"]}>{props.subTitle}</div>
         )}
       </div>
-      <div>{props.children}</div>
+      {props.children}
     </ListItem>
   );
 }
@@ -71,6 +72,12 @@ export function Settings(props: { closeSettings: () => void }) {
     checkUpdate();
   }, []);
 
+  const accessStore = useAccessStore();
+  const enabledAccessControl = useMemo(
+    () => accessStore.enabledAccessControl(),
+    []
+  );
+
   return (
     <>
       <div className={styles["window-header"]}>
@@ -232,6 +239,20 @@ export function Settings(props: { closeSettings: () => void }) {
           </div>
         </List>
         <List>
+          <SettingItem
+            title={Locale.Settings.AccessCode.Title}
+            subTitle={Locale.Settings.AccessCode.SubTitle}
+          >
+            <input
+              value={accessStore.accessCode}
+              type="text"
+              placeholder={Locale.Settings.AccessCode.Placeholder}
+              onChange={(e) => {
+                accessStore.updateCode(e.currentTarget.value);
+              }}
+            ></input>
+          </SettingItem>
+
           <SettingItem
             title={Locale.Settings.HistoryCount.Title}
             subTitle={Locale.Settings.HistoryCount.SubTitle}