Fix: Switch to shadcn form in userResetPassword (#9708)

public/locale/en.json

@@ -510,7 +510,6 @@
   "change_avatar": "Change Avatar",
   "change_avatar_note": "JPG, GIF or PNG. 1MB max.",
   "change_file": "Change File",
-  "change_password": "Change Password",
   "change_phone_number": "Change Phone Number",
   "change_status": "Change Status",
   "chat_on_whatsapp": "Chat on Whatsapp",
@@ -586,7 +585,6 @@
   "confirm_delete": "Confirm Delete",
   "confirm_discontinue": "Confirm Discontinue",
   "confirm_password": "Confirm Password",
-  "confirm_password_required": "Confirm password is required",
   "confirm_transfer_complete": "Confirm Transfer Complete!",
   "confirm_unavailability": "Confirm Unavailability",
   "confirmed": "Confirmed",
@@ -1012,7 +1010,6 @@
   "filter_by_category": "Filter by category",
   "filters": "Filters",
   "first_name": "First Name",
-  "first_name_required": "First Name is required",
   "footer_body": "Open Healthcare Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. Open Healthcare Network CARE is a Digital Public Good recognised by the United Nations.",
   "forget_password": "Forgot password?",
   "forget_password_instruction": "Enter your username, and if it exists, we will send you a link to reset your password.",
@@ -1102,6 +1099,7 @@
   "invalid_asset_id_msg": "Oops! The asset ID you entered does not appear to be valid.",
   "invalid_date_format": "Invalid date format, expected {{format}}",
   "invalid_email": "Please enter a valid email address",
+  "invalid_email_address": "Invalid email address",
   "invalid_ip_address": "Invalid IP Address",
   "invalid_link_msg": "It appears that the password reset link you have used is either invalid or expired. Please request a new password reset link.",
   "invalid_otp": "Invalid OTP, Please check the OPT and try Again",
@@ -1117,7 +1115,6 @@
   "invalid_url_http_https": "URL should start with http:// or https://",
   "invalid_url_javascript": "URL should not include javascript, please enter a valid URL.",
   "invalid_username": "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.",
-  "invalid_username_format": "Please enter a 4-16 characters long username with lowercase letters, digits and . _ - only and it should not start or end with . _ -",
   "inventory_management": "Inventory Management",
   "investigation_report": "Investigation Report",
   "investigation_report_for_{{name}}": "Investigation Report for {{name}}",
@@ -1164,7 +1161,6 @@
   "last_modified": "Last Modified",
   "last_modified_by": "Last Modified By",
   "last_name": "Last Name",
-  "last_name_required": "Last Name is required",
   "last_online": "Last Online",
   "last_serviced_on": "Last Serviced On",
   "last_updated_by": "Last updated by",
@@ -1284,7 +1280,8 @@
   "never_logged_in": "Never Logged In",
   "new_password": "New Password",
   "new_password_confirmation": "Confirm New Password",
-  "new_password_same_as_old": "New password is same as old password, please enter a different new password.",
+  "new_password_different_from_old": "Your new password is different from the old password.",
+  "new_password_same_as_old": "Your new password must not match the old password.",
   "new_password_validation": "New password is not valid.",
   "new_session": "New Session",
   "next_fortnight_short": "Next 2wk",
@@ -1382,6 +1379,7 @@
   "occupancy": "Occupancy",
   "occupation": "Occupation",
   "occupied": "Occupied",
+  "old_password": "Current Password",
   "on": "on",
   "on_emergency_basis": " on emergency basis",
   "ongoing_medications": "Ongoing Medications",
@@ -1412,17 +1410,22 @@
   "pain_chart_description": "Mark region and intensity of pain",
   "passport_number": "Passport Number",
   "password": "Password",
-  "password_length_validation": "Password must be at least 8 characters long",
-  "password_lowercase_validation": "Password must contain at least one lowercase letter (a-z)",
-  "password_mismatch": "New password and confirm password must be the same.",
-  "password_number_validation": "Password must contain at least one number (0-9)",
+  "password_length_met": "It’s at least 8 characters long",
+  "password_length_validation": "Use at least 8 characters",
+  "password_lowercase_met": "It includes at least one lowercase letter",
+  "password_lowercase_validation": "Include at least one lowercase letter",
+  "password_mismatch": "Passwords do not match",
+  "password_number_met": "It includes at least one number.",
+  "password_number_validation": "Include at least one number.",
   "password_required": "Password is required",
   "password_reset_failure": "Password Reset Failed",
   "password_reset_success": "Password Reset successfully",
   "password_sent": "Password Reset Email Sent",
   "password_update_error": "Error while updating password. Try again later.",
-  "password_uppercase_validation": "Password must contain at least one uppercase letter (A-Z)",
-  "password_validation": "Password must contain at least: 8 characters, 1 uppercase letter (A-Z), 1 lowercase letter (a-z), and 1 number (0-9)",
+  "password_updated": "Password updated successfully",
+  "password_uppercase_met": "It includes at least one uppercase letter.",
+  "password_uppercase_validation": "Include at least one uppercase letter.",
+  "passwords_match": "Passwords match.",
   "patient": "Patient",
   "patient-notes": "Notes",
   "patient__general-info": "General Info",
@@ -1492,6 +1495,7 @@
   "phone_number_at_current_facility": "Phone Number of Contact person at current Facility",
   "phone_number_min_error": "Phone number must be at least 10 characters long",
   "phone_number_not_found": "Phone number not found",
+  "phone_number_validation": "Phone number must start with +91 followed by 10 digits",
   "phone_number_verified": "Phone Number Verified",
   "pincode": "Pincode",
   "pincode_autofill": "State and District auto-filled from Pincode",
@@ -1501,6 +1505,7 @@
   "please_check_your_messages": "Please check your messages",
   "please_confirm_password": "Please confirm your new password.",
   "please_enter_a_reason_for_the_shift": "Please enter a reason for the shift.",
+  "please_enter_confirm_password": "Please confirm your new password",
   "please_enter_current_password": "Please enter your current password.",
   "please_enter_new_password": "Please enter your new password.",
   "please_enter_username": "Please enter the username",
@@ -1948,6 +1953,7 @@
   "update_facility": "Update Facility",
   "update_facility_middleware_success": "Facility middleware updated successfully",
   "update_log": "Update Log",
+  "update_password": "Update Password",
   "update_patient_details": "Update Patient Details",
   "update_preset": "Update Preset",
   "update_preset_position_to_current": "Update preset's position to camera's current position",
@@ -1962,7 +1968,7 @@
   "updated": "Updated",
   "updated_on": "Updated On",
   "updates": "Updates",
-  "updating": "Updating",
+  "updating": "Updating...",
   "upload": "Upload",
   "upload_an_image": "Upload an image",
   "upload_file": "Upload File",
@@ -1993,8 +1999,14 @@
   "username": "Username",
   "username_already_exists": "This username already exists",
   "username_available": "Username is available",
+  "username_characters_validation": "Only lowercase letters, numbers, and . _ - are allowed",
+  "username_consecutive_validation": "Cannot contain consecutive special characters",
+  "username_max_length_validation": "Use at most 16 characters",
+  "username_min_length_validation": "Use at least 4 characters",
   "username_not_available": "Username is not available",
+  "username_start_end_validation": "Must start and end with a letter or number",
   "username_userdetails_not_found": "Unable to fetch details as username or user details not found",
+  "username_valid": "Username is valid",
   "users": "Users",
   "vacant": "Vacant",
   "vaccinated": "Vaccinated",

src/Utils/request/api.tsx

@@ -173,7 +173,7 @@ const routes = {
   updatePassword: {
     path: "/api/v1/password_change/",
     method: "PUT",
-    TRes: Type<Record<string, string | string[]>>(),
+    TRes: Type<{ message: string }>(),
     TBody: Type<UpdatePasswordForm>(),
   },
   // User Endpoints

src/Utils/request/errorHandler.ts

@@ -3,7 +3,7 @@ import { navigate } from "raviger";
 import { toast } from "sonner";
 
 import * as Notifications from "@/Utils/Notifications";
-import { HTTPError } from "@/Utils/request/types";
+import { HTTPError, StructuredError } from "@/Utils/request/types";
 
 export function handleHttpError(error: Error) {
   if (error.name === "AbortError") {
@@ -37,6 +37,12 @@ export function handleHttpError(error: Error) {
       handlePydanticErrors(errs);
       return;
     }
+
+    if (isStructuredError(cause)) {
+      handleStructuredErrors(cause);
+      return;
+    }
+
     Notifications.BadRequest({ errs });
     return;
   }
@@ -70,11 +76,28 @@ function isNotFound(error: HTTPError) {
 type PydanticError = {
   type: string;
   loc?: string[];
-  msg: string;
+  msg: string | Record<string, string>;
   input?: unknown;
   url?: string;
 };
 
+function isStructuredError(err: HTTPError["cause"]): err is StructuredError {
+  return typeof err === "object" && !Array.isArray(err);
+}
+
+function handleStructuredErrors(cause: StructuredError) {
+  for (const value of Object.values(cause)) {
+    if (Array.isArray(value)) {
+      value.forEach((err) => toast.error(err));
+      return;
+    }
+    if (typeof value === "string") {
+      toast.error(value);
+      return;
+    }
+  }
+}
+
 function isPydanticError(errors: unknown): errors is PydanticError[] {
   return (
     Array.isArray(errors) &&
@@ -86,14 +109,15 @@ function isPydanticError(errors: unknown): errors is PydanticError[] {
 
 function handlePydanticErrors(errors: PydanticError[]) {
   errors.map(({ type, loc, msg }) => {
+    const message = typeof msg === "string" ? msg : Object.values(msg)[0];
     if (!loc) {
-      toast.error(msg);
+      toast.error(message);
       return;
     }
     type = type
       .replace("_", " ")
       .replace(/\b\w/g, (char) => char.toUpperCase());
-    toast.error(msg, {
+    toast.error(message, {
       description: `${type}: '${loc.join(".")}'`,
       duration: 8000,
     });

src/Utils/request/types.ts

@@ -51,7 +51,9 @@ export interface APICallOptions<TBody = unknown> {
   headers?: HeadersInit;
 }
 
-type HTTPErrorCause = Record<string, unknown> | undefined;
+export type StructuredError = Record<string, string | string[]>;
+
+type HTTPErrorCause = StructuredError | Record<string, unknown> | undefined;
 
 export class HTTPError extends Error {
   status: number;

src/components/Auth/Login.tsx

@@ -19,6 +19,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
+import { PasswordInput } from "@/components/ui/input-password";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -515,10 +516,9 @@ const Login = (props: LoginProps) => {
                         </div>
                         <div className="space-y-2">
                           <Label htmlFor="password">Password</Label>
-                          <Input
+                          <PasswordInput
                             id="password"
                             name="password"
-                            type="password"
                             data-cy="password"
                             value={form.password}
                             onChange={handleChange}