style: split component from settings/index.ts

README.md

@@ -1,6 +1,14 @@
 # kuma-archive
 - Simple file mirror server for Gin(go) + TypeScript + React.js
 
+## Alert
+- This project includes experimental features that are still under development. Use them at your own risk.
+- Feedback and contributions are welcome to help improve these features.
+
+## Milestone
+- [ ] Upload
+- [ ] Directory Management
+
 ## License
 - Code licensed under the <a href="https://git.wh64.net/devproje/kuma-archive/src/branch/master/LICENSE">MIT License</a>.
 - All rights reserved for images([public/](https://git.wh64.net/devproje/kuma-archive/src/branch/master/public), [assets/](https://git.wh64.net/devproje/kuma-archive/src/branch/master/src/assets)).

src/components/settings/index.tsx

@@ -42,19 +42,38 @@ function Settings() {
 }
 
 function AccountSetting() {
-	const auth = useAuthStore();
-	const orRef = useRef<HTMLInputElement>(null);
-	const pwRef = useRef<HTMLInputElement>(null);
-	const ckRef = useRef<HTMLInputElement>(null);
-	
-	const [remove, setRemove] = useState(false);
-
 	return (
 		<SettingBox>
 			<h4>Account Setting</h4>
 			<span>You can modify your account. This is a sensitive option. Please reconsider if you want to change your account information.</span>
 			<hr className="line" />
-			{/* TODO: split to component */}
+
+			<ChangePassword />
+			<RemoveAccount />
+		</SettingBox>
+	);
+}
+
+function PrivateDirectory() {
+	return (
+		<SettingBox>
+			<h4>Directory Management</h4>
+			<span>You can manage your private directories here. Add, remove, or modify directories as needed.</span>
+			<hr className="line" />
+
+			<CreateDirectory />
+			<DirectoryTable />
+		</SettingBox>
+	);
+}
+
+function ChangePassword() {
+	const auth = useAuthStore();
+	const orRef = useRef<HTMLInputElement>(null);
+	const pwRef = useRef<HTMLInputElement>(null);
+	const ckRef = useRef<HTMLInputElement>(null);
+
+	return (
 		<div className="box-row">
 			<div className="box-col">
 				<h6>Change Password</h6>
@@ -108,8 +127,14 @@ function AccountSetting() {
 				<button type="submit" className="danger">Change Password</button>
 			</form>
 		</div>
+	);
+}
 
-			{/* TODO: split to component */}
+function RemoveAccount() {
+	const auth = useAuthStore();
+	const [remove, setRemove] = useState(false);
+
+	return (
 		<div className="box-row">
 			<div className="box-col">
 				<h6>Delete Account</h6>
@@ -144,42 +169,6 @@ function AccountSetting() {
 				<button type="submit" className="danger" disabled={!remove}>Remove Account</button>
 			</form>
 		</div>
-		</SettingBox>
-	);
-}
-
-function PrivateDirectory() {
-	const pathRef = useRef<HTMLInputElement>(null);
-	const [disabled, setDisabled] = useState(true);
-
-	return (
-		<SettingBox>
-			<h4>Directory Management</h4>
-			<span></span>
-			<hr />
-
-			{/* TODO: split to component */}
-			<div className="box-row">
-				<div className="box-col">
-					<h6>Add Directory</h6>
-					<span>You can add private directory here.</span>
-				</div>
-
-				<form className="box-col form" onSubmit={ev => {
-						ev.preventDefault();
-					}}>
-					<input type="text" placeholder="Directory Path" ref={pathRef} required onChange={ev => {
-						setDisabled(ev.target.value === "");
-					}} />
-					<button type="submit" className="success" disabled={disabled}>Add Directory</button>
-				</form>
-			</div>
-
-			{/* <div className="ka-privdir">
-				<div className="dir-head"></div>
-				<div className="dir-body"></div>
-			</div> */}
-		</SettingBox>
 	);
 }
 
@@ -199,6 +188,44 @@ function PasswordInput({ placeholder, ref }: { placeholder: string; ref: React.R
 	);
 }
 
+function CreateDirectory() {
+	const pathRef = useRef<HTMLInputElement>(null);
+	const [disabled, setDisabled] = useState(true);
+
+	return (
+		<div className="box-row">
+			<div className="box-col">
+				<h6>Add Directory</h6>
+				<span>You can add a private directory here.</span>
+			</div>
+
+			<form className="box-col form" onSubmit={ev => {
+				ev.preventDefault();
+			}}>
+				<input type="text" placeholder="Directory Path" ref={pathRef} required onChange={ev => {
+					setDisabled(ev.target.value === "");
+				}} />
+				<button type="submit" className="success" disabled={disabled}>Add Directory</button>
+			</form>
+		</div>
+	);
+}
+
+function DirectoryTable() {
+	return (
+		<div className="box-col">
+			<div className="box-col">
+				<h6>Directories</h6>
+				<span>You can view and manage your directories.</span>
+			</div>
+
+			<div className="box-col">
+				{/* TODO: create table here */}
+			</div>
+		</div>
+	);
+}
+
 function SettingBox({ children }: { children: React.ReactNode }) {
 	return (
 		<div className="setting-box">