93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import "#elements/forms/HorizontalFormElement";
|
|
import "#elements/messages/MessageContainer";
|
|
import "../ak-crypto-certificate-search.js";
|
|
|
|
import { Meta } from "@storybook/web-components";
|
|
|
|
import { html, TemplateResult } from "lit";
|
|
|
|
import AkCryptoCertificateSearch from "../ak-crypto-certificate-search.js";
|
|
import { dummyCryptoCertsSearch } from "./samples.js";
|
|
|
|
const metadata: Meta<AkCryptoCertificateSearch> = {
|
|
title: "Components / Searches / CryptoCertificateKeyPair",
|
|
component: "ak-crypto-certificate-search",
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "A search function for cryptographic certificates in Authentik",
|
|
},
|
|
},
|
|
mockData: [
|
|
{
|
|
url: "/api/v3/crypto/certificatekeypairs/?has_key=true&include_details=false&ordering=name",
|
|
method: "GET",
|
|
status: 200,
|
|
response: dummyCryptoCertsSearch,
|
|
},
|
|
],
|
|
},
|
|
argTypes: {
|
|
// Typescript is unaware that arguments for components are treated as properties, and
|
|
// properties are typically renamed to lower case, even if the variable is not.
|
|
// @ts-expect-error
|
|
nokey: {
|
|
control: "boolean",
|
|
description:
|
|
"When true, certificates without valid keys will be included in the search",
|
|
},
|
|
singleton: {
|
|
control: "boolean",
|
|
description:
|
|
"Supports the SAML Source search: when true, if there is no certificate in the current form and there is one and only one certificate in the Authentik database, use that certificate by default.",
|
|
},
|
|
},
|
|
};
|
|
|
|
export default metadata;
|
|
|
|
const LIGHT = "pf-t-light";
|
|
function injectTheme() {
|
|
setTimeout(() => {
|
|
if (!document.body.classList.contains(LIGHT)) {
|
|
document.body.classList.add(LIGHT);
|
|
}
|
|
});
|
|
}
|
|
|
|
const container = (testItem: TemplateResult) => {
|
|
injectTheme();
|
|
return html` <div style="background: #fff; padding: 2em">
|
|
<style>
|
|
li {
|
|
display: block;
|
|
}
|
|
p {
|
|
margin-top: 1em;
|
|
}
|
|
</style>
|
|
<ak-message-container></ak-message-container>
|
|
${testItem}
|
|
<pre id="message-pad" style="margin-top: 1em"></pre>
|
|
</div>`;
|
|
};
|
|
|
|
export const CryptoCertificateSearch = () => {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const showMessage = (ev: CustomEvent<any>) => {
|
|
const detail = ev.detail;
|
|
delete detail.target;
|
|
document.getElementById("message-pad")!.innerText = `Event: ${JSON.stringify(
|
|
detail,
|
|
null,
|
|
2,
|
|
)}`;
|
|
};
|
|
|
|
return container(
|
|
html` <ak-form-element-horizontal name="test-crypto-certificate-search">
|
|
<ak-crypto-certificate-search @ak-change=${showMessage}></ak-crypto-certificate-search
|
|
></ak-form-element-horizontal>`,
|
|
);
|
|
};
|