password_hash => password (display string); formatting

This commit is contained in:
Rob Colbert 2026-05-08 11:51:52 -04:00
parent 49ef6de30c
commit 2613acf00d

View File

@ -1,27 +1,30 @@
import { useState } from 'react'; import { useState } from "react";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { api, AuthResponse, User } from '../lib/api'; import { api, AuthResponse, User } from "../lib/api";
import GadgetGrid from '../components/GadgetGrid'; import GadgetGrid from "../components/GadgetGrid";
interface SignInProps { interface SignInProps {
onSuccess: (user: User, token: string) => void; onSuccess: (user: User, token: string) => void;
} }
export default function SignIn({ onSuccess }: SignInProps) { export default function SignIn({ onSuccess }: SignInProps) {
const [email, setEmail] = useState(''); const [email, setEmail] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setError(''); setError("");
setLoading(true); setLoading(true);
try { try {
const response = await api.post<AuthResponse>('/auth/sign-in', { email, password }); const response = await api.post<AuthResponse>("/auth/sign-in", {
email,
password,
});
onSuccess(response.user, response.token); onSuccess(response.user, response.token);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Invalid credentials'); setError(err instanceof Error ? err.message : "Invalid credentials");
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -36,11 +39,14 @@ export default function SignIn({ onSuccess }: SignInProps) {
<div className="w-full max-w-md"> <div className="w-full max-w-md">
<div className="border-2 border-border-default p-6 rounded bg-bg-secondary"> <div className="border-2 border-border-default p-6 rounded bg-bg-secondary">
<div className="font-mono text-text-secondary text-sm"> <div className="font-mono text-text-secondary text-sm">
<div className="mb-1 text-text-muted">// AUTHENTICATION REQUIRED</div> <div className="mb-1 text-text-muted">
// AUTHENTICATION REQUIRED
</div>
<div className="mb-6 text-text-primary">SYSTEM ACCESS</div> <div className="mb-6 text-text-primary">SYSTEM ACCESS</div>
<div className="text-text-muted mb-6"> <div className="text-text-muted mb-6">
Accounts are administered. Contact your administrator for access. Accounts are administered. Contact your administrator for
access.
</div> </div>
{error && ( {error && (
@ -54,7 +60,10 @@ export default function SignIn({ onSuccess }: SignInProps) {
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div> <div>
<label htmlFor="email" className="block text-sm text-text-muted mb-1 font-mono"> <label
htmlFor="email"
className="block text-sm text-text-muted mb-1 font-mono"
>
email_address email_address
</label> </label>
<input <input
@ -68,8 +77,11 @@ export default function SignIn({ onSuccess }: SignInProps) {
/> />
</div> </div>
<div> <div>
<label htmlFor="password" className="block text-sm text-text-muted mb-1 font-mono"> <label
password_hash htmlFor="password"
className="block text-sm text-text-muted mb-1 font-mono"
>
password
</label> </label>
<input <input
id="password" id="password"
@ -93,7 +105,7 @@ export default function SignIn({ onSuccess }: SignInProps) {
disabled={loading} disabled={loading}
className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded transition-colors disabled:opacity-50 font-mono text-sm" className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded transition-colors disabled:opacity-50 font-mono text-sm"
> >
{loading ? 'VERIFYING...' : 'AUTHENTICATE'} {loading ? "VERIFYING..." : "AUTHENTICATE"}
</button> </button>
</div> </div>
</form> </form>