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,19 +42,38 @@ 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 */}
|
||||
|
||||
<ChangePassword />
|
||||
<RemoveAccount />
|
||||
</SettingBox>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivateDirectory() {
|
||||
return (
|
||||
<SettingBox>
|
||||
<h4>Directory Management</h4>
|
||||
<span>You can manage your private directories here. Add, remove, or modify directories as needed.</span>
|
||||
<hr className="line" />
|
||||
|
||||
<CreateDirectory />
|
||||
<DirectoryTable />
|
||||
</SettingBox>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -108,8 +127,14 @@ function AccountSetting() {
|
|||
<button type="submit" className="danger">Change Password</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* TODO: split to component */}
|
||||
function RemoveAccount() {
|
||||
const auth = useAuthStore();
|
||||
const [remove, setRemove] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="box-row">
|
||||
<div className="box-col">
|
||||
<h6>Delete Account</h6>
|
||||
|
|
@ -144,42 +169,6 @@ function AccountSetting() {
|
|||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -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