From c61d916338ce12ac66107b85c055297fdc0c9219 Mon Sep 17 00:00:00 2001
From: AdityaJ2305 <adityajindal2305@gmail.com>
Date: Wed, 22 Jan 2025 12:37:28 +0530
Subject: [PATCH] resolved conflicts

---
 src/components/Users/UserForm.tsx | 102 +++++++++++++++++++++++++++---
 1 file changed, 92 insertions(+), 10 deletions(-)

diff --git a/src/components/Users/UserForm.tsx b/src/components/Users/UserForm.tsx
index b0750393764..7ce684f6500 100644
--- a/src/components/Users/UserForm.tsx
+++ b/src/components/Users/UserForm.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -28,7 +28,10 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 
-import { validateRule } from "@/components/Users/UserFormValidations";
+import {
+  ValidationHelper,
+  validateRule,
+} from "@/components/Users/UserFormValidations";
 
 import { GENDER_TYPES } from "@/common/constants";
 import { GENDERS } from "@/common/constants";
@@ -115,6 +118,12 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
     resolver: zodResolver(userFormSchema),
     defaultValues: {
       user_type: "staff",
+      username: "",
+      password: "",
+      c_password: "",
+      first_name: "",
+      last_name: "",
+      email: "",
       phone_number: "+91",
       alt_phone_number: "+91",
       phone_number_is_whatsapp: true,
@@ -128,7 +137,6 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
     }),
     enabled: !!existingUsername,
   });
-
   useEffect(() => {
     if (userData && isEditMode) {
       const formData: Partial<UserFormValues> = {
@@ -144,6 +152,9 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
     }
   }, [userData, form, isEditMode]);
 
+  const [isPasswordFieldFocused, setIsPasswordFieldFocused] = useState(false);
+  const [isUsernameFieldFocused, setIsUsernameFieldFocused] = useState(false);
+
   //const userType = form.watch("user_type");
   const usernameInput = form.watch("username");
   const phoneNumber = form.watch("phone_number");
@@ -174,12 +185,7 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
     const isInitialRender = usernameInput === "";
 
     if (username?.message) {
-      return validateRule(
-        false,
-        username.message,
-        isInitialRender,
-        t("username_valid"),
-      );
+      return null;
     } else if (isUsernameChecking) {
       return (
         <div className="flex items-center gap-1">
@@ -347,10 +353,55 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
                         data-cy="username-input"
                         placeholder={t("username")}
                         {...field}
+                        onFocus={() => setIsUsernameFieldFocused(true)}
+                        onBlur={() => setIsUsernameFieldFocused(false)}
                       />
                     </div>
                   </FormControl>
-                  {renderUsernameFeedback(usernameInput ?? "")}
+                  {isUsernameFieldFocused && (
+                    <>
+                      <div
+                        className="text-small mt-2 pl-2 text-secondary-500"
+                        aria-live="polite"
+                      >
+                        <ValidationHelper
+                          isInputEmpty={!field.value}
+                          successMessage={t("username_success_message")}
+                          validations={[
+                            {
+                              description: "username_min_length_validation",
+                              fulfilled: (field.value || "").length >= 4,
+                            },
+                            {
+                              description: "username_max_length_validation",
+                              fulfilled: (field.value || "").length <= 16,
+                            },
+                            {
+                              description: "username_characters_validation",
+                              fulfilled: /^[a-z0-9._-]*$/.test(
+                                field.value || "",
+                              ),
+                            },
+                            {
+                              description: "username_start_end_validation",
+                              fulfilled: /^[a-z0-9].*[a-z0-9]$/.test(
+                                field.value || "",
+                              ),
+                            },
+                            {
+                              description: "username_consecutive_validation",
+                              fulfilled: !/(?:[._-]{2,})/.test(
+                                field.value || "",
+                              ),
+                            },
+                          ]}
+                        />
+                      </div>
+                      <div className="pl-2">
+                        {renderUsernameFeedback(usernameInput || "")}
+                      </div>
+                    </>
+                  )}
                 </FormItem>
               )}
             />
@@ -367,8 +418,39 @@ export default function UserForm({ onSubmitSuccess, existingUsername }: Props) {
                         data-cy="password-input"
                         placeholder={t("password")}
                         {...field}
+                        onFocus={() => setIsPasswordFieldFocused(true)}
+                        onBlur={() => setIsPasswordFieldFocused(false)}
                       />
                     </FormControl>
+                    {isPasswordFieldFocused && (
+                      <div
+                        className="text-small mt-2 pl-2 text-secondary-500"
+                        aria-live="polite"
+                      >
+                        <ValidationHelper
+                          isInputEmpty={!field.value}
+                          successMessage={t("password_success_message")}
+                          validations={[
+                            {
+                              description: "password_length_validation",
+                              fulfilled: (field.value || "").length >= 8,
+                            },
+                            {
+                              description: "password_lowercase_validation",
+                              fulfilled: /[a-z]/.test(field.value || ""),
+                            },
+                            {
+                              description: "password_uppercase_validation",
+                              fulfilled: /[A-Z]/.test(field.value || ""),
+                            },
+                            {
+                              description: "password_number_validation",
+                              fulfilled: /\d/.test(field.value || ""),
+                            },
+                          ]}
+                        />
+                      </div>
+                    )}
                     <FormMessage />
                   </FormItem>
                 )}