Belajar react #1 SignIn dan SIgnUp
sebelum melakukan pembuatan signin signup silahkan bua file src/api.js
kemudian letakkan kode ini dedalam file api.js
import axios from "axios";
const API_BASE_URL = "http://localhost:8000/api/v1"; // Sesuaikan dengan URL backend-mu
const api = axios.create({
baseURL: API_BASE_URL,
headers: {
"Content-Type": "application/json",
},
});
export default api;
INI UNTUK SIGNUP
import { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import api from "../api"; // Import konfigurasi API
const SignUp = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
setError(""); // Reset error sebelum submit
try {
const response = await api.post("/auth/signup", {
username,
password,
});
if (response.status === 201) {
alert("Sign up berhasil!");
navigate("/signin"); // Redirect ke halaman Sign In
}
} catch (err) {
setError(err.response?.data?.message || "Sign up gagal, coba lagi.");
}
};
return (
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-md-6">
<div className="card shadow">
<div className="card-body">
<h1 className="card-title text-center mb-4">Sign Up</h1>
{error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="username" className="form-label">Username</label>
<input
type="text"
className="form-control"
id="username"
placeholder="Enter username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary w-100">Sign Up</button>
</form>
<div className="text-center mt-3">
<p>Already have an account? <Link to="/signin">Sign In</Link></p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SignUp;
INI UNTUK SIGNIN
import { useState, useEffect } from "react";
import { useNavigate, Link } from "react-router-dom";
import api from "../api"; // Import konfigurasi API
const SignIn = ({ handleLogin }) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [token, setToken] = useState(localStorage.getItem("token")); // ⬅ Tambahkan state token
const navigate = useNavigate();
// Jika token ada, otomatis redirect ke home
useEffect(() => {
if (token) {
navigate("/");
}
}, [token, navigate]); // ⬅ Tambahkan token sebagai dependency agar re-render saat berubah
const handleSubmit = async (e) => {
e.preventDefault();
setError(""); // Reset error sebelum submit
try {
const response = await api.post("/auth/signin", { username, password });
// Simpan token ke localStorage
localStorage.setItem("token", response.data.token);
setToken(response.data.token); // ⬅ Perbarui state token agar useEffect bekerja
// Simpan role pengguna
handleLogin(response.data.role);
} catch (err) {
setError(err.response?.data?.message || "Login gagal, coba lagi.");
}
};
return (
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-md-6">
<div className="card shadow">
<div className="card-body">
<h1 className="card-title text-center mb-4">Sign In</h1>
{error && <div className="alert alert-danger">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="username" className="form-label">Username</label>
<input
type="text"
className="form-control"
id="username"
placeholder="Enter username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="password" className="form-label">Password</label>
<input
type="password"
className="form-control"
id="password"
placeholder="Enter password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-primary w-100">Sign In</button>
</form>
<div className="text-center mt-3">
<p>Don't have an account? <Link to="/signup">Sign Up</Link></p>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SignIn;
Komentar
Posting Komentar