another commit without a list of specific changes! (misc)
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { API_URL } from "@/config";
|
||||
|
||||
@@ -7,6 +7,14 @@ export default function LoginPage() {
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const passwordRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (passwordRef.current && password === "") {
|
||||
passwordRef.current.value = "";
|
||||
}
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
@@ -20,6 +28,7 @@ export default function LoginPage() {
|
||||
setLoading(false);
|
||||
return toast.error("Password is required");
|
||||
}
|
||||
|
||||
const formData = new URLSearchParams();
|
||||
formData.append("username", username);
|
||||
formData.append("password", password);
|
||||
@@ -30,10 +39,8 @@ export default function LoginPage() {
|
||||
|
||||
const resp = await fetch(`${API_URL}/auth/login`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
credentials: "include", // Important for cookies
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
credentials: "include",
|
||||
body: formData.toString(),
|
||||
});
|
||||
|
||||
@@ -44,21 +51,15 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.json().detail) {
|
||||
toast.error(`Login failed: ${resp.json().detail}`);
|
||||
}
|
||||
else {
|
||||
toast.error("Login failed");
|
||||
}
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
toast.error(data.detail ? `Login failed: ${data.detail}` : "Login failed");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
if (data.access_token) {
|
||||
toast.success("Login successful!");
|
||||
// Redirect
|
||||
window.location.href = "/TRip"; // TODO: fix, hardcoded
|
||||
} else {
|
||||
toast.error("Login failed: no access token received");
|
||||
@@ -72,21 +73,16 @@ export default function LoginPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-50">
|
||||
<div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-10">
|
||||
<div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 pb-6">
|
||||
<h2 className="flex flex-col items-center text-3xl font-semibold text-gray-900 dark:text-white mb-8 font-sans">
|
||||
<img className="logo-auth mb-4" src="/images/kode.png" alt="Logo" />
|
||||
Authentication Required
|
||||
</h2>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit} noValidate>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
<form className="space-y-6 relative" onSubmit={handleSubmit} noValidate>
|
||||
{/* Username */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
@@ -95,31 +91,42 @@ export default function LoginPage() {
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-[#121212] dark:text-white"
|
||||
placeholder="Your username"
|
||||
disabled={loading}
|
||||
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
<label
|
||||
htmlFor="username"
|
||||
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
|
||||
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
|
||||
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
|
||||
>
|
||||
Username
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
{/* Password */}
|
||||
<div className="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
autoComplete="off"
|
||||
autoComplete="new-password"
|
||||
spellCheck="false"
|
||||
ref={passwordRef}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-[#121212] dark:text-white"
|
||||
placeholder="••••••••"
|
||||
disabled={loading}
|
||||
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
|
||||
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
|
||||
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user