forked from canonical/lxd-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(auth) allow certificate adding with tokens WD-4251 canonical#343
- Loading branch information
Showing
6 changed files
with
160 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
}); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters