web: EncryptionSettingsDialog refinement

web/src/components/storage/EncryptionSettingsDialog.jsx

@@ -55,34 +55,36 @@ TPM sealing requires the new system to be booted directly on its first run.");
  * @property {boolean} [isOpen=false] - Whether the dialog is visible or not.
  * @property {() => void} onCancel - Callback to trigger when on cancel action.
  * @property {(settings: EncryptionSetting) => void} onAccept - Callback to trigger on accept action.
+ *
+ * @param {EncryptionSettingsDialogProps} props
  */
 export default function EncryptionSettingsDialog({
-  password,
-  method,
+  password: passwordProp,
+  method: methodProp,
   methods,
   isOpen = false,
   onCancel,
   onAccept
 }) {
-  const [isEnabled, setIsEnabled] = useState(password?.length > 0);
-  const [newPassword, setNewPassword] = useState(password);
-  const [newMethod, setNewMethod] = useState(method);
+  const [isEnabled, setIsEnabled] = useState(passwordProp?.length > 0);
+  const [password, setPassword] = useState(passwordProp);
+  const [method, setMethod] = useState(methodProp);
   const [passwordsMatch, setPasswordsMatch] = useState(true);
   const [validSettings, setValidSettings] = useState(true);
   const formId = "encryptionSettingsForm";
 
   useEffect(() => {
-    setValidSettings(!isEnabled || (newPassword.length > 0 && passwordsMatch));
-  }, [isEnabled, newPassword, passwordsMatch]);
+    setValidSettings(!isEnabled || (password.length > 0 && passwordsMatch));
+  }, [isEnabled, password, passwordsMatch]);
 
-  const changePassword = (_, v) => setNewPassword(v);
-  const changeMethod = (_, value) => setNewMethod(value ? EncryptionMethods.TPM : EncryptionMethods.LUKS2);
+  const changePassword = (_, v) => setPassword(v);
+  const changeMethod = (_, useTPM) => setMethod(useTPM ? EncryptionMethods.TPM : EncryptionMethods.LUKS2);
 
   const submitSettings = (e) => {
     e.preventDefault();
 
     if (isEnabled) {
-      onAccept({ password: newPassword, method: newMethod });
+      onAccept({ password, method });
     } else {
       onAccept({ password: "" });
     }
@@ -99,7 +101,7 @@ export default function EncryptionSettingsDialog({
       >
         <Form id={formId} onSubmit={submitSettings}>
           <PasswordAndConfirmationInput
-            value={newPassword}
+            value={password}
             onChange={changePassword}
             onValidation={setPasswordsMatch}
             isDisabled={!isEnabled}

web/src/components/storage/EncryptionSettingsDialog.test.jsx

@@ -111,6 +111,25 @@ describe("EncryptionSettingsDialog", () => {
     });
   });
 
+  describe("when using TPM", () => {
+    beforeEach(() => {
+      props.method = EncryptionMethods.TPM;
+    });
+
+    it("allows to stop using it", async () => {
+      const { user } = plainRender(<EncryptionSettingsDialog {...props} />);
+      const tpmCheckbox = screen.queryByRole("checkbox", { name: /Use the TPM/ });
+      const acceptButton = screen.queryByRole("button", { name: "Accept" });
+      expect(tpmCheckbox).toBeChecked();
+      await user.click(tpmCheckbox);
+      expect(tpmCheckbox).not.toBeChecked();
+      await user.click(acceptButton);
+      expect(props.onAccept).toHaveBeenCalledWith(
+        expect.not.objectContaining({ method: EncryptionMethods.TPM })
+      );
+    });
+  });
+
   describe("when TPM is not included in given methods", () => {
     beforeEach(() => {
       props.methods = [EncryptionMethods.LUKS2];