feat: middle save

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>
+			<PrivateDirectory />
-				 {/* TODO: create private dir panel */}
-				 <></>
-			 </SettingBox>
 		</div>
 	);
 }
 
-function SettingBox({ children }: { children: React.ReactNode }) {
+function AccountSetting() {
-	return (
+	const auth = useAuthStore();
-		<div className="setting-box">
-			{children}
-		</div>
-	);
-}
-
-function AccountSetting({ auth }: { auth: AuthState }) {
 	const orRef = useRef<HTMLInputElement>(null);
 	const pwRef = useRef<HTMLInputElement>(null);
 	const ckRef = useRef<HTMLInputElement>(null);
@@ -64,18 +54,14 @@ 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 => {
-					<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;
@@ -114,24 +100,23 @@ function AccountSetting({ auth }: { auth: AuthState }) {
 						alert("password changed!");
 						document.location.href = "/logout";
 					});
-					}}>Change Password</button>
+				}}>
+					<PasswordInput placeholder="Password" ref={orRef} />
+					<PasswordInput placeholder="New Password" ref={pwRef} />
+					<PasswordInput placeholder="Check Password" ref={ckRef} />
+
+					<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">
+				<form className="box-col form" onSubmit={ev => {
-					<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 => {
 						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;

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;