settings

Author: HugeFrog24

backend/users/serializers.py

@@ -20,12 +20,15 @@ class ProfileSerializer(serializers.ModelSerializer):
     is_authenticated = serializers.BooleanField()
     followers = serializers.SerializerMethodField()
     following = serializers.SerializerMethodField()
+    first_name = serializers.SerializerMethodField()
+    last_name = serializers.SerializerMethodField()
 
     class Meta:
         model = Profile
         fields = [
             'id', 'username', 'date_joined', 'image', 'is_anonymous', 'email',
-            'is_authenticated', 'is_staff', 'followers', 'following'
+            'is_authenticated', 'is_staff', 'followers', 'following',
+            'first_name', 'last_name'
         ]
 
     def to_representation(self, instance):
@@ -48,6 +51,18 @@ def get_followers(self, obj):
     def get_following(self, obj):
         return FollowSerializer(obj.following.all(), many=True).data
 
+    def get_first_name(self, obj):
+        user = self.context.get('request').user
+        if user == obj.profile.user:
+            return obj.profile.user.first_name
+        return None
+
+    def get_last_name(self, obj):
+        user = self.context.get('request').user
+        if user == obj.profile.user:
+            return obj.profile.user.last_name
+        return None
+
 
 class ProfileBioSerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/components/ProfileSettings.jsx

@@ -1,9 +1,19 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, LinearProgress } from '@mui/material';
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  LinearProgress,
+  Typography,
+  Box,
+} from '@mui/material';
 import api from '../utils/api';
 import UserContext from './contexts/UserContext';
-import { handleLogout } from '../utils/auth'; // Import handleLogout
+import { handleLogout } from '../utils/auth';
 
 const ProfileSettings = () => {
   const [open, setOpen] = useState(false);
@@ -47,8 +57,13 @@ const ProfileSettings = () => {
   }
 
   return (
-    <div className="container">
-      <h2>Profile Settings</h2>
+    <Box className="container">
+      <Typography variant="h4" gutterBottom>
+        Profile Settings
+      </Typography>
+      <Typography variant="h6" gutterBottom>
+        Welcome, {user.first_name} {user.last_name}!
+      </Typography>
       <Button variant="contained" color="error" onClick={handleClickOpen}>
         Delete Profile
       </Button>
@@ -61,7 +76,10 @@ const ProfileSettings = () => {
             <DialogContentText>Profile deleted successfully!</DialogContentText>
           ) : (
             <DialogContentText>
-              Are you sure you want to delete your profile? This action cannot be undone.
+              Are you sure you want to delete your profile, {user.first_name}?
+              <Typography variant="body1" fontWeight="bold" component="div" gutterBottom>
+                This action cannot be undone.
+              </Typography>
             </DialogContentText>
           )}
         </DialogContent>
@@ -76,7 +94,7 @@ const ProfileSettings = () => {
           )}
         </DialogActions>
       </Dialog>
-    </div>
+    </Box>
   );
 };