From 6ffd9f76eb7e23c8fab293885b4734786c5038f5 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 14 Sep 2023 00:16:46 +0200
Subject: [PATCH 01/44] added show button to the WiFi password input

---
 .../components/network/WifiConnectionForm.jsx | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 514d72c3e6..3c219a13c6 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -65,6 +65,7 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
   const [password, setPassword] = useState(network?.password || "");
   const [security, setSecurity] = useState(securityFrom(network?.security || []));
   const hidden = network?.hidden || false;
+  const [showPassword, setShowPassword] = useState(false);
 
   useEffect(() => {
     setTimeout(() => { formRef.current?.scrollIntoView({ behavior: "smooth" }) }, 200);
@@ -118,15 +119,27 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
       { security === "wpa-psk" &&
         // TRANSLATORS: WiFi password
         <FormGroup fieldId="password" label={_("WPA Password")}>
-          <TextInput
-            id="password"
-            name="password"
-            aria-label={_("Password")}
-            value={password}
-            label={_("Password")}
-            type="password"
-            onChange={setPassword}
-          />
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <TextInput
+              id="password"
+              name="password"
+              aria-label={_("Password")}
+              value={password}
+              label={_("Password")}
+              type={showPassword ? 'text' : 'password'}
+              onChange={setPassword}
+              style={{ flex: '1', marginRight: '8px' }}
+            />
+            <Button
+              variant={showPassword ? "secondary" : "primary"}
+              size="sm"
+              onMouseDown={() => setShowPassword(true)}
+              onMouseUp={() => setShowPassword(false)}
+              onMouseLeave={() => setShowPassword(false)}
+            >
+              {_("Show")}
+            </Button>
+          </div>
         </FormGroup> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>

From c297a64ba0b47bf96e52a02a151be590cd5610b2 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Thu, 14 Sep 2023 00:28:01 +0200
Subject: [PATCH 02/44] added description to changes file

---
 web/package/cockpit-agama.changes | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 59e8331d58..ed8e1c6fd1 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+
+- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
+
 -------------------------------------------------------------------
 Mon Sep 11 11:56:56 UTC 2023 - David Diaz <dgonzalez@suse.com>
 

From 7c3dd113d097968a88ef7022b389b5e6749c501f Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:00:57 +0200
Subject: [PATCH 03/44] added icon-size-15 class to utilities.scss

---
 web/src/assets/styles/utilities.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
index 146bb6b57c..81a8ec0db6 100644
--- a/web/src/assets/styles/utilities.scss
+++ b/web/src/assets/styles/utilities.scss
@@ -44,6 +44,11 @@
   height: 14px;
 }
 
+.icon-size-15 {
+  width: 15px;
+  height: 15px;
+}
+
 .icon-size-16 {
   width: 16px;
   height: 16px;

From e4e1cf4a113ebb1a78293a2c7a615f980241975e Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:01:37 +0200
Subject: [PATCH 04/44] imported visibility icons to Icon component

---
 web/src/components/layout/Icon.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index 4627830159..a7822a6cdc 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -66,6 +66,8 @@ import Terminal from "@icons/terminal.svg?component";
 import Translate from "@icons/translate.svg?component";
 import Tune from "@icons/tune.svg?component";
 import Warning from "@icons/warning.svg?component";
+import Visibility from "@icons/visibility.svg?component";
+import VisibilityOff from "@icons/visibility_off.svg?component";
 import Wifi from "@icons/wifi.svg?component";
 import WifiFind from "@icons/wifi_find.svg?component";
 
@@ -118,6 +120,8 @@ const icons = {
   translate: Translate,
   tune: Tune,
   warning: Warning,
+  visibility: Visibility,
+  visibility_off: VisibilityOff,
   wifi: Wifi,
   wifi_find: WifiFind,
   // brand icons

From 772a34e17937b1bffcb90ef10d37c79c81b94d91 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:03:20 +0200
Subject: [PATCH 05/44] switched from text to icon inside the button changed to
 toggle visibility on click and not on hold

---
 .../components/network/WifiConnectionForm.jsx | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 3c219a13c6..307931662d 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -28,8 +28,10 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
+  InputGroup,
   TextInput
 } from "@patternfly/react-core";
+import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
 
@@ -119,7 +121,7 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
       { security === "wpa-psk" &&
         // TRANSLATORS: WiFi password
         <FormGroup fieldId="password" label={_("WPA Password")}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
+          <InputGroup>
             <TextInput
               id="password"
               name="password"
@@ -128,18 +130,19 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
               label={_("Password")}
               type={showPassword ? 'text' : 'password'}
               onChange={setPassword}
-              style={{ flex: '1', marginRight: '8px' }}
             />
             <Button
-              variant={showPassword ? "secondary" : "primary"}
-              size="sm"
-              onMouseDown={() => setShowPassword(true)}
-              onMouseUp={() => setShowPassword(false)}
-              onMouseLeave={() => setShowPassword(false)}
-            >
-              {_("Show")}
-            </Button>
-          </div>
+              id="password_visibility"
+              name="password_visibility"
+              aria-label={_("Password visibility button")}
+              label={_("Password visibility button")}
+              variant="control"
+              onClick={() => setShowPassword((prev) => !prev)}
+              icon={showPassword
+                ? <Icon name="visibility_off" size="15" />
+                : <Icon name="visibility" size="15" />}
+            />
+          </InputGroup>
         </FormGroup> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>

From 948782bfe1cedf7a81c5525dade73dd275d88896 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:07:12 +0200
Subject: [PATCH 06/44] updated changes file

---
 web/package/cockpit-agama.changes | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index ed8e1c6fd1..bb649d2704 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -3,6 +3,13 @@ Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
 
 - Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
 
+-------------------------------------------------------------------
+Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
+
+- Use a single D-Bus service to connect to the manager and the
+  users API (gh#openSUSE/agama#753, follow-up of
+  gh#openSUSE/agama#729).
+
 -------------------------------------------------------------------
 Mon Sep 11 11:56:56 UTC 2023 - David Diaz <dgonzalez@suse.com>
 

From 30ccb0e37bffcaafe67f7b53ffceabe873e5da0e Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:09:26 +0200
Subject: [PATCH 07/44] updated changes file

---
 web/package/cockpit-agama.changes | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index bb649d2704..187fa506a9 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,8 +1,3 @@
--------------------------------------------------------------------
-Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
-
-- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
-
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 2aacf8f8e947f4e4c256304719843d87d6de57d6 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:10:15 +0200
Subject: [PATCH 08/44] added desc to changes file

---
 web/package/cockpit-agama.changes | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 187fa506a9..bb649d2704 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+
+- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
+
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 1424e61211ef7cd54431c41318ec826492e6dbd7 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:11:45 +0200
Subject: [PATCH 09/44] updated changes file to resolve conflict

---
 web/package/cockpit-agama.changes | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index bb649d2704..187fa506a9 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,8 +1,3 @@
--------------------------------------------------------------------
-Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
-
-- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
-
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 42664934e7582f3a167a25ab4e5d92a81278853c Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 00:13:00 +0200
Subject: [PATCH 10/44] added desc to changes file

---
 web/package/cockpit-agama.changes | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 187fa506a9..bb649d2704 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+
+- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
+
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 61e076406b1b4cf5f5f5c58df754fe0fa428b6a6 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 15:41:49 +0200
Subject: [PATCH 11/44] moved visibility lines above warning in Icon comp

---
 web/src/components/layout/Icon.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/Icon.jsx b/web/src/components/layout/Icon.jsx
index a7822a6cdc..519a514eb6 100644
--- a/web/src/components/layout/Icon.jsx
+++ b/web/src/components/layout/Icon.jsx
@@ -119,9 +119,9 @@ const icons = {
   terminal: Terminal,
   translate: Translate,
   tune: Tune,
-  warning: Warning,
   visibility: Visibility,
   visibility_off: VisibilityOff,
+  warning: Warning,
   wifi: Wifi,
   wifi_find: WifiFind,
   // brand icons

From 569c8233c71b5840b37e872680e52642c8ed73d6 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 15:44:04 +0200
Subject: [PATCH 12/44] removed label attribute from TextInput

---
 web/src/components/network/WifiConnectionForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 307931662d..7ea721f820 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -127,7 +127,6 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
               name="password"
               aria-label={_("Password")}
               value={password}
-              label={_("Password")}
               type={showPassword ? 'text' : 'password'}
               onChange={setPassword}
             />

From e57a463870ebeb9933a4c3dcf21e194197c95905 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 15:47:30 +0200
Subject: [PATCH 13/44] removed label property from Button

---
 web/src/components/network/WifiConnectionForm.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 7ea721f820..d54056b30b 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -134,7 +134,6 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
               id="password_visibility"
               name="password_visibility"
               aria-label={_("Password visibility button")}
-              label={_("Password visibility button")}
               variant="control"
               onClick={() => setShowPassword((prev) => !prev)}
               icon={showPassword

From 580d410e5d2d375f8ef3de74fc020ffba8ee60fa Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 16:03:30 +0200
Subject: [PATCH 14/44] added variable to track type of visibility icon this
 variable is then used in icon prop of the Button

---
 web/src/components/network/WifiConnectionForm.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index d54056b30b..09d1d3bb96 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -68,6 +68,7 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
   const [security, setSecurity] = useState(securityFrom(network?.security || []));
   const hidden = network?.hidden || false;
   const [showPassword, setShowPassword] = useState(false);
+  const visibilityIconName = showPassword ? "visibility_off" : "visibility";
 
   useEffect(() => {
     setTimeout(() => { formRef.current?.scrollIntoView({ behavior: "smooth" }) }, 200);
@@ -136,9 +137,7 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
               aria-label={_("Password visibility button")}
               variant="control"
               onClick={() => setShowPassword((prev) => !prev)}
-              icon={showPassword
-                ? <Icon name="visibility_off" size="15" />
-                : <Icon name="visibility" size="15" />}
+              icon={<Icon name={visibilityIconName} size="15" />}
             />
           </InputGroup>
         </FormGroup> }

From 1d7491db82d7987e433042d948c7bbd09ea02599 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 16:04:58 +0200
Subject: [PATCH 15/44] centering eye icon of the visibility button In the WiFi
 form where password is entered

---
 web/src/assets/styles/patternfly-overrides.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index e88a4e6e9d..6315315ca4 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -165,3 +165,8 @@ table td > .pf-c-empty-state {
   outline: none;
   box-shadow: 0 0 0 1px var(--focus-color);
 }
+
+// Make icon centered in the visibility button in the Wi-Fi password entry from
+button#password_visibility span.pf-c-button__icon {
+  display: flex;
+}
\ No newline at end of file

From 09a58a70fe7c529466a4e5ddbf8cb13b54a71087 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Fri, 15 Sep 2023 16:15:25 +0200
Subject: [PATCH 16/44] added newline at the end of file

---
 web/src/assets/styles/patternfly-overrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 6315315ca4..132e87c562 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -169,4 +169,4 @@ table td > .pf-c-empty-state {
 // Make icon centered in the visibility button in the Wi-Fi password entry from
 button#password_visibility span.pf-c-button__icon {
   display: flex;
-}
\ No newline at end of file
+}

From 2213fbffee016dea369ae194afbc79a5c72d9eb5 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 21:38:26 +0200
Subject: [PATCH 17/44] created PasswordInput component component also contains
 eye icon used to show/hide password

---
 web/src/components/core/PasswordInput.jsx | 55 +++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 web/src/components/core/PasswordInput.jsx

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
new file mode 100644
index 0000000000..9410e96a24
--- /dev/null
+++ b/web/src/components/core/PasswordInput.jsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) [2022] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React, { useState } from "react";
+import {
+  Button,
+  InputGroup,
+  TextInput
+} from "@patternfly/react-core";
+import { Icon } from "~/components/layout";
+import { _ } from "~/i18n";
+
+export default function PasswordInput({ id, name, ariaLabel, value, onChange }) {
+  const [showPassword, setShowPassword] = useState(false);
+  const visibilityIconName = showPassword ? "visibility_off" : "visibility";
+
+  return (
+    <InputGroup>
+      <TextInput
+        id={id}
+        name={name}
+        aria-label={ariaLabel}
+        value={value}
+        onChange={onChange}
+        type={showPassword ? 'text' : 'password'}
+      />
+      <Button
+        id="password_visibility"
+        name="password_visibility"
+        aria-label={_("Password visibility button")}
+        variant="control"
+        onClick={() => setShowPassword((prev) => !prev)}
+        icon={<Icon name={visibilityIconName} size="15" />}
+      />
+    </InputGroup>
+  );
+}

From d7c5e6aea0a5cb50de9d76143086e363957ae549 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 21:39:09 +0200
Subject: [PATCH 18/44] added export for PasswordInput in index.js

---
 web/src/components/core/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js
index a63536a0c8..4da69023ed 100644
--- a/web/src/components/core/index.js
+++ b/web/src/components/core/index.js
@@ -53,3 +53,4 @@ export { default as Tip } from "./Tip";
 export { default as ShowTerminalButton } from "./ShowTerminalButton";
 export { default as NotificationMark } from "./NotificationMark";
 export { default as NumericTextInput } from "./NumericTextInput";
+export { default as PasswordInput } from "./PasswordInput";

From 36da61f9719d2d70973089a5d5c5c3affc5b11bd Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 21:40:53 +0200
Subject: [PATCH 19/44] switched in WifiConnectionForm to use PasswordInput

---
 .../components/network/WifiConnectionForm.jsx | 30 +++++--------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 09d1d3bb96..232452ec9a 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -28,12 +28,11 @@ import {
   FormGroup,
   FormSelect,
   FormSelectOption,
-  InputGroup,
   TextInput
 } from "@patternfly/react-core";
-import { Icon } from "~/components/layout";
 import { useInstallerClient } from "~/context/installer";
 import { _ } from "~/i18n";
+import { PasswordInput } from "~/components/core";
 
 /*
 * FIXME: it should be moved to the SecurityProtocols enum that already exists or to a class based
@@ -67,8 +66,6 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
   const [password, setPassword] = useState(network?.password || "");
   const [security, setSecurity] = useState(securityFrom(network?.security || []));
   const hidden = network?.hidden || false;
-  const [showPassword, setShowPassword] = useState(false);
-  const visibilityIconName = showPassword ? "visibility_off" : "visibility";
 
   useEffect(() => {
     setTimeout(() => { formRef.current?.scrollIntoView({ behavior: "smooth" }) }, 200);
@@ -122,24 +119,13 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
       { security === "wpa-psk" &&
         // TRANSLATORS: WiFi password
         <FormGroup fieldId="password" label={_("WPA Password")}>
-          <InputGroup>
-            <TextInput
-              id="password"
-              name="password"
-              aria-label={_("Password")}
-              value={password}
-              type={showPassword ? 'text' : 'password'}
-              onChange={setPassword}
-            />
-            <Button
-              id="password_visibility"
-              name="password_visibility"
-              aria-label={_("Password visibility button")}
-              variant="control"
-              onClick={() => setShowPassword((prev) => !prev)}
-              icon={<Icon name={visibilityIconName} size="15" />}
-            />
-          </InputGroup>
+          <PasswordInput
+            id="password"
+            name="password"
+            aria-label={_("Password")}
+            value={password}
+            onChange={setPassword}
+          />
         </FormGroup> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>

From 0317fc9d17b08f19be5bcc759d6d54a9e0c093f0 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 22:13:38 +0200
Subject: [PATCH 20/44] added validated and isDisabled props

---
 web/src/components/core/PasswordInput.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index 9410e96a24..35084eb3ad 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -28,7 +28,7 @@ import {
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput({ id, name, ariaLabel, value, onChange }) {
+export default function PasswordInput({ id, name, ariaLabel, value, onChange, validated = "default", isDisabled = false }) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
 
@@ -40,6 +40,8 @@ export default function PasswordInput({ id, name, ariaLabel, value, onChange })
         aria-label={ariaLabel}
         value={value}
         onChange={onChange}
+        validated={validated}
+        isDisabled={isDisabled}
         type={showPassword ? 'text' : 'password'}
       />
       <Button
@@ -49,6 +51,7 @@ export default function PasswordInput({ id, name, ariaLabel, value, onChange })
         variant="control"
         onClick={() => setShowPassword((prev) => !prev)}
         icon={<Icon name={visibilityIconName} size="15" />}
+        isDisabled={isDisabled}
       />
     </InputGroup>
   );

From a51464b7aac7213e6f611869cfa62002b6b82afd Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 22:14:29 +0200
Subject: [PATCH 21/44] switched to using PasswordInput component

---
 web/src/components/storage/iscsi/AuthFields.jsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/web/src/components/storage/iscsi/AuthFields.jsx b/web/src/components/storage/iscsi/AuthFields.jsx
index 09cebbbcd8..33c8f8e660 100644
--- a/web/src/components/storage/iscsi/AuthFields.jsx
+++ b/web/src/components/storage/iscsi/AuthFields.jsx
@@ -22,7 +22,7 @@
 import React, { useEffect } from "react";
 import { FormGroup, TextInput } from "@patternfly/react-core";
 
-import { Fieldset } from "~/components/core";
+import { Fieldset, PasswordInput } from "~/components/core";
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
@@ -97,13 +97,11 @@ export default function AuthFields({ data, onChange, onValidate }) {
           helperTextInvalid={_("Incorrect password")}
           validated={showPasswordError() ? "error" : "default"}
         >
-          <TextInput
+          <PasswordInput
             id="password"
             name="password"
-            type="password"
             aria-label={_("Password")}
             value={data.password || ""}
-            label={_("Password")}
             onChange={onPasswordChange}
             validated={showPasswordError() ? "error" : "default"}
           />
@@ -134,13 +132,11 @@ export default function AuthFields({ data, onChange, onValidate }) {
           helperTextInvalid={_("Incorrect password")}
           validated={showReversePasswordError() ? "error" : "default"}
         >
-          <TextInput
+          <PasswordInput
             id="reversePassword"
             name="reversePassword"
-            type="password"
-            aria-label={_("Target Password")}
+            ariaLabel={_("Target Password")}
             value={data.reversePassword || ""}
-            label={_("Password")}
             isDisabled={!isValidAuth()}
             onChange={onReversePasswordChange}
             validated={showReversePasswordError() ? "error" : "default"}

From 3dfac771cc7fd83e38d0094e7586bc3fac2402f3 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 22:52:39 +0200
Subject: [PATCH 22/44] added autoFocus prop to PasswordInput if passed the
 text input for password will be focused

---
 web/src/components/core/PasswordInput.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index 35084eb3ad..6be680cdfc 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   Button,
   InputGroup,
@@ -28,9 +28,17 @@ import {
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput({ id, name, ariaLabel, value, onChange, validated = "default", isDisabled = false }) {
+export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, validated = "default", isDisabled = false }) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    // Focus the input element when autoFocus is true
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
 
   return (
     <InputGroup>
@@ -42,6 +50,7 @@ export default function PasswordInput({ id, name, ariaLabel, value, onChange, va
         onChange={onChange}
         validated={validated}
         isDisabled={isDisabled}
+        ref={inputRef}
         type={showPassword ? 'text' : 'password'}
       />
       <Button

From 1c007f4093a0938dd696555e7839e3459cbc2b86 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 22:53:16 +0200
Subject: [PATCH 23/44] switched to using PasswordInput component

---
 web/src/components/questions/LuksActivationQuestion.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/components/questions/LuksActivationQuestion.jsx b/web/src/components/questions/LuksActivationQuestion.jsx
index 0df04dc0ef..bec00b7221 100644
--- a/web/src/components/questions/LuksActivationQuestion.jsx
+++ b/web/src/components/questions/LuksActivationQuestion.jsx
@@ -20,9 +20,9 @@
  */
 
 import React, { useState } from "react";
-import { Alert, Form, FormGroup, Text, TextInput } from "@patternfly/react-core";
+import { Alert, Form, FormGroup, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
-import { Popup } from "~/components/core";
+import { PasswordInput, Popup } from "~/components/core";
 import { QuestionActions } from "~/components/questions";
 import { _ } from "~/i18n";
 
@@ -67,11 +67,10 @@ export default function LuksActivationQuestion({ question, answerCallback }) {
       <Form onSubmit={triggerDefaultAction}>
         {/* TRANSLATORS: field label */}
         <FormGroup label={_("Encryption Password")} fieldId="luks-password">
-          <TextInput
+          <PasswordInput
             autoFocus
             id="luks-password"
             value={password}
-            type="password"
             onChange={setPassword}
           />
         </FormGroup>

From 2c282e0c6c2a6fbf70f40445bc1f2a92aeb81c66 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 23:05:40 +0200
Subject: [PATCH 24/44] added onBlur prop to PasswordInput

---
 web/src/components/core/PasswordInput.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index 6be680cdfc..38bede0f39 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -28,7 +28,7 @@ import {
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, validated = "default", isDisabled = false }) {
+export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, onBlur, validated = "default", isDisabled = false }) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
   const inputRef = useRef(null);
@@ -50,6 +50,7 @@ export default function PasswordInput({ id, name, ariaLabel, value, onChange, au
         onChange={onChange}
         validated={validated}
         isDisabled={isDisabled}
+        onBlur={onBlur}
         ref={inputRef}
         type={showPassword ? 'text' : 'password'}
       />

From bff24006732eac01b184ec0035ab0b24f342798f Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 23:05:54 +0200
Subject: [PATCH 25/44] switched to using PasswordInput component

---
 .../core/PasswordAndConfirmationInput.jsx        | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
index 0358b902ba..70af5c5e99 100644
--- a/web/src/components/core/PasswordAndConfirmationInput.jsx
+++ b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -20,10 +20,8 @@
  */
 
 import React, { useState } from "react";
-import {
-  FormGroup,
-  TextInput
-} from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
+import { PasswordInput } from "~/components/core";
 import { _ } from "~/i18n";
 
 const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled, split = false }) => {
@@ -56,11 +54,10 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
   return (
     <div className={split ? "split" : "stack"}>
       <FormGroup fieldId="password" label={_("Password")}>
-        <TextInput
+        <PasswordInput
           id="password"
           name="password"
-          type="password"
-          aria-label={_("User password")}
+          ariaLabel={_("User password")}
           value={value}
           isDisabled={isDisabled}
           onChange={onChangeValue}
@@ -73,11 +70,10 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
         helperTextInvalid={error}
         validated={error === "" ? "default" : "error"}
       >
-        <TextInput
+        <PasswordInput
           id="passwordConfirmation"
           name="passwordConfirmation"
-          type="password"
-          aria-label={_("User password confirmation")}
+          ariaLabel={_("User password confirmation")}
           value={confirmation}
           isDisabled={isDisabled}
           onChange={onChangeConfirmation}

From e375121fbb29319867ad369908cfff6c9a5a578b Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 23:35:31 +0200
Subject: [PATCH 26/44] added FormGroup node to PasswordInput comp

---
 web/src/components/core/PasswordInput.jsx | 56 +++++++++++++----------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index 38bede0f39..49c8947f8c 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -22,13 +22,14 @@
 import React, { useState, useRef, useEffect } from "react";
 import {
   Button,
+  FormGroup,
   InputGroup,
   TextInput
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, onBlur, validated = "default", isDisabled = false }) {
+export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, onBlur, fieldId, label, helperTextInvalid, validated = "default", isDisabled = false }) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
   const inputRef = useRef(null);
@@ -41,28 +42,35 @@ export default function PasswordInput({ id, name, ariaLabel, value, onChange, au
   }, [autoFocus]);
 
   return (
-    <InputGroup>
-      <TextInput
-        id={id}
-        name={name}
-        aria-label={ariaLabel}
-        value={value}
-        onChange={onChange}
-        validated={validated}
-        isDisabled={isDisabled}
-        onBlur={onBlur}
-        ref={inputRef}
-        type={showPassword ? 'text' : 'password'}
-      />
-      <Button
-        id="password_visibility"
-        name="password_visibility"
-        aria-label={_("Password visibility button")}
-        variant="control"
-        onClick={() => setShowPassword((prev) => !prev)}
-        icon={<Icon name={visibilityIconName} size="15" />}
-        isDisabled={isDisabled}
-      />
-    </InputGroup>
+    <FormGroup
+      fieldId={fieldId}
+      label={label}
+      helperTextInvalid={helperTextInvalid}
+      validated={validated}
+    >
+      <InputGroup>
+        <TextInput
+          id={id}
+          name={name}
+          aria-label={ariaLabel}
+          value={value}
+          onChange={onChange}
+          validated={validated}
+          isDisabled={isDisabled}
+          onBlur={onBlur}
+          ref={inputRef}
+          type={showPassword ? 'text' : 'password'}
+        />
+        <Button
+          id="password_visibility"
+          name="password_visibility"
+          aria-label={_("Password visibility button")}
+          variant="control"
+          onClick={() => setShowPassword((prev) => !prev)}
+          icon={<Icon name={visibilityIconName} size="15" />}
+          isDisabled={isDisabled}
+        />
+      </InputGroup>
+    </FormGroup>
   );
 }

From f4bd01afae017c19e6adffa783888d313a4d6a41 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Mon, 18 Sep 2023 23:38:28 +0200
Subject: [PATCH 27/44] removed FormGroup from password input part FormGroup
 was added to PasswordInput component

---
 .../core/PasswordAndConfirmationInput.jsx     | 45 +++++++++----------
 .../components/network/WifiConnectionForm.jsx | 18 ++++----
 .../questions/LuksActivationQuestion.jsx      | 22 ++++-----
 .../components/storage/iscsi/AuthFields.jsx   | 38 +++++++---------
 4 files changed, 55 insertions(+), 68 deletions(-)

diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
index 70af5c5e99..f9917f887a 100644
--- a/web/src/components/core/PasswordAndConfirmationInput.jsx
+++ b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -20,7 +20,6 @@
  */
 
 import React, { useState } from "react";
-import { FormGroup } from "@patternfly/react-core";
 import { PasswordInput } from "~/components/core";
 import { _ } from "~/i18n";
 
@@ -53,34 +52,30 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
 
   return (
     <div className={split ? "split" : "stack"}>
-      <FormGroup fieldId="password" label={_("Password")}>
-        <PasswordInput
-          id="password"
-          name="password"
-          ariaLabel={_("User password")}
-          value={value}
-          isDisabled={isDisabled}
-          onChange={onChangeValue}
-          onBlur={() => validate(value, confirmation)}
-        />
-      </FormGroup>
-      <FormGroup
+      <PasswordInput
+        id="password"
+        name="password"
+        fieldId="password"
+        label={_("Password")}
+        ariaLabel={_("User password")}
+        value={value}
+        isDisabled={isDisabled}
+        onChange={onChangeValue}
+        onBlur={() => validate(value, confirmation)}
+      />
+      <PasswordInput
+        id="passwordConfirmation"
+        name="passwordConfirmation"
         fieldId="passwordConfirmation"
         label={_("Password confirmation")}
         helperTextInvalid={error}
+        ariaLabel={_("User password confirmation")}
+        value={confirmation}
+        isDisabled={isDisabled}
+        onChange={onChangeConfirmation}
+        onBlur={() => validate(value, confirmation)}
         validated={error === "" ? "default" : "error"}
-      >
-        <PasswordInput
-          id="passwordConfirmation"
-          name="passwordConfirmation"
-          ariaLabel={_("User password confirmation")}
-          value={confirmation}
-          isDisabled={isDisabled}
-          onChange={onChangeConfirmation}
-          onBlur={() => validate(value, confirmation)}
-          validated={error === "" ? "default" : "error"}
-        />
-      </FormGroup>
+      />
     </div>
   );
 };
diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 232452ec9a..1f859ee317 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -118,15 +118,15 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
       </FormGroup>
       { security === "wpa-psk" &&
         // TRANSLATORS: WiFi password
-        <FormGroup fieldId="password" label={_("WPA Password")}>
-          <PasswordInput
-            id="password"
-            name="password"
-            aria-label={_("Password")}
-            value={password}
-            onChange={setPassword}
-          />
-        </FormGroup> }
+        <PasswordInput
+          id="password"
+          name="password"
+          fieldId="password"
+          label={_("WPA Password")}
+          aria-label={_("Password")}
+          value={password}
+          onChange={setPassword}
+        /> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>
           {/* TRANSLATORS: button label, connect to a WiFi network */}
diff --git a/web/src/components/questions/LuksActivationQuestion.jsx b/web/src/components/questions/LuksActivationQuestion.jsx
index bec00b7221..c717b263c3 100644
--- a/web/src/components/questions/LuksActivationQuestion.jsx
+++ b/web/src/components/questions/LuksActivationQuestion.jsx
@@ -20,7 +20,7 @@
  */
 
 import React, { useState } from "react";
-import { Alert, Form, FormGroup, Text } from "@patternfly/react-core";
+import { Alert, Form, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { PasswordInput, Popup } from "~/components/core";
 import { QuestionActions } from "~/components/questions";
@@ -60,20 +60,20 @@ export default function LuksActivationQuestion({ question, answerCallback }) {
       aria-label={_("Question")}
       titleIconVariant={() => <Icon name="lock" size="24" />}
     >
-      { renderAlert(parseInt(question.data.attempt)) }
+      {renderAlert(parseInt(question.data.attempt))}
       <Text>
-        { question.text }
+        {question.text}
       </Text>
       <Form onSubmit={triggerDefaultAction}>
         {/* TRANSLATORS: field label */}
-        <FormGroup label={_("Encryption Password")} fieldId="luks-password">
-          <PasswordInput
-            autoFocus
-            id="luks-password"
-            value={password}
-            onChange={setPassword}
-          />
-        </FormGroup>
+        <PasswordInput
+          autoFocus
+          id="luks-password"
+          label={_("Encryption Password")}
+          fieldId="luks-password"
+          value={password}
+          onChange={setPassword}
+        />
       </Form>
 
       <Popup.Actions>
diff --git a/web/src/components/storage/iscsi/AuthFields.jsx b/web/src/components/storage/iscsi/AuthFields.jsx
index 33c8f8e660..b22b1fbe56 100644
--- a/web/src/components/storage/iscsi/AuthFields.jsx
+++ b/web/src/components/storage/iscsi/AuthFields.jsx
@@ -91,21 +91,17 @@ export default function AuthFields({ data, onChange, onValidate }) {
             validated={showUsernameError() ? "error" : "default"}
           />
         </FormGroup>
-        <FormGroup
+        <PasswordInput
+          id="password"
+          name="password"
           fieldId="password"
           label={_("Password")}
           helperTextInvalid={_("Incorrect password")}
+          aria-label={_("Password")}
+          value={data.password || ""}
+          onChange={onPasswordChange}
           validated={showPasswordError() ? "error" : "default"}
-        >
-          <PasswordInput
-            id="password"
-            name="password"
-            aria-label={_("Password")}
-            value={data.password || ""}
-            onChange={onPasswordChange}
-            validated={showPasswordError() ? "error" : "default"}
-          />
-        </FormGroup>
+        />
       </Fieldset>
       <Fieldset legend={_("Authentication by initiator")}>
         <ByInitiatorAuthTip />
@@ -126,22 +122,18 @@ export default function AuthFields({ data, onChange, onValidate }) {
             validated={showReverseUsernameError() ? "error" : "default"}
           />
         </FormGroup>
-        <FormGroup
+        <PasswordInput
+          id="reversePassword"
+          name="reversePassword"
           fieldId="reversePassword"
           label="Password"
           helperTextInvalid={_("Incorrect password")}
+          ariaLabel={_("Target Password")}
+          value={data.reversePassword || ""}
+          isDisabled={!isValidAuth()}
+          onChange={onReversePasswordChange}
           validated={showReversePasswordError() ? "error" : "default"}
-        >
-          <PasswordInput
-            id="reversePassword"
-            name="reversePassword"
-            ariaLabel={_("Target Password")}
-            value={data.reversePassword || ""}
-            isDisabled={!isValidAuth()}
-            onChange={onReversePasswordChange}
-            validated={showReversePasswordError() ? "error" : "default"}
-          />
-        </FormGroup>
+        />
       </Fieldset>
     </>
   );

From 5af26c32da970e378e29bd5816851c72212cd89b Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 01:07:02 +0200
Subject: [PATCH 28/44] added unit tests for PasswordInput component

---
 .../components/core/PasswordInput.test.jsx    | 171 ++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 web/src/components/core/PasswordInput.test.jsx

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
new file mode 100644
index 0000000000..fbe25b4833
--- /dev/null
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -0,0 +1,171 @@
+/*
+ * Copyright (c) [2022] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import React from "react";
+import { screen, fireEvent } from "@testing-library/react";
+import { plainRender } from "~/test-utils";
+import userEvent from "@testing-library/user-event";
+import PasswordInput from "./PasswordInput";
+import { _ } from "~/i18n";
+
+describe("PasswordInput Component", () => {
+  it("has initial state for password visibility as false", () => {
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+    expect(inputField).toHaveAttribute("type", "password");
+  });
+
+  it("after user clicks the eye icon type switches from password to text", async () => {
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+      />
+    );
+
+    const passwordInput = screen.getByLabelText("Password");
+    const button = screen.getByRole("button");
+
+    expect(passwordInput).toHaveAttribute("type", "password");
+    await userEvent.click(button);
+    expect(passwordInput).toHaveAttribute("type", "text")
+  });
+
+  it("can be disabled", () => {
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+        isDisabled={true}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+    const visibilityButton = screen.getByRole("button");
+
+    expect(inputField).toBeDisabled();
+    expect(visibilityButton).toBeDisabled();
+  });
+
+  it("applies autoFocus behavior correctly", () => {
+    plainRender(
+      <PasswordInput
+        autoFocus
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+
+    expect(document.activeElement).toBe(inputField);
+  });
+
+  it("displays helper text for invalid input", () => {
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+        helperTextInvalid="Invalid input"
+        validated="error"
+      />
+    );
+    const helperText = screen.getByText("Invalid input");
+
+    expect(helperText).toBeInTheDocument();
+  });
+
+  it("calls onBlur event handler", () => {
+    const onBlurMock = jest.fn();
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("User password")}
+        onBlur={onBlurMock}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+
+    fireEvent.blur(inputField);
+    expect(onBlurMock).toHaveBeenCalled();
+  });
+
+  it("ensures accessibility attributes are set correctly", () => {
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("Password")}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+    const visibilityButton = screen.getByLabelText("Password visibility button");
+
+    expect(inputField).toHaveAttribute("aria-label", "Password");
+    expect(visibilityButton).toHaveAttribute("aria-label", "Password visibility button");
+  });
+
+  it("handles setting and changing the input value", async () => {
+    let inputValue = "";
+    const handleChange = (value) => {
+      inputValue = value;
+    };
+
+    plainRender(
+      <PasswordInput
+        id="password"
+        name="password"
+        label={_("Password")}
+        fieldId="password"
+        ariaLabel={_("Password")}
+        value={inputValue}
+        onChange={handleChange}
+      />
+    );
+    const inputField = screen.getByLabelText("Password");
+    
+    await fireEvent.change(inputField, { target: { value: "newpassword" }});
+    expect(inputValue).toBe("newpassword");
+  });
+});

From 97f55fa3074b6e86cc1ea1d286e1e36dc1faf19a Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 01:20:00 +0200
Subject: [PATCH 29/44] updated changes file

---
 web/package/cockpit-agama.changes | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index bb649d2704..5e4dfa4c44 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,7 +1,9 @@
 -------------------------------------------------------------------
-Thu Sep 14 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+Thu Sep 18 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
 
-- Added Show button to the Wi-Fi password input (gh#openSUSE/agama#242).
+- Created PasswordInput component which includes eye icon button
+  used to show/hide password. Updated all components with 
+  input type password to use this comp instead (gh#openSUSE/agama#750).
 
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>

From 7aba261812b29320b94ebaaab904ed32ad5f7e19 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 15:13:48 +0200
Subject: [PATCH 30/44] adjusted description in changes file

---
 web/package/cockpit-agama.changes | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 5e4dfa4c44..3c7fc48027 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,9 +1,7 @@
 -------------------------------------------------------------------
-Thu Sep 18 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+Mon Sep 18 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
 
-- Created PasswordInput component which includes eye icon button
-  used to show/hide password. Updated all components with 
-  input type password to use this comp instead (gh#openSUSE/agama#750).
+- Allow users to show password values (gh#openSUSE/agama#750).
 
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>

From a4a356de1b19064d1116f6aa8864f9a87ac99b87 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 19:13:55 +0200
Subject: [PATCH 31/44] updated changelog

---
 web/package/cockpit-agama.changes | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 3c7fc48027..187fa506a9 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,8 +1,3 @@
--------------------------------------------------------------------
-Mon Sep 18 22:24:31 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
-
-- Allow users to show password values (gh#openSUSE/agama#750).
-
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 328f83c5f3ed905554ff173c8d13d372e94a82bd Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 20:36:40 +0200
Subject: [PATCH 32/44] removed FormGroup, simplifed props

---
 web/src/components/core/PasswordInput.jsx | 59 +++++++----------------
 1 file changed, 17 insertions(+), 42 deletions(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index 49c8947f8c..ed73e7e131 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2023] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -19,58 +19,33 @@
  * find current contact information at www.suse.com.
  */
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState } from "react";
 import {
   Button,
-  FormGroup,
   InputGroup,
   TextInput
 } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput({ id, name, ariaLabel, value, onChange, autoFocus, onBlur, fieldId, label, helperTextInvalid, validated = "default", isDisabled = false }) {
+export default function PasswordInput(props) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    // Focus the input element when autoFocus is true
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autoFocus]);
 
   return (
-    <FormGroup
-      fieldId={fieldId}
-      label={label}
-      helperTextInvalid={helperTextInvalid}
-      validated={validated}
-    >
-      <InputGroup>
-        <TextInput
-          id={id}
-          name={name}
-          aria-label={ariaLabel}
-          value={value}
-          onChange={onChange}
-          validated={validated}
-          isDisabled={isDisabled}
-          onBlur={onBlur}
-          ref={inputRef}
-          type={showPassword ? 'text' : 'password'}
-        />
-        <Button
-          id="password_visibility"
-          name="password_visibility"
-          aria-label={_("Password visibility button")}
-          variant="control"
-          onClick={() => setShowPassword((prev) => !prev)}
-          icon={<Icon name={visibilityIconName} size="15" />}
-          isDisabled={isDisabled}
-        />
-      </InputGroup>
-    </FormGroup>
+    <InputGroup>
+      <TextInput
+        {...props}
+        type={showPassword ? 'text' : 'password'}
+      />
+      <Button
+        id={`toggle-${props.id}-visibility`}
+        aria-label={_("Password visibility button")}
+        variant="control"
+        onClick={() => setShowPassword((prev) => !prev)}
+        icon={<Icon name={visibilityIconName} size="15" />}
+        isDisabled={props.isDisabled}
+      />
+    </InputGroup>
   );
 }

From 2d74e8bd2d6daca2dc7fb2f9a1f2e9cdb2bb879f Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 20:46:35 +0200
Subject: [PATCH 33/44] removed split prop and div wrapper for it reverted to
 using FormGroup

---
 .../core/PasswordAndConfirmationInput.jsx     | 51 ++++++++++---------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
index f9917f887a..d94b088c25 100644
--- a/web/src/components/core/PasswordAndConfirmationInput.jsx
+++ b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -20,10 +20,11 @@
  */
 
 import React, { useState } from "react";
+import { FormGroup } from "@patternfly/react-core";
 import { PasswordInput } from "~/components/core";
 import { _ } from "~/i18n";
 
-const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled, split = false }) => {
+const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled }) => {
   const [confirmation, setConfirmation] = useState(value || "");
   const [error, setError] = useState("");
 
@@ -51,32 +52,36 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisable
   };
 
   return (
-    <div className={split ? "split" : "stack"}>
-      <PasswordInput
-        id="password"
-        name="password"
-        fieldId="password"
-        label={_("Password")}
-        ariaLabel={_("User password")}
-        value={value}
-        isDisabled={isDisabled}
-        onChange={onChangeValue}
-        onBlur={() => validate(value, confirmation)}
-      />
-      <PasswordInput
-        id="passwordConfirmation"
-        name="passwordConfirmation"
+    <>
+      <FormGroup fieldId="password" label={_("Password")}>
+        <PasswordInput
+          id="password"
+          name="password"
+          aria-label={_("User password")}
+          value={value}
+          isDisabled={isDisabled}
+          onChange={onChangeValue}
+          onBlur={() => validate(value, confirmation)}
+        />
+      </FormGroup>
+      <FormGroup
         fieldId="passwordConfirmation"
         label={_("Password confirmation")}
         helperTextInvalid={error}
-        ariaLabel={_("User password confirmation")}
-        value={confirmation}
-        isDisabled={isDisabled}
-        onChange={onChangeConfirmation}
-        onBlur={() => validate(value, confirmation)}
         validated={error === "" ? "default" : "error"}
-      />
-    </div>
+      >
+        <PasswordInput
+          id="passwordConfirmation"
+          name="passwordConfirmation"
+          aria-label={_("User password confirmation")}
+          value={confirmation}
+          isDisabled={isDisabled}
+          onChange={onChangeConfirmation}
+          onBlur={() => validate(value, confirmation)}
+          validated={error === "" ? "default" : "error"}
+        />
+      </FormGroup>
+    </>
   );
 };
 

