Berikut contoh halaman login di React Menggunakan Lybrary Material UI
disini ada beberapa file yang menjadi fokus kita:
pages/LoginPage.jsx
component/MyButton.jsx
component/MySnackbar.jsx
component/MyTextField.jsx
App.jsx
berikut kodenya :
> pages/LoginPage.jsx
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MyTextField from "../component/MyTextField";
import MyButton from "../component/MyButton";
import { Checkbox, FormControlLabel } from "@mui/material";
import { useState } from "react";
import MySnackbar from "../component/MySnackbar";
const defaultTheme = createTheme({
palette: {
primary: { main: "#1976d2" },
secondary: { main: "#7c8ee6ff" },
error: { main: "#f44336" },
},
});
export default function LoginPage() {
const [message, setMessage] = useState("");
const [isError, setIsError] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const handleSubmit = async (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
const email = data.get("email");
const password = data.get("password");
if (!email || !password) {
setIsError(true);
setIsSuccess(false);
setMessage("Email and password must be filled");
return;
}
try {
const response = await fetch("http://localhost:3001/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password }),
});
const result = await response.json();
if (response.ok) {
setIsError(false);
setIsSuccess(true);
setMessage(result.message || "Login successful!");
// localStorage.setItem("token", result.token); // optional
} else {
setIsError(true);
setIsSuccess(false);
setMessage(
result.message || "Login failed. Please check your credentials."
);
}
} catch (error) {
setIsError(true);
setIsSuccess(false);
setMessage("Network error. Please try again later.");
console.error("Login error:", error);
}
};
return (
<ThemeProvider theme={defaultTheme}>
<Container component="main" maxWidth="xs">
<Box
sx={{
marginTop: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign In
</Typography>
</Box>
<Box component="form" noValidate sx={{ mt: 1 }} onSubmit={handleSubmit}>
<MyTextField
required
id="email"
label="Email"
name="email"
autoComplete="email"
/>
<MyTextField
required
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<MyButton type="submit" label="Sign In" />
{isError && (
<MySnackbar
message={message}
open={isError}
severity="error"
handleClose={() => setIsError(false)}
/>
)}
{isSuccess && (
<MySnackbar
message={message}
open={isSuccess}
severity="success"
handleClose={() => setIsSuccess(false)}
/>
)}
</Box>
</Container>
</ThemeProvider>
);
}
> component/MyButton.jsx
import { Button } from "@mui/material";
import React from "react";
export default function MyButton(props) {
const {
type = "submit",
variant = "contained",
label,
handleOnClick,
} = props;
return (
<Button
{...props}
fullWidth
sx={{ mt: 3, mb: 2 }}
type={type}
onClick={type === "submit" ? undefined : handleOnClick}
variant={variant}
>
{label}
</Button>
);
}
> component/MySnackbar.jsx
import { Alert, Snackbar } from "@mui/material";
import React from "react";
export default function MySnackbar({ open, handleClose, severity, message }) {
return (
<Snackbar
open={open}
autoHideDuration={6000}
onClose={handleClose}
anchorOrigin={{ vertical: "top", horizontal: "center" }}
>
<Alert
onClose={handleClose}
severity={severity}
variant="filled"
sx={{ width: "100%" }}
>
{message}
</Alert>
</Snackbar>
);
}
> component/MyTextField.jsx
import { TextField } from "@mui/material";
import React from "react";
// component TextFiled sudah reusable
export default function MyTextField(props) {
const { margin, required, id, type, label, name, autoComplete } = props;
return (
<TextField
{...props}
id={id}
autoFocus
fullWidth
name={name}
type={type}
label={label}
margin={margin || "normal"}
required={required || false}
autoComplete={autoComplete}
/>
);
}
App.jsx
import React from "react";
import LoginPage from "./pages/LoginPage";
function App() {
return <LoginPage />;
}
export default App;
Jalankan program backend dummy server.js yang sudah kita buat di postingan sebelumnya "Membuat backend server.js untuk test front end login dengan user dummy"
jalankan front end, dan coba lakukan login dengan :
username : admin@example.com
password : 12345
maka akan tampil sbb :
Jika email / password salah maka akan muncul sbb:
0 Komentar