@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
407 lines (372 loc) • 8.6 kB
JavaScript
(() => {
/**
* Utils section.
*/
function throttle(func, ms) {
let isThrottled = false;
let savedArgs;
let savedThis;
function wrapper() {
if (isThrottled) {
savedArgs = arguments;
savedThis = this;
return;
}
func.apply(this, arguments);
isThrottled = true;
setTimeout(
() => {
isThrottled = false;
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
},
ms,
);
}
return wrapper;
}
/**
*
*/
const options = [
{
type: 'title',
label: 'UI Options',
},
{
type: 'select',
name: 'language',
label: 'Language',
value: [
{
value: 'en',
name: 'English',
},
{
value: 'el',
name: 'Ελληνικά',
},
{
value: 'es',
name: 'Español',
},
{
value: 'de',
name: 'Deutsch',
},
{
value: 'he',
name: 'עברית',
},
{
value: 'it',
name: 'Italiano',
},
{
value: 'nl',
name: 'Nederlands, Vlaams',
},
{
value: 'pl',
name: 'Polski',
},
{
value: 'pt',
name: 'Português',
},
{
value: 'ru',
name: 'Русский',
},
{
value: 'fr',
name: 'français, langue française',
},
{
value: 'tr',
name: 'Türkçe',
},
{
value: 'ja',
name: '日本語',
},
],
},
{
type: 'checkbox',
name: 'hideFooter',
label: 'Hide Footer',
},
{
type: 'title',
label: 'Filter Options',
},
{
type: 'checkbox',
name: 'expired',
label: 'Expired',
isFilter: true,
},
{
type: 'checkbox',
name: 'onlySmartcards',
label: 'Only Smart Cards',
isFilter: true,
},
{
type: 'checkbox',
name: 'onlyWithPrivateKey',
label: 'Only With Private Key',
isFilter: true,
},
{
type: 'checkbox',
name: 'onlyQualified',
label: 'Only Qualified',
isFilter: true,
},
{
type: 'checkbox',
name: 'ca',
label: 'Show CA Certificates',
isFilter: true,
},
{
type: 'input',
name: 'subjectDNMatch',
label: 'Subject Display Name Match',
isFilter: true,
},
{
type: 'input',
name: 'issuerDNMatch',
label: 'Issuer Display Name Match',
isFilter: true,
},
{
type: 'input',
name: 'providerNameMatch',
label: 'Provider Name Match',
isFilter: true,
},
{
type: 'input',
name: 'providerATRMatch',
label: 'Provider ATR Match',
isFilter: true,
},
{
type: 'input',
name: 'certificateIdMatch',
label: 'Certificate Id Match',
isFilter: true,
},
{
type: 'select',
name: 'keyUsage',
label: 'Key Usage',
value: [
{
value: '',
name: '',
},
{
value: 'digitalSignature',
name: 'digitalSignature',
},
{
value: 'nonRepudiation',
name: 'nonRepudiation',
},
{
value: 'keyEncipherment',
name: 'keyEncipherment',
},
{
value: 'dataEncipherment',
name: 'dataEncipherment',
},
{
value: 'keyAgreement',
name: 'keyAgreement',
},
{
value: 'keyCertSign',
name: 'keyCertSign',
},
{
value: 'crlSign',
name: 'crlSign',
},
{
value: 'encipherOnly',
name: 'encipherOnly',
},
{
value: 'decipherOnly',
name: 'decipherOnly',
},
],
isFilter: true,
isArray: true,
},
{
type: 'title',
label: 'Theming',
},
{
type: 'color',
name: 'primary',
label: 'Primary color',
defaultValue: '#5ebc54',
},
{
type: 'color',
name: 'secondary',
label: 'Secondary color',
defaultValue: '#377ff4',
},
{
type: 'color',
name: 'black',
label: 'Main text color',
defaultValue: '#293033',
},
{
type: 'color',
name: 'gray-9',
label: 'Secondary text color',
defaultValue: '#8F999E',
},
{
type: 'color',
name: 'white',
label: 'Background color',
defaultValue: '#ffffff',
},
{
type: 'color',
name: 'footer',
label: 'Footer color',
defaultValue: '#FBFCFD',
},
{
type: 'color',
name: 'footer-text',
label: 'Footer text color',
defaultValue: '#8F999E',
},
];
const propsSaved = {
filters: {},
};
const updateFWC = throttle((props) => {
const newFWC = document.createElement('peculiar-fortify-certificates');
newFWC.id = 'fwc';
if (props.filters) {
Object.assign(propsSaved.filters, props.filters || {});
} else {
Object.assign(propsSaved, props);
}
Object.assign(newFWC, propsSaved);
wc_wrapper.replaceChild(newFWC, fwc);
}, 500);
const handleChange = (option, value, name) => {
let _value = value;
if (option.isArray) {
_value = [value];
}
if (option.isFilter) {
updateFWC({
filters: {
[name]: _value,
},
});
} else {
updateFWC({
[name]: _value,
});
}
};
/**
* Render options.
*/
options.forEach((option) => {
switch (option.type) {
case 'checkbox': {
const parentEl = document.createElement('label');
const labelEl = document.createElement('h5');
labelEl.textContent = option.label;
const el = document.createElement('input');
el.type = 'checkbox';
el.name = option.name;
el.onchange = (event) => {
handleChange(option, event.target.checked, event.target.name);
};
parentEl.appendChild(el);
parentEl.appendChild(labelEl);
dev_board_wrapper.appendChild(parentEl);
break;
}
case 'select': {
const parentEl = document.createElement('label');
const labelEl = document.createElement('h6');
labelEl.textContent = option.label;
const el = document.createElement('select');
el.name = option.name;
option.value.forEach((option) => {
const optionEl = document.createElement('option');
optionEl.value = option.value;
optionEl.text = option.name;
el.appendChild(optionEl);
});
el.onchange = (event) => {
handleChange(option, event.target.value, event.target.name);
};
parentEl.appendChild(labelEl);
parentEl.appendChild(el);
dev_board_wrapper.appendChild(parentEl);
break;
}
case 'input': {
const parentEl = document.createElement('label');
const labelEl = document.createElement('h6');
labelEl.textContent = option.label;
const el = document.createElement('input');
el.type = 'text';
el.name = option.name;
el.oninput = (event) => {
handleChange(option, event.target.value, event.target.name);
};
parentEl.appendChild(labelEl);
parentEl.appendChild(el);
dev_board_wrapper.appendChild(parentEl);
break;
}
case 'title': {
const el = document.createElement('h3');
el.textContent = option.label;
dev_board_wrapper.appendChild(el);
break;
}
case 'color': {
const parentEl = document.createElement('label');
const labelEl = document.createElement('h5');
labelEl.textContent = option.label;
const el = document.createElement('input');
el.type = 'color';
el.defaultValue = option.defaultValue;
el.oninput = (event) => {
document.documentElement.style.setProperty(`--pv-color-${option.name}`, event.target.value);
};
parentEl.appendChild(labelEl);
parentEl.appendChild(el);
dev_board_wrapper.appendChild(parentEl);
break;
}
default:
}
});
})();