[web] Allow disabling PasswordAndConfirmation input

agama-project · Dec 5, 2022 · a5c3937 · a5c3937
1 parent dad1b62
commit a5c3937
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/web/src/components/core/PasswordAndConfirmationInput.jsx b/web/src/components/core/PasswordAndConfirmationInput.jsx
@@ -25,7 +25,7 @@ import {
   TextInput
 } from "@patternfly/react-core";
 
-const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
+const PasswordAndConfirmationInput = ({ value, onChange, onValidation, isDisabled }) => {
   const [confirmation, setConfirmation] = useState(value || "");
   const [error, setError] = useState("");
 
@@ -61,6 +61,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
           type="password"
           aria-label="User password"
           value={value}
+          isDisabled={isDisabled}
           onChange={onChangeValue}
           onBlur={() => validate(value, confirmation)}
         />
@@ -77,6 +78,7 @@ const PasswordAndConfirmationInput = ({ value, onChange, onValidation }) => {
           type="password"
           aria-label="User password confirmation"
           value={confirmation}
+          isDisabled={isDisabled}
           onChange={onChangeConfirmation}
           onBlur={() => validate(value, confirmation)}
           validated={error === "" ? "default" : "error"}

diff --git a/web/src/components/core/PasswordAndConfirmationInput.test.jsx b/web/src/components/core/PasswordAndConfirmationInput.test.jsx
@@ -38,8 +38,8 @@ describe("when the passwords do not match", () => {
 });
 
 it("uses the given password value for confirmation too", async () => {
-  const { user } = plainRender(
-    <PasswordAndConfirmationInput value={"12345"} />
+  plainRender(
+    <PasswordAndConfirmationInput value="12345" />
   );
 
   const passwordInput = screen.getByLabelText("Password");
@@ -48,3 +48,15 @@ it("uses the given password value for confirmation too", async () => {
   expect(passwordInput.value).toEqual("12345");
   expect(passwordInput.value).toEqual(confirmationInput.value);
 });
+
+it("disables both, password and confirmation, when isDisabled prop is given", async () => {
+  plainRender(
+    <PasswordAndConfirmationInput value="12345" isDisabled />
+  );
+
+  const passwordInput = screen.getByLabelText("Password");
+  const confirmationInput = screen.getByLabelText("Password confirmation");
+
+  expect(passwordInput).toBeDisabled();
+  expect(confirmationInput).toBeDisabled();
+});
diff --git a/web/src/components/storage/ProposalSettingsForm.jsx b/web/src/components/storage/ProposalSettingsForm.jsx
@@ -91,7 +91,6 @@ export default function ProposalSettingsForm({ id, proposal, onSubmit, onValidat
         onChange={onLvmChange}
       />
       <Fieldset
-        isDisabled={!state.encryption}
         legend={
           <Switch
             id="encryption"
@@ -105,6 +104,7 @@ export default function ProposalSettingsForm({ id, proposal, onSubmit, onValidat
         <PasswordAndConfirmationInput
           id="encryptionPassword"
           value={state.encryptionPassword}
+          isDisabled={!state.encryption}
           onChange={onPasswordChange}
           onValidation={onEncryptionValidate}
         />