Merge branch 'main' into feature/tasks-api

frontend/src/components/signup.jsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import axiosapi from "../api/axiosapi";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Container from "@material-ui/core/Container";
+import Button from "@material-ui/core/Button";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  // Styles for various elements
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: "100%",
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+const Signup = () => {
+  const classes = useStyles();
+  const [formData, setFormData] = useState({
+    email: "",
+    username: "",
+    password: "",
+  });
+  const [error, setError] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      axiosapi.createUser(formData);
+    } catch (error) {
+      console.error("Error creating user:", error);
+      setError("Registration failed. Please try again."); // Set an error message
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <div className={classes.paper}>
+        <Typography component="h1" variant="h5">
+          Sign Up
+        </Typography>
+        <form className={classes.form} onSubmit={handleSubmit}>
+          <TextField
+            variant="outlined"
+            margin="normal"
+            type="email"
+            name="email"
+            fullWidth
+            value={formData.email}
+            onChange={handleChange}
+            label="Email"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            type="text"
+            name="username"
+            fullWidth
+            value={formData.username}
+            onChange={handleChange}
+            label="Username"
+          />
+          <TextField
+            variant="outlined"
+            margin="normal"
+            type="password"
+            name="password"
+            fullWidth
+            value={formData.password}
+            onChange={handleChange}
+            label="Password"
+          />
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            disabled={isSubmitting}>
+            {isSubmitting ? "Signing up..." : "Sign Up"}
+          </Button>
+        </form>
+        {error && <Typography color="error">{error}</Typography>}
+      </div>
+    </Container>
+  );
+};
+
+export default Signup;

frontend/src/components/testAuth.jsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+import axiosapi from "../api/AuthenticationApi";
+import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+function TestAuth() {
+  let Navigate = useNavigate();
+
+  const [message, setMessage] = useState("");
+
+  useEffect(() => {
+    // Fetch the "hello" data from the server when the component mounts
+    axiosapi
+      .getGreeting()
+      .then((res) => {
+        console.log(res.data);
+        setMessage(res.data.user);
+      })
+      .catch((err) => {
+        console.log(err);
+        setMessage("");
+      });
+  }, []);
+
+  const logout = () => {
+    // Log out the user, clear tokens, and navigate to the "/testAuth" route
+    axiosapi.apiUserLogout();
+    Navigate("/testAuth");
+  };
+
+  return (
+    <div>
+      {message !== "" && (
+        <div>
+          <h1 className="text-xl font-bold">Login! Hello!</h1>
+          <h2>{message}</h2>
+          <Button variant="contained" onClick={logout}>
+            Logout
+          </Button>
+        </div>
+      )}
+      {message === "" && <h1 className="text-xl font-bold">Need to sign in, No authentication found</h1>}
+    </div>
+  );
+}
+
+export default TestAuth;