Fix login issue: npm update

Author: HugeFrog24

backend/api/views.py

@@ -57,7 +57,17 @@ def post(self, request, *args, **kwargs):
 
         if user is not None:
             auth_login(request, user)
-            return JsonResponse({"detail": "Successfully logged in."})
+            return JsonResponse({
+                "detail": "Successfully logged in.",
+                "user": {
+                    "id": user.id,
+                    "username": user.username,
+                    "email": user.email,
+                    "is_staff": user.is_staff,
+                    "is_superuser": user.is_superuser,
+                },
+                "token": None  # Session-based auth, no token needed
+            })
         else:
             return JsonResponse(
                 {"detail": "Invalid login credentials."},

backend/users/serializers.py

@@ -68,6 +68,24 @@ def get_last_name(self, obj):
         return None
 
 
+class UserProfileUpdateSerializer(serializers.ModelSerializer):
+    """Serializer for updating user profile information (first_name, last_name)"""
+    
+    class Meta:
+        model = User
+        fields = ["first_name", "last_name"]
+        
+    def validate_first_name(self, value):
+        if value and len(value.strip()) > 150:
+            raise serializers.ValidationError("First name cannot exceed 150 characters.")
+        return value.strip() if value else ""
+        
+    def validate_last_name(self, value):
+        if value and len(value.strip()) > 150:
+            raise serializers.ValidationError("Last name cannot exceed 150 characters.")
+        return value.strip() if value else ""
+
+
 class ProfileBioSerializer(serializers.ModelSerializer):
     class Meta:
         model = Profile

backend/users/urls.py

@@ -15,6 +15,7 @@
     UserBioRetrieveUpdateView,
     UserFollowersListView,
     UserFollowingListView,
+    UserProfileUpdateView,
     UserRegistrationView,
     ProfileDetailByIdView,
 )
