From a90798ae61eea27c600ea7d0a55248a4ad6121a3 Mon Sep 17 00:00:00 2001 From: Katerina Koukiou Date: Mon, 17 Jul 2023 23:49:35 +0200 Subject: [PATCH] webui: design adjustment on the disk encryption screen The disk encryption spans now in one screen, not two. The texts were compressed and simplified. --- ui/webui/src/components/AnacondaWizard.jsx | 16 +---- .../src/components/storage/DiskEncryption.jsx | 72 ++++++++----------- .../components/storage/DiskEncryption.scss | 4 ++ ui/webui/test/check-storage | 14 +--- ui/webui/test/reference | 2 +- 5 files changed, 38 insertions(+), 70 deletions(-) create mode 100644 ui/webui/src/components/storage/DiskEncryption.scss diff --git a/ui/webui/src/components/AnacondaWizard.jsx b/ui/webui/src/components/AnacondaWizard.jsx index b8f24f10f09..1999ab249fd 100644 --- a/ui/webui/src/components/AnacondaWizard.jsx +++ b/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"); diff --git a/ui/webui/src/components/storage/DiskEncryption.jsx b/ui/webui/src/components/storage/DiskEncryption.jsx index 73abe45a8e9..b24ee5321bf 100644 --- a/ui/webui/src/components/storage/DiskEncryption.jsx +++ b/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 => ( setStorageEncryption(se => ({ ...se, encrypt }))} + body={content} /> ); const passphraseForm = ( -
- - - -
+ ); 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 ( - {_( - "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" - )} + + {_("Encryption helps secure your data, to prevent others from accessing it.")} + + + {_("Only new partitions will be encrypted. Existing partitions will remain untouched.")} + - {showPassphraseScreen ? passphraseForm : encryptedDevicesCheckbox} +
+ {encryptedDevicesCheckbox(isEncrypted ? passphraseForm : null)} +
- ); }; diff --git a/ui/webui/src/components/storage/DiskEncryption.scss b/ui/webui/src/components/storage/DiskEncryption.scss new file mode 100644 index 00000000000..00b2958620f --- /dev/null +++ b/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%); +} diff --git a/ui/webui/test/check-storage b/ui/webui/test/check-storage index c019d4d1e72..9fd3ea8d970 100755 --- a/ui/webui/test/check-storage +++ b/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() diff --git a/ui/webui/test/reference b/ui/webui/test/reference index 67ea57a8f14..30e64b7b38b 160000 --- a/ui/webui/test/reference +++ b/ui/webui/test/reference @@ -1 +1 @@ -Subproject commit 67ea57a8f1419e862a0ef9134a8b182584bcf5ee +Subproject commit 30e64b7b38b70e6a90fadc77f8e5cb5826b4217e