feat: middle save

internal/service/auth.go

@@ -39,7 +39,6 @@ func init() {
 		);
 	`))
 	if err != nil {
-		_, _ = fmt.Fprintf(os.Stderr, "%v\n", err)
 		return
 	}
 	defer stmt.Close()

src/App.scss

@@ -5,7 +5,7 @@
 
 .ka-nav {
 	width: 100%;
-	height: 50px;
+	min-height: 60px;
 	display: flex;
 	flex-direction: row;
 	align-items: center;

src/App.tsx

@@ -10,9 +10,10 @@ import "./App.scss";
 import kuma from "./assets/kuma.png";
 import NotFound from "./components/notfound";
 import Login from "./components/login";
-import { useAuthStore } from "./store/auth";
+import { AccountData, useAuthStore } from "./store/auth";
 import Logout from "./components/logout";
 import Settings from "./components/settings";
+import { FileNavigator } from "./components/navigation";
 
 function App() {
 	return (
@@ -31,6 +32,7 @@ function Dashboard({ children }: { children: React.ReactNode }) {
 	return (
 		<main className="container-md ka-view">
 			<Header />
+			<FileNavigator />
 			{children}
 			<Footer />
 		</main>
@@ -70,6 +72,7 @@ function View() {
 function Header() {
 	const auth = useAuthStore();
 	const [isAuth, setAuth] = useState(false);
+	const [username, setUsername] = useState("undefined");
 
 	useEffect(() => {
 		if (auth.token === null) {
@@ -80,6 +83,21 @@ function Header() {
 			if (ok)
 				setAuth(true);
 		});
+
+		fetch("/api/auth/read", {
+			method: "GET",
+			mode: "same-origin",
+			headers: {
+				"Authorization": `Basic ${auth.token}`
+			}
+		}).then(res => {
+			if (res.status !== 200)
+				return;
+
+			return res.json();
+		}).then((data: AccountData) => {
+			setUsername(data.username);
+		});
 	}, [auth, isAuth]);
 
 	return (
@@ -107,7 +125,7 @@ function Header() {
 							<DynamicIcon name="settings" size={15} />
 						</a>
 						<div className="login-info">
-							<span>Logged in as Admin</span>
+							<span>Logged in as {username}</span>
 							<a className="login-btn" href="/logout">
 								Logout
 							</a>

src/components/directory/directory.scss

@@ -14,6 +14,7 @@
 
 	.ka-dir-row {
 		width: 100%;
+		height: 35px;
 		display: grid;
 		padding: 0.25rem 10px;
 		place-items: left center;

src/components/file-view/index.tsx

@@ -107,19 +107,10 @@ function FileView() {
 			{convert(path.data.total)}
 
 			<div id="download">
-				<button className="download-btn secondary" onClick={ev => {
-					ev.preventDefault();
-					const link = document.createElement("a");
-					link.href = `/api/download${path.data?.path}`;
-					link.download = `/api/download${path.data?.path}`;
-					
-					document.body.appendChild(link);
-					link.click();
-					document.body.removeChild(link);
-				}}>
+				<a className="download-btn" href={`/api/download${path.data?.path}`}>
 					<DynamicIcon name="cloud-download" />
 					<span>Download</span>
-				</button>
+				</a>
 			</div>
 		</div>
 	);

src/components/navigation/index.tsx

@@ -0,0 +1,10 @@
+import { useLocation } from "react-router";
+
+export function FileNavigator() {
+	const location = useLocation();
+	const split = location.pathname.substring(1, location.pathname.length).split("/");
+
+	return <div>
+		
+	</div>;
+}

src/components/settings/index.tsx

@@ -33,8 +33,12 @@ function Settings() {
 	return (
 		<div className="ka-settings">
 			<h2 className="ka-title">General</h2>
-
 			<AccountSetting auth={auth} />
+
+			<h2 className="ka-title">Private Directory</h2>
+			<SettingBox>
+				<h3>Not provided features</h3>
+			</SettingBox>
 		</div>
 	);
 }
@@ -51,6 +55,8 @@ function AccountSetting({ auth }: { auth: AuthState }) {
 	const orRef = useRef<HTMLInputElement>(null);
 	const pwRef = useRef<HTMLInputElement>(null);
 	const ckRef = useRef<HTMLInputElement>(null);
+	
+	const [remove, setRemove] = useState(false);
 
 	return (
 		<SettingBox>
@@ -117,7 +123,14 @@ function AccountSetting({ auth }: { auth: AuthState }) {
 				</div>
 
 				<form className="box-col">
-					<button type="submit" className="danger" onClick={ev => {
+					<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 => {
 						ev.preventDefault();
 
 						fetch("/api/auth/delete", {

src/components/settings/settings.scss

@@ -49,10 +49,29 @@
 		.line {
 			margin-bottom: 15px;
 		}
+
+		.checkbox {
+			display: flex;
+			align-items: center;
+			flex-direction: row;
+
+			span {
+				margin-left: 5px;
+			}
+		}
 	}
 }
 
 #pw-change {
+	input[type="text"], input[type="password"] {
+		width: 100%;
+		border-radius: 25px 0 0 25px;
+	}
+
+	button {
+		margin-top: 1rem;
+	}
+
 	.input-pass {
 		height: 40;
 		display: flex;
@@ -62,11 +81,6 @@
 		justify-content: center;
 	}
 
-	input {
-		width: 100%;
-		border-radius: 25px 0 0 25px;
-	}
-
 	.pw-btn {
 		width: 40px;
 		height: 40px;
@@ -76,8 +90,4 @@
 		border-radius: 0 25px 25px 0;
 		background-color: var(--nav-color);
 	}
-
-	button {
-		margin-top: 1rem;
-	}
 }

src/store/auth.ts

@@ -6,6 +6,11 @@ export interface AuthData {
 	token: string;
 }
 
+export interface AccountData {
+	ok: number;
+	username: string;
+}
+
 
 export interface AuthState {
 	token: string | null;