Skip to content

Commit

Permalink
chore: refactor certificate requests (partly)
Browse files Browse the repository at this point in the history 
Signed-off-by: guillaume <[email protected]>
  • Loading branch information
@gruyaume
gruyaume committed Sep 16, 2024
1 parent 940c906 commit 30273f2
Show file tree
Hide file tree
Showing 4 changed files with 183 additions and 181 deletions.
146 changes: 75 additions & 71 deletions ui/src/app/certificate_requests/asideForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,100 @@
import { useMutation, useQueryClient } from "react-query";
import { extractCSR } from "../utils";
import { csrIsValid } from "../utils";
import { useCookies } from "react-cookie";
import { postCSR } from "../queries";
import { ChangeEvent, useContext, useState } from "react";
import { ChangeEvent, useContext, useState, useEffect } from "react";
import { AsideContext } from "../aside";
import { Textarea, Button, Input, Panel, Form } from "@canonical/react-components";


export default function CertificateRequestsAsidePanel(): JSX.Element {
const asideContext = useContext(AsideContext)
const [cookies, setCookie, removeCookie] = useCookies(['user_token']);
const [errorText, setErrorText] = useState<string>("")
const queryClient = useQueryClient()
const asideContext = useContext(AsideContext);
const [cookies] = useCookies(['user_token']);
const [errorText, setErrorText] = useState<string>("");
const [CSRPEMString, setCSRPEMString] = useState<string>("");
const queryClient = useQueryClient();

const mutation = useMutation(postCSR, {
onSuccess: () => {
setErrorText("")
asideContext.setIsOpen(false)
queryClient.invalidateQueries('csrs')
setErrorText("");
asideContext.setIsOpen(false);
queryClient.invalidateQueries('csrs');
},
onError: (e: Error) => {
setErrorText(e.message)
setErrorText(e.message);
}
})
const [CSRPEMString, setCSRPEMString] = useState<string>("")
});

useEffect(() => {
if (CSRPEMString && !csrIsValid(CSRPEMString)) {
setErrorText("Invalid CSR format");
} else {
setErrorText("");
}
}, [CSRPEMString]);

const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
setErrorText("")
setCSRPEMString(event.target.value);
}
};

const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
const file = event.target.files?.[0];
if (file) {
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
if (e.target) {
if (e.target.result) {
setCSRPEMString(e.target.result.toString());
}
if (e.target?.result) {
setCSRPEMString(e.target.result.toString());
}
};
reader.readAsText(file);
}
};
return (
<div className="p-panel" >
<div className="p-panel__header">
<h4 className="p-panel__title">Add a New Certificate Request</h4>
<div className="p-panel__controls">
<button onClick={() => asideContext.setIsOpen(false)} className="p-button--base u-no-margin--bottom has-icon"><i className="p-icon--close"></i></button>
</div>
</div>
<div className="p-panel__content">
<form className="p-form p-form--stacked">
<div className="p-form__group row">
<label htmlFor="textarea">
Enter or upload the CSR in PEM format below
</label>
<textarea id="csr-textarea" name="textarea" rows={10} placeholder="-----BEGIN CERTIFICATE REQUEST-----" onChange={handleTextChange} value={CSRPEMString} />
</div>
<div className="p-form__group row">
<input type="file" name="upload" accept=".pem,.csr" onChange={handleFileChange}></input>
</div>
<div className="p-form__group row">
<SubmitCSR csrText={CSRPEMString} errorText={errorText} onClickFunc={() => mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString })} />
</div>
</form>
</div>
</div >
)
}

function SubmitCSR({ csrText, errorText, onClickFunc }: { csrText: string, errorText: string, onClickFunc: any }) {
let csrIsValid = false
try {
extractCSR(csrText.trim())
csrIsValid = true
}
catch { }
const validationComponent = csrText == "" ? <></> : csrIsValid ? <div><i className="p-icon--success"></i>Valid CSR</div> : <div><i className="p-icon--error"></i>Invalid CSR</div>
const buttonComponent = csrIsValid ? (
<button className="p-button--positive u-float-right" name="submit" onClick={(e) => { e.preventDefault(); onClickFunc() }} > Submit</button >
) : (
<button className="p-button--positive u-float-right" name="submit" disabled={true} onClick={(e) => { e.preventDefault(); onClickFunc() }} >Submit</button>)
const handleSubmit = () => {
mutation.mutate({ authToken: cookies.user_token, csr: CSRPEMString });
};

return (
<>
{errorText != "" &&
<div className="p-notification--negative">
<div className="p-notification__content">
<h5 className="p-notification__title">Error</h5>
<p className="p-notification__message">{errorText.split("error: ")}</p>
</div>
</div>
<Panel
title="Add a New Certificate Request"
controls={
<Button onClick={() => asideContext.setIsOpen(false)} hasIcon>
<i className="p-icon--close" />
</Button>
}
{validationComponent}
{buttonComponent}
</>
)
}
>
<Form stacked={true}>
<div className="p-form__group row">
<Textarea
name="textarea"
id="csr-textarea"
label="Enter or upload the CSR in PEM format below"
placeholder="-----BEGIN CERTIFICATE REQUEST-----"
rows={10}
onChange={handleTextChange}
value={CSRPEMString}
error={errorText}
/>
</div>
<div className="p-form__group row">
<Input
type="file"
name="upload"
accept=".pem,.csr"
onChange={handleFileChange}
/>
</div>
<div className="p-form__group row">
<Button
appearance="positive"
name="submit"
disabled={!csrIsValid(CSRPEMString)}
onClick={handleSubmit}
>
Submit
</Button>
</div>
</Form>
</Panel>
);
}
Loading

0 comments on commit 30273f2

Please sign in to comment.