TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix bug in signup / login for user after signup

Browse Source
This commit is contained in:
sosokker 2023-11-23 06:14:58 +07:00
parent e126728999
commit 807e8af4f1
8 changed files with 47 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/users/views.py
View File

@ -7,6 +7,8 @@ from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.parsers import MultiPartParser
from rest_framework_simplejwt.tokens import RefreshToken
from users.serializers import CustomUserSerializer, UpdateProfileSerializer
from users.models import CustomUser
@ -25,7 +27,9 @@ class CustomUserCreate(APIView):
if serializer.is_valid():
user = serializer.save()
if user:
return Response(serializer.data, status=status.HTTP_201_CREATED)
refresh = RefreshToken.for_user(user)
return Response(data={'access_token': str(refresh.access_token), 'refresh_token': str(refresh),},
status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

4
frontend/src/App.jsx
View File

@ -46,9 +46,7 @@ const App = () => {
setIsAuthenticated(false);
}
})
.catch((error) => {
console.error("Error checking login status:", error.message);
});
.catch((error) => {});
};
checkLoginStatus();

6
frontend/src/api/AuthenticationApi.jsx
View File

@ -34,10 +34,10 @@ export const googleLogin = async (token) => {
export const createUser = async (formData) => {
try {
axios.defaults.withCredentials = true;
const response = axios.post(`${baseURL}user/create/`, formData);
// const response = await axiosInstance.post('/user/create/', formData);
const response = await axios.post(`${baseURL}user/create/`, formData);
return response.data;
} catch (e) {
console.log(e);
console.error("Error in createUser function:", e);
throw e;
}
};

8
frontend/src/api/AxiosConfig.jsx
View File

@ -13,6 +13,14 @@ export const axiosInstance = axios.create({
},
});
axiosInstance.interceptors.request.use((config) => {
const access_token = localStorage.getItem("access_token");
if (access_token) {
config.headers.Authorization = `Bearer ${access_token}`;
}
return config;
});
// handling token refresh on 401 Unauthorized errors
axiosInstance.interceptors.response.use(
(response) => response,

44
frontend/src/components/authentication/SignUpPage.jsx
View File

@ -23,20 +23,33 @@ export function SignUp() {
setIsSubmitting(true);
setError(null);
const delay = (ms) => new Promise((res) => setTimeout(res, ms));
try {
createUser(formData);
const data = await createUser(formData);
localStorage.setItem("access_token", data.access_token);
localStorage.setItem("refresh_token", data.refresh_token);
await delay(200);
setIsAuthenticated(true);
Navigate("/");
} catch (error) {
console.error("Error creating user:", error);
setError("Registration failed. Please try again.");
} finally {
setIsSubmitting(false);
}
Navigate("/login");
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
const handleEmailChange = (e) => {
setFormData({ ...formData, email: e.target.value });
};
const handleUsernameChange = (e) => {
setFormData({ ...formData, username: e.target.value });
};
const handlePasswordChange = (e) => {
setFormData({ ...formData, password: e.target.value });
};
const googleLoginImplicit = useGoogleLogin({
@ -51,7 +64,7 @@ export function SignUp() {
localStorage.setItem("access_token", access_token);
localStorage.setItem("refresh_token", refresh_token);
setIsAuthenticated(true);
Navigate("/");
Navigate("/profile");
}
} catch (error) {
console.error("Error with the POST request:", error);
@ -63,12 +76,9 @@ export function SignUp() {
return (
<div>
<NavPreLogin text="Already have account?" btn_text="Log In" link="/login" />
<NavPreLogin text="Already have an account?" btn_text="Log In" link="/login" />
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
<div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
<div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
<div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
</div>
{/* ... (other code) */}
<div className="w-1/4 h-1 flex items-center justify-center z-10">
<div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
{/* Register Form */}
@ -80,7 +90,13 @@ export function SignUp() {
Email<span className="text-red-500 text-bold">*</span>
</p>
</label>
<input className="input" type="email" id="email" placeholder="Enter your email" onChange={handleChange} />
<input
className="input"
type="email"
id="email"
placeholder="Enter your email"
onChange={handleEmailChange}
/>
</div>
{/* Username Input */}
<div className="form-control">
@ -94,7 +110,7 @@ export function SignUp() {
type="text"
id="Username"
placeholder="Enter your username"
onChange={handleChange}
onChange={handleUsernameChange}
/>
</div>
{/* Password Input */}
@ -109,7 +125,7 @@ export function SignUp() {
type="password"
id="password"
placeholder="Enter your password"
onChange={handleChange}
onChange={handlePasswordChange}
/>
</div>
<br></br>

1
frontend/src/components/dashboard/dashboard.jsx
View File

@ -11,7 +11,6 @@ export function Dashboard() {
from: new Date(2021, 0, 1),
to: new Date(2023, 0, 7),
});
console.log(value);
return (
<div className="flex flex-col p-12">
<div>

115
frontend/src/components/signup.jsx
View File

@ -1,115 +0,0 @@
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;

47
frontend/src/components/testAuth.jsx
View File

@ -1,47 +0,0 @@
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;