Merge pull request #4925 from KKoukiou/webui-encryption

webui: design adjustment on the disk encryption screen

ui/webui/src/components/AnacondaWizard.jsx

@@ -54,7 +54,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
     const [stepNotification, setStepNotification] = useState();
     const [isInProgress, setIsInProgress] = useState(false);
     const [storageEncryption, setStorageEncryption] = useState(new StorageEncryptionState());
-    const [showPassphraseScreen, setShowPassphraseScreen] = useState(false);
     const [storageScenarioId, setStorageScenarioId] = useState(window.sessionStorage.getItem("storage-scenario-id") || getDefaultScenario().id);
     const lastPartitioning = useMemo(() => {
         const lastPartitioningKey = Object.keys(storageData.partitioning || {}).find(path => parseInt(path.match(/\d+$/)[0]) === Object.keys(storageData.partitioning).length);
@@ -178,7 +177,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
                           isInProgress={isInProgress}
                           storageEncryption={storageEncryption}
                           setStorageEncryption={setStorageEncryption}
-                          showPassphraseScreen={showPassphraseScreen}
                           storageScenarioId={storageScenarioId}
                           isBootIso={isBootIso}
                           setStorageScenarioId={(scenarioId) => {
@@ -218,8 +216,6 @@ export const AnacondaWizard = ({ dispatch, isBootIso, storageData, localizationD
                 isInProgress={isInProgress}
                 setIsInProgress={setIsInProgress}
                 storageEncryption={storageEncryption}
-                showPassphraseScreen={showPassphraseScreen}
-                setShowPassphraseScreen={setShowPassphraseScreen}
                 storageScenarioId={storageScenarioId}
                 isBootIso={isBootIso}
               />}
@@ -244,8 +240,6 @@ const Footer = ({
     partitioning,
     setIsInProgress,
     storageEncryption,
-    showPassphraseScreen,
-    setShowPassphraseScreen,
     storageScenarioId,
     isBootIso
 }) => {
@@ -257,10 +251,6 @@ const Footer = ({
         setIsFormValid(true);
 
         if (activeStep.id === "disk-encryption") {
-            if (!showPassphraseScreen && storageEncryption.encrypt) {
-                setShowPassphraseScreen(true);
-                return;
-            }
             setIsInProgress(true);
 
             applyStorage({
@@ -309,11 +299,7 @@ const Footer = ({
     const goToPreviousStep = (activeStep, onBack) => {
         // first reset validation state to default
         setIsFormValid(true);
-        if (activeStep.id === "disk-encryption" && showPassphraseScreen) {
-            setShowPassphraseScreen(false);
-        } else {
-            onBack();
-        }
+        onBack();
         if (activeStep.id === "installation-review") {
             resetPartitioning().then(() => {
                 console.log("resetPartitioning");

ui/webui/src/components/storage/DiskEncryption.jsx

@@ -25,7 +25,6 @@ import {
     EmptyStateIcon,
     Form,
     FormGroup,
-    FormSection,
     FormHelperText,
     HelperText,
     HelperTextItem,
@@ -47,6 +46,7 @@ import ExclamationTriangleIcon from "@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
 
 import { AnacondaPage } from "../AnacondaPage.jsx";
+import "./DiskEncryption.scss";
 
 const _ = cockpit.gettext;
 
@@ -224,52 +224,40 @@ export const DiskEncryption = ({
     setIsFormValid,
     storageEncryption,
     setStorageEncryption,
-    showPassphraseScreen,
 }) => {
     const [password, setPassword] = useState(storageEncryption.password);
     const [confirmPassword, setConfirmPassword] = useState(storageEncryption.confirmPassword);
     const [passwordStrength, setPasswordStrength] = useState("");
     const [ruleLength, setRuleLength] = useState("indeterminate");
     const [ruleConfirmMatches, setRuleConfirmMatches] = useState("indeterminate");
-    const encryptedDevicesCheckbox = (
+    const isEncrypted = storageEncryption.encrypt;
+    const encryptedDevicesCheckbox = content => (
         <Checkbox
           id={idPrefix + "-encrypt-devices"}
-          label={_("Yes, I want device encryption (optional)")}
-          description={_(
-              "If you select this option you will be asked to create an encryption passphrase." +
-              " You will use the passphrase to access your data when you start your computer." +
-              " You won't be able to switch between keyboard layouts (from the default one)" +
-              " when you decrypt your disks after install."
-          )}
-          isChecked={storageEncryption.encrypt}
+          label={_("Encrypt my data")}
+          isChecked={isEncrypted}
           onChange={(encrypt) => setStorageEncryption(se => ({ ...se, encrypt }))}
+          body={content}
         />
     );
 
     const passphraseForm = (
-        <Form>
-            <FormSection
-              title={_("Create a passphrase")}
-              titleElement="h3"
-            >
-                <PasswordFormFields
-                  idPrefix={idPrefix}
-                  password={password}
-                  passwordLabel={_("Passphrase")}
-                  passwordStrength={passwordStrength}
-                  passwordConfirm={confirmPassword}
-                  passwordConfirmLabel={_("Confirm passphrase")}
-                  ruleLength={ruleLength}
-                  ruleConfirmMatches={ruleConfirmMatches}
-                  onChange={setPassword}
-                  onConfirmChange={setConfirmPassword}
-                />
-            </FormSection>
-        </Form>
+        <PasswordFormFields
+          idPrefix={idPrefix}
+          password={password}
+          passwordLabel={_("Passphrase")}
+          passwordStrength={passwordStrength}
+          passwordConfirm={confirmPassword}
+          passwordConfirmLabel={_("Confirm passphrase")}
+          ruleLength={ruleLength}
+          ruleConfirmMatches={ruleConfirmMatches}
+          onChange={setPassword}
+          onConfirmChange={setConfirmPassword}
+        />
     );
 
     useEffect(() => {
-        const updateValidity = async (password, confirmPassword, showPassphraseScreen) => {
+        const updateValidity = async (password, confirmPassword, isEncrypted) => {
             const passwordStrength = await getPasswordStrength(password);
             setPasswordStrength(passwordStrength);
             const ruleLength = getRuleLength(password);
@@ -281,11 +269,11 @@ export const DiskEncryption = ({
                 ruleConfirmMatches === "success" &&
                 isValidStrength(passwordStrength)
             );
-            setIsFormValid(!showPassphraseScreen || passphraseValid);
+            setIsFormValid(!isEncrypted || passphraseValid);
         };
 
-        updateValidity(password, confirmPassword, showPassphraseScreen);
-    }, [setIsFormValid, showPassphraseScreen, password, confirmPassword]);
+        updateValidity(password, confirmPassword, isEncrypted);
+    }, [setIsFormValid, isEncrypted, password, confirmPassword]);
 
     useEffect(() => {
         setStorageEncryption(se => ({ ...se, password, confirmPassword }));
@@ -298,14 +286,16 @@ export const DiskEncryption = ({
     return (
         <AnacondaPage title={_("Encrypt the selected devices?")}>
             <TextContent>
-                {_(
-                    "You can create encrypted devices during installation." +
-                    " This allows you to easily configure a system with encrypted partitions." +
-                    " To enable block device encryption, check the \"Encrypt System\" checkbox"
-                )}
+                <Text component={TextVariants.p}>
+                    {_("Encryption helps secure your data, to prevent others from accessing it.")}
+                </Text>
+                <Text component={TextVariants.p}>
+                    {_("Only new partitions will be encrypted. Existing partitions will remain untouched.")}
+                </Text>
             </TextContent>
-            {showPassphraseScreen ? passphraseForm : encryptedDevicesCheckbox}
+            <Form>
+                {encryptedDevicesCheckbox(isEncrypted ? passphraseForm : null)}
+            </Form>
         </AnacondaPage>
-
     );
 };

ui/webui/src/components/storage/DiskEncryption.scss

@@ -0,0 +1,4 @@
+// Span disk encryption password fields to take slightly more width than the default
+#disk-encryption-encrypt-devices ~.pf-c-check__body {
+  width: min(60ch, 100%);
+}

ui/webui/test/check-storage

@@ -118,10 +118,7 @@ class TestStorage(anacondalib.VirtInstallMachineCase):
         # The value is preserved
         s.check_encryption_selected(encrypt)
 
-        # Encryption password is on the same page
-        i.next(subpage=encrypt)
         # Disk Encryption / password screen
-
         b.assert_pixels(
             "#app",
             "storage-step-password",
@@ -154,13 +151,7 @@ class TestStorage(anacondalib.VirtInstallMachineCase):
         s.check_pw_rule("match", "error")
         s.set_password_confirm("abcdefgh")
         s.check_pw_rule("match", "success")
-        i.check_next_disabled(disabled=False)
-
-        # Check the values are preserved on Back and Next
-        i.back(subpage=True)
-        i.next(subpage=encrypt)
         s.check_pw_rule("8-chars", "success")
-        s.check_pw_rule("match", "success")
         s.check_pw_strength("weak")
         s.check_password("abcdefgh")
         s.check_password_confirm("abcdefgh")
@@ -211,12 +202,9 @@ class TestStorage(anacondalib.VirtInstallMachineCase):
         # Review screen
 
         i.back()
-        # Disk Encryption / password screen
+        # Disk Encryption
         s.check_password_confirm(pw)
         s.check_password(pw)
-
-        i.back(subpage=encrypt)
-        # Disk Encryption
         s.check_encryption_selected(encrypt)
 
         i.back()