syahdan/minmon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auth: simplify admin login for local development

Browse source
This commit is contained in:
Syahdan 2026-04-29 18:10:22 +07:00
parent 5264cccb6c
commit bf42037619
3 changed files with 22 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

31
apps/web/src/components/sign-in-form.tsx
View file

@ -2,7 +2,7 @@ import { Button } from "@minmon/ui/components/button";
import { Input } from "@minmon/ui/components/input";
import { Label } from "@minmon/ui/components/label";
import { useForm } from "@tanstack/react-form";
import { useNavigate } from "@tanstack/react-router";
import { Link, useNavigate } from "@tanstack/react-router";
import { toast } from "sonner";
import z from "zod";
@ -10,7 +10,7 @@ import { authClient } from "@/lib/auth-client";
import Loader from "./loader";
export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
export default function SignInForm() {
const navigate = useNavigate({
from: "/",
});
@ -53,8 +53,14 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
}
return (
<div className="mx-auto w-full mt-10 max-w-md p-6">
<h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
<div className="mx-auto mt-10 grid w-full max-w-md gap-6 border bg-card p-6">
<div className="space-y-2 text-center">
<p className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">Admin Access</p>
<h1 className="text-3xl font-bold tracking-tight">Sign in to minmon</h1>
<p className="text-sm text-muted-foreground">
Use your administrator account to open the protected monitoring dashboard.
</p>
</div>
<form
onSubmit={(e) => {
@ -78,7 +84,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500">
<p key={error?.message} className="text-xs text-red-500">
{error?.message}
</p>
))}
@ -101,7 +107,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
onChange={(e) => field.handleChange(e.target.value)}
/>
{field.state.meta.errors.map((error) => (
<p key={error?.message} className="text-red-500">
<p key={error?.message} className="text-xs text-red-500">
{error?.message}
</p>
))}
@ -121,14 +127,11 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
</form.Subscribe>
</form>
<div className="mt-4 text-center">
<Button
variant="link"
onClick={onSwitchToSignUp}
className="text-indigo-600 hover:text-indigo-800"
>
Need an account? Sign Up
</Button>
<div className="grid gap-2 border-t pt-4 text-center text-xs text-muted-foreground">
<p>Student demo flow uses administrator sign-in only.</p>
<Link to="/" className="text-primary underline-offset-4 hover:underline">
Return to homepage
</Link>
</div>
</div>
);

13
apps/web/src/routes/login.tsx
View file

@ -1,19 +1,10 @@
import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import SignInForm from "@/components/sign-in-form";
import SignUpForm from "@/components/sign-up-form";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/login")({
component: RouteComponent,
});
function RouteComponent() {
const [showSignIn, setShowSignIn] = useState(false);
return showSignIn ? (
<SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
) : (
<SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
);
return <SignInForm />;
}