I am trying to show user profile page when user is logged in.I tested it with postman and printed in terminal and it is working.I can login and a user object is returned and when I go to the user profile route it returns the posts of the logged in user.However,it is not working properly with react.I can login with react and the user is authenticated in in the backend but when I go to the user profile route the user id is retuned none and no post is showing even in the terminal.
Here in postman it logs in and then for myprofile route is shows the user id and a list of his posts.
Here I login with the same user using react and I can login successfully but when going to myprofile it returns none for user id and so empty queryset for posts.
Django:
urls.py
from django.urls import path,include
from . import views
# from .views import ChangePasswordView
urlpatterns = [
path('register/', views.register, name='register'),
path('login/', views.custom_login, name='login'),
path('logout/', views.custom_logout, name='logout'),
path('myprofile/', views.user_profile, name='user_profile'),
path('edit_user/', views.edit_user_profile, name='edit_user_profile'),
path('activate/<uidb64>/<token>', views.activate, name='activate'),
path("passwordreset/", views.password_reset_request, name="password_reset1"),
path('reset/<uidb64>/<token>/', views.passwordResetConfirm, name='password_reset_confirm'),
path('password_reset/', include('django_rest_passwordreset.urls', namespace='password_reset')),
]
views.py
from django.contrib.auth.decorators import login_required
from django.shortcuts import render, redirect,reverse
from django.contrib.auth import get_user_model, login,logout,authenticate
from django.contrib import messages
from django.contrib.auth.decorators import login_required
#imports for verification by mail
from django.template.loader import render_to_string
from django.contrib.sites.shortcuts import get_current_site
from django.utils.http import urlsafe_base64_encode, urlsafe_base64_decode
from django.utils.encoding import force_bytes, force_str
from django.core.mail import EmailMessage
from django.db.models.query_utils import Q
from .tokens import account_activation_token
from communityApp.models import Posts,UserFavorites
from communityApp.serializers import PostsSerializer,UserFavoritesSerializer
from rest_framework import status
from rest_framework import generics
from rest_framework.response import Response
from django.contrib.auth.models import User
from .serializers import ChangePasswordSerializer
from rest_framework.permissions import IsAuthenticated
from django.views.decorators.csrf import csrf_exempt
from rest_framework.decorators import api_view
from rest_framework import status
from rest_framework.response import Response
from .serializers import SignUpUserSerialzer
@api_view(['POST'])
def register(request):
# if request.method == "POST":
# form = UserRegistrationForm(request.POST,request.FILES)
print("hiiiiiiiiiiiiiiiiiiiiiiiiii")
print(request.data)
userser = SignUpUserSerialzer(data=request.data)
print('hello0')
if userser.is_valid():
print('hello1')
user = userser.save(is_active = False)
print('hello2')
activateEmail(request, user, userser.validated_data['email'])
print('hello3')
return Response(userser.data)
else:
return Response(status=status.HTTP_404_NOT_FOUND)
@api_view(['POST'])
def custom_login(request):
# if request.user.is_authenticated:
# return redirect(reverse('home'))
username=request.data['username']
password=request.data['password']
print(username)
print(password)
print('login1')
user = authenticate(username=username, password=password)
print('login2')
print(user)
if user is not None:
login(request, user)
return Response({
"user_id": user.id,
"username": user.username,
# "image": user.image,
})
else:
return Response("error")
@api_view(['POST'])
@csrf_exempt
def custom_logout(request):
logout(request)
return Response("logged out")
def activateEmail(request, user, to_email):
mail_subject = 'Activate your user account.'
message = render_to_string('template_activate_account.html', {
'user': user.username,
'domain': get_current_site(request).domain,
'uid': urlsafe_base64_encode(force_bytes(user.pk)),
'token': account_activation_token.make_token(user),
'protocol': 'https' if request.is_secure() else 'http'
})
email = EmailMessage(mail_subject, message, to=[to_email])
if email.send():
messages.success(request, f'Dear <b>{user}</b>, please go to you email <b>{to_email}</b> inbox and click on \
received activation link to confirm and complete the registration. <b>Note:</b> Check your spam folder.')
else:
messages.error(request,
f'Problem sending confirmation email to {to_email}, check if you typed it correctly.')
@api_view(['GET'])
def activate(request, uidb64, token):
User = get_user_model()
try:
uid = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=uid)
except(TypeError, ValueError, OverflowError, User.DoesNotExist):
user = None
if user is not None and account_activation_token.check_token(user, token):
user.is_active = True
user.save()
return Response('account activated')
else:
return Response('activation failed')
@api_view(['GET'])
def user_profile(request):
user = request.user.id
print(user)
posts = Posts.objects.filter(user=user)
print(posts)
serial = PostsSerializer(posts,many=True)
favposts = UserFavorites.objects.filter(user=user)
# query= favposts.userFavorites.all()
# print(query)
favserial = UserFavoritesSerializer(favposts,many=True)
return Response({"posts":serial.data,"favposts":favserial.data})
@api_view(['POST'])
def edit_user_profile(request):
user = request.user
user.first_name = request.POST['first_name']
user.last_name = request.POST['last_name']
user.save()
return Response("profile edited")
@api_view(['POST'])
def password_reset_request(request):
if request.method == 'POST':
print("pass1")
# form = PasswordResetForm(request.POST)
# if form.is_valid():
user_email = request.data['email']
print("pass2")
associated_user = get_user_model().objects.filter(Q(email=user_email)).first()
print("pass3")
if associated_user:
subject = "Password Reset request"
message = render_to_string("template_reset_password.html", {
'user': associated_user,
'domain': get_current_site(request).domain,
'uid': urlsafe_base64_encode(force_bytes(associated_user.pk)),
'token': account_activation_token.make_token(associated_user),
"protocol": 'https' if request.is_secure() else 'http'
})
email = EmailMessage(subject, message, to=[associated_user.email])
print("pass4")
if email.send():
messages.success(request,
"""
<h2>Password reset sent</h2><hr>
<p>
We've emailed you instructions for setting your password, if an account exists with the email you entered.
You should receive them shortly.<br>If you don't receive an email, please make sure you've entered the address
you registered with, and check your spam folder.
</p>
"""
)
print("pass5")
return Response("Password reset sent")
else:
return Response("reset sent")
# form = PasswordResetForm()
# return render(
# request=request,
# template_name="password_reset.html",
# context={"form": form}
# )
@api_view(['GET','POST'])
def passwordResetConfirm(request, uidb64, token):
User = get_user_model()
try:
uid = force_str(urlsafe_base64_decode(uidb64))
user = User.objects.get(pk=uid)
print("confr0")
except:
user = None
print("confr1")
print(user)
if user is not None and account_activation_token.check_token(user, token):
print("enter1")
if request.method == 'POST':
passser = ChangePasswordSerializer(data=request.data)
print("enter2")
# form = SetPasswordForm(user, request.POST)
# password=request.data['password']
if passser.is_valid():
print('passre1')
passw = passser.save()
print('passre2')
# form.save()
return Response("pass succefuly changed")
else:
return Response("error")
else:
passser = ChangePasswordSerializer()
return Response(passser.data)
else:
return Response(" major error")
serializers.py
from rest_framework import serializers
from django.contrib.auth.hashers import make_password
from .models import CustomUser
class SignUpUserSerialzer(serializers.ModelSerializer):
password = serializers.CharField(max_length=100, write_only=True)
def validate_password(self, password):
return make_password(password)
class Meta:
model = CustomUser
fields = '__all__'
class ChangePasswordSerializer(serializers.Serializer):
model = CustomUser
"""
Serializer for password change endpoint.
"""
password = serializers.CharField(max_length=100, write_only=True)
def validate_password(self, password):
return make_password(password)
class Meta:
model = CustomUser
fields = ['password']
React:
UserProfile.js
import { useParams,useNavigate } from 'react-router-dom';
import { useToasts } from 'react-toast-notifications';
import { Loader } from '../components';
import styles from '../styles/settings.module.css';
import { useAuth } from '../hooks';
import {useEffect, useState} from 'react';
import { addFriend, fetchUserProfile,removeFriend } from '../api';
const UserProfile = () => {
//const location=useLocation();
const[user,setUser]=useState({});
const[loading,setLoading]=useState(true);
const[requestInProgress,setRequestInProgress]=useState(false);
const{ userId }=useParams();
const{ addToast }=useToasts();
const Navigate=useNavigate();
const auth=useAuth();
useEffect(() => {
const getUser =async() => {
const response =await fetchUserProfile(userId);
if(response.success){
setUser(response.data.user);
}
else{
addToast(response.message,{
appearance:'error'
});
return Navigate('/', {replace: true});
}
setLoading(false);
};
getUser();
},[userId,Navigate,addToast]);
if(loading){
return <Loader />
}
const checkIfUserIsAFriend =() =>{
const friends=auth.user.friends;
console.log(friends);
const friendIds=friends.map((friend) => friend.to_user._id);
const index=friendIds.indexOf(userId);
if(index!==-1)
{
return true;
}
return false;
};
// const showAddFriendsBtn = checkIfUserIsAFriend();
// const friends=auth.user;
const handleRemoveFriendClick = async () => {
setRequestInProgress(true);
const response = await removeFriend(userId);
if (response.success) {
const friendship = auth.user.friends.filter(
(friend) => friend.to_user._id === userId
);
auth.updateUserFriends(false, friendship[0]);
addToast('Friend removed successfully!', {
appearance: 'success',
});
} else {
addToast(response.message, {
appearance: 'error',
});
}
setRequestInProgress(false);
};
const handleAddFriendClick =async() =>{
setRequestInProgress(true);
const response=await addFriend(userId);
if(response.success){
const {friendship} =response.data;
auth.updateUserFriends(true,friendship);
addToast('Friend added successfully!',{
appearance:'success',
});
}
else{
addToast(response.message,{
appearance:'error',
});
}
setRequestInProgress(false);
};
return (
<div className={styles.settings}>
<div className={styles.imgContainer}>
<img
src="https://cdn-icons-png.flaticon.com/512/2716/2716612.png"
alt=""
/>
</div>
<div className={styles.field}>
<div className={styles.fieldLabel}>Email</div>
<div className={styles.fieldValue}>{user.email}</div>
</div>
<div className={styles.field}>
<div className={styles.fieldLabel}>Name</div>
<div className={styles.fieldValue}>{user.name}</div>
</div>
<div className={styles.btnGrp}>
{checkIfUserIsAFriend()? (
<button className={`button ${styles.saveBtn}`}
onClick={handleRemoveFriendClick}
>
{requestInProgress?'Removing friend...':'Remove friend'}
</button>
) : (
<button
className={`button ${styles.saveBtn}`}
onClick={handleAddFriendClick}
disabled={requestInProgress}
>
{requestInProgress?'Adding friend...':'Add friend'}
</button>
)}
</div>
</div>
);
};
export default UserProfile;
Login.js
import { useState } from 'react';
import { json, Navigate } from 'react-router-dom';
import { useToasts } from 'react-toast-notifications';
import Cookies from 'js-cookie'; // import js-cookie
import $ from 'jquery';
import styles from '../styles/login.module.css';
// import { useAuth } from '../hooks';
import { Card, CardHeader, CardContent, CardActions, Button, Typography, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, TextField } from '@material-ui/core';
import axios from 'axios';
const Login = () => {
const [username, setusername] = useState('');
const [password, setPassword] = useState('');
const [loggingIn, setLoggingIn] = useState(false);
const { addToast } = useToasts();
const csrftoken = Cookies.get('csrftoken');
const sessionid = Cookies.get('sessionid');
const userid = Cookies.get('userid');
const usernames = Cookies.get('username');
const handleDeleteConfirm = () => {
axios.post(`http://127.0.0.1:8000/profile/logout/`)
.then(() => {
})
.catch(error => {
console.log(error);
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoggingIn(true);
let error = false;
if (!username || !password) {
addToast('Please fill all the fields', {
appearance: 'error',
autoDismiss: true,
});
error = true;
}
if (error) {
return setLoggingIn(false);
}
const formData = new FormData();
formData.append('username', username);
formData.append('password', password);
try {
var userdata = ""
const response = await fetch('http://127.0.0.1:8000/profile/login/', {
method: 'POST',
body: formData,
}).then(response => response.json()).then((json) => {
console.log(JSON.stringify(json));
if (json.user_id) {
userdata = json;
Cookies.set('csrftoken', json.csrftoken);
Cookies.set('sessionid', json.sessionid);
Cookies.set('userid', json.user_id);
Cookies.set('usernames', json.username);
setLoggingIn(false);
addToast('User login successfully', {
appearance: 'success',
autoDismiss: true,
});
window.location.href = '/';
return;
}
})
throw new Error('Network response was not ok.');
} catch (err) {
console.error(err);
addToast('Error occurred while registering the user', {
appearance: 'error',
autoDismiss: true,
});
}
setLoggingIn(false);
};
// if(auth.user){
// return <Navigate to="/" />
// }
return (
<form className={styles.loginForm} onSubmit={handleSubmit}>
<span className={styles.loginSignupHeader}>Log In</span>
<div className={styles.field}>
<input
type="username"
placeholder="Username"
value={username}
onChange={(e) => setusername(e.target.value)}
/>
</div>
<div className={styles.field}>
<input
type="password"
placeholder="Paasword"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className={styles.field}>
<button disabled={loggingIn}>
{loggingIn ? 'Logging in...' : 'Log In'}
</button>
{/* <Button onClick={handleDeleteConfirm} color="secondary">
Delete
</Button> */}
</div>
</form>
);
};
export default Login;
