98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
import { useState } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { useAuth } from "../../contexts/AuthContext";
|
|
import Input from "../../components/Input";
|
|
import "./Login.css";
|
|
|
|
export default function Login() {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const { login } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if (!email || !password) {
|
|
setError("Please fill in all fields");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setError("");
|
|
setLoading(true);
|
|
await login(email, password);
|
|
navigate("/addresses");
|
|
} catch (err) {
|
|
setError("Failed to log in: " + err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="login-page">
|
|
<video
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
className="login-bg-video"
|
|
>
|
|
<source src="/koin_spin.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
<div className="login-card login-card-fadein">
|
|
<h1 className="login-heading">
|
|
<span className="login-brand">Koin Ping</span> - Login
|
|
</h1>
|
|
|
|
<div className="login-interactive-fadein">
|
|
{error && <div className="alert alert--error">{error}</div>}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<Input
|
|
label="Email"
|
|
type="email"
|
|
value={email}
|
|
onChange={setEmail}
|
|
disabled={loading}
|
|
required
|
|
/>
|
|
<Input
|
|
label="Password"
|
|
type="password"
|
|
value={password}
|
|
onChange={setPassword}
|
|
disabled={loading}
|
|
required
|
|
className="form-field--last"
|
|
/>
|
|
|
|
<button type="submit" disabled={loading} className="btn btn--primary login-button">
|
|
{loading ? "Logging in..." : "Log In"}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="login-footer">
|
|
<p className="text-muted">
|
|
Don't have an account?{" "}
|
|
<Link to="/signup" className="login-signup-link">
|
|
Sign up here
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="login-tagline login-card-fadein">
|
|
A lightweight, on-chain monitoring system giving users real-time
|
|
situational awareness over blockchain addresses.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|