+
+}
diff --git a/frontend/src/components/Error.jsx b/frontend/src/components/Error.jsx
index b7f828e..bad2790 100644
--- a/frontend/src/components/Error.jsx
+++ b/frontend/src/components/Error.jsx
@@ -8,21 +8,21 @@ import "../index.css";
* @constructor
*/
export default function Error({error, clear}) {
- return (
-
-
-
-
An Error Occurred!
-
{error}
-
-
- Close
-
-
-
+ return <>
+
+
+
+
An Error Occurred!
+
{error}
+
+
+ Close
+
- );
-}
\ No newline at end of file
+
+
+
+}
diff --git a/frontend/src/components/LoginForm.jsx b/frontend/src/components/LoginForm.jsx
index dea2f12..7e1a7e5 100644
--- a/frontend/src/components/LoginForm.jsx
+++ b/frontend/src/components/LoginForm.jsx
@@ -1,132 +1,134 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
import UserInput from "./UserInput.jsx";
import PasswordInput from "./PasswordInput.jsx";
import RememberMe from "./RememberMe.jsx";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
export default function LoginForm() {
- /**
- * URL To the backend web server.
- * Uses the .env var in local development, but when
- * pushed to dockerhub, the .env is ignored and the real
- * backend URL is used.
- * @type {string}
- */
- const backendUrl = import.meta.env.VITE_BACKEND_URL || "https://backend.gophernest.net";
+ /**
+ * URL To the backend web server.
+ * Uses the .env var in local development, but when
+ * pushed to dockerhub, the .env is ignored and the real
+ * backend URL is used.
+ * @type {string}
+ */
+ const backendUrl = import.meta.env.VITE_BACKEND_URL || "https://backend.gophernest.net";
- const [username, setUsername] = useState("");
- const [remember, setRemember] = useState(false);
- const [password, setPassword] = useState("");
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState("");
+ const [username, setUsername] = useState("");
+ const [remember, setRemember] = useState(false);
+ const [password, setPassword] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
- const navigate = useNavigate();
+ const navigate = useNavigate();
- /**
- * The name of the value stored in local storage.
- * @type {string}
- */
- const storage_id = "gophernest_credentials";
+ /**
+ * The name of the value stored in local storage.
+ * @type {string}
+ */
+ const storage_id = "gophernest_credentials";
- /**
- * Set the email in the form state.
- * @param newUsername
- */
- const updateUsername = (newUsername) => {
- setUsername(newUsername);
+ /**
+ * Set the email in the form state.
+ * @param newUsername
+ */
+ const updateUsername = (newUsername) => {
+ setUsername(newUsername);
+ };
+
+ /**
+ * Set the 'remember me' in the form start.
+ * @param newRemember
+ */
+ const updateRemember = (newRemember) => {
+ setRemember(newRemember);
+ };
+
+ /**
+ * Set the password in the form state.
+ * @param newPassword
+ */
+ const updatePassword = (newPassword) => {
+ setPassword(newPassword);
+ };
+
+
+ /**
+ * Handle the login submission, data is stored in the local storage.
+ * @param event {SubmitEvent}
+ */
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ setLoading(true);
+
+ const sendAuthReq = async (username, password) => {
+ const resp = await fetch(`${backendUrl}/v1/login`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ username, password }),
+ });
+ if (!resp.ok) {
+ const data = await resp.json();
+ console.error(data.message);
+ setError(data.message);
+ return data;
+ }
+ return await resp.json();
};
- /**
- * Set the 'remember me' in the form start.
- * @param newRemember
- */
- const updateRemember = (newRemember) => {
- setRemember(newRemember);
- };
+ sendAuthReq(username, password).then((data) => {
+ const { code, token } = data;
- /**
- * Set the password in the form state.
- * @param newPassword
- */
- const updatePassword = (newPassword) => {
- setPassword(newPassword);
- };
-
-
- /**
- * Handle the login submission, data is stored in the local storage.
- * @param event {SubmitEvent}
- */
- const handleSubmit = (event) => {
- event.preventDefault();
- setLoading(true);
-
- const sendAuthReq = async (username, password) => {
- const resp = await fetch(`${backendUrl}/v1/login`, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({username, password}),
- });
- if (!resp.ok) {
- const data = await resp.json();
- console.error(data.message);
- setError(data.message);
- return data;
- }
- return await resp.json();
- };
-
- sendAuthReq(username, password).then((data) => {
- const {code, token} = data;
-
- // Should always be 200, but just make sure it is
- if (code === 200) {
- // Store JWT in session if the user does not want to be remembered
- remember ? localStorage.setItem(storage_id, token) : sessionStorage.setItem(storage_id, token);
- navigate("/login");
- } else {
- console.error(data);
- setError(data.message);
- }
- }).catch((err) => {
- console.error(err);
- setError(err.toString());
- }).finally(() => {
- // Disable loading bar
- setLoading(false);
- });
- };
-
- // Redirect if the user is logged in
- useEffect(() => {
- if (localStorage.getItem(storage_id) != null || sessionStorage.getItem(storage_id) != null) {
- navigate("/dashboard");
- }
+ // Should always be 200, but just make sure it is
+ if (code === 200) {
+ // Store JWT in session if the user does not want to be remembered
+ remember ? localStorage.setItem(storage_id, token) : sessionStorage.setItem(storage_id, token);
+ navigate("/login");
+ } else {
+ console.error(data);
+ setError(data.message);
+ }
+ }).catch((err) => {
+ console.error(err);
+ setError(err.toString());
+ }).finally(() => {
+ // Disable loading bar
+ setLoading(false);
});
+ };
- useEffect(() => {
- console.log(`loading: ${loading}`);
- }, [loading]);
+ // Redirect if the user is logged in
+ useEffect(() => {
+ if (localStorage.getItem(storage_id) != null || sessionStorage.getItem(storage_id) != null) {
+ navigate("/dashboard");
+ }
+ });
+
+ useEffect(() => {
+ console.log(`loading: ${loading}`);
+ }, [loading]);
- return