fix(password-generator): improve copy button UX and prevent layout shift (#1655)

Co-authored-by: Priyankar Pal <[email protected]>

Author: harishsehlangia

src/plays/password-generator/PasswordGenerator.jsx

@@ -72,7 +72,11 @@ function PasswordGenerator(props) {
   const onCopyClick = (e) => {
     e.preventDefault();
     navigator.clipboard.writeText(password.password);
-    setPassword({ ...password, status: true });
+    setPassword((prev) => ({ ...prev, status: true }));
+
+    setTimeout(() => {
+      setPassword((prev) => ({ ...prev, status: false }));
+    }, 1500);
   };
 
   const ErrorBox = () => {
@@ -109,8 +113,14 @@ function PasswordGenerator(props) {
           <h1 className="title">Password Generator</h1>
           {error && <ErrorBox />}
           <div className="inputfield">
-            <input disabled readOnly className="text" type="text" value={password.password} />
-            <button className="copy copybtn" onClick={onCopyClick}>
+            <input
+              disabled
+              readOnly
+              className={`text ${password.status ? 'copied' : ''}`}
+              type="text"
+              value={password.password}
+            />
+            <button className="copy copybtn" disabled={password.status} onClick={onCopyClick}>
               {password?.status ? 'Copied' : 'Copy'}
             </button>
           </div>

src/plays/password-generator/password-generator-style.css

@@ -48,6 +48,20 @@
   padding: 0.6em 1em;
   border-radius: 0.7em;
   text-transform: uppercase;
+  min-width: 100px;
+  text-align: center;
+}
+
+.password-generator .main .inputfield .text.copied {
+  background-color: #b3daff;
+  border-radius: 0.4em;
+  transition: background-color 0.3s ease;
+}
+
+.password-generator .main .inputfield .copybtn:disabled {
+  opacity: 0.55;                 
+  background-color: #18c0f4; 
+  cursor: not-allowed;
 }
 
 .password-generator .main .block {