fix: auth fixes and improvement (#4452)

* chore: change password api updated and missing password error code added

* chore: auth helper updated

* chore: disable send code input suggestion

* chore: change password function updated

* fix: application error on sign in page

* chore: change password validation added and enhancement

apiserver/plane/authentication/adapter/error.py

@@ -38,6 +38,7 @@ AUTHENTICATION_ERROR_CODES = {
     "EXPIRED_PASSWORD_TOKEN": 5130,
     # Change password
     "INCORRECT_OLD_PASSWORD": 5135,
+    "MISSING_PASSWORD": 5138,
     "INVALID_NEW_PASSWORD": 5140,
     # set passowrd
     "PASSWORD_ALREADY_SET": 5145,

apiserver/plane/authentication/views/common.py

@@ -36,55 +36,60 @@ class CSRFTokenEndpoint(APIView):
 
 class ChangePasswordEndpoint(APIView):
     def post(self, request):
-        serializer = ChangePasswordSerializer(data=request.data)
         user = User.objects.get(pk=request.user.id)
-        if serializer.is_valid():
-            if not user.check_password(serializer.data.get("old_password")):
-                exc = AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES[
-                        "INCORRECT_OLD_PASSWORD"
-                    ],
-                    error_message="INCORRECT_OLD_PASSWORD",
-                    payload={"error": "Old password is not correct"},
-                )
-                return Response(
-                    exc.get_error_dict(),
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
 
-            # check the password score
+        old_password = request.data.get("old_password", False)
-            results = zxcvbn(serializer.data.get("new_password"))
+        new_password = request.data.get("new_password", False)
-            if results["score"] < 3:
-                exc = AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES[
-                        "INVALID_NEW_PASSWORD"
-                    ],
-                    error_message="INVALID_NEW_PASSWORD",
-                )
-                return Response(
-                    exc.get_error_dict(),
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
 
-            # set_password also hashes the password that the user will get
+        if not old_password or not new_password:
-            user.set_password(serializer.data.get("new_password"))
+            exc = AuthenticationException(
-            user.is_password_autoset = False
+                error_code=AUTHENTICATION_ERROR_CODES["MISSING_PASSWORD"],
-            user.save()
+                error_message="MISSING_PASSWORD",
-            user_login(user=user, request=request, is_app=True)
+                payload={"error": "Old or new password is missing"},
-            return Response(
+            )
-                {"message": "Password updated successfully"},
+            return Response(
-                status=status.HTTP_200_OK,
+                exc.get_error_dict(),
+                status=status.HTTP_400_BAD_REQUEST,
             )
-        exc = AuthenticationException(
-            error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD"],
-            error_message="INVALID_PASSWORD",
-        )
-        return Response(
-            exc.get_error_dict(),
-            status=status.HTTP_400_BAD_REQUEST,
-        )
 
 
+        if not user.check_password(old_password):
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "INCORRECT_OLD_PASSWORD"
+                ],
+                error_message="INCORRECT_OLD_PASSWORD",
+                payload={"error": "Old password is not correct"},
+            )
+            return Response(
+                exc.get_error_dict(),
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # check the password score
+        results = zxcvbn(new_password)
+        if results["score"] < 3:
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "INVALID_NEW_PASSWORD"
+                ],
+                error_message="INVALID_NEW_PASSWORD",
+            )
+            return Response(
+                exc.get_error_dict(),
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # set_password also hashes the password that the user will get
+        user.set_password(new_password)
+        user.is_password_autoset = False
+        user.save()
+        user_login(user=user, request=request, is_app=True)
+        return Response(
+            {"message": "Password updated successfully"},
+            status=status.HTTP_200_OK,
+        )
+
 class SetUserPasswordEndpoint(APIView):
     def post(self, request):
         user = User.objects.get(pk=request.user.id)

packages/constants/src/auth.ts

@@ -41,6 +41,7 @@ export enum EAuthErrorCodes {
   // Password strength
   INVALID_PASSWORD = "5020",
   // Sign Up
+  USER_ACCOUNT_DEACTIVATED = "5019",
   USER_ALREADY_EXIST = "5030",
   AUTHENTICATION_FAILED_SIGN_UP = "5035",
   REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5040",
@@ -68,6 +69,7 @@ export enum EAuthErrorCodes {
   EXPIRED_PASSWORD_TOKEN = "5130",
   // Change password
   INCORRECT_OLD_PASSWORD = "5135",
+  MISSING_PASSWORD= "5138",
   INVALID_NEW_PASSWORD = "5140",
   // set passowrd
   PASSWORD_ALREADY_SET = "5145",
@@ -158,6 +160,10 @@ const errorCodeMessages: {
   },
 
   // sign in
+  [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => <div>Your account is deactivated. Contact support@plane.so.</div>,
+  },
   [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
     title: `User does not exist`,
     message: (email = undefined) => (
@@ -237,6 +243,11 @@ const errorCodeMessages: {
   },
 
   // Change password
+
+  [EAuthenticationErrorCodes.MISSING_PASSWORD]: {
+    title: `Password required`,
+    message: () => `Password required. Please try again.`,
+  },
   [EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD]: {
     title: `Incorrect old password`,
     message: () => `Incorrect old password. Please try again.`,

space/components/accounts/auth-forms/unique-code.tsx

@@ -151,6 +151,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
           placeholder="gets-sets-flys"
           className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
           autoFocus
+          autoComplete="off"
         />
         <div className="flex w-full items-center justify-between px-1 text-xs">
           <p className="flex items-center gap-1 font-medium text-green-700">

space/helpers/authentication.helper.tsx

@@ -39,12 +39,12 @@ export enum EAuthenticationErrorCodes {
   INVALID_EMAIL = "5012",
   EMAIL_REQUIRED = "5013",
   // Sign Up
+  USER_ACCOUNT_DEACTIVATED = "5019",
   USER_ALREADY_EXIST = "5003",
   REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5015",
   AUTHENTICATION_FAILED_SIGN_UP = "5006",
   INVALID_EMAIL_SIGN_UP = "5017",
   MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5023",
-  INVALID_EMAIL_MAGIC_SIGN_UP = "5019",
   // Sign In
   USER_DOES_NOT_EXIST = "5004",
   REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5014",
@@ -140,12 +140,14 @@ const errorCodeMessages: {
     title: `Email and code required`,
     message: () => `Email and code required. Please try again.`,
   },
-  [EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP]: {
-    title: `Invalid email`,
-    message: () => `Invalid email. Please try again.`,
-  },
 
   // sign in
+
+  [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => <div>Your account is deactivated. Please reach out to support@plane.so</div>,
+  },
+
   [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
     title: `User does not exist`,
     message: (email = undefined) => (
@@ -250,7 +252,6 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP,
     EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_UP,
     EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
-    EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP,
     EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN,
     EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN,
     EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN,
@@ -273,6 +274,7 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
     EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
     EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
+    EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED,
   ];
 
   if (toastAlertErrorCodes.includes(errorCode))

web/components/account/auth-forms/auth-root.tsx

@@ -92,7 +92,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
         }
       })
       .catch((error) => {
-        const errorhandler = authErrorHandler(error?.error_code.toString(), data?.email || undefined);
+        const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
         if (errorhandler?.type) setErrorInfo(errorhandler);
       });
   };

web/helpers/authentication.helper.tsx

@@ -45,6 +45,7 @@ export enum EAuthenticationErrorCodes {
   INVALID_EMAIL_MAGIC_SIGN_UP = "5050",
   MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5055",
   // Sign In
+  USER_ACCOUNT_DEACTIVATED = "5019",
   USER_DOES_NOT_EXIST = "5060",
   AUTHENTICATION_FAILED_SIGN_IN = "5065",
   REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5070",
@@ -65,6 +66,7 @@ export enum EAuthenticationErrorCodes {
   EXPIRED_PASSWORD_TOKEN = "5130",
   // Change password
   INCORRECT_OLD_PASSWORD = "5135",
+  MISSING_PASSWORD = "5138",
   INVALID_NEW_PASSWORD = "5140",
   // set passowrd
   PASSWORD_ALREADY_SET = "5145",
@@ -155,6 +157,11 @@ const errorCodeMessages: {
   },
 
   // sign in
+  [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => <div>Your account is deactivated. Contact support@plane.so.</div>,
+  },
+
   [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
     title: `User does not exist`,
     message: (email = undefined) => (
@@ -234,6 +241,10 @@ const errorCodeMessages: {
   },
 
   // Change password
+  [EAuthenticationErrorCodes.MISSING_PASSWORD]: {
+    title: `Password required`,
+    message: () => `Password required. Please try again.`,
+  },
   [EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD]: {
     title: `Incorrect old password`,
     message: () => `Incorrect old password. Please try again.`,
@@ -343,6 +354,7 @@ export const authErrorHandler = (
     EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
     EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
     EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED,
   ];
 
   if (bannerAlertErrorCodes.includes(errorCode))

web/pages/profile/change-password.tsx

@@ -1,12 +1,15 @@
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Button, Input, Spinner, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
+import { PasswordStrengthMeter } from "@/components/account";
 import { PageHead } from "@/components/core";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar";
+import { getPasswordStrength } from "@/helpers/password.helper";
 // hooks
 import { useAppTheme, useUser } from "@/hooks/store";
 // layout
@@ -14,6 +17,7 @@ import { ProfileSettingsLayout } from "@/layouts/settings-layout";
 // types
 import { NextPageWithLayout } from "@/lib/types";
 // services
+import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
 
 export interface FormValues {
@@ -29,9 +33,18 @@ const defaultValues: FormValues = {
 };
 
 export const userService = new UserService();
+export const authService = new AuthService();
 
 const ChangePasswordPage: NextPageWithLayout = observer(() => {
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPageLoading, setIsPageLoading] = useState(true);
+  const [showPassword, setShowPassword] = useState({
+    oldPassword: false,
+    password: false,
+    retypePassword: false,
+  });
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+
   // router
   const router = useRouter();
   // store hooks
@@ -42,32 +55,54 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
   const {
     control,
     handleSubmit,
+    watch,
     formState: { errors, isSubmitting },
+    reset,
   } = useForm<FormValues>({ defaultValues });
 
+  const oldPassword = watch("old_password");
+  const password = watch("new_password");
+  const retypePassword = watch("confirm_password");
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
   const handleChangePassword = async (formData: FormValues) => {
-    if (formData.new_password !== formData.confirm_password) {
+    try {
+      if (!csrfToken) throw new Error("csrf token not found");
+      const changePasswordPromise = userService
+        .changePassword(csrfToken, {
+          old_password: formData.old_password,
+          new_password: formData.new_password,
+        })
+        .then(() => {
+          reset(defaultValues);
+        });
+      setPromiseToast(changePasswordPromise, {
+        loading: "Changing password...",
+        success: {
+          title: "Success!",
+          message: () => "Password changed successfully.",
+        },
+        error: {
+          title: "Error!",
+          message: () => "Something went wrong. Please try again 1.",
+        },
+      });
+    } catch (err: any) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "The new password and the confirm password don't match.",
+        message: err?.error ?? "Something went wrong. Please try again 2.",
       });
-      return;
     }
-    const changePasswordPromise = userService.changePassword(formData);
-    setPromiseToast(changePasswordPromise, {
-      loading: "Changing password...",
-      success: {
-        title: "Success!",
-        message: () => "Password changed successfully.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Something went wrong. Please try again.",
-      },
-    });
   };
 
+  useEffect(() => {
+    if (csrfToken === undefined)
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+  }, [csrfToken]);
+
   useEffect(() => {
     if (!currentUser) return;
 
@@ -75,6 +110,25 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
     else setIsPageLoading(false);
   }, [currentUser, router]);
 
+  const isButtonDisabled = useMemo(
+    () =>
+      !isSubmitting &&
+      !!oldPassword &&
+      !!password &&
+      !!retypePassword &&
+      getPasswordStrength(password) >= 3 &&
+      password === retypePassword &&
+      password !== oldPassword
+        ? false
+        : true,
+
+    [isSubmitting, oldPassword, password, retypePassword]
+  );
+
+  const passwordSupport = password.length > 0 && (getPasswordStrength(password) < 3 || isPasswordInputFocused) && (
+    <PasswordStrengthMeter password={password} />
+  );
+
   if (isPageLoading)
     return (
       <div className="grid h-screen w-full place-items-center">
@@ -93,82 +147,126 @@ const ChangePasswordPage: NextPageWithLayout = observer(() => {
           onSubmit={handleSubmit(handleChangePassword)}
           className="mx-auto md:mt-16 mt-10 flex h-full w-full flex-col gap-8 px-4 md:px-8 pb-8 lg:w-3/5"
         >
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
           <h3 className="text-xl font-medium">Change password</h3>
           <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">
             <div className="flex flex-col gap-1 ">
               <h4 className="text-sm">Current password</h4>
-              <Controller
+              <div className="relative flex items-center rounded-md">
-                control={control}
+                <Controller
-                name="old_password"
+                  control={control}
-                rules={{
+                  name="old_password"
-                  required: "This field is required",
+                  rules={{
-                }}
+                    required: "This field is required",
-                render={({ field: { value, onChange } }) => (
+                  }}
-                  <Input
+                  render={({ field: { value, onChange } }) => (
-                    id="old_password"
+                    <Input
-                    type="password"
+                      id="old_password"
-                    value={value}
+                      type={showPassword?.oldPassword ? "text" : "password"}
-                    onChange={onChange}
+                      value={value}
-                    placeholder="Old password"
+                      onChange={onChange}
-                    className="w-full rounded-md font-medium"
+                      placeholder="Old password"
-                    hasError={Boolean(errors.old_password)}
+                      className="w-full rounded-md font-medium"
+                      hasError={Boolean(errors.old_password)}
+                    />
+                  )}
+                />
+                {showPassword?.oldPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
                   />
                 )}
-              />
+              </div>
+
               {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
             </div>
 
             <div className="flex flex-col gap-1 ">
               <h4 className="text-sm">New password</h4>
-              <Controller
+              <div className="relative flex items-center rounded-md">
-                control={control}
+                <Controller
-                name="new_password"
+                  control={control}
-                rules={{
+                  name="new_password"
-                  required: "This field is required",
+                  rules={{
-                }}
+                    required: "This field is required",
-                render={({ field: { value, onChange } }) => (
+                  }}
-                  <Input
+                  render={({ field: { value, onChange } }) => (
-                    id="new_password"
+                    <Input
-                    type="password"
+                      id="new_password"
-                    value={value}
+                      type={showPassword?.password ? "text" : "password"}
-                    placeholder="New password"
+                      value={value}
-                    onChange={onChange}
+                      placeholder="New password"
-                    className="w-full"
+                      onChange={onChange}
-                    hasError={Boolean(errors.new_password)}
+                      className="w-full"
+                      hasError={Boolean(errors.new_password)}
+                      onFocus={() => setIsPasswordInputFocused(true)}
+                      onBlur={() => setIsPasswordInputFocused(false)}
+                    />
+                  )}
+                />
+                {showPassword?.password ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("password")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("password")}
                   />
                 )}
-              />
+              </div>
-              {errors.new_password && <span className="text-xs text-red-500">{errors.new_password.message}</span>}
+              {passwordSupport}
             </div>
 
             <div className="flex flex-col gap-1 ">
               <h4 className="text-sm">Confirm password</h4>
-              <Controller
+              <div className="relative flex items-center rounded-md">
-                control={control}
+                <Controller
-                name="confirm_password"
+                  control={control}
-                rules={{
+                  name="confirm_password"
-                  required: "This field is required",
+                  rules={{
-                }}
+                    required: "This field is required",
-                render={({ field: { value, onChange } }) => (
+                  }}
-                  <Input
+                  render={({ field: { value, onChange } }) => (
-                    id="confirm_password"
+                    <Input
-                    type="password"
+                      id="confirm_password"
-                    placeholder="Confirm password"
+                      type={showPassword?.retypePassword ? "text" : "password"}
-                    value={value}
+                      placeholder="Confirm password"
-                    onChange={onChange}
+                      value={value}
-                    className="w-full"
+                      onChange={onChange}
-                    hasError={Boolean(errors.confirm_password)}
+                      className="w-full"
+                      hasError={Boolean(errors.confirm_password)}
+                    />
+                  )}
+                />
+                {showPassword?.retypePassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("retypePassword")}
                   />
                 )}
-              />
+              </div>
-              {errors.confirm_password && (
+              {!!retypePassword && password !== retypePassword && (
-                <span className="text-xs text-red-500">{errors.confirm_password.message}</span>
+                <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
               )}
             </div>
           </div>
 
           <div className="flex items-center justify-between py-2">
-            <Button variant="primary" type="submit" loading={isSubmitting}>
+            <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
               {isSubmitting ? "Changing password..." : "Change password"}
             </Button>
           </div>

web/services/user.service.ts

@@ -143,8 +143,12 @@ export class UserService extends APIService {
       });
   }
 
-  async changePassword(data: { old_password: string; new_password: string; confirm_password: string }): Promise<any> {
+  async changePassword(token: string, data: { old_password: string; new_password: string }): Promise<any> {
-    return this.post(`/api/users/me/change-password/`, data)
+    return this.post(`/auth/change-password/`, data, {
+      headers: {
+        "X-CSRFTOKEN": token,
+      },
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;