Author authentication

client/package.json

@@ -19,7 +19,9 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
-    "typescript": "^5.2.2",
+    "react-toastify": "^9.1.3",
+    "toastify-js": "^1.12.0",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/App.tsx

@@ -7,14 +7,34 @@ import Login from "./components/authentication/Login";
 import SignUp from "./components/authentication/SignUp";
 
 import "./App.css";
+import { ToastContainer } from "react-toastify";
+import { getToken } from "./utils/localStorageUtils";
 
 const App = () => {
+  // TODO: Find a way to validate token
+  // TODO: use userToken to restrict access for not logged in status
+  const userToken = getToken();
+
   return (
-    <Routes>
-      <Route path="/home-page" element={<HomePage />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/sign-up" element={<SignUp />} />
-    </Routes>
+    <>
+      <ToastContainer
+        position="top-center"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme="light"
+      />
+      <Routes>
+        <Route path="/home-page" element={<HomePage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/sign-up" element={<SignUp />} />
+      </Routes>
+    </>
   );
 };
 

client/src/components/authentication/Login.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { FormEvent, useState } from "react";
 
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -8,8 +8,42 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+
+import { storeToken } from "../../utils/localStorageUtils";
+
 const Login = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    username: "",
+    password: "",
+  });
+
   const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    const requestUrl = "http://127.0.0.1:8000/socialdistribution/login/";
+
+    const form = new FormData();
+    form.append("username", formData.username);
+    form.append("password", formData.password);
+
+    axios
+      .post(requestUrl, form, {
+        headers: { "Content-Type": "multipart/form-data" },
+      })
+      .then((response: any) => {
+        storeToken(response.data.token);
+
+        toast.success("You are now logged in");
+
+        navigate("/home-page");
+      })
+      .catch((error) => {
+        toast.error("Wrong password or user does not exist");
+      });
     return;
   };
 
@@ -18,7 +52,6 @@ const Login = () => {
       <CssBaseline />
       <Box
         sx={{
-          // marginTop: 8,
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
@@ -40,6 +73,9 @@ const Login = () => {
             name="email"
             autoComplete="email"
             autoFocus
+            onChange={(e) => {
+              setFormData({ ...formData, username: e.target.value });
+            }}
           />
           <TextField
             margin="normal"
@@ -49,6 +85,9 @@ const Login = () => {
             label="Password"
             type="password"
             id="password"
+            onChange={(e) => {
+              setFormData({ ...formData, password: e.target.value });
+            }}
           />
           <Button
             type="submit"

client/src/components/authentication/SignUp.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent } from "react";
+import React, { FormEvent, useState } from "react";
 
 import Button from "@mui/material/Button";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -8,9 +8,46 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Container from "@mui/material/Container";
 
+import axios from "axios";
+
+import { toast } from "react-toastify";
+import { useNavigate } from "react-router-dom";
+
 const SignUp = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    username: "",
+    email: "",
+    password: "",
+    repeatPassword: "",
+  });
+
   const handleSubmit = (e: FormEvent) => {
-    return;
+    e.preventDefault();
+
+    if (formData.password !== formData.repeatPassword) {
+      toast.error("Repeat password does not match!");
+      return;
+    }
+
+    const requestUrl = "http://127.0.0.1:8000/socialdistribution/signup/";
+
+    const form = new FormData();
+    form.append("username", formData.username);
+    form.append("email", formData.email);
+    form.append("password", formData.password);
+
+    axios
+      .post(requestUrl, form, {
+        headers: { "Content-Type": "multipart/form-data" },
+      })
+      .then((response: any) => {
+        toast.success("You have succesfully signed up");
+        navigate("/login");
+      })
+      .catch((error) => {
+        toast.error(error.response.data.message);
+      });
   };
 
   return (
@@ -30,14 +67,28 @@ const SignUp = () => {
           Already have an account? <Link href="/login">Log In</Link>
         </Typography>
         <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="Enter your username"
+            name="username"
+            autoFocus
+            onChange={(e) => {
+              setFormData({ ...formData, username: e.target.value });
+            }}
+          />
           <TextField
             margin="normal"
             required
             fullWidth
             id="email"
             label="Enter your email"
             name="email"
-            autoFocus
+            onChange={(e) => {
+              setFormData({ ...formData, email: e.target.value });
+            }}
           />
           <TextField
             margin="normal"
@@ -47,15 +98,21 @@ const SignUp = () => {
             label="Create password"
             type="password"
             id="password"
+            onChange={(e) => {
+              setFormData({ ...formData, password: e.target.value });
+            }}
           />
           <TextField
             margin="normal"
             required
             fullWidth
-            name="repeat-password"
+            name="repeatPassword"
             label="Confirm password"
             type="password"
-            id="password"
+            id="repeatPassword"
+            onChange={(e) => {
+              setFormData({ ...formData, repeatPassword: e.target.value });
+            }}
           />
           <Button
             type="submit"

client/src/index.tsx

@@ -8,6 +8,8 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import "./index.css";
+import 'react-toastify/dist/ReactToastify.css';
+
 
 const theme = createTheme({
   palette: {

client/src/utils/localStorageUtils.ts

@@ -0,0 +1,7 @@
+export const storeToken = (token: string) => {
+  localStorage.setItem("authToken", token);
+};
+
+export const getToken = () => {
+  return localStorage.getItem("authToken");
+};

server/server/settings.py

@@ -39,7 +39,8 @@
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "rest_framework",
-    "corsheaders"
+    "corsheaders",
+    "rest_framework.authtoken"
 ]
 
 MIDDLEWARE = [