File size: 1,662 Bytes
a566fb0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import { useState } from "react";
import "./login.css";
const ONLY_ALLOWED_USERNAME = "GLIS26STEM";
export default function LabSelection({ onApproved }) {
const [username, setUsername] = useState("");
const [showApproved, setShowApproved] = useState(false);
function submit(e) {
e.preventDefault();
if (username.trim().toLowerCase() === ONLY_ALLOWED_USERNAME.toLowerCase()) {
setShowApproved(true);
// let the toast animate in, then proceed
setTimeout(() => onApproved(), 600);
// optional: hide toast if you ever stay on this screen
setTimeout(() => setShowApproved(false), 2500);
} else {
alert("That username isn’t allowed.");
}
}
return (
<>
<div className={`approvedToast ${showApproved ? "show" : ""}`}>
Approved ✓
</div>
<div className="loginOverlay">
<div className="loginCard">
<h1 className="loginTitle">Computer Vision Lab</h1>
<p className="loginSubtitle">Enter your class username to continue.</p>
<form onSubmit={submit} autoComplete="off">
<label className="loginLabel">Username</label>
<input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="e.g., cv-student"
required
/>
<div className="loginRow">
<button type="submit">Continue</button>
<div className="loginTip">Tip: usernames are case-insensitive.</div>
</div>
</form>
</div>
</div>
</>
);
}
|