From f610ab03401b06c029ca59cd664fc8a3b9cb36d7 Mon Sep 17 00:00:00 2001
From: chinmoy-eGov <115543497+chinmoy-eGov@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:52:54 +0530
Subject: [PATCH] ISTE-17 Changes in password component

---
 .../src/pages/citizen/Home/UserProfile.js     |  32 +-
 .../react-components/src/atoms/TextInput.js   | 516 +++---------------
 .../packages/react-components/src/index.js    |   4 +-
 3 files changed, 98 insertions(+), 454 deletions(-)

diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js
index 211d91ef8..57745f68b 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Home/UserProfile.js
+++ b/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}
 
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
index f3d099e98..97f2c6481 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/TextInput.js
@@ -1,13 +1,10 @@
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { SVG } from "./SVG";
-import StringManipulator from "./StringManipulator";
+import { LocateIcon } from "./svgindex";
 
 const TextInput = (props) => {
-  const user_type = window?.Digit?.SessionStorage.get("userType");
-  const [date, setDate] = useState(props?.type === "date" && props?.value);
-  const [visibility, setVisibility] = useState(false);
-  const [inputType, setInputType] = useState(props?.type || "text");
+  const user_type = Digit.SessionStorage.get("userType");
+  const [date, setDate] = useState(props?.type==="date"&&props?.value);
   const data = props?.watch
     ? {
         fromDate: props?.watch("fromDate"),
@@ -16,409 +13,93 @@ const TextInput = (props) => {
     : {};
 
   const handleDate = (event) => {
-    const { value } = event?.target;
-    setDate(value);
-    props?.onChange(value);
-  };
-  const incrementCount = () => {
-    const newValue =
-      Number(props.value) + (Number(props?.step) ? Number(props?.step) : 1);
-    props.onChange(newValue);
-  };
-
-  const decrementCount = () => {
-    const newValue = Math.max(
-      Number(props.value) - (Number(props?.step) ? Number(props?.step) : 1),
-      0
-    );
-    props.onChange(newValue);
-  };
-
-  const renderPrefix = () => {
-    const prefixValue = props?.populators?.prefix || "";
-    if (props?.type === "numeric") {
-      return (
-        <button
-          type="button"
-          onClick={() => decrementCount()}
-          className="digit-numeric-button-prefix"
-          readOnly={props.nonEditable}
-        >
-          -
-        </button>
-      );
-    }
-    if (prefixValue) {
-      return (
-        <button className="digit-prefix" readOnly={props.nonEditable}>
-          {prefixValue}
-        </button>
-      );
-    }
-    return null;
-  };
-
-  const renderSuffix = () => {
-    const suffixValue = props?.populators?.suffix || "";
-    if (props?.type === "numeric") {
-      return (
-        <button
-          type="button"
-          onClick={() => incrementCount()}
-          className="digit-numeric-button-suffix"
-          readOnly={props.nonEditable}
-        >
-          +
-        </button>
-      );
-    }
-    if (
-      props?.type === "text" &&
-      !props?.populators?.customIcon &&
-      suffixValue
-    ) {
-      return (
-        <button className="digit-suffix" readOnly={props.nonEditable}>
-          {suffixValue}
-        </button>
-      );
-    }
-    return null;
-  };
-
-  const handleVisibility = () => {
-    setVisibility(!visibility);
-    const newType = !visibility ? "text" : "password";
-    setInputType(newType);
-    props.onChange(props?.value);
-  };
-
-  const handleLocationClick = () => {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition(
-        (position) => {
-          const { latitude, longitude } = position.coords;
-          props.onChange(`${latitude}, ${longitude}`);
-        },
-        (error) => {
-          console.error("Error getting location:", error);
-        }
-      );
-    } else {
-      console.error("Geolocation is not supported");
-    }
-  };
-
-  const renderIcon = () => {
-    const reqIcon = props?.type;
-    const iconFill = props?.disabled
-      ? "#D6D5D4"
-      : props?.nonEditable
-      ? "#b1b4b6"
-      : "#505A5F";
-    if (reqIcon) {
-      if (reqIcon === "geolocation") {
-        return (
-          <SVG.MyLocation
-            fill={iconFill}
-            onClick={
-              props?.onIconSelection
-                ? props?.onIconSelection
-                : handleLocationClick
-            }
-            className="digit-text-input-customIcon"
-          />
-        );
-      } else if (reqIcon === "password" && inputType === "text" && visibility) {
-        return (
-          <SVG.VisibilityOff
-            fill={iconFill}
-            onClick={handleVisibility}
-            className={` digit-text-input-customIcon ${
-              props.disabled ? "disabled" : ""
-            } ${props.nonEditable ? "nonEditable" : ""}`}
-          />
-        );
-      } else if (reqIcon === "password") {
-        return (
-          <SVG.Visibility
-            fill={iconFill}
-            onClick={handleVisibility}
-            className={` digit-text-input-customIcon ${
-              props.disabled ? "disabled" : ""
-            } ${props.nonEditable ? "nonEditable" : ""}`}
-          />
-        );
-      } else if (reqIcon === "search") {
-        return (
-          <SVG.Search
-            fill={iconFill}
-            onClick={props?.onIconSelection}
-            className={` digit-text-input-customIcon ${
-              props.disabled ? "disabled" : ""
-            } ${props.nonEditable ? "nonEditable" : ""}`}
-          />
-        );
-      } else {
-        try {
-          const components = require("@egovernments/digit-ui-svg-components");
-          const DynamicIcon =
-            props?.type === "text" &&
-            components?.[props?.populators?.customIcon];
-          if (DynamicIcon) {
-            const svgElement = DynamicIcon({
-              width: "1.5rem",
-              height: "1.5rem",
-              fill: iconFill,
-              className: `digit-text-input-customIcon ${
-                props.disabled ? "disabled" : ""
-              } ${props.nonEditable ? "nonEditable" : ""}`,
-            });
-            return svgElement;
-          } else {
-            console.log("Icon not found");
-            return null;
-          }
-        } catch (error) {
-          console.error("Icon not found");
-          return null;
-        }
-      }
-    }
-    return null;
+    const { value } = event.target;
+    setDate(getDDMMYYYY(value));
   };
 
-  const icon = renderIcon();
-
-  const openPicker = () => {
-    document.addEventListener("DOMContentLoaded", function () {
-      const dateInput = document.querySelector('input[type="date"]');
-      const timeInput = document.querySelector('input[type="time"]');
-
-      const handleClick = (event) => {
-        try {
-          event.target.showPicker();
-        } catch (error) {
-          window.alert(error);
-        }
-      };
-
-      if (dateInput) {
-        dateInput.addEventListener("click", handleClick);
-      }
-
-      if (timeInput) {
-        timeInput.addEventListener("click", handleClick);
-      }
-    });
-  };
-
-  const inputClassNameForMandatory = `${
-    user_type ? "digit-employee-card-input-error" : "digit-card-input-error"
-  } ${props.disabled ? "disabled" : ""} ${props.customClass || ""} ${
-    props.nonEditable ? "noneditable" : ""
-  }  ${props.type === "numeric" ? "numeric" : ""}`;
-
-  const inputClassName = `${
-    user_type ? "digit-employee-card-input" : "digit-citizen-card-input"
-  } ${props.disabled ? "disabled" : ""} focus-visible ${
-    props.errorStyle ? "digit-employee-card-input-error" : ""
-  } ${props.nonEditable ? "noneditable" : ""} ${
-    props.type === "numeric" ? "numeric" : ""
-  }`;
-
-  const defaultType =
-    props.type === "password" && inputType === "text"
-      ? "passwordToText"
-      : props.type;
-
-  const inputContainerClass = `input-container ${
-    defaultType ? defaultType : ""
-  } ${props.populators?.customIcon ? "withIcon" : ""}`;
-
   return (
     <React.Fragment>
-      <div
-        className={`digit-text-input ${
-          user_type === "employee" ? "" : "digit-text-input-width"
-        } ${props?.className ? props?.className : ""} ${
-          props.disabled ? "disabled" : ""
-        }  ${props.nonEditable ? "noneditable" : ""} ${
-          props.error ? "error" : ""
-        } ${defaultType ? defaultType : ""} ${
-          props?.populators?.prefix ? "prefix" : ""
-        } ${props?.populators?.suffix ? "suffix" : ""} `}
-        style={props?.textInputStyle ? { ...props.textInputStyle } : {}}
-      >
-        {props.required ? (
-          <div className={inputContainerClass}>
-            {renderPrefix()}
-            <input
-              type={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.type
-                  : defaultType || "text"
-              }
-              name={props.name}
-              id={props.id}
-              className={inputClassNameForMandatory}
-              placeholder={StringManipulator(
-                "toSentenceCase",
-                props.placeholder
-              )}
-              onChange={(event) => {
-                if (props?.type === "number" && props?.maxlength) {
-                  if (event.target.value.length > props?.maxlength) {
-                    event.target.value = event.target.value.slice(0, -1);
-                  }
-                }
-                if (props?.type === "numeric") {
-                  event.target.value = event.target.value.replace(
-                    /[^0-9]/g,
-                    ""
-                  );
-                }
-                if (props?.onChange) {
-                  props?.onChange(event);
+      <div className={`text-input ${user_type === "employee" ? "" :"text-input-width"} ${props.className}`} style={props?.textInputStyle ? { ...props.textInputStyle} : {}}>
+        {props.isMandatory ? (
+          <input
+            type={props?.validation && props.ValidationRequired ? props?.validation?.type : (props.type || "text")}
+            name={props.name}
+            id={props.id}
+            className={`${user_type ? "employee-card-input-error" : "card-input-error"} ${props.disable && "disabled"} ${props.customClass}`}
+            placeholder={props.placeholder}
+            onChange={(event) => {
+              if(props?.type === "number" && props?.maxlength) {
+                if(event.target.value.length > props?.maxlength) {
+                  event.target.value = event.target.value.slice(0,-1);
                 }
-                if (props.type === "date") {
-                  handleDate(event);
-                }
-              }}
-              ref={props.inputRef}
-              value={props?.value}
-              style={{ ...props.style }}
-              defaultValue={props.defaultValue}
-              minLength={props.minlength}
-              maxLength={props.maxlength}
-              max={props.max}
-              pattern={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.pattern
-                  : props.pattern
               }
-              min={props.min}
-              readOnly={props.nonEditable}
-              title={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.title
-                  : props.title
+              if (props?.onChange) {
+                props?.onChange(event);
               }
-              step={props.step}
-              autoFocus={props.autoFocus}
-              onBlur={props.onBlur}
-              autoComplete="off"
-              disabled={props.disabled}
-              onFocus={props?.onFocus}
-              nonEditable={props.nonEditable}
-              config={props.config}
-              populators={props.populators}
-              onclick={
-                props.type === "date" || props.type === "time"
-                  ? openPicker()
-                  : null
+              if (props.type === "date") {
+                handleDate(event);
               }
-            />
-            {renderSuffix()}
-            {props.signature && props.signatureImg}
-            {icon && (
-              <span
-                className="digit-cursor-pointer"
-                onClick={props?.onIconSelection}
-              >
-                {icon}
-              </span>
-            )}
-          </div>
+            }}
+            ref={props.inputRef}
+            value={props.value}
+            style={{ ...props.style }}
+            defaultValue={props.defaultValue}
+            minLength={props.minlength}
+            maxLength={props.maxlength}
+            max={props.max}
+            pattern={props?.validation && props.ValidationRequired ? props?.validation?.pattern : props.pattern}
+            min={props.min}
+            readOnly={props.disable}
+            title={props?.validation && props.ValidationRequired ? props?.validation?.title :props.title}
+            step={props.step}
+            autoFocus={props.autoFocus}
+            onBlur={props.onBlur}
+            autoComplete="off"
+            disabled={props.disabled}
+          />
         ) : (
-          <div className={inputContainerClass}>
-            {renderPrefix()}
-            <input
-              type={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.type
-                  : defaultType || "text"
-              }
-              name={props.name}
-              id={props.id}
-              className={inputClassName}
-              placeholder={StringManipulator(
-                "toSentenceCase",
-                props.placeholder
-              )}
-              onChange={(event) => {
-                if (props?.type === "number" && props?.maxlength) {
-                  if (event.target.value.length > props?.maxlength) {
-                    event.target.value = event.target.value.slice(0, -1);
-                  }
+          <input
+            type={props?.validation && props.ValidationRequired ? props?.validation?.type : (props.type || "text")}
+            name={props.name}
+            id={props.id}
+            className={`${user_type ? "employee-card-input" : "citizen-card-input"} ${props.disable && "disabled"} focus-visible ${props.errorStyle && "employee-card-input-error"} ${props.customClass}`}
+            placeholder={props.placeholder}
+            onChange={(event) => {
+              if(props?.type === "number" && props?.maxlength) {
+                if(event.target.value.length > props?.maxlength) {
+                  event.target.value = event.target.value.slice(0,-1);
                 }
-                if (props?.type === "numeric") {
-                  event.target.value = event.target.value.replace(
-                    /[^0-9]/g,
-                    ""
-                  );
-                }
-                if (props?.onChange) {
-                  props?.onChange(event);
-                }
-                if (props.type === "date") {
-                  handleDate(event);
-                }
-              }}
-              ref={props.inputRef}
-              value={props?.value}
-              style={{ ...props.style }}
-              defaultValue={props.defaultValue}
-              minLength={props.minlength}
-              maxLength={props.maxlength}
-              max={props.max}
-              required={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.isRequired
-                  : props.isRequired ||
-                    (props.type === "date" &&
-                      (props.name === "fromDate" ? data.toDate : data.fromDate))
               }
-              pattern={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.pattern
-                  : props.pattern
+              if (props?.onChange) {
+                props?.onChange(event);
               }
-              min={props.min}
-              readOnly={props.nonEditable}
-              title={
-                props?.validation && props.ValidationRequired
-                  ? props?.validation?.title
-                  : props.title
+              if (props.type === "date") {
+                handleDate(event);
               }
-              step={props.step}
-              autoFocus={props.autoFocus}
-              onBlur={props.onBlur}
-              onKeyPress={props.onKeyPress}
-              autoComplete="off"
-              disabled={props.disabled}
-              onFocus={props?.onFocus}
-              nonEditable={props.nonEditable}
-              config={props.config}
-              populators={props.populators}
-              onClick={
-                props.type === "date" || props.type === "time"
-                  ? openPicker()
-                  : null
-              }
-            />
-            {renderSuffix()}
-            {props.signature && props.signatureImg}
-            {icon && (
-              <span
-                className="digit-cursor-pointer"
-                onClick={props?.onIconSelection}
-              >
-                {icon}
-              </span>
-            )}
-          </div>
+            }}
+            ref={props.inputRef}
+            value={props.value}
+            style={{ ...props.style }}
+            defaultValue={props.defaultValue}
+            minLength={props.minlength}
+            maxLength={props.maxlength}
+            max={props.max}
+            required={props?.validation && props.ValidationRequired ? props?.validation?.isRequired :props.isRequired || (props.type === "date" && (props.name === "fromDate" ? data.toDate : data.fromDate))}
+            pattern={props?.validation && props.ValidationRequired ? props?.validation?.pattern : props.pattern}
+            min={props.min}
+            readOnly={props.disable}
+            title={props?.validation && props.ValidationRequired ? props?.validation?.title :props.title}
+            step={props.step}
+            autoFocus={props.autoFocus}
+            onBlur={props.onBlur}
+            onKeyPress={props.onKeyPress}
+            autoComplete="off"
+            disabled={props.disabled}
+          />
         )}
+        {/* {props.type === "date" && <DatePicker {...props} date={date} setDate={setDate} data={data} />} */}
+        {props.signature ? props.signatureImg : null}
+        {props.customIcon ? props.customIcon === "geolocation" ? <span className="cursor-pointer" onClick={props?.onIconSelection} ><LocateIcon className="text-input-customIcon" /></span> : null : null}
       </div>
     </React.Fragment>
   );
@@ -426,49 +107,16 @@ const TextInput = (props) => {
 
 TextInput.propTypes = {
   userType: PropTypes.string,
-  required: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  isMandatory: PropTypes.bool,
+  name: PropTypes.string,
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-  ]),
+  ref: PropTypes.func,
   value: PropTypes.any,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  maxLength: PropTypes.number,
-  minlength: PropTypes.number,
-  max: PropTypes.number,
-  pattern: PropTypes.string,
-  min: PropTypes.number,
-  disabled: PropTypes.bool,
-  nonEditable: PropTypes.bool,
-  errorStyle: PropTypes.bool,
-  hideSpan: PropTypes.bool,
-  title: PropTypes.string,
-  step: PropTypes.string,
-  autoFocus: PropTypes.bool,
-  onBlur: PropTypes.func,
-  onKeyPress: PropTypes.func,
-  textInputStyle: PropTypes.object,
-  defaultValue: PropTypes.any,
-  customClass: PropTypes.string,
-  signature: PropTypes.bool,
-  signatureImg: PropTypes.node,
-  onIconSelection: PropTypes.func,
-  type: PropTypes.string,
-  watch: PropTypes.func,
-  onFocus: PropTypes.func,
-  charCount: PropTypes.bool,
-  errors: PropTypes.object,
-  config: PropTypes.object,
-  error: PropTypes.string,
 };
 
 TextInput.defaultProps = {
-  required: false,
-  charCount: false,
+  isMandatory: false,
 };
 
 function DatePicker(props) {
@@ -485,7 +133,7 @@ function DatePicker(props) {
   return (
     <input
       type="text"
-      className={`${props.disabled && "disabled"} digit-card-date-input`}
+      className={`${props.disable && "disabled"} card-date-input`}
       name={props.name}
       id={props.id}
       placeholder={props.placeholder}
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js
index a7638d7ef..4bd1330af 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/index.js
@@ -220,6 +220,7 @@ import WhatsNewCard from "./atoms/WhatsNewCard";
 import EventCalendarView from "./atoms/EventCalendarView";
 import InboxLinks from "./atoms/InboxLinks";
 import PopupHeadingLabel from "./atoms/PopupHeadingLabel";
+import Password from "./atoms/Password";
 
 import { FormComposer } from "./hoc/FormComposer";
 import { FormComposer as FormComposerV2 } from "./hoc/FormComposerV2";
@@ -552,5 +553,6 @@ export {
   ExpenditureIcon,
   PaymentIcon,
   HistoryIcon,
-  WarningIcon
+  WarningIcon,
+  Password
 };