Skip to content

Commit

Permalink
fix(cert) improve tutorial for windows browsers #324
Browse files Browse the repository at this point in the history
  • Loading branch information
@edlerd
edlerd committed May 9, 2023
1 parent 7344b47 commit c42d520
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 19 deletions.
67 changes: 54 additions & 13 deletions src/pages/certificates/BrowserImport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,29 @@ import { Col, Row, Tabs } from "@canonical/react-components";
const FIREFOX = "Firefox";
const CHROME_LINUX = "Chrome (Linux)";
const CHROME_WINDOWS = "Chrome (Windows)";
const TABS: string[] = [FIREFOX, CHROME_LINUX, CHROME_WINDOWS];
const EDGE = "Edge";
const TABS: string[] = [FIREFOX, CHROME_LINUX, CHROME_WINDOWS, EDGE];

const BrowserImport: FC = () => {
const [activeTab, handleTabChange] = useState(FIREFOX);

const windowsDialogSteps = (
<>
<li className="p-list__item">
This opens a certificate management dialog. Click <code>Import...</code>
then <code>Next</code> and select the <code>lxd-ui.pfx</code> file you
just downloaded. Confirm an empty password. Click <code>Next</code>.
</li>
<li className="p-list__item">
Select <code>Automatically select the certificate store</code> and click{" "}
<code>Next</code>, then click <code>Finish</code>.
</li>
<li className="p-list__item">
Restart the browser and open LXD-UI. Select the LXD-UI certificate.
</li>
</>
);

return (
<Row>
<Col size={8}>
Expand All @@ -21,13 +39,13 @@ const BrowserImport: FC = () => {
/>

{activeTab === FIREFOX && (
<div tabIndex={0} role="tabpanel" aria-label="firefox">
<div role="tabpanel" aria-label="firefox">
<ul className="p-list--divided u-no-margin--bottom">
<li className="p-list__item">
Paste this link into the address bar:
<div className="p-code-snippet u-no-margin--bottom">
<pre className="p-code-snippet__block">
<code>about:preferences#privacy</code>{" "}
<code>about:preferences#privacy</code>
</pre>
</div>
</li>
Expand All @@ -43,51 +61,74 @@ const BrowserImport: FC = () => {
Select the <code>lxd-ui.pfx</code> file you just downloaded.
Confirm an empty password.
</li>
<li className="p-list__item">
Restart the browser and open LXD-UI. Select the LXD-UI
certificate.
</li>
</ul>
</div>
)}

{activeTab === CHROME_LINUX && (
<div tabIndex={1} role="tabpanel" aria-label="chrome linux">
<div role="tabpanel" aria-label="chrome linux">
<ul className="p-list--divided u-no-margin--bottom">
<li className="p-list__item">
Paste into the address bar:
<div className="p-code-snippet u-no-margin--bottom">
<pre className="p-code-snippet__block">
<code>chrome://settings/certificates</code>{" "}
<code>chrome://settings/certificates</code>
</pre>
</div>
</li>

<li className="p-list__item">
Click the <code>Import</code> button and select the{" "}
<code>lxd-ui.pfx</code> file you just downloaded. Confirm an
empty password.
</li>
<li className="p-list__item">
Restart the browser and open LXD-UI. Select the LXD-UI
certificate.
</li>
</ul>
</div>
)}

{activeTab === CHROME_WINDOWS && (
<div tabIndex={1} role="tabpanel" aria-label="chrome windows">
<div role="tabpanel" aria-label="chrome windows">
<ul className="p-list--divided u-no-margin--bottom">
<li className="p-list__item">
Paste into the address bar:
<div className="p-code-snippet u-no-margin--bottom">
<pre className="p-code-snippet__block">
<code>chrome://settings/security</code>{" "}
<code>chrome://settings/security</code>
</pre>
</div>
</li>
<li className="p-list__item">
Scroll all the way down and click the{" "}
<code>Manage Certificates</code> button.
Scroll down to the <code>Advanced settings</code> and click{" "}
<code>Manage device certificates</code>
</li>
{windowsDialogSteps}
</ul>
</div>
)}

{activeTab === EDGE && (
<div role="tabpanel" aria-label="chrome windows">
<ul className="p-list--divided u-no-margin--bottom">
<li className="p-list__item">
Click the <code>Import</code> button and select the{" "}
<code>lxd-ui.pfx</code> file you just downloaded. Confirm an
empty password.
Paste into the address bar:
<div className="p-code-snippet u-no-margin--bottom">
<pre className="p-code-snippet__block">
<code>edge://settings/privacy</code>
</pre>
</div>
</li>
<li className="p-list__item">
Scroll to the <code>Security</code> section and click{" "}
<code>Manage Certificates</code>
</li>
{windowsDialogSteps}
</ul>
</div>
)}
Expand Down
22 changes: 17 additions & 5 deletions src/pages/certificates/CertificateGenerate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@ const CertificateGenerate: FC = () => {
<li className="p-stepped-list__item">
<Row>
<Col size={3}>
<h3 className="p-stepped-list__title">Generate</h3>
<h2 className="p-stepped-list__title p-heading--3">
Generate
</h2>
</Col>
<Col size={6}>
<div className="p-stepped-list__content">
Expand Down Expand Up @@ -98,7 +100,9 @@ const CertificateGenerate: FC = () => {
<li className="p-stepped-list__item">
<Row>
<Col size={3}>
<h3 className="p-stepped-list__title">Trust</h3>
<h2 className="p-stepped-list__title p-heading--3">
Trust
</h2>
</Col>
<Col size={6}>
<div className="p-stepped-list__content">
Expand Down Expand Up @@ -129,15 +133,16 @@ const CertificateGenerate: FC = () => {
<li className="p-stepped-list__item">
<Row>
<Col size={3}>
<h3 className="p-stepped-list__title">Import</h3>
<h2 className="p-stepped-list__title p-heading--3">
Import
</h2>
</Col>
<Col size={6}>
<div className="p-stepped-list__content">
<p>
Download <code>lxd-ui.pfx</code> and import it into
your browser.
</p>
<BrowserImport />
</div>
</Col>
{certs && (
Expand All @@ -152,11 +157,18 @@ const CertificateGenerate: FC = () => {
</Col>
)}
</Row>
<Row>
<Col emptyLarge={4} size={8}>
<BrowserImport />
</Col>
</Row>
</li>
<li className="p-stepped-list__item u-no-margin--bottom">
<Row>
<Col size={3}>
<h3 className="p-stepped-list__title">Done</h3>
<h2 className="p-stepped-list__title p-heading--3">
Done
</h2>
</Col>
<Col size={6}>
<div className="p-stepped-list__content">
Expand Down
2 changes: 1 addition & 1 deletion src/sass/_certificates.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}

.p-panel__content {
max-width: 65rem !important;
max-width: 64rem !important;
padding-bottom: 0;

.p-list__item:first-child {
Expand Down

0 comments on commit c42d520

Please sign in to comment.