107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
import { useState } from "react";
|
|
|
|
export default function LoginKasir() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
|
|
function handleLogin(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
|
|
// username & password sederhana
|
|
if (username === "users" && password === "users") {
|
|
localStorage.setItem("isLogin", "true");
|
|
|
|
window.location.href = "/";
|
|
} else {
|
|
alert("Username atau Password salah");
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
height: "100vh",
|
|
background: "#f1f5f9",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<form
|
|
onSubmit={handleLogin}
|
|
style={{
|
|
background: "white",
|
|
padding: "40px",
|
|
borderRadius: "20px",
|
|
width: "350px",
|
|
boxShadow: "0 5px 20px rgba(0,0,0,0.1)",
|
|
}}
|
|
>
|
|
<h1
|
|
style={{
|
|
textAlign: "center",
|
|
marginBottom: "30px",
|
|
}}
|
|
>
|
|
Login users
|
|
</h1>
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
style={{
|
|
width: "100%",
|
|
padding: "14px",
|
|
marginBottom: "15px",
|
|
borderRadius: "10px",
|
|
border: "1px solid #ccc",
|
|
}}
|
|
/>
|
|
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
style={{
|
|
width: "100%",
|
|
padding: "14px",
|
|
marginBottom: "20px",
|
|
borderRadius: "10px",
|
|
border: "1px solid #ccc",
|
|
}}
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
style={{
|
|
width: "100%",
|
|
padding: "14px",
|
|
border: "none",
|
|
borderRadius: "10px",
|
|
background: "#2563eb",
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Login
|
|
</button>
|
|
|
|
<p
|
|
style={{
|
|
textAlign: "center",
|
|
marginTop: "20px",
|
|
color: "#6b7280",
|
|
fontSize: "14px",
|
|
}}
|
|
>
|
|
username: users <br />
|
|
password: users
|
|
</p>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |