From 0c5a381932b0df594e35f34d32d5b2ca3f42c78d Mon Sep 17 00:00:00 2001 From: Project_IO Date: Tue, 25 Mar 2025 12:09:34 +0900 Subject: [PATCH] style: split component from settings/index.ts --- README.md | 8 + src/components/settings/index.tsx | 267 ++++++++++++++++-------------- 2 files changed, 155 insertions(+), 120 deletions(-) diff --git a/README.md b/README.md index 44a51cf..cf9c55c 100644 --- a/README.md +++ b/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 MIT License. - 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)). diff --git a/src/components/settings/index.tsx b/src/components/settings/index.tsx index cc9562f..d661e72 100644 --- a/src/components/settings/index.tsx +++ b/src/components/settings/index.tsx @@ -42,144 +42,133 @@ function Settings() { } function AccountSetting() { - const auth = useAuthStore(); - const orRef = useRef(null); - const pwRef = useRef(null); - const ckRef = useRef(null); - - const [remove, setRemove] = useState(false); - return (

Account Setting

You can modify your account. This is a sensitive option. Please reconsider if you want to change your account information.
- {/* TODO: split to component */} -
-
-
Change Password
- If you change your password, you will need to log in again. -
-
{ - 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"; - }); - }}> - - - - - - -
- - {/* TODO: split to component */} -
-
-
Delete Account
- You can delete account. This action is irreversible. Please proceed with caution. -
- -
{ - ev.preventDefault(); - - fetch("/api/auth/delete", { - method: "DELETE", - headers: { - "Authorization": `Basic ${auth.token}` - } - }).then((res) => { - if (res.status !== 200) { - alert(`${res.status} ${res.statusText}`); - return; - } - - alert("Your account has been deactivated and removed"); - document.location.href = "/logout"; - }); - }}> - - - -
-
+ + ); } function PrivateDirectory() { - const pathRef = useRef(null); - const [disabled, setDisabled] = useState(true); - return (

Directory Management

- -
+ You can manage your private directories here. Add, remove, or modify directories as needed. +
- {/* TODO: split to component */} -
-
-
Add Directory
- You can add private directory here. -
+ + + + ); +} -
{ - ev.preventDefault(); - }}> - { - setDisabled(ev.target.value === ""); - }} /> - -
+function ChangePassword() { + const auth = useAuthStore(); + const orRef = useRef(null); + const pwRef = useRef(null); + const ckRef = useRef(null); + + return ( +
+
+
Change Password
+ If you change your password, you will need to log in again.
- {/*
-
-
-
*/} - +
{ + 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"; + }); + }}> + + + + + + +
+ ); +} + +function RemoveAccount() { + const auth = useAuthStore(); + const [remove, setRemove] = useState(false); + + return ( +
+
+
Delete Account
+ You can delete account. This action is irreversible. Please proceed with caution. +
+ +
{ + ev.preventDefault(); + + fetch("/api/auth/delete", { + method: "DELETE", + headers: { + "Authorization": `Basic ${auth.token}` + } + }).then((res) => { + if (res.status !== 200) { + alert(`${res.status} ${res.statusText}`); + return; + } + + alert("Your account has been deactivated and removed"); + document.location.href = "/logout"; + }); + }}> + + + +
+
); } @@ -199,6 +188,44 @@ function PasswordInput({ placeholder, ref }: { placeholder: string; ref: React.R ); } +function CreateDirectory() { + const pathRef = useRef(null); + const [disabled, setDisabled] = useState(true); + + return ( +
+
+
Add Directory
+ You can add a private directory here. +
+ +
{ + ev.preventDefault(); + }}> + { + setDisabled(ev.target.value === ""); + }} /> + +
+
+ ); +} + +function DirectoryTable() { + return ( +
+
+
Directories
+ You can view and manage your directories. +
+ +
+ {/* TODO: create table here */} +
+
+ ); +} + function SettingBox({ children }: { children: React.ReactNode }) { return (