From fdf4750919eaf65960f2b3746f98af23f8fef9b8 Mon Sep 17 00:00:00 2001
From: Project_IO <me@projecttl.net>
Date: Mon, 24 Mar 2025 17:46:08 +0900
Subject: [PATCH] feat: middle save

---
 src/components/settings/index.tsx     | 170 ++++++++++++++++----------
 src/components/settings/settings.scss |   8 +-
 2 files changed, 107 insertions(+), 71 deletions(-)

diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx
index b800a45..cc9562f 100644
--- a/src/components/settings/index.tsx
+++ b/src/components/settings/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { AuthState, useAuthStore } from "../../store/auth";
+import { useAuthStore } from "../../store/auth";
 
 import "./settings.scss";
 import { DynamicIcon } from "lucide-react/dynamic";
@@ -33,26 +33,16 @@ function Settings() {
 	return (
 		<div className="ka-settings">
 			<h2 className="ka-title">General</h2>
-			<AccountSetting auth={auth} />
+			<AccountSetting />
 
-			 <h2 className="ka-title">Private Directory</h2>
-			 <SettingBox>
-				 {/* TODO: create private dir panel */}
-				 <></>
-			 </SettingBox>
+			<h2 className="ka-title">Private Directory</h2>
+			<PrivateDirectory />
 		</div>
 	);
 }
 
-function SettingBox({ children }: { children: React.ReactNode }) {
-	return (
-		<div className="setting-box">
-			{children}
-		</div>
-	);
-}
-
-function AccountSetting({ auth }: { auth: AuthState }) {
+function AccountSetting() {
+	const auth = useAuthStore();
 	const orRef = useRef<HTMLInputElement>(null);
 	const pwRef = useRef<HTMLInputElement>(null);
 	const ckRef = useRef<HTMLInputElement>(null);
@@ -64,74 +54,69 @@ function AccountSetting({ auth }: { auth: AuthState }) {
 			<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 */}
 			<div className="box-row">
 				<div className="box-col">
 					<h6>Change Password</h6>
 					<span>If you change your password, you will need to log in again.</span>
 				</div>
 
-				<form className="box-col form" id="pw-change">
+				<form className="box-col form" id="pw-change" onSubmit={ev => {
+					ev.preventDefault();
+					const origin = orRef.current?.value;
+					const password = pwRef.current?.value;
+					const check = ckRef.current?.value;
+
+					if (!origin || !password || !check) {
+						return;
+					}
+
+					if (origin === "" || password === "" || check === "") {
+						alert("You must need to write all inputs");
+						return;
+					}
+
+					if (password !== check) {
+						alert("New password is not matches!");
+						return;
+					}
+
+					const form = new URLSearchParams();
+					form.append("password", origin);
+					form.append("new_password", password);
+
+					fetch("/api/auth/update", {
+						body: form,
+						method: "PATCH",
+						headers: {
+							"Authorization": `Basic ${auth.token}`
+						}
+					}).then((res) => {
+						if (res.status !== 200) {
+							alert(`${res.status} ${res.statusText}`);
+							return;
+						}
+
+						alert("password changed!");
+						document.location.href = "/logout";
+					});
+				}}>
 					<PasswordInput placeholder="Password" ref={orRef} />
 					<PasswordInput placeholder="New Password" ref={pwRef} />
 					<PasswordInput placeholder="Check Password" ref={ckRef} />
 
-					<button type="submit" className="danger" onClick={ev => {
-						ev.preventDefault();
-						const origin = orRef.current?.value;
-						const password = pwRef.current?.value;
-						const check = ckRef.current?.value;
-
-						if (!origin || !password || !check) {
-							return;
-						}
-
-						if (origin === "" || password === "" || check === "") {
-							alert("You must need to write all inputs");
-							return;
-						}
-
-						if (password !== check) {
-							alert("New password is not matches!");
-							return;
-						}
-
-						const form = new URLSearchParams();
-						form.append("password", origin);
-						form.append("new_password", password);
-
-						fetch("/api/auth/update", {
-							body: form,
-							method: "PATCH",
-							headers: {
-								"Authorization": `Basic ${auth.token}`
-							}
-						}).then((res) => {
-							if (res.status !== 200) {
-								alert(`${res.status} ${res.statusText}`);
-								return;
-							}
-
-							alert("password changed!");
-							document.location.href = "/logout";
-						});
-					}}>Change Password</button>
+					<button type="submit" className="danger">Change Password</button>
 				</form>
 			</div>
+
+			{/* TODO: split to component */}
 			<div className="box-row">
 				<div className="box-col">
 					<h6>Delete Account</h6>
 					<span>You can delete account. This action is irreversible. Please proceed with caution.</span>
 				</div>
 
-				<form className="box-col form">
-					<label className="checkbox">
-						<input type="checkbox" onChange={ev => {
-							setRemove(ev.target.checked);
-						}} />
-						<span>I agree to remove my account.</span>
-					</label>
-					
-					<button type="submit" className="danger" disabled={!remove} onClick={ev => {
+				<form className="box-col form" onSubmit={ev => {
 						ev.preventDefault();
 
 						fetch("/api/auth/delete", {
@@ -148,13 +133,56 @@ function AccountSetting({ auth }: { auth: AuthState }) {
 							alert("Your account has been deactivated and removed");
 							document.location.href = "/logout";
 						});
-					}}>Remove Account</button>
+					}}>
+					<label className="checkbox">
+						<input type="checkbox" onChange={ev => {
+							setRemove(ev.target.checked);
+						}} />
+						<span>I agree to remove my account.</span>
+					</label>
+					
+					<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>
+	);
+}
+
 function PasswordInput({ placeholder, ref }: { placeholder: string; ref: React.RefObject<HTMLInputElement | null> }) {
 	const [show, setShow] = useState(false);
 
@@ -171,4 +199,12 @@ function PasswordInput({ placeholder, ref }: { placeholder: string; ref: React.R
 	);
 }
 
+function SettingBox({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="setting-box">
+			{children}
+		</div>
+	);
+}
+
 export default Settings;
diff --git a/src/components/settings/settings.scss b/src/components/settings/settings.scss
index a91f808..f1ebbba 100644
--- a/src/components/settings/settings.scss
+++ b/src/components/settings/settings.scss
@@ -15,6 +15,10 @@
 		color: var(--description-color);
 	}
 
+	button {
+		margin-top: 1rem;
+	}
+
 	.setting-box {
 		width: 100%;
 		display: flex;
@@ -77,10 +81,6 @@
 		border-radius: 25px 0 0 25px;
 	}
 
-	button {
-		margin-top: 1rem;
-	}
-
 	.input-pass {
 		height: 40;
 		display: flex;