@@ -23,6 +24,7 @@
 
 urlpatterns = [
     path("me/", CurrentUserView.as_view(), name="current_user"),
+    path("me/update/", UserProfileUpdateView.as_view(), name="user-profile-update"),
     path("me/delete/", ProfileDeleteView.as_view(), name="profile-delete"),
     path("me/change-password/", ChangePasswordView.as_view(), name="change-password"),
     path(

backend/users/views.py

@@ -28,6 +28,7 @@
     ProfileBioSerializer,
     ProfileImageSerializer,
     ProfileSerializer,
+    UserProfileUpdateSerializer,
     UserRegistrationSerializer,
 )
 from .utils import process_profile_image
@@ -94,6 +95,32 @@ def get_object(self):
         return self.request.user
 
 
+class UserProfileUpdateView(generics.UpdateAPIView):
+    """Update user profile information (first_name, last_name)"""
+    permission_classes = [IsAuthenticated]
+    serializer_class = UserProfileUpdateSerializer
+
+    def get_object(self):
+        return self.request.user
+
+    def update(self, request, *args, **kwargs):
+        response = super().update(request, *args, **kwargs)
+        # Return the updated user data in the same format as the login response
+        user = self.get_object()
+        return Response({
+            "detail": "Profile updated successfully.",
+            "user": {
+                "id": user.id,
+                "username": user.username,
+                "email": user.email,
+                "first_name": user.first_name,
+                "last_name": user.last_name,
+                "is_staff": user.is_staff,
+                "is_superuser": user.is_superuser,
+            }
+        })
+
+
 class UserBioRetrieveUpdateView(generics.RetrieveUpdateAPIView):
     """
     Retrieve or update the bio of the specified user.

frontend/Dockerfile.dev

@@ -8,12 +8,13 @@ COPY package*.json .npmrc ./
 # Install dependencies with CI-optimized flags
 RUN npm ci --prefer-offline --no-audit --no-fund
 
-# Copy entrypoint script and make it executable
-COPY docker-entrypoint.sh /usr/local/bin/
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh
-
+# Copy application files
 COPY . .
 
+# Copy entrypoint script, convert Windows line endings to Unix, and make it executable
+COPY docker-entrypoint.sh /usr/local/bin/
+RUN sed -i 's/\r$//' /usr/local/bin/docker-entrypoint.sh && chmod +x /usr/local/bin/docker-entrypoint.sh
+
 EXPOSE 3000
 
 ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]

frontend/app/components/Login.tsx

@@ -1,40 +1,27 @@
 import * as React from 'react';
 import type { FC, ChangeEvent } from "react";
 import { Container, Grid } from '@mui/material';
-import { useNavigate, Form, useSubmit, useActionData } from '@remix-run/react';
+import { useNavigate } from '@remix-run/react';
 import { TextField, Typography, Button, CircularProgress } from '@mui/material';
 import ReCAPTCHA from 'react-google-recaptcha';
 import type { ReCAPTCHA as ReCAPTCHAType } from 'react-google-recaptcha';
 import UserContext from '../contexts/UserContext';
 
 interface LoginProps {
-    onLogin: () => void;
+    onLogin: (username: string, password: string, recaptcha: string) => Promise<{ success: boolean }>;
     recaptchaSiteKey: string;
 }
 
-export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
+export const Login: FC<LoginProps> = ({ recaptchaSiteKey, onLogin }) => {
     const [username, setUsername] = React.useState<string>("");
     const [password, setPassword] = React.useState<string>("");
     const [usernameInvalid, setUsernameInvalid] = React.useState<boolean>(false);
     const [passwordInvalid, setPasswordInvalid] = React.useState<boolean>(false);
     const [isLoading, setIsLoading] = React.useState<boolean>(false);
 
     const navigate = useNavigate();
-    const submit = useSubmit();
     const recaptchaRef = React.useRef<ReCAPTCHAType>(null);
-    const formRef = React.useRef<HTMLFormElement>(null);
-    const actionData = useActionData<{ success?: boolean; error?: string; user?: any }>();
-    const { updateUser } = React.useContext(UserContext);
-
-    React.useEffect(() => {
-        if (actionData?.success && actionData.user) {
-            updateUser(actionData.user);
-            navigate("/");
-        }
-        if (actionData?.error) {
-            setIsLoading(false);
-        }
-    }, [actionData, navigate, updateUser]);
+    const [error, setError] = React.useState<string>("");
 
     const validateForm = (): boolean => {
         const isUsernameInvalid = !username;
@@ -65,23 +52,20 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
                 return;
             }
 
-            if (formRef.current) {
-                const formData = new FormData(formRef.current);
-                formData.set('username', username);
-                formData.set('password', password);
-                formData.set('recaptcha', token);
-
-                console.log('Submitting form with data:', {
-                    username,
-                    recaptcha: 'present'
-                });
-                
-                submit(formData, {
-                    method: 'post'
-                });
+            console.log('Calling onLogin with data:', {
+                username,
+                recaptcha: 'present'
+            });
+            
+            // Call the client-side login handler
+            const result = await onLogin(username, password, token);
+            if (result.success) {
+                setIsLoading(false);
             }
+            
         } catch (error) {
-            console.error('Error during form submission:', error);
+            console.error('Error during login:', error);
+            setError(error instanceof Error ? error.message : 'Login failed');
             setIsLoading(false);
         }
     };
@@ -101,12 +85,12 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
             <Grid container justifyContent="center">
                 <Grid item xs={12} md={8} lg={3}>
                     <Typography variant="h4" component="h2" sx={{ mb: 3 }}>Login</Typography>
-                    {actionData?.error && (
+                    {error && (
                         <Typography color="error" sx={{ mb: 2 }}>
-                            {actionData.error}
+                            {error}
                         </Typography>
                     )}
-                    <Form ref={formRef} method="post">
+                    <form>
                         <input type="hidden" name="recaptcha" value="" />
                         <TextField
                             id="username"
@@ -168,7 +152,7 @@ export const Login: FC<LoginProps> = ({ recaptchaSiteKey }) => {
                         >
                             Forgot Password?
                         </Button>
-                    </Form>
+                    </form>
                 </Grid>
             </Grid>
         </Container>