Add Sign Up

backend/core/settings.py

@@ -32,7 +32,7 @@ ALLOWED_HOSTS = config('ALLOWED_HOSTS', default='*', cast=Csv())
 
 # Application definition
 
-SITE_ID = 3
+SITE_ID = 4
 
 AUTHENTICATION_BACKENDS = (
     'django.contrib.auth.backends.ModelBackend',
@@ -70,6 +70,8 @@ REST_FRAMEWORK = {
     'DEFAULT_AUTHENTICATION_CLASSES': [
         'rest_framework_simplejwt.authentication.JWTAuthentication',
         'dj_rest_auth.jwt_auth.JWTCookieAuthentication',
+        'rest_framework.authentication.BasicAuthentication',
+        'rest_framework.authentication.SessionAuthentication',
     ]
 }
 
@@ -85,9 +87,12 @@ SOCIALACCOUNT_PROVIDERS = {
     }
 }
 
+CORS_ALLOW_CREDENTIALS = True
+CORS_ALLOW_ALL_ORIGINS = False
 CORS_ALLOWED_ORIGINS = [
     "http://localhost:8000",
-    "http://127.0.0.1:8000"
+    "http://127.0.0.1:8000",
+    "http://localhost:5173",
 ]
 
 MIDDLEWARE = [

frontend/src/App.jsx

@@ -26,6 +26,7 @@ import './App.css';
 import {BrowserRouter, Route, Routes, Link} from "react-router-dom";
 import Login from "./components/login";
 import TestAuth from './components/testAuth';
+import Signup from './components/signup';
 
 const App = () => {
     return (
@@ -34,11 +35,13 @@ const App = () => {
                     <nav>
                         <Link className={"nav-link"} to={"/"}>Home</Link>
                         <Link className={"nav-link"} to={"/login"}>Login</Link>
+                        <Link className={"nav-link"} to={"/signup"}>Signup</Link>
                         <Link className={"nav-link"} to={"/testAuth"}>testAuth</Link>
                     </nav>
                     <Routes>
                         <Route path={"/"} render={() => <h1>This is Home page!</h1>} />
                         <Route path="/login" element={<Login/>}/>
+                        <Route path="/signup" element={<Signup/>}/>
                         <Route path="/testAuth" element={<TestAuth/>}/>
                     </Routes>
         </div>

frontend/src/api/axiosapi.jsx

@@ -83,11 +83,31 @@ const getGreeting = () => {
         });
 }
 
+const config = {
+    headers: {
+        "Content-Type": "application/json"
+    }
+};
+
+// Function to register
+const createUser = async (formData) => {
+  try {
+    axios.defaults.withCredentials = true
+    const resposne = axios.post("http://localhost:8000/api/user/create/", formData);
+    // const response = await axiosInstance.post('/user/create/', formData);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+
 // Export the functions and Axios instance
 export default {
     axiosInstance,
     apiUserLogin,
     apiUserLogout,
     getGreeting: getGreeting,
-    googleLogin
+    googleLogin,
+    createUser
 };

frontend/src/components/login.jsx

@@ -73,6 +73,7 @@ export default function Login() {
             history.push('/testAuth');
         }).catch(err => {
             console.log('Login failed'); // Handle login failure
+            console.log(err)
         });
     }
 

frontend/src/components/signup.jsx

@@ -1,11 +1,116 @@
-import React from 'react'
+import React, { 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 });
+  };
 
-function Signup() {
   return (
-        <div>
+    <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
+export default Signup;