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
|
# kuma-archive
|
||||||
- Simple file mirror server for Gin(go) + TypeScript + React.js
|
- 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
|
## License
|
||||||
- Code licensed under the <a href="https://git.wh64.net/devproje/kuma-archive/src/branch/master/LICENSE">MIT License</a>.
|
- 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)).
|
- 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() {
|
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 (
|
return (
|
||||||
<SettingBox>
|
<SettingBox>
|
||||||
<h4>Account Setting</h4>
|
<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>
|
<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" />
|
<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 => {
|
<ChangePassword />
|
||||||
ev.preventDefault();
|
<RemoveAccount />
|
||||||
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>
|
|
||||||
</SettingBox>
|
</SettingBox>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function PrivateDirectory() {
|
function PrivateDirectory() {
|
||||||
const pathRef = useRef<HTMLInputElement>(null);
|
|
||||||
const [disabled, setDisabled] = useState(true);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SettingBox>
|
<SettingBox>
|
||||||
<h4>Directory Management</h4>
|
<h4>Directory Management</h4>
|
||||||
<span></span>
|
<span>You can manage your private directories here. Add, remove, or modify directories as needed.</span>
|
||||||
<hr />
|
<hr className="line" />
|
||||||
|
|
||||||
{/* TODO: split to component */}
|
<CreateDirectory />
|
||||||
<div className="box-row">
|
<DirectoryTable />
|
||||||
<div className="box-col">
|
</SettingBox>
|
||||||
<h6>Add Directory</h6>
|
);
|
||||||
<span>You can add private directory here.</span>
|
}
|
||||||
</div>
|
|
||||||
|
|
||||||
<form className="box-col form" onSubmit={ev => {
|
function ChangePassword() {
|
||||||
ev.preventDefault();
|
const auth = useAuthStore();
|
||||||
}}>
|
const orRef = useRef<HTMLInputElement>(null);
|
||||||
<input type="text" placeholder="Directory Path" ref={pathRef} required onChange={ev => {
|
const pwRef = useRef<HTMLInputElement>(null);
|
||||||
setDisabled(ev.target.value === "");
|
const ckRef = useRef<HTMLInputElement>(null);
|
||||||
}} />
|
|
||||||
<button type="submit" className="success" disabled={disabled}>Add Directory</button>
|
return (
|
||||||
</form>
|
<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>
|
||||||
|
|
||||||
{/* <div className="ka-privdir">
|
<form className="box-col form" id="pw-change" onSubmit={ev => {
|
||||||
<div className="dir-head"></div>
|
ev.preventDefault();
|
||||||
<div className="dir-body"></div>
|
const origin = orRef.current?.value;
|
||||||
</div> */}
|
const password = pwRef.current?.value;
|
||||||
</SettingBox>
|
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 }) {
|
function SettingBox({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className="setting-box">
|
<div className="setting-box">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue