From d930130f2c4153dc4f9162c22e74b377bb91c0fe Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Wed, 7 Jun 2023 15:58:56 +0200
Subject: [PATCH] feat(auth) allow certificate adding with tokens WD-4251 #343

---
 src/App.tsx                                   |  2 +
 src/api/certificates.tsx                      | 17 ++++
 src/components/Navigation.tsx                 |  2 +-
 src/pages/certificates/CertificateAdd.tsx     | 87 +++++++++++++++++++
 src/pages/certificates/CertificateAddForm.tsx | 46 ++++++++++
 src/pages/certificates/CertificateMain.tsx    |  7 ++
 6 files changed, 160 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/certificates/CertificateAdd.tsx
 create mode 100644 src/pages/certificates/CertificateAddForm.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2500e66ab..b56c06f45 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,6 +17,7 @@ const InstanceDetail = lazy(() => import("pages/instances/InstanceDetail"));
 const StorageList = lazy(() => import("pages/storage/StorageList"));
 const ProfileDetail = lazy(() => import("pages/profiles/ProfileDetail"));
 const OperationList = lazy(() => import("pages/operations/OperationList"));
+const CertificateAdd = lazy(() => import("pages/certificates/CertificateAdd"));
 const CertificateGenerate = lazy(
   () => import("pages/certificates/CertificateGenerate")
 );
@@ -245,6 +246,7 @@ const App: FC = () => {
           path="/ui/certificates/generate"
           element={<CertificateGenerate />}
         />
+        <Route path="/ui/certificates/add" element={<CertificateAdd />} />
         <Route path="*" element={<NoMatch />} />
       </Routes>
     </Suspense>
diff --git a/src/api/certificates.tsx b/src/api/certificates.tsx
index e116f4185..cf2d0c26e 100644
--- a/src/api/certificates.tsx
+++ b/src/api/certificates.tsx
@@ -1,2 +1,19 @@
+import { handleResponse } from "util/helpers";
+
 export const checkAuth = () =>
   fetch("/1.0/certificates").then((response) => response.status !== 403);
+
+export const addCertificate = (token: string) => {
+  return new Promise((resolve, reject) => {
+    fetch(`/1.0/certificates`, {
+      method: "POST",
+      body: JSON.stringify({
+        type: "client",
+        password: token,
+      }),
+    })
+      .then(handleResponse)
+      .then(resolve)
+      .catch(reject);
+  });
+};
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 6b750febe..51033bb3f 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -213,7 +213,7 @@ const Navigation: FC = () => {
                       <li className="p-side-navigation__item">
                         <NavLink
                           className="p-side-navigation__link"
-                          to="/ui/certificates/generate"
+                          to="/ui/certificates"
                           title="Authentication"
                         >
                           <Icon
diff --git a/src/pages/certificates/CertificateAdd.tsx b/src/pages/certificates/CertificateAdd.tsx
new file mode 100644
index 000000000..ed66c93d6
--- /dev/null
+++ b/src/pages/certificates/CertificateAdd.tsx
@@ -0,0 +1,87 @@
+import React, { FC } from "react";
+import { Col, Row } from "@canonical/react-components";
+import { Navigate } from "react-router-dom";
+import { useAuth } from "context/auth";
+import Loader from "components/Loader";
+import CertificateAddForm from "pages/certificates/CertificateAddForm";
+import NotificationRow from "components/NotificationRow";
+
+const CertificateAdd: FC = () => {
+  const { isAuthenticated, isAuthLoading } = useAuth();
+
+  if (isAuthLoading) {
+    return <Loader />;
+  }
+
+  if (isAuthenticated) {
+    return <Navigate to="/ui" replace={true} />;
+  }
+
+  return (
+    <main className="l-main certificate-generate">
+      <div className="p-panel">
+        <div className="p-panel__header is-sticky">
+          <h1 className="p-panel__title">Add existing certificate</h1>
+        </div>
+        <div className="p-panel__content">
+          <NotificationRow />
+          <Row className="u-no-margin--left">
+            <Col size={12}>
+              <ol className="p-stepped-list--detailed">
+                <li className="p-stepped-list__item">
+                  <Row>
+                    <Col size={3}>
+                      <h2 className="p-stepped-list__title p-heading--3">
+                        Create token
+                      </h2>
+                    </Col>
+                    <Col size={6}>
+                      <div className="p-stepped-list__content">
+                        <p>Generate a token on the command line</p>
+                        <div className="p-code-snippet">
+                          <pre className="p-code-snippet__block--icon">
+                            <code>lxc config trust add --name lxd-ui</code>
+                          </pre>
+                        </div>
+                      </div>
+                    </Col>
+                  </Row>
+                </li>
+                <li className="p-stepped-list__item">
+                  <Row>
+                    <Col size={3}>
+                      <h2 className="p-stepped-list__title p-heading--3">
+                        Import
+                      </h2>
+                    </Col>
+                    <Col size={6}>
+                      <div className="p-stepped-list__content">
+                        <CertificateAddForm />
+                      </div>
+                    </Col>
+                  </Row>
+                </li>
+                <li className="p-stepped-list__item u-no-margin--bottom">
+                  <Row>
+                    <Col size={3}>
+                      <h2 className="p-stepped-list__title p-heading--3">
+                        Done
+                      </h2>
+                    </Col>
+                    <Col size={6}>
+                      <div className="p-stepped-list__content">
+                        <p>Enjoy LXD UI.</p>
+                      </div>
+                    </Col>
+                  </Row>
+                </li>
+              </ol>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default CertificateAdd;
diff --git a/src/pages/certificates/CertificateAddForm.tsx b/src/pages/certificates/CertificateAddForm.tsx
new file mode 100644
index 000000000..6c6c2a6f0
--- /dev/null
+++ b/src/pages/certificates/CertificateAddForm.tsx
@@ -0,0 +1,46 @@
+import React, { FC, useState } from "react";
+import { Button, Form, Textarea } from "@canonical/react-components";
+import { addCertificate } from "api/certificates";
+import { useNotify } from "context/notify";
+
+const CertificateAddForm: FC = () => {
+  const notify = useNotify();
+  const [token, setToken] = useState("");
+
+  const useToken = () => {
+    const sanitisedToken =
+      token
+        .trim()
+        .split(/\r?\n|\r|\n/g)
+        .at(-1) ?? "";
+
+    addCertificate(sanitisedToken)
+      .then(() => {
+        location.reload();
+      })
+      .catch((e) => notify.failure("Error using token", e));
+  };
+
+  return (
+    <Form>
+      <Textarea
+        id="token"
+        name="token"
+        label="Paste the token from the previous step"
+        placeholder="Paste your token here"
+        rows={3}
+        onChange={(e) => setToken(e.target.value)}
+      />
+      <Button
+        appearance="positive"
+        disabled={token.length < 1}
+        type="button"
+        onClick={useToken}
+      >
+        Import
+      </Button>
+    </Form>
+  );
+};
+
+export default CertificateAddForm;
diff --git a/src/pages/certificates/CertificateMain.tsx b/src/pages/certificates/CertificateMain.tsx
index 944e74471..79dd66833 100644
--- a/src/pages/certificates/CertificateMain.tsx
+++ b/src/pages/certificates/CertificateMain.tsx
@@ -32,6 +32,13 @@ const CertificateMain: FC = () => {
         >
           Setup
         </Button>
+        <p>
+          If you have imported a client certificate to your browser previously,
+          add it to this LXD instance using tokens.
+        </p>
+        <Button onClick={() => navigate("/ui/certificates/add")}>
+          Add cert
+        </Button>
       </EmptyState>
     </BaseLayout>
   );