update

edivaldolluisb · Apr 15, 2024 · 143bdb9 · 143bdb9
1 parent 0545990
commit 143bdb9
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 81 deletions.
diff --git a/frontend/src/components/Form.jsx b/frontend/src/components/Form.jsx
@@ -2,60 +2,83 @@ import { useState } from "react";
 import api from "../api";
 import { useNavigate } from "react-router-dom";
 import { ACCESS_TOKEN, REFRESH_TOKEN } from "../constants";
-import "../styles/Form.css"
+import "../styles/Form.css";
 import LoadingIndicator from "./LoadingIndicator";
+import { Link } from "react-router-dom";
+import { Github } from "lucide-react";
 
 function Form({ route, method }) {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [loading, setLoading] = useState(false);
-    const navigate = useNavigate();
-
-    const name = method === "login" ? "Login" : "Register";
-
-    const handleSubmit = async (e) => {
-        setLoading(true);
-        e.preventDefault();
-
-        try {
-            const res = await api.post(route, { username, password })
-            if (method === "login") {
-                localStorage.setItem(ACCESS_TOKEN, res.data.access);
-                localStorage.setItem(REFRESH_TOKEN, res.data.refresh);
-                navigate("/")
-            } else {
-                navigate("/login")
-            }
-        } catch (error) {
-            alert(error)
-        } finally {
-            setLoading(false)
-        }
-    };
-
-    return (
-        <form onSubmit={handleSubmit} className="form-container">
-            {/*<h1>{name}</h1>*/}
-            <input
-                className="form-input"
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                placeholder="Username"
-            />
-            <input
-                className="form-input"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Password"
-            />
-            {loading && <LoadingIndicator />}
-            <button className="form-button rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" type="submit">
-                {name}
-            </button>
-        </form>
-    );
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [loading, setLoading] = useState(false);
+	const navigate = useNavigate();
+
+	const name = method === "login" ? "Login" : "Register";
+
+	const handleSubmit = async (e) => {
+		setLoading(true);
+		e.preventDefault();
+
+		try {
+			const res = await api.post(route, { username, password });
+			if (method === "login") {
+				localStorage.setItem(ACCESS_TOKEN, res.data.access);
+				localStorage.setItem(REFRESH_TOKEN, res.data.refresh);
+				navigate("/");
+			} else {
+				navigate("/login");
+			}
+		} catch (error) {
+			alert(error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<>
+			<form onSubmit={handleSubmit} className="form-container">
+				{/*<h1>{name}</h1>*/}
+				<input
+					className="form-input"
+					type="text"
+					value={username}
+					onChange={(e) => setUsername(e.target.value)}
+					placeholder="Username"
+				/>
+				<input
+					className="form-input"
+					type="password"
+					value={password}
+					onChange={(e) => setPassword(e.target.value)}
+					placeholder="Password"
+				/>
+				{loading && <LoadingIndicator />}
+				<button
+					className="form-button rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+					type="submit"
+				>
+					{name}
+				</button>
+			</form>
+
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+							<a
+								href="https://github.com/edivaldolluisb"
+								className="flex text-sm font-semibold leading-6 text-gray-900 "
+							>
+								<Github className="mr-1" /> GitHub
+							</a>
+							<Link
+								to={method === "login" ? "/register" : "/login"}
+								className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+							>
+								{method === "login" ? "Register" : "Login"} <span aria-hidden="true">→</span>
+							</Link>
+						</div>
+
+		</>
+	);
 }
 
-export default Form
+export default Form;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
@@ -46,20 +46,6 @@ function Login() {
 						{/* Form */}
 						<Form route="/api/token/" method="login" />
 
-						<div className="mt-10 flex items-center justify-center gap-x-6">
-							<a
-								href="#"
-								className="flex text-sm font-semibold leading-6 text-gray-900 "
-							>
-								<Github className="mr-1" /> GitHub
-							</a>
-							<Link
-								to="/register"
-								className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-							>
-								Register <span aria-hidden="true">→</span>
-							</Link>
-						</div>
 					</div>
 				</div>
 				<div

diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
@@ -47,21 +47,6 @@ function Register() {
 
 						{/* Form */}
 						<Form route="/api/user/register/" method="register" />
-
-						<div className="mt-10 flex items-center justify-center gap-x-6">
-							<a
-								href="#"
-								className="flex text-sm font-semibold leading-6 text-gray-900 "
-							>
-								<Github className="mr-1" /> GitHub
-							</a>
-							<Link
-								to="/login"
-								className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-							>
-								Login <span aria-hidden="true">→</span>
-							</Link>
-						</div>
 					</div>
 				</div>
 				<div