refactor: DifferencePage 컴포넌트에 로그인 링크 추가 및 상태 관리 개선
This commit is contained in:
parent
d19bb520ed
commit
6f02f21c7c
4 changed files with 123 additions and 82 deletions
|
|
@ -4,16 +4,18 @@ import { Separator } from "@/components/ui/separator";
|
|||
import { useDifferenceDoc, commit, commitAll } from "@/hook/useDifference";
|
||||
import { useLogin } from "@/state/user";
|
||||
import { Fragment } from "react/jsx-runtime";
|
||||
import { Link } from "wouter";
|
||||
|
||||
export function DifferencePage() {
|
||||
const { data, isLoading, error } = useDifferenceDoc();
|
||||
const userInfo = useLogin();
|
||||
|
||||
if (!userInfo) {
|
||||
return <div className="p-4">
|
||||
return <div className="p-4 w-full flex flex-col items-center">
|
||||
<h2 className="text-3xl">
|
||||
Not logged in
|
||||
</h2>
|
||||
<Link className="text-primary underline" href="/login">Go to Login</Link>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +28,7 @@ export function DifferencePage() {
|
|||
<Card>
|
||||
<CardHeader className="relative">
|
||||
<Button className="absolute right-2 top-8" variant="ghost"
|
||||
onClick={() => {commitAll("comic")}}
|
||||
onClick={() => { commitAll("comic") }}
|
||||
>Commit All</Button>
|
||||
<CardTitle className="text-2xl">Difference</CardTitle>
|
||||
<CardDescription>Scanned Files List</CardDescription>
|
||||
|
|
@ -41,11 +43,11 @@ export function DifferencePage() {
|
|||
{x.map((y) => (
|
||||
<div key={y.path} className="flex items-center mt-2">
|
||||
<p
|
||||
className="flex-1 text-sm text-wrap">{y.path}</p>
|
||||
className="flex-1 text-sm text-wrap">{y.path}</p>
|
||||
<Button
|
||||
className="flex-none ml-2"
|
||||
variant="outline"
|
||||
onClick={() => {commit(y.path, y.type)}}>
|
||||
onClick={() => { commit(y.path, y.type) }}>
|
||||
Commit
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export type LogoutResponse = {
|
|||
};
|
||||
|
||||
export type RefreshResponse = LoginResponse & {
|
||||
refresh: boolean;
|
||||
refresh: true;
|
||||
};
|
||||
|
||||
export type ErrorFormat = {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { atom, useAtomValue } from "../lib/atom.ts";
|
||||
import { createStore } from 'jotai';
|
||||
import { LoginRequest } from "dbtype/mod.ts";
|
||||
import {
|
||||
ApiError,
|
||||
|
|
@ -9,41 +7,63 @@ import {
|
|||
refreshService,
|
||||
resetPasswordService,
|
||||
} from "./api.ts";
|
||||
|
||||
// Create a store for setting atom values outside components
|
||||
const store = createStore();
|
||||
import { useSyncExternalStore } from "react";
|
||||
|
||||
let localObj: LoginResponse | null = null;
|
||||
|
||||
function getUserSessions() {
|
||||
if (localObj === null) {
|
||||
const storagestr = localStorage.getItem("UserLoginContext") as string | null;
|
||||
const storage = storagestr !== null ? (JSON.parse(storagestr) as LoginResponse | null) : null;
|
||||
if (!localObj) {
|
||||
const storagestr = localStorage.getItem("UserLoginContext");
|
||||
const storage = storagestr ? (JSON.parse(storagestr) as LoginResponse | null) : null;
|
||||
// update localObj from storage
|
||||
localObj = storage;
|
||||
}
|
||||
if (localObj !== null && localObj.accessExpired > Math.floor(Date.now() / 1000)) {
|
||||
return {
|
||||
username: localObj.username,
|
||||
permission: localObj.permission,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
if (localObj && localObj.accessExpired > Math.floor(Date.now())) {
|
||||
return {
|
||||
username: localObj.username,
|
||||
permission: localObj.permission,
|
||||
accessExpired: localObj.accessExpired,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function setUserSessions(user: LoginResponse | null) {
|
||||
localObj = user;
|
||||
if (user) {
|
||||
localStorage.setItem("UserLoginContext", JSON.stringify(user));
|
||||
} else {
|
||||
localStorage.removeItem("UserLoginContext");
|
||||
}
|
||||
}
|
||||
|
||||
class AuthEvent extends CustomEvent<{
|
||||
type: "login" | "logout" | "refresh";
|
||||
user: { username: string; permission: string[] } | null;
|
||||
}> {
|
||||
constructor(type: "login" | "logout" | "refresh", user: { username: string; permission: string[] } | null) {
|
||||
super("auth", { detail: { type, user } });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface WindowEventMap {
|
||||
auth: AuthEvent;
|
||||
}
|
||||
|
||||
function addEventListener(
|
||||
type: "auth",
|
||||
listener: (this: Window, ev: AuthEvent) => void,
|
||||
options?: boolean | AddEventListenerOptions
|
||||
): void;
|
||||
function removeEventListener(
|
||||
type: "auth", listener: (this: Window, ev: AuthEvent) => void, options?: boolean | EventListenerOptions): void;
|
||||
}
|
||||
|
||||
export async function refresh() {
|
||||
try {
|
||||
const r = await refreshService();
|
||||
if (r.refresh) {
|
||||
localObj = {
|
||||
...r,
|
||||
};
|
||||
} else {
|
||||
localObj = {
|
||||
accessExpired: 0,
|
||||
username: "",
|
||||
permission: r.permission,
|
||||
};
|
||||
}
|
||||
localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
|
||||
setUserSessions(r);
|
||||
window.dispatchEvent(new AuthEvent("refresh", { username: r.username, permission: r.permission }));
|
||||
return {
|
||||
username: r.username,
|
||||
permission: r.permission,
|
||||
|
|
@ -52,51 +72,49 @@ export async function refresh() {
|
|||
if (e instanceof ApiError) {
|
||||
console.error(`Refresh failed: ${e.detail}`);
|
||||
}
|
||||
localObj = { accessExpired: 0, username: "", permission: [] };
|
||||
localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
|
||||
return { username: "", permission: [] };
|
||||
setUserSessions(null);
|
||||
window.dispatchEvent(new AuthEvent("logout", null));
|
||||
return {
|
||||
username: "",
|
||||
permission: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const doLogout = async () => {
|
||||
try {
|
||||
const res = await logoutService();
|
||||
localObj = {
|
||||
accessExpired: 0,
|
||||
username: "",
|
||||
setUserSessions(null);
|
||||
window.dispatchEvent(new AuthEvent("logout", null));
|
||||
return {
|
||||
username: res.username,
|
||||
permission: res.permission,
|
||||
};
|
||||
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
|
||||
store.set(userLoginStateAtom, localObj);
|
||||
return {
|
||||
username: localObj.username,
|
||||
permission: localObj.permission,
|
||||
};
|
||||
|
||||
} catch (error) {
|
||||
console.error(`Server Error ${error}`);
|
||||
// Even if logout fails, clear client-side session
|
||||
localObj = { accessExpired: 0, username: "", permission: [] };
|
||||
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
|
||||
store.set(userLoginStateAtom, localObj);
|
||||
return {
|
||||
username: "",
|
||||
permission: [],
|
||||
};
|
||||
setUserSessions(null);
|
||||
return { username: "", permission: [] };
|
||||
}
|
||||
};
|
||||
|
||||
export const doLogin = async (userLoginInfo: LoginRequest): Promise<string | LoginResponse> => {
|
||||
export const doLogin = async (userLoginInfo: LoginRequest): Promise<{
|
||||
ok: true;
|
||||
data: LoginResponse;
|
||||
} | {
|
||||
ok: false;
|
||||
error: string;
|
||||
}> => {
|
||||
try {
|
||||
const b = await loginService(userLoginInfo);
|
||||
localObj = b;
|
||||
store.set(userLoginStateAtom, b);
|
||||
window.localStorage.setItem("UserLoginContext", JSON.stringify(localObj));
|
||||
return b;
|
||||
setUserSessions(b);
|
||||
window.dispatchEvent(new AuthEvent("login", { username: b.username, permission: b.permission }));
|
||||
return { ok: true, data: b };
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) {
|
||||
return e.detail ?? e.message;
|
||||
return { ok: false, error: e.detail ?? e.message };
|
||||
}
|
||||
return "An unknown error occurred.";
|
||||
return { ok: false, error: "An unknown error occurred." };
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -111,23 +129,40 @@ export const doResetPassword = async (username: string, oldpassword: string, new
|
|||
return await resetPasswordService(username, oldpassword, newpassword);
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError) {
|
||||
return e.detail ?? e.message;
|
||||
return { ok: false as const, error: e.detail ?? e.message };
|
||||
}
|
||||
return "An unknown error occurred.";
|
||||
return { ok: false as const, error: "An unknown error occurred." };
|
||||
}
|
||||
};
|
||||
|
||||
export async function getInitialValue() {
|
||||
const user = getUserSessions();
|
||||
if (user) {
|
||||
return user;
|
||||
}
|
||||
return refresh();
|
||||
}
|
||||
|
||||
export const userLoginStateAtom = atom(getUserSessions());
|
||||
|
||||
export function useLogin() {
|
||||
const val = useAtomValue(userLoginStateAtom);
|
||||
return val;
|
||||
const hook = useSyncExternalStore(
|
||||
(onChange) => {
|
||||
const listener = () => {
|
||||
onChange();
|
||||
};
|
||||
window.addEventListener("auth", listener);
|
||||
return () => window.removeEventListener("auth", listener);
|
||||
},
|
||||
getUserSessions,
|
||||
);
|
||||
return hook;
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.addEventListener("visibilitychange", async () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
const session = getUserSessions();
|
||||
if (!session) {
|
||||
await refresh();
|
||||
}
|
||||
if (session && session.accessExpired - Date.now() < 5 * 60 * 1000) {
|
||||
// access token will expire in 5 minutes, refresh it
|
||||
await refresh();
|
||||
}
|
||||
|
||||
// If the session is still valid, do nothing
|
||||
}
|
||||
});
|
||||
|
|
@ -25,7 +25,7 @@ type LoginResponse = {
|
|||
|
||||
type RefreshResponse = {
|
||||
accessExpired: number;
|
||||
refresh: boolean;
|
||||
refresh: true;
|
||||
} & PayloadInfo;
|
||||
|
||||
type RefreshPayloadInfo = { username: string };
|
||||
|
|
@ -45,8 +45,8 @@ const ResetBodySchema = t.Object({
|
|||
|
||||
const SettingsBodySchema = t.Record(t.String(), t.Unknown());
|
||||
|
||||
const accessExpiredTime = 60 * 60 * 2; // 2 hours
|
||||
const refreshExpiredTime = 60 * 60 * 24 * 14; // 14 days
|
||||
const accessExpiredTime = 60 * 60 * 2 * 1000; // 2 hours
|
||||
const refreshExpiredTime = 60 * 60 * 24 * 14 * 1000; // 14 days
|
||||
|
||||
async function createAccessToken(payload: PayloadInfo, secret: string) {
|
||||
return await new SignJWT(payload)
|
||||
|
|
@ -83,7 +83,7 @@ async function verifyToken<T>(token: string, secret: string): Promise<T> {
|
|||
export const accessTokenName = "access_token";
|
||||
export const refreshTokenName = "refresh_token";
|
||||
|
||||
function setToken(cookie: CookieJar, token_name: string, token_payload: string | null, expiredSeconds: number) {
|
||||
function setToken(cookie: CookieJar, token_name: string, token_payload: string | null, expiredMilliseconds: number) {
|
||||
if (token_payload === null) {
|
||||
cookie[token_name]?.remove();
|
||||
return;
|
||||
|
|
@ -94,10 +94,14 @@ function setToken(cookie: CookieJar, token_name: string, token_payload: string |
|
|||
httpOnly: true,
|
||||
secure: setting.secure,
|
||||
sameSite: "strict",
|
||||
expires: new Date(Date.now() + expiredSeconds * 1000),
|
||||
expires: new Date(Date.now() + expiredMilliseconds),
|
||||
});
|
||||
}
|
||||
|
||||
function removeToken(cookie: CookieJar, token_name: string) {
|
||||
cookie[token_name]?.remove();
|
||||
}
|
||||
|
||||
const isUserState = (obj: unknown): obj is PayloadInfo => {
|
||||
if (typeof obj !== "object" || obj === null) {
|
||||
return false;
|
||||
|
|
@ -237,15 +241,15 @@ export const createLoginRouter = (userController: UserAccessor) => {
|
|||
return {
|
||||
username: user.username,
|
||||
permission,
|
||||
accessExpired: Math.floor(Date.now() / 1000) + accessExpiredTime,
|
||||
accessExpired: Math.floor(Date.now() ) + accessExpiredTime,
|
||||
} satisfies LoginResponse;
|
||||
}, {
|
||||
body: LoginBodySchema,
|
||||
})
|
||||
.post("/logout", ({ cookie, set }) => {
|
||||
const setting = get_setting();
|
||||
setToken(cookie, accessTokenName, null, 0);
|
||||
setToken(cookie, refreshTokenName, null, 0);
|
||||
removeToken(cookie, accessTokenName);
|
||||
removeToken(cookie, refreshTokenName);
|
||||
set.status = 200;
|
||||
return {
|
||||
ok: true,
|
||||
|
|
@ -261,7 +265,7 @@ export const createLoginRouter = (userController: UserAccessor) => {
|
|||
return {
|
||||
...auth.user,
|
||||
refresh: true,
|
||||
accessExpired: Math.floor(Date.now() / 1000) + accessExpiredTime,
|
||||
accessExpired: Math.floor(Date.now()) + accessExpiredTime,
|
||||
} satisfies RefreshResponse;
|
||||
})
|
||||
.post("/reset", async ({ body }) => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue