Merge pull request #491 from Infosys/bug/variable-image

[ES-393] disable button state & show hide password icon
mosip · Nov 28, 2023 · a38d193 · a38d193
2 parents 2712686 + 6742667
commit a38d193
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/oidc-ui/src/App.css b/oidc-ui/src/App.css
@@ -62,12 +62,13 @@
 }
 
 .primary-button:disabled {
+  cursor: not-allowed;
   color: var(--primary-button-disable-color);
   background-color: var(--primary-button-disable-bg-color);
   border-color: var(--primary-button-disable-border-color);
 }
 
-.primary-button:hover {
+.primary-button:hover:not(:disabled) {
   color: var(--primary-button-hover-color);
   background-color: var(--primary-button-hover-bg-color);
   border-color: var(--primary-button-hover-border-color);
@@ -81,12 +82,13 @@
 }
 
 .secondary-button:disabled {
+  cursor: not-allowed;
   color: var(--secondary-button-disable-color);
   background-color: var(--secondary-button-disable-bg-color);
   border-color: var(--secondary-button-disable-border-color);
 }
 
-.secondary-button:hover {
+.secondary-button:hover:not(:disabled) {
   color: var(--secondary-button-hover-color);
   background-color: var(--secondary-button-hover-bg-color);
   border-color: var(--secondary-button-hover-border-color);

diff --git a/oidc-ui/src/components/InputWithImage.js b/oidc-ui/src/components/InputWithImage.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 const fixedInputClass =
@@ -27,11 +27,12 @@ export default function InputWithImage({
   const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix });
 
   const [showPassword, setShowPassword] = useState(false);
+  const inputVal = useRef(value);
 
   const changePasswordState = () => {
-    setShowPassword(!showPassword);
     let passwordRef = document.getElementById(id);
-    passwordRef.setAttribute("type", showPassword ? "text" : "password");
+    passwordRef.setAttribute("type", !showPassword ? "text" : "password");
+    setShowPassword(!showPassword);
   };
 
   return (
@@ -59,6 +60,7 @@ export default function InputWithImage({
           </div>
         }
         <input
+          ref={inputVal}
           disabled={disabled}
           onChange={handleChange}
           onBlur={blurChange}
@@ -71,7 +73,7 @@ export default function InputWithImage({
           placeholder={placeholder}
           title={t(tooltipMsg)}
         />
-        {type === "password" && (
+        {type === "password" && inputVal.current.value !== "" && (
           <span
             className="flex absolute inset-y-0 p-3 pt-2 ltr:right-0 rtl:left-0 cursor-pointer"
             onClick={changePasswordState}