From b17730ff18f9c87235ccfc668435b501827c5541 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 20:48:30 +0200
Subject: [PATCH 34/44] reverted to using FormGroup

---
 .../components/network/WifiConnectionForm.jsx | 18 ++++-----
 .../questions/LuksActivationQuestion.jsx      | 24 ++++++------
 .../components/storage/iscsi/AuthFields.jsx   | 38 +++++++++++--------
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/web/src/components/network/WifiConnectionForm.jsx b/web/src/components/network/WifiConnectionForm.jsx
index 1f859ee317..232452ec9a 100644
--- a/web/src/components/network/WifiConnectionForm.jsx
+++ b/web/src/components/network/WifiConnectionForm.jsx
@@ -118,15 +118,15 @@ export default function WifiConnectionForm({ network, onCancel, onSubmitCallback
       </FormGroup>
       { security === "wpa-psk" &&
         // TRANSLATORS: WiFi password
-        <PasswordInput
-          id="password"
-          name="password"
-          fieldId="password"
-          label={_("WPA Password")}
-          aria-label={_("Password")}
-          value={password}
-          onChange={setPassword}
-        /> }
+        <FormGroup fieldId="password" label={_("WPA Password")}>
+          <PasswordInput
+            id="password"
+            name="password"
+            aria-label={_("Password")}
+            value={password}
+            onChange={setPassword}
+          />
+        </FormGroup> }
       <ActionGroup>
         <Button type="submit" variant="primary" isLoading={isConnecting} isDisabled={isConnecting}>
           {/* TRANSLATORS: button label, connect to a WiFi network */}
diff --git a/web/src/components/questions/LuksActivationQuestion.jsx b/web/src/components/questions/LuksActivationQuestion.jsx
index c717b263c3..e3d7f69706 100644
--- a/web/src/components/questions/LuksActivationQuestion.jsx
+++ b/web/src/components/questions/LuksActivationQuestion.jsx
@@ -20,7 +20,7 @@
  */
 
 import React, { useState } from "react";
-import { Alert, Form, Text } from "@patternfly/react-core";
+import { Alert, Form, FormGroup, Text } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 import { PasswordInput, Popup } from "~/components/core";
 import { QuestionActions } from "~/components/questions";
@@ -60,20 +60,20 @@ export default function LuksActivationQuestion({ question, answerCallback }) {
       aria-label={_("Question")}
       titleIconVariant={() => <Icon name="lock" size="24" />}
     >
-      {renderAlert(parseInt(question.data.attempt))}
+      { renderAlert(parseInt(question.data.attempt)) }
       <Text>
-        {question.text}
+        { question.text }
       </Text>
       <Form onSubmit={triggerDefaultAction}>
-        {/* TRANSLATORS: field label */}
-        <PasswordInput
-          autoFocus
-          id="luks-password"
-          label={_("Encryption Password")}
-          fieldId="luks-password"
-          value={password}
-          onChange={setPassword}
-        />
+        { /* TRANSLATORS: field label */ }
+        <FormGroup label={_("Encryption Password")} fieldId="luks-password">
+          <PasswordInput
+            autoFocus
+            id="luks-password"
+            value={password}
+            onChange={setPassword}
+          />
+        </FormGroup>
       </Form>
 
       <Popup.Actions>
diff --git a/web/src/components/storage/iscsi/AuthFields.jsx b/web/src/components/storage/iscsi/AuthFields.jsx
index b22b1fbe56..1241eba357 100644
--- a/web/src/components/storage/iscsi/AuthFields.jsx
+++ b/web/src/components/storage/iscsi/AuthFields.jsx
@@ -91,17 +91,21 @@ export default function AuthFields({ data, onChange, onValidate }) {
             validated={showUsernameError() ? "error" : "default"}
           />
         </FormGroup>
-        <PasswordInput
-          id="password"
-          name="password"
+        <FormGroup
           fieldId="password"
           label={_("Password")}
           helperTextInvalid={_("Incorrect password")}
-          aria-label={_("Password")}
-          value={data.password || ""}
-          onChange={onPasswordChange}
           validated={showPasswordError() ? "error" : "default"}
-        />
+        >
+          <PasswordInput
+            id="password"
+            name="password"
+            aria-label={_("Password")}
+            value={data.password || ""}
+            onChange={onPasswordChange}
+            validated={showPasswordError() ? "error" : "default"}
+          />
+        </FormGroup>
       </Fieldset>
       <Fieldset legend={_("Authentication by initiator")}>
         <ByInitiatorAuthTip />
@@ -122,18 +126,22 @@ export default function AuthFields({ data, onChange, onValidate }) {
             validated={showReverseUsernameError() ? "error" : "default"}
           />
         </FormGroup>
-        <PasswordInput
-          id="reversePassword"
-          name="reversePassword"
+        <FormGroup
           fieldId="reversePassword"
           label="Password"
           helperTextInvalid={_("Incorrect password")}
-          ariaLabel={_("Target Password")}
-          value={data.reversePassword || ""}
-          isDisabled={!isValidAuth()}
-          onChange={onReversePasswordChange}
           validated={showReversePasswordError() ? "error" : "default"}
-        />
+        >
+          <PasswordInput
+            id="reversePassword"
+            name="reversePassword"
+            aria-label={_("Target Password")}
+            value={data.reversePassword || ""}
+            isDisabled={!isValidAuth()}
+            onChange={onReversePasswordChange}
+            validated={showReversePasswordError() ? "error" : "default"}
+          />
+        </FormGroup>
       </Fieldset>
     </>
   );

From 107e20f1f15812fc16815499912c8b50f98a2073 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 20:48:44 +0200
Subject: [PATCH 35/44] adjusted test considering simplifed component

---
 .../components/core/PasswordInput.test.jsx    | 118 ++----------------
 1 file changed, 10 insertions(+), 108 deletions(-)

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
index fbe25b4833..c7d6dcc41f 100644
--- a/web/src/components/core/PasswordInput.test.jsx
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -20,39 +20,36 @@
  */
 
 import React from "react";
-import { screen, fireEvent } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import userEvent from "@testing-library/user-event";
 import PasswordInput from "./PasswordInput";
 import { _ } from "~/i18n";
 
 describe("PasswordInput Component", () => {
-  it("has initial state for password visibility as false", () => {
+  it("renders a password input", () => {
     plainRender(
       <PasswordInput
         id="password"
         name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
+        aria-label={_("User password")}
       />
     );
-    const inputField = screen.getByLabelText("Password");
+
+    const inputField = screen.getByLabelText("User password");
     expect(inputField).toHaveAttribute("type", "password");
   });
 
-  it("after user clicks the eye icon type switches from password to text", async () => {
+  it("allows revealing the password", async () => {
     plainRender(
       <PasswordInput
         id="password"
         name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
+        aria-label={_("User password")}
       />
     );
 
-    const passwordInput = screen.getByLabelText("Password");
+    const passwordInput = screen.getByLabelText("User password");
     const button = screen.getByRole("button");
 
     expect(passwordInput).toHaveAttribute("type", "password");
@@ -60,112 +57,17 @@ describe("PasswordInput Component", () => {
     expect(passwordInput).toHaveAttribute("type", "text")
   });
 
-  it("can be disabled", () => {
-    plainRender(
-      <PasswordInput
-        id="password"
-        name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
-        isDisabled={true}
-      />
-    );
-    const inputField = screen.getByLabelText("Password");
-    const visibilityButton = screen.getByRole("button");
-
-    expect(inputField).toBeDisabled();
-    expect(visibilityButton).toBeDisabled();
-  });
-
   it("applies autoFocus behavior correctly", () => {
     plainRender(
       <PasswordInput
         autoFocus
         id="password"
         name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
+        aria-label={_("User password")}
       />
     );
-    const inputField = screen.getByLabelText("Password");
 
+    const inputField = screen.getByLabelText("User password");
     expect(document.activeElement).toBe(inputField);
   });
-
-  it("displays helper text for invalid input", () => {
-    plainRender(
-      <PasswordInput
-        id="password"
-        name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
-        helperTextInvalid="Invalid input"
-        validated="error"
-      />
-    );
-    const helperText = screen.getByText("Invalid input");
-
-    expect(helperText).toBeInTheDocument();
-  });
-
-  it("calls onBlur event handler", () => {
-    const onBlurMock = jest.fn();
-    plainRender(
-      <PasswordInput
-        id="password"
-        name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("User password")}
-        onBlur={onBlurMock}
-      />
-    );
-    const inputField = screen.getByLabelText("Password");
-
-    fireEvent.blur(inputField);
-    expect(onBlurMock).toHaveBeenCalled();
-  });
-
-  it("ensures accessibility attributes are set correctly", () => {
-    plainRender(
-      <PasswordInput
-        id="password"
-        name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("Password")}
-      />
-    );
-    const inputField = screen.getByLabelText("Password");
-    const visibilityButton = screen.getByLabelText("Password visibility button");
-
-    expect(inputField).toHaveAttribute("aria-label", "Password");
-    expect(visibilityButton).toHaveAttribute("aria-label", "Password visibility button");
-  });
-
-  it("handles setting and changing the input value", async () => {
-    let inputValue = "";
-    const handleChange = (value) => {
-      inputValue = value;
-    };
-
-    plainRender(
-      <PasswordInput
-        id="password"
-        name="password"
-        label={_("Password")}
-        fieldId="password"
-        ariaLabel={_("Password")}
-        value={inputValue}
-        onChange={handleChange}
-      />
-    );
-    const inputField = screen.getByLabelText("Password");
-    
-    await fireEvent.change(inputField, { target: { value: "newpassword" }});
-    expect(inputValue).toBe("newpassword");
-  });
 });

From 7c401ff390594dc4afcf7f8037b08efca5ab2265 Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 20:50:39 +0200
Subject: [PATCH 36/44] adjusted description of css comment component is now
 used for all password inputs and not just WiFi

---
 web/src/assets/styles/patternfly-overrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 132e87c562..5df85c15b1 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -166,7 +166,7 @@ table td > .pf-c-empty-state {
   box-shadow: 0 0 0 1px var(--focus-color);
 }
 
-// Make icon centered in the visibility button in the Wi-Fi password entry from
+// Center icon in the visibility button of password input form fields
 button#password_visibility span.pf-c-button__icon {
   display: flex;
 }

From 17217c71ba0f9a83d02d746d0dd731fd68e43a6f Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 21:12:16 +0200
Subject: [PATCH 37/44] changelog

---
 web/package/cockpit-agama.changes | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
index 187fa506a9..12e9a7ef26 100644
--- a/web/package/cockpit-agama.changes
+++ b/web/package/cockpit-agama.changes
@@ -1,3 +1,8 @@
+-------------------------------------------------------------------
+Tue Sep 19 19:11:12 UTC 2023 - Balsa Asanovic <balsaasanovic95@gmail.com>
+
+- Allow users to show password values (gh#openSUSE/agama#750).
+
 -------------------------------------------------------------------
 Thu Sep 14 10:09:07 UTC 2023 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

From 370d52eb42e23628f2e0c90cb1944a88e724220a Mon Sep 17 00:00:00 2001
From: balsa-asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 21:18:43 +0200
Subject: [PATCH 38/44] missing semicolon

---
 web/src/components/core/PasswordInput.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
index c7d6dcc41f..2834715df0 100644
--- a/web/src/components/core/PasswordInput.test.jsx
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -54,7 +54,7 @@ describe("PasswordInput Component", () => {
 
     expect(passwordInput).toHaveAttribute("type", "password");
     await userEvent.click(button);
-    expect(passwordInput).toHaveAttribute("type", "text")
+    expect(passwordInput).toHaveAttribute("type", "text");
   });
 
   it("applies autoFocus behavior correctly", () => {

From 0346c080c149fdfa67e87a86987509272165c6a5 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 23:18:29 +0200
Subject: [PATCH 39/44] added className to visibility button

---
 web/src/components/core/PasswordInput.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index ed73e7e131..ff9906a4a5 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -40,6 +40,7 @@ export default function PasswordInput(props) {
       />
       <Button
         id={`toggle-${props.id}-visibility`}
+        className="password-toggler"
         aria-label={_("Password visibility button")}
         variant="control"
         onClick={() => setShowPassword((prev) => !prev)}

From 2341ca5074f9143c8be33f665d7646733decab86 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 23:18:49 +0200
Subject: [PATCH 40/44] changed CSS override to target class instead of id

---
 web/src/assets/styles/patternfly-overrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss
index 5df85c15b1..758bb3c6b3 100644
--- a/web/src/assets/styles/patternfly-overrides.scss
+++ b/web/src/assets/styles/patternfly-overrides.scss
@@ -167,6 +167,6 @@ table td > .pf-c-empty-state {
 }
 
 // Center icon in the visibility button of password input form fields
-button#password_visibility span.pf-c-button__icon {
+.password-toggler span.pf-c-button__icon {
   display: flex;
 }

From 06e6197bcc19288c92d0328f09985e4b492f5460 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 23:30:39 +0200
Subject: [PATCH 41/44] year typo correction

---
 web/src/components/core/PasswordInput.test.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
index 2834715df0..f2c7d323ca 100644
--- a/web/src/components/core/PasswordInput.test.jsx
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2022] SUSE LLC
+ * Copyright (c) [2023] SUSE LLC
  *
  * All Rights Reserved.
  *

From 578be4520ab2aeeabffffe2f02da7d13a42bf123 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Tue, 19 Sep 2023 23:53:32 +0200
Subject: [PATCH 42/44] added unit test for onChange callback

---
 .../components/core/PasswordInput.test.jsx    | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
index f2c7d323ca..e06c1652c7 100644
--- a/web/src/components/core/PasswordInput.test.jsx
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -19,7 +19,7 @@
  * find current contact information at www.suse.com.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { screen } from "@testing-library/react";
 import { plainRender } from "~/test-utils";
 import userEvent from "@testing-library/user-event";
@@ -70,4 +70,29 @@ describe("PasswordInput Component", () => {
     const inputField = screen.getByLabelText("User password");
     expect(document.activeElement).toBe(inputField);
   });
+
+  // Using a controlled component for testing the rendered result instead of testing if
+  // the given onChange callback is called. The former is more aligned with the
+  // React Testing Library principles, https://testing-library.com/docs/guiding-principles/
+  PasswordInputTest = ( props ) => {
+    const [password, setPassword] = useState(null);
+  
+    return (
+      <>
+        <PasswordInput {...props} onChange={setPassword} />
+        {password && <p>Password value updated!</p>}
+      </>
+    );
+  }
+  
+  it("triggers onChange callback", async () => {
+    const { user } = plainRender(<PasswordInputTest id="test-password" aria-label="Test password" />);
+    const passwordInput = screen.getByLabelText("Test password");
+  
+    expect(screen.queryByText("Password value updated!")).toBeNull();
+    await user.type(passwordInput, "secret");
+    
+    screen.getByText("Password value updated!");
+});
+
 });

From 7e9728728e4c22e5fbce66c82275a9065ad1c9bc Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 20 Sep 2023 10:15:59 +0200
Subject: [PATCH 43/44] corrected eslinit issues in test file

---
 web/src/components/core/PasswordInput.test.jsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/components/core/PasswordInput.test.jsx b/web/src/components/core/PasswordInput.test.jsx
index e06c1652c7..e512ac492e 100644
--- a/web/src/components/core/PasswordInput.test.jsx
+++ b/web/src/components/core/PasswordInput.test.jsx
@@ -74,25 +74,24 @@ describe("PasswordInput Component", () => {
   // Using a controlled component for testing the rendered result instead of testing if
   // the given onChange callback is called. The former is more aligned with the
   // React Testing Library principles, https://testing-library.com/docs/guiding-principles/
-  PasswordInputTest = ( props ) => {
+  const PasswordInputTest = (props) => {
     const [password, setPassword] = useState(null);
-  
+
     return (
       <>
         <PasswordInput {...props} onChange={setPassword} />
         {password && <p>Password value updated!</p>}
       </>
     );
-  }
-  
+  };
+
   it("triggers onChange callback", async () => {
     const { user } = plainRender(<PasswordInputTest id="test-password" aria-label="Test password" />);
     const passwordInput = screen.getByLabelText("Test password");
-  
+
     expect(screen.queryByText("Password value updated!")).toBeNull();
     await user.type(passwordInput, "secret");
-    
-    screen.getByText("Password value updated!");
-});
 
+    screen.getByText("Password value updated!");
+  });
 });

From 6f12cf0bba7593ce0bf6b15b9a11d6edae824972 Mon Sep 17 00:00:00 2001
From: Balsa Asanovic <balsaasanovic95@gmail.com>
Date: Wed, 20 Sep 2023 11:49:32 +0200
Subject: [PATCH 44/44] added documention data to component made id prop
 required, logging to console if it's not provided

---
 web/src/components/core/PasswordInput.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/web/src/components/core/PasswordInput.jsx b/web/src/components/core/PasswordInput.jsx
index ff9906a4a5..14a55ab58d 100644
--- a/web/src/components/core/PasswordInput.jsx
+++ b/web/src/components/core/PasswordInput.jsx
@@ -19,6 +19,15 @@
  * find current contact information at www.suse.com.
  */
 
+/**
+ * Renders a password input field and a toggle button that can be used to reveal
+ * and hide the password
+ * @component
+ *
+ * @param {string} id - the identifier for the field.
+ * @param {Object} props - props matching the {@link https://www.patternfly.org/components/forms/text-input PF/TextInput},
+ *                         except `type` that will be ignored.
+ */
 import React, { useState } from "react";
 import {
   Button,
@@ -28,18 +37,24 @@ import {
 import { Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-export default function PasswordInput(props) {
+export default function PasswordInput({ id, ...props }) {
   const [showPassword, setShowPassword] = useState(false);
   const visibilityIconName = showPassword ? "visibility_off" : "visibility";
 
+  if (!id) {
+    const field = props.label || props["aria-label"] || props.name;
+    console.error(`The PasswordInput component must have an 'id' but it was not given for '${field}'`);
+  }
+
   return (
     <InputGroup>
       <TextInput
         {...props}
+        id={id}
         type={showPassword ? 'text' : 'password'}
       />
       <Button
-        id={`toggle-${props.id}-visibility`}
+        id={`toggle-${id}-visibility`}
         className="password-toggler"
         aria-label={_("Password visibility button")}
         variant="control"