style: split component from settings/index.ts
This commit is contained in:
parent
fdf4750919
commit
0c5a381932
2 changed files with 155 additions and 120 deletions
|
|
@ -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)).
|
||||
|
|
|
|||
|
|
@ -42,144 +42,133 @@ 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 */}
|
||||
<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" 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">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" onSubmit={ev => {
|
||||
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";
|
||||
});
|
||||
}}>
|
||||
<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>
|
||||
<ChangePassword />
|
||||
<RemoveAccount />
|
||||
</SettingBox>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateDirectory() {
|
||||
const pathRef = useRef<HTMLInputElement>(null);
|
||||
const [disabled, setDisabled] = useState(true);
|
||||
|
||||
return (
|
||||
<SettingBox>
|
||||
<h4>Directory Management</h4>
|
||||
<span></span>
|
||||
<hr />
|
||||
<span>You can manage your private directories here. Add, remove, or modify directories as needed.</span>
|
||||
<hr className="line" />
|
||||
|
||||
{/* 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>
|
||||
<CreateDirectory />
|
||||
<DirectoryTable />
|
||||
</SettingBox>
|
||||
);
|
||||
}
|
||||
|
||||
<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>
|
||||
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>
|
||||
<span>If you change your password, you will need to log in again.</span>
|
||||
</div>
|
||||
|
||||
{/* <div className="ka-privdir">
|
||||
<div className="dir-head"></div>
|
||||
<div className="dir-body"></div>
|
||||
</div> */}
|
||||
</SettingBox>
|
||||
<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">Change Password</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RemoveAccount() {
|
||||
const auth = useAuthStore();
|
||||
const [remove, setRemove] = useState(false);
|
||||
|
||||
return (
|
||||
<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" onSubmit={ev => {
|
||||
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";
|
||||
});
|
||||
}}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue