refactor: remove login/auth for public dashboard
Deploy to VPS / deploy (push) Failing after 34s

- Remove login page, redirect / to /dashboard directly
- Remove AuthProvider, DashboardGuard from dashboard layout
- Remove use-auth hook and auth API module
- Remove X-Admin-Password header from API client
- Remove logout button from sidebar
This commit is contained in:
asepharyana
2026-07-26 11:30:27 +07:00
parent 5e01ec0806
commit f9f1313ccd
7 changed files with 17 additions and 258 deletions
+13 -41
View File
@@ -7,32 +7,8 @@ import { Header } from "@/components/layout/header";
import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
import { Sidebar } from "@/components/layout/sidebar";
import { MascotChatbot } from "@/features/mascot/mascot-chatbot";
import { AuthProvider, useAuth } from "@/lib/hooks/use-auth";
import { WsProvider } from "@/lib/ws/context";
function DashboardGuard({ children }: { children: React.ReactNode }) {
const { authenticated, loading } = useAuth();
const router = useRouter();
useEffect(() => {
if (!loading && !authenticated) {
router.push("/");
}
}, [authenticated, loading, router]);
if (loading) {
return (
<div className="flex min-h-screen items-center justify-center">
<div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
);
}
if (!authenticated) return null;
return <>{children}</>;
}
function DashboardShell({ children }: { children: React.ReactNode }) {
const searchParams = useSearchParams();
const router = useRouter();
@@ -49,7 +25,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
const tabParam = searchParams.get("tab");
if (tabParam) {
restored.current = true;
return; // explicit tab in URL — don't override
return;
}
uiStateApi
.get()
@@ -89,21 +65,17 @@ export default function DashboardLayout({
children: React.ReactNode;
}) {
return (
<AuthProvider>
<DashboardGuard>
<WsProvider>
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
}
>
<DashboardShell>{children}</DashboardShell>
</Suspense>
<MascotChatbot />
</WsProvider>
</DashboardGuard>
</AuthProvider>
<WsProvider>
<Suspense
fallback={
<div className="flex min-h-screen items-center justify-center">
<div className="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
</div>
}
>
<DashboardShell>{children}</DashboardShell>
</Suspense>
<MascotChatbot />
</WsProvider>
);
}
+3 -101
View File
@@ -1,103 +1,5 @@
"use client";
import { redirect } from "next/navigation";
import { Loader2, Shield } from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { login } from "@/lib/api";
export default function LoginPage() {
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(false);
const [checking, setChecking] = useState(true);
const router = useRouter();
useEffect(() => {
const stored = localStorage.getItem("admin-password");
if (stored) {
login(stored)
.then((ok) => {
if (ok) router.replace("/dashboard");
else setChecking(false);
})
.catch(() => setChecking(false));
} else {
setChecking(false);
}
}, [router]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
setLoading(true);
try {
const ok = await login(password);
if (ok) {
localStorage.setItem("admin-password", password);
router.push("/dashboard");
} else {
setError("Invalid password");
}
} catch {
setError("Connection failed. Is the backend running?");
} finally {
setLoading(false);
}
};
if (checking) {
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<Loader2 className="size-6 animate-spin text-muted-foreground" />
</div>
);
}
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<div className="w-full max-w-sm space-y-6">
<div className="flex flex-col items-center gap-2 text-center">
<div className="flex size-12 items-center justify-center rounded-full bg-primary/10">
<Shield className="size-6 text-primary" />
</div>
<h1 className="text-2xl font-semibold tracking-tight">Bete</h1>
<p className="text-sm text-muted-foreground">
Discord Moderation Dashboard
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<label
htmlFor="password"
className="text-sm font-medium leading-none"
>
Admin Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter admin password"
className="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
disabled={loading}
/>
</div>
{error && <p className="text-sm text-destructive">{error}</p>}
<button
type="submit"
disabled={loading || !password}
className="inline-flex w-full items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"
>
{loading ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{loading ? "Signing in…" : "Sign in"}
</button>
</form>
</div>
</div>
);
export default function RootPage() {
redirect("/dashboard?tab=messages");
}
@@ -1,8 +1,7 @@
"use client";
import { LayoutDashboard, LogOut, MessageSquare, Radio } from "lucide-react";
import { LayoutDashboard, MessageSquare, Radio } from "lucide-react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/hooks/use-auth";
const tabs = [
{ id: "messages", label: "Messages", icon: MessageSquare },
@@ -13,7 +12,6 @@ const tabs = [
type TabId = (typeof tabs)[number]["id"];
export function Sidebar({ activeTab }: { activeTab: TabId }) {
const { logout } = useAuth();
const router = useRouter();
const handleTabClick = (tabId: TabId) => {
@@ -43,17 +41,6 @@ export function Sidebar({ activeTab }: { activeTab: TabId }) {
</button>
))}
</nav>
<div className="border-t p-3">
<button
type="button"
onClick={logout}
className="w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground transition-colors"
>
<LogOut className="size-4 shrink-0" />
Sign out
</button>
</div>
</aside>
);
}
-13
View File
@@ -1,13 +0,0 @@
import { ApiError, api } from "./client";
export async function login(password: string): Promise<boolean> {
try {
const resp = await api.post<{ ok: boolean }>("/api/auth/login", {
password,
});
return resp.ok;
} catch (err) {
if (err instanceof ApiError) return false;
throw err;
}
}
-10
View File
@@ -12,27 +12,17 @@ function getBaseUrl(): string {
if (typeof window === "undefined") return "";
const protocol = window.location.protocol.replace(":", "");
const host = window.location.host;
// In dev, Next.js proxy can be configured, but default to same-host assumption
return `${protocol}://${host}`;
}
function getAuthHeader(): string | null {
if (typeof window === "undefined") return null;
return localStorage.getItem("admin-password");
}
export async function apiRequest<T>(
method: string,
path: string,
body?: unknown,
): Promise<T> {
const url = `${getBaseUrl()}${path}`;
const password = getAuthHeader();
const headers: Record<string, string> = {};
if (password) {
headers["X-Admin-Password"] = password;
}
if (body !== undefined) {
headers["Content-Type"] = "application/json";
}
-1
View File
@@ -1,4 +1,3 @@
export { login } from "./auth";
export { ApiError, api, apiRequest } from "./client";
export { configApi } from "./config";
export { dashboardApi } from "./dashboard";
@@ -1,78 +0,0 @@
"use client";
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useState,
} from "react";
import { login } from "@/lib/api";
interface AuthContextValue {
authenticated: boolean;
loading: boolean;
login: (password: string) => Promise<boolean>;
logout: () => void;
}
const AuthContext = createContext<AuthContextValue | null>(null);
export function AuthProvider({ children }: { children: ReactNode }) {
const [authenticated, setAuthenticated] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const password = localStorage.getItem("admin-password");
if (password) {
// Verify stored password still works
login(password)
.then((ok) => {
setAuthenticated(ok);
setLoading(false);
})
.catch(() => {
localStorage.removeItem("admin-password");
setLoading(false);
});
} else {
setLoading(false);
}
}, []);
const handleLogin = useCallback(async (password: string) => {
const ok = await login(password);
if (ok) {
localStorage.setItem("admin-password", password);
setAuthenticated(true);
}
return ok;
}, []);
const handleLogout = useCallback(() => {
localStorage.removeItem("admin-password");
setAuthenticated(false);
}, []);
return (
<AuthContext.Provider
value={{
authenticated,
loading,
login: handleLogin,
logout: handleLogout,
}}
>
{children}
</AuthContext.Provider>
);
}
export function useAuth(): AuthContextValue {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error("useAuth must be used within an AuthProvider");
}
return ctx;
}