ISTE-17 Changes in password component

frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js

@@ -11,6 +11,7 @@ import {
   BackButton,
   Loader,
   SubmitBar,
+  Password
 } from "@egovernments/digit-ui-react-components";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -274,10 +275,10 @@ const UserProfile = ({ stateCode, userType, cityDetails }) => {
         showToast("success", t("CORE_COMMON_PROFILE_UPDATE_SUCCESS"), 5000);
       }
     } catch (error) {
-      if(error?.response?.data?.Errors[0].message){
+      if (error?.response?.data?.Errors[0].message) {
         showToast("error", error?.response?.data?.Errors[0].message);
-        
-      }else{
+
+      } else {
         const errorObj = JSON.parse(error);
         showToast(errorObj.type, t(errorObj.message), 5000);
       }
@@ -598,13 +599,10 @@ const UserProfile = ({ stateCode, userType, cityDetails }) => {
                           style={editScreen ? { color: "#B1B4B6", width: "300px" } : { width: "300px" }}
                         >{`${t("CORE_COMMON_PROFILE_CURRENT_PASSWORD")}`}</CardLabel>
                         <div style={{ width: "100%" }}>
-                          <TextInput
-                            t={t}
-                            type={"password"}
+                          <Password
                             isMandatory={false}
                             name="name"
-                            pattern="^([a-zA-Z0-9@#$%])+$"
-                            onChange={(e) => setUserCurrentPassword(e.target.value)}
+                            onChange={(value) => setUserCurrentPassword(value)}
                             disable={editScreen}
                             maxlength={10}
 
@@ -619,16 +617,12 @@ const UserProfile = ({ stateCode, userType, cityDetails }) => {
                           style={editScreen ? { color: "#B1B4B6", width: "300px" } : { width: "300px" }}
                         >{`${t("CORE_COMMON_PROFILE_NEW_PASSWORD")}`}</CardLabel>
                         <div style={{ width: "100%" }}>
-                          <TextInput
-                            t={t}
-                            type={"password"}
-                            isMandatory={false}
+                          <Password
                             name="name"
-                            pattern="^([a-zA-Z0-9@#$%])+$"
-                            onChange={(e) => setUserNewPassword(e.target.value)}
-                            disable={editScreen}
-                            maxlength={10}
-
+                            value={newPassword}
+                            isMandatory={false}
+                            onChange={(value) => setUserNewPassword(value)}
+                            disable={false}
                           />
                           {errors?.newPassword && <CardLabelError>{t(errors?.newPassword?.message)}</CardLabelError>}
                         </div>
@@ -640,13 +634,13 @@ const UserProfile = ({ stateCode, userType, cityDetails }) => {
                           style={editScreen ? { color: "#B1B4B6", width: "300px" } : { width: "300px" }}
                         >{`${t("CORE_COMMON_PROFILE_CONFIRM_PASSWORD")}`}</CardLabel>
                         <div style={{ width: "100%" }}>
-                          <TextInput
+                          <Password
                             t={t}
                             type={"password"}
                             isMandatory={false}
                             name="name"
                             pattern="^([a-zA-Z0-9@#$%])+$"
-                            onChange={(e) => setUserConfirmPassword(e.target.value)}
+                            onChange={(value) => setUserConfirmPassword(value)}
                             disable={editScreen}
                             maxlength={10}