[web] Rework TPM texts

agama-project · Jan 17, 2024 · dd74582 · dd74582
1 parent 416e515
commit dd74582
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 20 deletions.
diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss
@@ -432,6 +432,15 @@ ul[data-of="agama/timezones"] {
 }
 
 .tpm-hint {
-  grid-template-columns: minmax(100%, 70cqw);
+  container-type: inline-size;
+  container-name: tpm-info;
   text-align: start;
+
+  .pf-v5-c-alert__title {
+    margin-block-end: var(--spacer-small);
+  }
+
+  .pf-v5-c-alert__description {
+    max-inline-size: 100%;
+  }
 }
diff --git a/web/src/components/core/InstallationFinished.jsx b/web/src/components/core/InstallationFinished.jsx
@@ -21,14 +21,13 @@
 
 import React, { useState, useEffect } from "react";
 import {
+  Alert,
   Text,
   EmptyState,
   EmptyStateBody,
   EmptyStateHeader,
   EmptyStateIcon,
   ExpandableSection,
-  Hint,
-  HintBody,
 } from "@patternfly/react-core";
 
 import { If, Page } from "~/components/core";
@@ -39,25 +38,26 @@ import { _ } from "~/i18n";
 
 const TpmHint = () => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const title = _("TPM sealing requires the new system to be booted directly.");
 
   return (
-    <Hint className="tpm-hint">
-      <HintBody>
+    <Alert isInline variant="info" className="tpm-hint" title={<strong>{title}</strong>}>
+      <div className="stack">
+        {_("If a local media was used to run this installer, remove it before the next boot.")}
         <ExpandableSection
           isExpanded={isExpanded}
           onToggle={() => setIsExpanded(!isExpanded)}
-          toggleText={
-            <strong>
-              {_("Make sure to boot directly to the new system to finish the configuration of TPM-based decryption.")}
-            </strong>
-          }
+          toggleText={isExpanded ? _("Hide details") : _("See more details")}
         >
-          <Text>
-            {_("The final step to configure the TPM to automatically open devices will take place during the first boot of the new system. For that to work, the machine needs to boot directly to the new boot loader. If a local media was used to run this installer, make sure is removed before next boot.")}
-          </Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              // TRANSLATORS: Do not translate 'abbr' and 'title', they are part of the HTML markup
+              __html: _("The final step to configure the <abbr title='Trusted Platform Module'>TPM</abbr> to automatically open encrypted devices will take place during the first boot of the new system. For that to work, the machine needs to boot directly to the new boot loader.")
+            }}
+          />
         </ExpandableSection>
-      </HintBody>
-    </Hint>
+      </div>
+    </Alert>
   );
 };
 

diff --git a/web/src/components/storage/ProposalSettingsSection.jsx b/web/src/components/storage/ProposalSettingsSection.jsx
@@ -413,6 +413,17 @@ const EncryptionSettingsForm = ({
     onSubmit(password, method);
   };
 
+  const Description = () => (
+    <span
+      dangerouslySetInnerHTML={{
+        // TRANSLATORS: The word 'directly' is key here. For example, booting to the installer media and then choosing
+        // 'Boot from Hard Disk' from there will not work. Keep it sort (this is a hint in a form) but keep it clear.
+        // Do not translate 'abbr' and 'title', they are part of the HTML markup.
+        __html: _("The password will not be needed to boot and access the data if the <abbr title='Trusted Platform Module'>TPM</abbr> can verify the integrity of the system. TPM sealing requires the new system to be booted directly on its first run.")
+      }}
+    />
+  );
+
   return (
     <Form id={id} onSubmit={submitForm}>
       <PasswordAndConfirmationInput
@@ -427,11 +438,7 @@ const EncryptionSettingsForm = ({
           <Checkbox
             id="encryption_method"
             label={_("Use the TPM to decrypt automatically on each boot")}
-            description={
-              // TRANSLATORS: The word 'directly' is key here. For example, booting to the installer media and then choosing
-              // 'Boot from Hard Disk' from there will not work. Keep it sort (this is a hint in a form) but keep it clear.
-              _("If this option is enabled, make sure to boot directly the new system after installation. Remove this installation media if needed.")
-            }
+            description={<Description />}
             isChecked={method === tpmId}
             onChange={changeMethod}
           />