wh64/kuma-archive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: middle save

Browse source
This commit is contained in:
WH64 2025-03-24 17:46:08 +09:00
parent 2521a26442
commit fdf4750919
2 changed files with 107 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/settings/index.tsx
View file

@ -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>
{/* TODO: create private dir panel */}
<></>
</SettingBox>
<PrivateDirectory />
</div>
);
}
function SettingBox({ children }: { children: React.ReactNode }) {
return (
<div className="setting-box">
{children}
</div>
);
}
function AccountSetting({ auth }: { auth: AuthState }) {
function AccountSetting() {
const auth = useAuthStore();
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">
<PasswordInput placeholder="Password" ref={orRef} />
<PasswordInput placeholder="New Password" ref={pwRef} />
<PasswordInput placeholder="Check Password" ref={ckRef} />
<button type="submit" className="danger" onClick={ev => {
<form className="box-col form" id="pw-change" onSubmit={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">
<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 => {
<form className="box-col form" onSubmit={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;

8
src/components/settings/settings.scss
View file

@ -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;