password change now requires user to provide old password

Author: Emile Frey

backend/users/serializers.py

@@ -0,0 +1,12 @@
+from rest_framework import serializers
+from django.contrib.auth.models import User
+
+class ChangePasswordSerializer(serializers.Serializer):
+    model = User
+
+    """
+    Serializer for password change endpoint.
+    """
+    old_password = serializers.CharField(required=True)
+    new_password1 = serializers.CharField(required=True)
+    new_password2 = serializers.CharField(required=True)

backend/users/urls.py

@@ -1,8 +1,8 @@
 from django.urls import path, include
+from users.views import APILoginView, APILogoutView, ChangePasswordView
 
-from users.views import APILoginView, APILogoutView, APIPasswordUpdateView
 urlpatterns = [
     path('login/', APILoginView.as_view(), name='api_login'),
     path('logout/', APILogoutView.as_view(), name='api_logout'),
-    path('update_password/', APIPasswordUpdateView.as_view(), name='api_update_password'),
+    path('change_password/', ChangePasswordView.as_view(), name='change_password'),
 ]

backend/users/views.py

@@ -1,6 +1,12 @@
-from rest_auth.views import (LoginView, LogoutView, PasswordChangeView)
+from rest_auth.views import (LoginView, LogoutView)
 from rest_framework.authentication import TokenAuthentication
 from rest_framework.permissions import IsAuthenticated
+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   
 
 # Create your views here.
 class APILogoutView(LogoutView):
@@ -10,5 +16,44 @@ class APILogoutView(LogoutView):
 class APILoginView(LoginView):
     pass
 
-class APIPasswordUpdateView(PasswordChangeView):
-    authentication_classes = [TokenAuthentication]
+class ChangePasswordView(generics.UpdateAPIView):
+    """
+    An endpoint for changing password.
+    """
+    serializer_class = ChangePasswordSerializer
+    model = User
+    authentication_classes = [TokenAuthentication]
+    permission_classes = (IsAuthenticated,)
+
+    def get_object(self, queryset=None):
+        obj = self.request.user
+        return obj
+
+    def post(self, request, *args, **kwargs):
+        self.object = self.get_object()
+        serializer = self.get_serializer(data=request.data)
+
+        if serializer.is_valid():
+            # Check old password
+            if not self.object.check_password(serializer.data.get("old_password")):
+                response = {
+                    'data': [{'status': 'The old password is incorrect.'}]
+                }
+                return Response({"old_password": ["The old password you provided is incorrect."]}, status=status.HTTP_400_BAD_REQUEST)
+            new_password1 = serializer.data.get('new_password1')
+            new_password2 = serializer.data.get('new_password2')
+            if new_password1 != new_password2:
+                return Response({"error": ["Passwords do not match."]})
+            # set_password also hashes the password that the user will get
+            self.object.set_password(new_password1)
+            self.object.save()
+            response = {
+                'status': 'success',
+                'code': status.HTTP_200_OK,
+                'message': 'Password updated successfully',
+                'data': [{'status': 'Password updated successfully!'}]
+            }
+
+            return Response(response)
+
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

frontend/src/components/Layout/TopBar.tsx

@@ -31,7 +31,7 @@ export default function TopBar(props: AppProps) {
         {props.isAuthenticated && (
           <DropdownMenu dropdownButtonIcon={<AccountCircle />}>
             <div>
-              <MenuItem component='a' href='/update_password'>Change Password</MenuItem>
+              <MenuItem component='a' href='/change_password'>Change Password</MenuItem>
               <MenuItem onClick={() => props.logout()}>Logout</MenuItem>
             </div>
           </DropdownMenu>

frontend/src/components/Login/PasswordUpdate.tsx

@@ -37,6 +37,7 @@ function PasswordUpdate(props: AuthProps) {
   const classes = useStyles();
   const [new_password1, setNewPassword1] = useState("");
   const [new_password2, setNewPassword2] = useState("");
+  const [oldPassword, setOldPassword] = useState("");
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<Record<string, string[]>>({})
   const [isLoading, setIsLoading] = useState(false)
@@ -46,6 +47,7 @@ function PasswordUpdate(props: AuthProps) {
     switch (event.target.id) {
       case 'new_password1': setNewPassword1(event.target.value); break;
       case 'new_password2': setNewPassword2(event.target.value); break;
+      case 'old_password': setOldPassword(event.target.value); break;
       default: return null;
     }
     setValidationErrors({})
@@ -62,12 +64,13 @@ function PasswordUpdate(props: AuthProps) {
     else {
       let headers = { 'Authorization': `Token ${props.token}` };
       const method = 'POST';
-      let url = settings.API_SERVER + '/api/auth/update_password/';
+      let url = settings.API_SERVER + '/api/auth/change_password/';
       let passwordFormData = new FormData();
+      passwordFormData.append("old_password", oldPassword);
       passwordFormData.append("new_password1", new_password1);
       passwordFormData.append("new_password2", new_password2);
       let config: AxiosRequestConfig = { headers, method, url, data: passwordFormData };
-      //Axios update_password API call
+      //Axios change_password API call
       axios(config).then((res: any) => {
         setSuccess(true);
       }).catch(
@@ -94,6 +97,17 @@ function PasswordUpdate(props: AuthProps) {
               Update Password
             </Typography>
             <form className={classes.form} noValidate onSubmit={handleSubmit}>
+              <TextField
+                variant="outlined"
+                margin="normal"
+                required
+                fullWidth
+                name="old_password"
+                label="Old Password"
+                type="password"
+                id="old_password"
+                onChange={handleFormFieldChange}
+              />
               <TextField
                 variant="outlined"
                 margin="normal"

frontend/src/routes/Router.tsx

@@ -11,7 +11,7 @@ export default function Router(props: AppProps) {
   return (
     <Switch>
       <Route exact path="/login/"> <Login {...props} /></Route>
-      <PrivateRoute exact path="/update_password/" isAuthenticated={props.isAuthenticated}><PasswordUpdate {...props} /></PrivateRoute>
+      <PrivateRoute exact path="/change_password/" isAuthenticated={props.isAuthenticated}><PasswordUpdate {...props} /></PrivateRoute>
       {privateRoutes.map((route, index) =>
         <PrivateRoute
           key={index}