password_hash => password (display string); formatting
This commit is contained in:
parent
49ef6de30c
commit
2613acf00d
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user