diff --git a/src/pages/certificates/BrowserImport.tsx b/src/pages/certificates/BrowserImport.tsx index 8d329bc99..6ebccad2e 100644 --- a/src/pages/certificates/BrowserImport.tsx +++ b/src/pages/certificates/BrowserImport.tsx @@ -1,13 +1,24 @@ import React, { FC, useState } from "react"; -import { Col, Row, Tabs } from "@canonical/react-components"; +import { + Button, + Col, + Notification, + Row, + Tabs, +} from "@canonical/react-components"; const FIREFOX = "Firefox"; const CHROME_LINUX = "Chrome (Linux)"; const CHROME_WINDOWS = "Chrome (Windows)"; const EDGE = "Edge"; -const TABS: string[] = [FIREFOX, CHROME_LINUX, CHROME_WINDOWS, EDGE]; +const MACOS = "macOS"; +const TABS: string[] = [FIREFOX, CHROME_LINUX, CHROME_WINDOWS, EDGE, MACOS]; -const BrowserImport: FC = () => { +interface Props { + sendPfx?: () => void; +} + +const BrowserImport: FC = ({ sendPfx }) => { const [activeTab, handleTabChange] = useState(FIREFOX); const windowsDialogSteps = ( @@ -27,6 +38,17 @@ const BrowserImport: FC = () => { ); + const downloadPfx = ( +
  • + Download lxd-ui.pfx + {sendPfx && ( +
    + +
    + )} +
  • + ); + return ( @@ -41,6 +63,7 @@ const BrowserImport: FC = () => { {activeTab === FIREFOX && (
      + {downloadPfx}
    • Paste this link into the address bar:
      @@ -72,6 +95,7 @@ const BrowserImport: FC = () => { {activeTab === CHROME_LINUX && (
        + {downloadPfx}
      • Paste into the address bar:
        @@ -96,6 +120,7 @@ const BrowserImport: FC = () => { {activeTab === CHROME_WINDOWS && (
          + {downloadPfx}
        • Paste into the address bar:
          @@ -114,8 +139,9 @@ const BrowserImport: FC = () => { )} {activeTab === EDGE && ( -
          +
            + {downloadPfx}
          • Paste into the address bar:
            @@ -132,6 +158,39 @@ const BrowserImport: FC = () => {
          )} + + {activeTab === MACOS && ( +
          +
            +
          • + + The certificate must be protected by password. An empty + password will fail to be imported on macOS. + +
          • + {downloadPfx} +
          • + Start the Keychain Access app on your Mac, select the login + keychain. +
          • +
          • + Drag the lxd-ui.pfx file onto the Keychain Access + app. +
          • +
          • + If you are asked to provide a name and password, type the name + and password for an administrator user on this computer. +
          • +
          • + Restart the browser and open LXD-UI. Select the LXD-UI + certificate. +
          • +
          +
          + )} ); diff --git a/src/pages/certificates/CertificateGenerate.tsx b/src/pages/certificates/CertificateGenerate.tsx index cf4bb9712..d1c40dd05 100644 --- a/src/pages/certificates/CertificateGenerate.tsx +++ b/src/pages/certificates/CertificateGenerate.tsx @@ -154,29 +154,14 @@ const CertificateGenerate: FC = () => { Import - -
          -

          - Download lxd-ui.pfx and import it into - your browser. -

          -
          - - {certs && ( - - - - )} - - - - + + downloadBase64("lxd-ui.pfx", certs.pfx) + : undefined + } + />
        • diff --git a/src/pages/certificates/PasswordModal.tsx b/src/pages/certificates/PasswordModal.tsx index f274290c1..51766c61a 100644 --- a/src/pages/certificates/PasswordModal.tsx +++ b/src/pages/certificates/PasswordModal.tsx @@ -64,6 +64,7 @@ const PasswordModal: FC = ({ onConfirm, onClose }) => { onChange={formik.handleChange} value={formik.values.password} error={formik.touched.password ? formik.errors.password : null} + help="For macOS an empty password is not allowed. On other systems this step can be skipped." /> { const crt = forge.pki.certificateToPem(cert); const asn1 = forge.pkcs12.toPkcs12Asn1(keys.privateKey, [cert], password, { + algorithm: "3des", // would like to use aes, but macOS keychain only supports 3des generateLocalKeyId: true, friendlyName: "LXD-UI", });