-
-
-}
\ No newline at end of file
+export function Dropdown({ children, className = '', style = {}, buttonStyle }) {
+ return (
+ - e.stopPropagation()}>
-
- - {children} - -
+
+
+ );
+}
diff --git a/otoroshi/javascript/src/components/FormSelector.js b/otoroshi/javascript/src/components/FormSelector.js
index 38d1fe484f..458152a67d 100644
--- a/otoroshi/javascript/src/components/FormSelector.js
+++ b/otoroshi/javascript/src/components/FormSelector.js
@@ -9,37 +9,39 @@ export const ENTITIES = {
JWT_VERIFIERS: 'jwt-verifiers',
AUTH_MODULES: 'auth-modules',
API_KEYS: 'api-keys',
-}
+};
export function FormSelector({ onChange, entity, className = '' }) {
const [showLegacyForm, toggleLegacyForm] = useState(false);
useEffect(() => {
loadEntities(entity);
- }, [entity])
-
+ }, [entity]);
- const loadEntities = entity => {
+ const loadEntities = (entity) => {
try {
const values = JSON.parse(localStorage.getItem(FORM_SELECTOR_KEY) || '{}');
toggleLegacyForm(values[entity]);
onChange(values[entity]);
} catch (e) {
- console.log(e)
+ console.log(e);
}
- }
+ };
const saveEntities = (entity, value) => {
try {
const values = JSON.parse(localStorage.getItem(FORM_SELECTOR_KEY) || '{}');
- localStorage.setItem(FORM_SELECTOR_KEY, JSON.stringify({
- ...values,
- [entity]: value
- }));
+ localStorage.setItem(
+ FORM_SELECTOR_KEY,
+ JSON.stringify({
+ ...values,
+ [entity]: value,
+ })
+ );
} catch (e) {
console.log(e);
}
- }
+ };
return (
- )
-}
\ No newline at end of file
+ text={showLegacyForm ? 'Simple view' : 'Advanced view'}
+ />
+ );
+}
diff --git a/otoroshi/javascript/src/components/JwtVerifier.js b/otoroshi/javascript/src/components/JwtVerifier.js
index feedf2a5d3..409eb17505 100644
--- a/otoroshi/javascript/src/components/JwtVerifier.js
+++ b/otoroshi/javascript/src/components/JwtVerifier.js
@@ -30,92 +30,125 @@ function EntityGraph({ entity, id }) {
const [loadedEntities, setLoadedEntities] = useState(false);
const findEntities = () => {
- getEntityGraph(entity, id)
- .then(entities => {
- setEntities(entities);
- setLoadedEntities(true);
- });
- }
+ getEntityGraph(entity, id).then((entities) => {
+ setEntities(entities);
+ setLoadedEntities(true);
+ });
+ };
- if (Object.values(entities).flat().length === 0 && loadedEntities)
- return null;
+ if (Object.values(entities).flat().length === 0 && loadedEntities) return null;
- return - e.stopPropagation()}>
+
- + {children} + +
-
-
-
- {this.props.tenant || window.localStorage.getItem('Otoroshi-Tenant') || 'default'}
-
-
-
-
- {this.props.teams.join(' | ')}
-
-
-
+ return (
+ <>
+
+
+ {this.props.tenant || window.localStorage.getItem('Otoroshi-Tenant') || 'default'}
+
+
+
+
+ {this.props.teams.join(' | ')}
+
+
+
+ );
} else {
return (
<>
{
- /*window.__otoroshi__env__latest.userAdmin*/ window.__user.superAdmin && (
+ /*window.__otoroshi__env__latest.userAdmin*/ window.__user.superAdmin && (
- {
- config.setBreadcrumb(fullPath)
- }}
- useBreadcrumb={config.useBreadcrumb}
- path={fullPath}
- rawSchema={{
- label,
- collapsable: config.readOnly ? false : collapsable === undefined ? true : collapsable,
- collapsed: config.readOnly ? false : collapsed === undefined ? false : true,
- showSummary: summaryFields,
- summaryFields
- }}
- value={config.value}
- key={fullPath}
- >
- this.renderStepFlow(field, {
- ...config,
- root: false,
- parent: fullPath.slice(-1)[0]
- })}
- config={{
- ...config,
- root: false,
- parent: fullPath.slice(-1)[0]
- }} />
-
+ return (
+ {
+ config.setBreadcrumb(fullPath);
+ }
+ }
+ useBreadcrumb={config.useBreadcrumb}
+ path={fullPath}
+ rawSchema={{
+ label,
+ collapsable: config.readOnly ? false : collapsable === undefined ? true : collapsable,
+ collapsed: config.readOnly ? false : collapsed === undefined ? false : true,
+ showSummary: summaryFields,
+ summaryFields,
+ }}
+ value={config.value}
+ key={fullPath}>
+
+ this.renderStepFlow(field, {
+ ...config,
+ root: false,
+ parent: fullPath.slice(-1)[0],
+ })
+ }
+ config={{
+ ...config,
+ root: false,
+ parent: fullPath.slice(-1)[0],
+ }}
+ />
+
+ );
}
}
@@ -580,18 +599,20 @@ export class NgForm extends Component {
const show = isFunction(visible)
? visible(config.value)
: visible !== undefined
- ? visible
- : true;
+ ? visible
+ : true;
if (!show) return null;
- const children =
Found usages
-
- {Object.entries(entities).map(entity => {
- const name = entity[0];
- const content = entity[1];
+ return (
+
+ );
}
export class JwtVerifier extends Component {
state = {
isConfigView: true,
- verifier: this.props.value || this.props.verifier || {
- type: 'globale',
- enabled: false,
- strict: true,
- source: { type: 'InHeader', name: 'X-JWT-Token', remove: '' },
- algoSettings: { type: 'HSAlgoSettings', size: 512, secret: 'secret' },
- strategy: {
- type: 'PassThrough',
- verificationSettings: {
- fields: { iss: 'The Issuer' },
- arrayFields: {}
+ verifier: this.props.value ||
+ this.props.verifier || {
+ type: 'globale',
+ enabled: false,
+ strict: true,
+ source: { type: 'InHeader', name: 'X-JWT-Token', remove: '' },
+ algoSettings: { type: 'HSAlgoSettings', size: 512, secret: 'secret' },
+ strategy: {
+ type: 'PassThrough',
+ verificationSettings: {
+ fields: { iss: 'The Issuer' },
+ arrayFields: {},
+ },
},
},
- }
- }
+ };
render() {
const { isConfigView, verifier } = this.state;
@@ -125,96 +158,111 @@ export class JwtVerifier extends Component {
return (
+
-
+
+ Found usages
+
+
+ {Object.entries(entities).map((entity) => {
+ const name = entity[0];
+ const content = entity[1];
- return
- {!loadedEntities && }
+ {!loadedEntities && (
+
+ )}
+
-
+ );
+ })}
+
-
-
-
+ return (
+
+
- })}
-
+
+
+
- {content.map(r => {
- const pathname = name === 'routes' ? `/${name}/${r.id}?tab=flow` : `/${name}/edit/${r.id}`;
- return
-
- })}
- {r.name}
-
- {r.plugins
- .filter(p => JSON.stringify(p.config || {}).includes(id))
- .map(plugin => {
- const pluginName = plugin.plugin.split('.').at(-1);
- return
- {pluginName}
+ {content.map((r) => {
+ const pathname =
+ name === 'routes' ? `/${name}/${r.id}?tab=flow` : `/${name}/edit/${r.id}`;
+ return (
+
+ );
+ })}
+
-
-
-
+ {r.name}
+
+ {r.plugins
+ .filter((p) => JSON.stringify(p.config || {}).includes(id))
+ .map((plugin) => {
+ const pluginName = plugin.plugin.split('.').at(-1);
+ return (
+
+ {pluginName}
+
+ );
+ })}
+
+
+
- })}
-
- {this.props.showHeader && this.setState({ isConfigView })} />}
+ {this.props.showHeader && (
+ this.setState({ isConfigView })}
+ />
+ )}
- {isConfigView && <>
- {isLegacyView &&
- {
- const path = name.startsWith('.') ? name.substr(1) : name;
- const updatedVerifier = deepSet(cloneDeep(verifier), path, value);
- this.setState({ verifier: updatedVerifier });
- if (this.props.onChange)
- this.props.onChange(updatedVerifier);
- }} />
- }
+ {isConfigView && (
+ <>
+ {isLegacyView && (
+ {
+ const path = name.startsWith('.') ? name.substr(1) : name;
+ const updatedVerifier = deepSet(cloneDeep(verifier), path, value);
+ this.setState({ verifier: updatedVerifier });
+ if (this.props.onChange) this.props.onChange(updatedVerifier);
+ }}
+ />
+ )}
- {!isLegacyView && <>
- {
- if (step?.name === 'Header informations')
- return { ...step, fields: ['name'] }
- return step
- })
- } : JwtVerifierForm.config_schema.source,
- graph: {
- renderer: () => {
+ if (step?.name === 'Header informations')
+ return { ...step, fields: ['name'] };
+ return step;
+ }),
+ }
+ : JwtVerifierForm.config_schema.source,
+ graph: {
+ renderer: () => f)}
- onChange={() => { }}
+ restrictedStrategy
+ ? {
+ type: 'group',
+ name: 'Token payload',
+ fields: ['token'],
+ }
+ : undefined,
+ ].filter((f) => f)}
+ onChange={() => {}}
readOnly={true}
- />}
+ />
+ )}
- )
+ );
}
}
function Header({ isConfigView, onChange }) {
- return - {title} -
-
- {children}
+ return (
+
-}
\ No newline at end of file
+ );
+}
diff --git a/otoroshi/javascript/src/components/PillButton.js b/otoroshi/javascript/src/components/PillButton.js
index 70615bfadb..e0a6fa8e3c 100644
--- a/otoroshi/javascript/src/components/PillButton.js
+++ b/otoroshi/javascript/src/components/PillButton.js
@@ -8,30 +8,33 @@ export function PillButton({
rightText,
onRightClick,
style = {},
- className = "" }) {
- return (
+
- + {title} +
+{children}
-
{showChildren &&
-
-
-
+ className = '',
+}) {
+ return (
+
)
-}
\ No newline at end of file
+ );
+}
diff --git a/otoroshi/javascript/src/components/SquareButton.js b/otoroshi/javascript/src/components/SquareButton.js
index 927fbed7b0..2887728408 100644
--- a/otoroshi/javascript/src/components/SquareButton.js
+++ b/otoroshi/javascript/src/components/SquareButton.js
@@ -1,19 +1,19 @@
import React from 'react';
import { Button } from './Button';
-export function SquareButton({ text, icon, level = "info", ...props }) {
- return
-}
\ No newline at end of file
+export function SquareButton({ text, icon, level = 'info', ...props }) {
+ return (
+
+ );
+}
diff --git a/otoroshi/javascript/src/components/TopBar.js b/otoroshi/javascript/src/components/TopBar.js
index 171374283c..09115b91b7 100644
--- a/otoroshi/javascript/src/components/TopBar.js
+++ b/otoroshi/javascript/src/components/TopBar.js
@@ -475,7 +475,6 @@ export class TopBar extends Component {
const title = `Otoroshi - ${this.props.env.instanceName}`;
window.document.title = title;
}
-
}
componentWillUnmount() {
@@ -525,8 +524,9 @@ export class TopBar extends Component {
render() {
const selected = (this.props.params || {}).lineId;
return (
-
+
-
+
+
+
+
e.stopPropagation()}>{this.props.children}
}
diff --git a/otoroshi/javascript/src/components/nginputs/form.js b/otoroshi/javascript/src/components/nginputs/form.js
index 328a4b96b7..e8993dd6f4 100644
--- a/otoroshi/javascript/src/components/nginputs/form.js
+++ b/otoroshi/javascript/src/components/nginputs/form.js
@@ -37,7 +37,7 @@ import {
import { Forms } from '../../forms';
import { camelCase } from 'lodash';
-const isAnObject = v => typeof v === 'object' && v !== null && !Array.isArray(v);
+const isAnObject = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
const Helpers = {
rendererFor: (type, components = {}) => {
@@ -83,7 +83,7 @@ const Helpers = {
} else if (type === 'location') {
return components.LocationRenderer;
} else {
- const customForms = Forms[type]
+ const customForms = Forms[type];
if (customForms) {
return NgCustomFormsRenderer;
} else {
@@ -219,40 +219,44 @@ export class NgStep extends Component {
const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
const Breadcrumb = ({ breadcrumb, setBreadcrumb, toHome }) => {
- if (!breadcrumb && !toHome)
- return null;
-
- return
-
- 
-
- {breadcrumb && breadcrumb
- .map((part, i) => {
- return setBreadcrumb(i)} key={`${part}`}>
- {firstLetterUppercase(camelCase(part))}
-
- })}
-
-}
-
+ if (!breadcrumb && !toHome) return null;
+
+ return (
+
-
- {breadcrumb && breadcrumb
- .map((part, i) => {
- return setBreadcrumb(i)} key={`${part}`}>
- {firstLetterUppercase(camelCase(part))}
-
- })}
-
+
+
+
+ {breadcrumb &&
+ breadcrumb.map((part, i) => {
+ return (
+ setBreadcrumb(i)}
+ key={`${part}`}>
+ {firstLetterUppercase(camelCase(part))}
+
+ );
+ })}
+
+ );
+};
function SubFlow({ fields = [], full_fields = [], render, config }) {
const [moreFields, showMoreFields] = useState(false);
if (isAnObject(fields)) {
- fields = fields.otoroshi_flow
- full_fields = fields.otoroshi_full_flow
+ fields = fields.otoroshi_flow;
+ full_fields = fields.otoroshi_full_flow;
}
const processedFields = isFunction(fields) ? fields(config) : fields;
const processedAllFields = isFunction(full_fields) ? full_fields(config) : full_fields;
const hasMoreFields = processedAllFields && processedAllFields.length > 0;
-
const match = (test, breadcrumb) => {
if (!breadcrumb) {
return true;
@@ -261,33 +265,31 @@ function SubFlow({ fields = [], full_fields = [], render, config }) {
const lowerBreadcrumb = (breadcrumb || []).join('-').toLowerCase();
return lowerTest === lowerBreadcrumb;
}
- }
+ };
if (config.readOnly) {
- if (hasMoreFields)
- return processedAllFields.map(render);
- else
- return [...processedFields, ...processedAllFields].map(render);
-
+ if (hasMoreFields) return processedAllFields.map(render);
+ else return [...processedFields, ...processedAllFields].map(render);
}
- return <>
- {!moreFields && processedFields.map(render)}
- {hasMoreFields && moreFields && processedAllFields.map(render)}
-
- {hasMoreFields &&
- !moreFields &&
- !config.readOnly &&
- match(config.path, config.breadcrumb) &&
- }
-
+ return (
+ <>
+ {!moreFields && processedFields.map(render)}
+ {hasMoreFields && moreFields && processedAllFields.map(render)}
+
+ {hasMoreFields && !moreFields && !config.readOnly && match(config.path, config.breadcrumb) && (
+
+ )}
+
+ );
}
export class NgForm extends Component {
@@ -479,19 +481,18 @@ export class NgForm extends Component {
getFlow = (value, schema) => {
if (isFunction(this.props.flow)) {
return {
- fields: this.props.flow(value, this.props)
- }
- } else if (isAnObject(this.props.flow) &&
+ fields: this.props.flow(value, this.props),
+ };
+ } else if (
+ isAnObject(this.props.flow) &&
this.props.flow['otoroshi_flow'] &&
this.props.flow['otoroshi_full_flow']
) {
return {
fields: this.props.flow['otoroshi_flow'],
- full_fields: this.props.flow['otoroshi_full_flow']
- }
- } else if (isAnObject(this.props.flow) &&
- this.props.flow.field &&
- this.props.flow.flow) {
+ full_fields: this.props.flow['otoroshi_full_flow'],
+ };
+ } else if (isAnObject(this.props.flow) && this.props.flow.field && this.props.flow.flow) {
/* useful to match the case of a json flow
{
flow: {
@@ -526,51 +527,69 @@ export class NgForm extends Component {
});
}
- renderGroupFlow({ groupId, name, fields, collapsed, visible, full_fields, collapsable, summaryFields }, config) {
- const show = isFunction(visible) ? visible(config.value) : (visible !== undefined ? visible : true);
+ renderGroupFlow(
+ { groupId, name, fields, collapsed, visible, full_fields, collapsable, summaryFields },
+ config
+ ) {
+ const show = isFunction(visible)
+ ? visible(config.value)
+ : visible !== undefined
+ ? visible
+ : true;
if (!show) {
return null;
} else {
const part = groupId || name;
- const fullPath = (config.root ? [part] : [...config.path, isFunction(part) ? undefined : part])
- .filter(f => f)
- .map(n => isFunction(n) ? '' : n);
+ const fullPath = (config.root
+ ? [part]
+ : [...config.path, isFunction(part) ? undefined : part]
+ )
+ .filter((f) => f)
+ .map((n) => (isFunction(n) ? '' : n));
const label = isFunction(name) ? name(config) : name;
const FormRenderer = config.components.FormRenderer;
- return
+
+ {breadcrumb &&
+ breadcrumb.map((part, i) => {
+ return (
+ setBreadcrumb(i)}
+ key={`${part}`}>
+ {firstLetterUppercase(camelCase(part))}
+
+ );
+ })}
+
- {fields.map((subName) => (
-
+ const children = (
+
- {this.renderStepFlow(subName, config)}
-
- ))}
-
+ {fields.map((subName) => (
+
+ );
return (
+ {this.renderStepFlow(subName, config)}
+
+ ))}
+
@@ -611,21 +632,34 @@ export class NgForm extends Component {
if (paths.length === 1) {
return {
...(value || {}),
- [paths[0]]: newValue
- }
+ [paths[0]]: newValue,
+ };
} else {
return {
...(value || {}),
- [paths[0]]: this.newValueFrom(value[paths[0]], paths.slice(1), newValue)
- }
+ [paths[0]]: this.newValueFrom(value[paths[0]], paths.slice(1), newValue),
+ };
}
- }
+ };
- renderInlineStepFlow(name, {
- schema, value, root, path, validation, components, StepNotFound,
- parent, setBreadcrumb, breadcrumb, useBreadcrumb, readOnly
- }) {
- const paths = name.includes(".") ? name.split(".") : [name];
+ renderInlineStepFlow(
+ name,
+ {
+ schema,
+ value,
+ root,
+ path,
+ validation,
+ components,
+ StepNotFound,
+ parent,
+ setBreadcrumb,
+ breadcrumb,
+ useBreadcrumb,
+ readOnly,
+ }
+ ) {
+ const paths = name.includes('.') ? name.split('.') : [name];
const stepSchema = paths.reduce((acc, path) => acc[path] || acc.schema[path], schema);
if (stepSchema) {
@@ -639,9 +673,14 @@ export class NgForm extends Component {
const newPath = root ? [...paths] : [...path, ...paths];
const corePath = parent ? (root ? [...paths] : [...path, parent, ...paths]) : newPath;
- if (Array.isArray(newPath) && Array.isArray(breadcrumb) && Array.isArray(corePath) &&
- !this.match(newPath, breadcrumb) && !this.match(corePath, breadcrumb))
- return null
+ if (
+ Array.isArray(newPath) &&
+ Array.isArray(breadcrumb) &&
+ Array.isArray(corePath) &&
+ !this.match(newPath, breadcrumb) &&
+ !this.match(corePath, breadcrumb)
+ )
+ return null;
return (
acc[path] || (acc.schema || {})[path], value || {}) : value[name]) : null}
+ value={
+ value
+ ? name.includes('.')
+ ? name
+ .split('.')
+ .reduce((acc, path) => acc[path] || (acc.schema || {})[path], value || {})
+ : value[name]
+ : null
+ }
onChange={(e) => {
- const newValue = this.newValueFrom(value, name.includes(".") ? name.split(".") : [name], e);
+ const newValue = this.newValueFrom(
+ value,
+ name.includes('.') ? name.split('.') : [name],
+ e
+ );
this.rootOnChange(newValue);
}}
breadcrumb={breadcrumb}
@@ -741,31 +789,33 @@ export class NgForm extends Component {
setBreadcrumb: this.getBreadcrumb(root),
breadcrumb: root ? this.state.breadcrumb : this.props.breadcrumb,
useBreadcrumb: this.props.useBreadcrumb,
- readOnly
- }
+ readOnly,
+ };
return (
- {config.useBreadcrumb && !readOnly &&
+ {config.useBreadcrumb && !readOnly && (
{
- this.setState({
- breadcrumb: []
- })
- } : null}
- setBreadcrumb={i => {
+ toHome={
+ root
+ ? () => {
+ this.setState({
+ breadcrumb: [],
+ });
+ }
+ : null
+ }
+ setBreadcrumb={(i) => {
this.setState({
- breadcrumb: this.state.breadcrumb.slice(0, i + 1)
- })
- }} />
- }
- {flow.fields &&
- this.renderStepFlow(name, config)}
- config={config} />
- }
+ breadcrumb: this.state.breadcrumb.slice(0, i + 1),
+ });
+ }}
+ />
+ )}
+ {flow.fields && (
+ this.renderStepFlow(name, config)} config={config} />
+ )}
);
}
diff --git a/otoroshi/javascript/src/components/nginputs/inputs.js b/otoroshi/javascript/src/components/nginputs/inputs.js
index f50c587989..922bcee1a2 100644
--- a/otoroshi/javascript/src/components/nginputs/inputs.js
+++ b/otoroshi/javascript/src/components/nginputs/inputs.js
@@ -12,15 +12,19 @@ const CodeInput = React.lazy(() => Promise.resolve(require('../inputs/CodeInput'
const ReadOnlyField = ({ value, pre }) => {
if (pre) {
- return this.props.onChange({
- ...this.props.value,
- tenant
- })}
- onChangeTeams={teams => this.props.onChange({
- ...this.props.value,
- teams
- })}
- />
+ const component = (
+
+ this.props.onChange({
+ ...this.props.value,
+ tenant,
+ })
+ }
+ onChangeTeams={(teams) =>
+ this.props.onChange({
+ ...this.props.value,
+ teams,
+ })
+ }
+ />
+ );
if (readOnly) {
return component;
} else {
- return
- {component}
-
+ return (
+
+ {component}
+
+ );
}
}
}
export class NgDotsRenderer extends Component {
-
- isAnObject = v => typeof v === 'object' && v !== null && !Array.isArray(v);
+ isAnObject = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
render() {
const schema = this.props.schema || {};
@@ -75,85 +86,97 @@ export class NgDotsRenderer extends Component {
const isValueArray = Array.isArray(this.props.value);
- const onClick = selectedValue => {
+ const onClick = (selectedValue) => {
const value = this.props.value || props.defaultValue;
if (isValueArray) {
- if (value.includes(selectedValue))
- return value.filter(opt => opt !== selectedValue);
- else
- return [...value, selectedValue];
- }
- else {
+ if (value.includes(selectedValue)) return value.filter((opt) => opt !== selectedValue);
+ else return [...value, selectedValue];
+ } else {
return selectedValue;
}
- }
+ };
const value = this.props.value || props.defaultValue;
const schemaProps = this.props.rawSchema?.props;
return (
- {
try {
this.props.onChange(JSON.parse(e));
- } catch (ex) { }
+ } catch (ex) {}
}}
style={{ width: '100%', ...(this.props.style || {}) }}
/>
@@ -289,8 +322,8 @@ export class NgJsonRenderer extends Component {
export class NgStringRenderer extends Component {
state = {
- touched: false
- }
+ touched: false,
+ };
render() {
const schema = this.props.schema;
@@ -302,24 +335,28 @@ export class NgStringRenderer extends Component {
return (
- {readOnly ?
);
}
@@ -347,8 +384,8 @@ export class NgPasswordRenderer extends Component {
export class NgNumberRenderer extends Component {
state = {
- touched: false
- }
+ touched: false,
+ };
render() {
const schema = this.props.schema;
const props = schema.props || {};
@@ -360,19 +397,20 @@ export class NgNumberRenderer extends Component {
return (
{readOnly &&
);
}
@@ -451,15 +489,21 @@ export class NgBooleanRenderer extends Component {
const props = schema.props || {};
const readOnly = this.props.readOnly;
- const value = (this.props.value === null || this.props.value === undefined) ? props.defaultValue : this.props.value;
+ const value =
+ this.props.value === null || this.props.value === undefined
+ ? props.defaultValue
+ : this.props.value;
return (
- {readOnly ?
);
}
@@ -481,36 +525,47 @@ export class NgBoxBooleanRenderer extends Component {
const props = schema.props || {};
const readOnly = this.props.readOnly;
- const value = (this.props.value === null || this.props.value === undefined) ? props.defaultValue : this.props.value;
- const label = this.props.label || props.label || this.props.rawSchema?.label || this.props.name || '...';
- const description = this.props.description || props.description || this.props.rawSchema?.description || '...';
+ const value =
+ this.props.value === null || this.props.value === undefined
+ ? props.defaultValue
+ : this.props.value;
+ const label =
+ this.props.label || props.label || this.props.rawSchema?.label || this.props.name || '...';
+ const description =
+ this.props.description || props.description || this.props.rawSchema?.description || '...';
return (
-
- {value}
-
+ return (
+
+ {value}
+
+ );
} else {
- return
- {value}
-
+ return (
+
+ {value}
+
+ );
}
-}
+};
export class NgLocationRenderer extends Component {
render() {
@@ -29,42 +33,49 @@ export class NgLocationRenderer extends Component {
const readOnly = this.props.readOnly;
const FormRenderer = this.props.components.FormRenderer;
- const component =
- {readOnly && (isValueArray ? value.map(v => {
+ onConfirm={(value) => {
this.props.onChange(value);
this.hideComponent();
}}
value={this.props.value}
hide={this.hideComponent}
- {...(propsFromParent || {})} />
- }
+ {...(propsFromParent || {})}
+ />
+ )}
- )
+ );
}
}
@@ -206,7 +230,11 @@ export function LabelAndInput(_props) {
if (ngOptions.spread && !_props.readOnly) return _props.children;
- const margin = _props.margin || props.margin || _props.rawSchema?.props?.margin || (_props.readOnly ? "mb-0" : "mb-3");
+ const margin =
+ _props.margin ||
+ props.margin ||
+ _props.rawSchema?.props?.margin ||
+ (_props.readOnly ? 'mb-0' : 'mb-3');
return (
this.props.onChange(e)}
style={{ width: '100%' }}
/>
- }
+
+ )}
);
}
@@ -274,11 +303,15 @@ export class NgJsonRenderer extends Component {
Loading
}>
+ {readOnly &&
+ (isValueArray ? (
+ value.map((v) =>
- )
+ );
}
}
export class NgCustomFormsRenderer extends Component {
state = {
showComponent: false,
- propsFromParent: {}
- }
+ propsFromParent: {},
+ };
hideComponent = () => {
this.setState({
- showComponent: false
- })
- }
+ showComponent: false,
+ });
+ };
render() {
const { showComponent, propsFromParent } = this.state;
- const schema = this.props.rawSchema
+ const schema = this.props.rawSchema;
const props = schema?.props || {};
const Component = Forms[schema.type];
@@ -161,33 +184,34 @@ export class NgCustomFormsRenderer extends Component {
const LauncherComponent = React.createElement(props.componentLauncher, {
value: this.props.value,
onChange: this.props.onChange,
- openComponent: propsFromParent => {
+ openComponent: (propsFromParent) => {
this.setState({
showComponent: true,
propsFromParent: {
...(propsFromParent || {}),
- ...(props.componentsProps || {})
- }
- })
- }
+ ...(props.componentsProps || {}),
+ },
+ });
+ },
});
return (
<>
{!showComponent && LauncherComponent}
- {showComponent &&
+ {showComponent && (
@@ -243,7 +271,6 @@ export class NgSingleCodeLineRenderer extends Component {
}
export class NgCodeRenderer extends Component {
-
render() {
const schema = this.props.schema;
const props = schema.props || {};
@@ -253,8 +280,9 @@ export class NgCodeRenderer extends Component {
return (
- {readOnly ?
- Loading
}>
-
-
+ );
}
- }
-}
+ },
+};
export default {
config_flow: [
{
type: 'group',
name: 'Informations',
fields: ['id', 'name', 'desc'],
- summaryFields: ['name', 'desc']
+ summaryFields: ['name', 'desc'],
},
{
type: 'group',
- name: "Organizations & teams",
- fields: ['_loc']
+ name: 'Organizations & teams',
+ fields: ['_loc'],
},
'source',
'algoSettings',
@@ -277,10 +308,8 @@ export default {
type: 'group',
name: 'Misc.',
collapsed: true,
- fields: [
- 'metadata', 'tags'
- ]
- }
+ fields: ['metadata', 'tags'],
+ },
],
config_schema: {
token: {
@@ -288,26 +317,26 @@ export default {
label: 'JSON Payload',
props: {
mode: 'json',
- editorOnly: true
- }
+ editorOnly: true,
+ },
},
_loc: {
type: 'location',
props: {
- label: 'Location'
- }
+ label: 'Location',
+ },
},
id: {
type: 'string',
- label: 'Id'
+ label: 'Id',
},
name: {
type: 'string',
- label: 'Name'
+ label: 'Name',
},
desc: {
type: 'string',
- label: 'Description'
+ label: 'Description',
},
source: {
type: 'form',
@@ -316,8 +345,8 @@ export default {
props: {
showSummary: true,
ngOptions: {
- spread: true
- }
+ spread: true,
+ },
},
schema: {
type: {
@@ -325,60 +354,60 @@ export default {
label: 'Type',
props: {
ngOptions: {
- spread: true
+ spread: true,
},
options: [
{ value: 'InHeader', label: 'Header' },
{ value: 'InQueryParam', label: 'Query string' },
- { value: 'InCookie', label: 'Cookie' }
- ]
- }
+ { value: 'InCookie', label: 'Cookie' },
+ ],
+ },
},
name: {
type: 'string',
- label: 'Name'
+ label: 'Name',
},
remove: {
type: 'string',
placeholder: 'Bearer ',
label: 'Remove value',
props: {
- subTitle: '(Optional): String to remove from the value to access to the token'
- }
+ subTitle: '(Optional): String to remove from the value to access to the token',
+ },
},
- debug: JwtLocationExamples
+ debug: JwtLocationExamples,
},
flow: [
'type',
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InHeader',
+ visible: (props) => props?.type === 'InHeader',
name: 'Header informations',
- fields: ['name', 'remove', 'debug']
+ fields: ['name', 'remove', 'debug'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InQueryParam',
+ visible: (props) => props?.type === 'InQueryParam',
name: 'Query param name',
- fields: ['name']
+ fields: ['name'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InCookie',
+ visible: (props) => props?.type === 'InCookie',
name: 'Cookie name',
- fields: ['name']
- }
- ]
+ fields: ['name'],
+ },
+ ],
},
algoSettings: {
...AlgoSettingsForm,
label: 'Token validation',
props: {
- showSummary: true
- }
+ showSummary: true,
+ },
},
strategy: {
type: 'form',
@@ -387,8 +416,8 @@ export default {
props: {
showSummary: true,
ngOptions: {
- spread: true
- }
+ spread: true,
+ },
},
schema: {
...StrategyForm,
@@ -400,30 +429,32 @@ export default {
schema: {
fields: {
type: 'object',
- label: "Verify token fields",
+ label: 'Verify token fields',
props: {
- placeholderKey: "Field name",
- placeholderValue: "Field value",
- help: "When the JWT token is checked, each field specified here will be verified with the provided value"
- }
+ placeholderKey: 'Field name',
+ placeholderValue: 'Field value',
+ help:
+ 'When the JWT token is checked, each field specified here will be verified with the provided value',
+ },
},
arrayFields: {
type: 'object',
- label: "Verify token array value",
+ label: 'Verify token array value',
props: {
- placeholderKey: "Field name",
- placeholderValue: "One or more comma separated values in the array",
- help: "When the JWT token is checked, each field specified here will be verified if the provided value is contained in the array"
- }
- }
- }
+ placeholderKey: 'Field name',
+ placeholderValue: 'One or more comma separated values in the array',
+ help:
+ 'When the JWT token is checked, each field specified here will be verified if the provided value is contained in the array',
+ },
+ },
+ },
},
algoSettings: AlgoSettingsForm,
transformSettings: {
type: 'form',
collapsable: true,
label: 'Transform settings',
- visible: value => value?.strategy?.type === 'Transform',
+ visible: (value) => value?.strategy?.type === 'Transform',
schema: {
location: {
type: 'form',
@@ -431,61 +462,61 @@ export default {
label: 'Exit Token location',
props: {
ngOptions: {
- spread: true
- }
+ spread: true,
+ },
},
schema: {
type: {
type: 'select',
props: {
ngOptions: {
- spread: true
+ spread: true,
},
options: [
{ value: 'InHeader', label: 'Header' },
{ value: 'InQueryParam', label: 'Query string' },
- { value: 'InCookie', label: 'Cookie' }
- ]
- }
+ { value: 'InCookie', label: 'Cookie' },
+ ],
+ },
},
name: {
type: 'string',
- label: 'Name'
+ label: 'Name',
},
remove: {
type: 'string',
placeholder: 'Bearer ',
label: 'Remove value',
props: {
- subTitle: '(Optional): String to remove from the value to access to the token'
- }
+ subTitle: '(Optional): String to remove from the value to access to the token',
+ },
},
- debug: JwtLocationExamples
+ debug: JwtLocationExamples,
},
flow: [
'type',
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InHeader',
+ visible: (props) => props?.type === 'InHeader',
name: 'Header informations',
- fields: ['name', 'remove', 'debug']
+ fields: ['name', 'remove', 'debug'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InQueryParam',
+ visible: (props) => props?.type === 'InQueryParam',
name: 'Query param name',
- fields: ['name']
+ fields: ['name'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InCookie',
+ visible: (props) => props?.type === 'InCookie',
name: 'Cookie name',
- fields: ['name']
- }
- ]
+ fields: ['name'],
+ },
+ ],
},
mappingSettings: {
type: 'form',
@@ -494,57 +525,56 @@ export default {
schema: {
map: {
type: 'object',
- label: "Rename token fields",
+ label: 'Rename token fields',
props: {
- placeholderKey: "Field name",
- placeholderValue: "Field value",
- help: "When the JWT token is transformed, it is possible to change a field name, just specify origin field name and target field name"
- }
+ placeholderKey: 'Field name',
+ placeholderValue: 'Field value',
+ help:
+ 'When the JWT token is transformed, it is possible to change a field name, just specify origin field name and target field name',
+ },
},
values: {
type: 'object',
- label: "Set token fields",
+ label: 'Set token fields',
props: {
- placeholderKey: "Field name",
- placeholderValue: "Field value",
- help: "When the JWT token is transformed, it is possible to add new field with static values, just specify field name and value"
- }
+ placeholderKey: 'Field name',
+ placeholderValue: 'Field value',
+ help:
+ 'When the JWT token is transformed, it is possible to add new field with static values, just specify field name and value',
+ },
},
remove: {
type: 'string',
array: true,
label: 'Remove token fields',
props: {
- help: 'When the JWT token is transformed, it is possible to remove fields'
- }
- }
- }
- }
+ help: 'When the JWT token is transformed, it is possible to remove fields',
+ },
+ },
+ },
+ },
},
- flow: [
- 'location',
- 'mappingSettings'
- ]
- }
+ flow: ['location', 'mappingSettings'],
+ },
},
flow: (_, v) => {
- const strategy = v.value?.type
+ const strategy = v.value?.type;
return {
- 'PassThrough': ['type'],
- 'Sign': ['type', 'algoSettings'],
- 'Transform': ['type', 'algoSettings'],
- [undefined]: ['type']
- }[strategy]
- }
+ PassThrough: ['type'],
+ Sign: ['type', 'algoSettings'],
+ Transform: ['type', 'algoSettings'],
+ [undefined]: ['type'],
+ }[strategy];
+ },
},
metadata: {
type: 'object',
- label: 'Metadata'
+ label: 'Metadata',
},
tags: {
type: 'string',
label: 'Tags',
- array: true
- }
- }
-}
\ No newline at end of file
+ array: true,
+ },
+ },
+};
diff --git a/otoroshi/javascript/src/forms/index.js b/otoroshi/javascript/src/forms/index.js
index 4cdbbaf8b8..a349e3cc5a 100644
--- a/otoroshi/javascript/src/forms/index.js
+++ b/otoroshi/javascript/src/forms/index.js
@@ -1,22 +1,19 @@
-import { Plugins } from "./ng_plugins";
-import { Wizards } from "./wizards";
+import { Plugins } from './ng_plugins';
+import { Wizards } from './wizards';
const ClassifiedForms = {
plugins: Plugins.reduce((acc, c) => {
return {
...acc,
- [c.id.split('.').slice(-1)]: c
- }
+ [c.id.split('.').slice(-1)]: c,
+ };
}, {}),
- wizards: Wizards
-}
+ wizards: Wizards,
+};
-const Forms = ({
+const Forms = {
...ClassifiedForms.plugins,
...ClassifiedForms.wizards,
-})
+};
-export {
- ClassifiedForms,
- Forms
-}
\ No newline at end of file
+export { ClassifiedForms, Forms };
diff --git a/otoroshi/javascript/src/forms/ng_plugins/GraphQLBackend.js b/otoroshi/javascript/src/forms/ng_plugins/GraphQLBackend.js
index 56f1c6444e..fe83b8b443 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/GraphQLBackend.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/GraphQLBackend.js
@@ -1,5 +1,5 @@
import React from 'react';
-import GraphQLForm from "../../pages/RouteDesigner/GraphQLForm";
+import GraphQLForm from '../../pages/RouteDesigner/GraphQLForm';
export default {
id: 'cp:otoroshi.next.plugins.GraphQLBackend',
diff --git a/otoroshi/javascript/src/forms/ng_plugins/Http3Switch.js b/otoroshi/javascript/src/forms/ng_plugins/Http3Switch.js
index 5c1a3fe4a7..7070f55667 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/Http3Switch.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/Http3Switch.js
@@ -12,7 +12,7 @@ export default {
protocols: {
label: 'Protocols',
type: 'string',
- array: true
+ array: true,
},
},
config_flow: ['ma', 'domain', 'protocols'],
diff --git a/otoroshi/javascript/src/forms/ng_plugins/JwtSigner.js b/otoroshi/javascript/src/forms/ng_plugins/JwtSigner.js
index ba849a0db0..68bad5a153 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/JwtSigner.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/JwtSigner.js
@@ -1,36 +1,34 @@
-import { JwtVerifierLauncher } from "../wizards/JwtVerifierLauncher";
+import { JwtVerifierLauncher } from '../wizards/JwtVerifierLauncher';
export default {
- id: "cp:otoroshi.next.plugins.JwtSigner",
+ id: 'cp:otoroshi.next.plugins.JwtSigner',
config_schema: {
- "fail_if_present": {
- type: "box-bool",
- label: "Fail if present",
+ fail_if_present: {
+ type: 'box-bool',
+ label: 'Fail if present',
props: {
- description: "If a token is present in the incoming request, the plugin will reject the call."
- }
+ description:
+ 'If a token is present in the incoming request, the plugin will reject the call.',
+ },
},
- "replace_if_present": {
- type: "box-bool",
- label: "Replace if present",
+ replace_if_present: {
+ type: 'box-bool',
+ label: 'Replace if present',
props: {
- description: "If a token is present in the incoming request, the plugin will always replace the token with a new one."
- }
+ description:
+ 'If a token is present in the incoming request, the plugin will always replace the token with a new one.',
+ },
},
verifier: {
- label: "Verifier",
- type: "JwtVerifierWizard",
+ label: 'Verifier',
+ type: 'JwtVerifierWizard',
props: {
componentLauncher: JwtVerifierLauncher,
componentsProps: {
- allowedNewStrategy: 'Generate'
- }
- }
- }
+ allowedNewStrategy: 'Generate',
+ },
+ },
+ },
},
- config_flow: [
- "verifier",
- "replace_if_present",
- "fail_if_present"
- ]
-}
\ No newline at end of file
+ config_flow: ['verifier', 'replace_if_present', 'fail_if_present'],
+};
diff --git a/otoroshi/javascript/src/forms/ng_plugins/JwtVerification.js b/otoroshi/javascript/src/forms/ng_plugins/JwtVerification.js
index 1a1cc3c4a3..59a8aa4954 100644
--- a/otoroshi/javascript/src/forms/ng_plugins/JwtVerification.js
+++ b/otoroshi/javascript/src/forms/ng_plugins/JwtVerification.js
@@ -1,32 +1,32 @@
import React from 'react';
import { NgCustomFormsRenderer } from '../../components/nginputs';
-import { JwtVerifierLauncher } from "../wizards/JwtVerifierLauncher";
+import { JwtVerifierLauncher } from '../wizards/JwtVerifierLauncher';
export default {
- id: "cp:otoroshi.next.plugins.JwtVerification",
+ id: 'cp:otoroshi.next.plugins.JwtVerification',
config_schema: {
verifiers: {
label: 'Chain of verifiers',
type: 'array',
- itemRenderer: props => {
- return {label}
-
+
-
);
@@ -686,18 +747,22 @@ export class NgObjectRenderer extends Component {
const readOnly = this.props.readOnly;
const ItemRenderer = schema.itemRenderer || this.props.rawSchema.itemRenderer;
- if (readOnly && Object.entries(this.props.value || {}).length === 0)
- return null;
+ if (readOnly && Object.entries(this.props.value || {}).length === 0) return null;
return (
- {readOnly ? {
- return <>
- {`${entry[0]} - ${entry[1]}`}
-
- - })} /> : + {readOnly ? ( + {
+ return (
+ <>
+ {`${entry[0]} - ${entry[1]}`}
+
+ + ); + })} + /> + ) : ( (
- {
- const newObject = this.props.value ? { ...this.props.value } : {};
- newObject[key] = e;
- this.props.onChange(newObject);
- }}
- {...props}
- />
- )
+ {
+ const newObject = this.props.value ? { ...this.props.value } : {};
+ newObject[key] = e;
+ this.props.onChange(newObject);
+ }}
+ {...props}
+ />
+ )
: null
}
/>
- }
+ )}
);
}
@@ -990,21 +1055,23 @@ export class NgSelectRenderer extends Component {
return (
{readOnly &&
);
}
-}
\ No newline at end of file
+}
diff --git a/otoroshi/javascript/src/forms/entities/JwtVerifier.js b/otoroshi/javascript/src/forms/entities/JwtVerifier.js
index 826c3e2f1c..56839d7823 100644
--- a/otoroshi/javascript/src/forms/entities/JwtVerifier.js
+++ b/otoroshi/javascript/src/forms/entities/JwtVerifier.js
@@ -7,7 +7,7 @@ const AlgoSettingsForm = {
label: 'Signature',
collapsable: true,
props: {
- showSummary: true
+ showSummary: true,
},
schema: {
type: {
@@ -22,71 +22,74 @@ const AlgoSettingsForm = {
{ label: 'JWK Set (only for verification)', value: 'JWKSAlgoSettings' },
{ label: 'RSASSA-PKCS1 + SHA from KeyPair', value: 'RSAKPAlgoSettings' },
{ label: 'ECDSA + SHA from KeyPair', value: 'ESKPAlgoSettings' },
- { label: 'Otoroshi KeyPair from token kid (only for verification)', value: 'KidAlgoSettings' }
- ]
- }
+ {
+ label: 'Otoroshi KeyPair from token kid (only for verification)',
+ value: 'KidAlgoSettings',
+ },
+ ],
+ },
},
onlyExposedCerts: {
type: 'bool',
- label: 'Use only exposed keypairs'
+ label: 'Use only exposed keypairs',
},
size: {
type: 'dots',
label: 'SHA size',
props: {
- options: [256, 384, 512]
- }
+ options: [256, 384, 512],
+ },
},
secret: {
type: 'string',
- label: 'HMAC secret'
+ label: 'HMAC secret',
},
base64: {
type: 'bool',
- label: 'Base64 encoded secret'
+ label: 'Base64 encoded secret',
},
publicKey: {
type: 'text',
- label: 'Public key'
+ label: 'Public key',
},
privateKey: {
type: 'text',
- label: 'Private key'
+ label: 'Private key',
},
certId: {
- type: "select",
- label: "Cert. id",
+ type: 'select',
+ label: 'Cert. id',
props: {
- optionsFrom: "/bo/api/proxy/api/certificates",
+ optionsFrom: '/bo/api/proxy/api/certificates',
optionsTransformer: {
- label: "name",
- value: "id"
- }
- }
+ label: 'name',
+ value: 'id',
+ },
+ },
},
url: {
type: 'string',
- label: 'URL'
+ label: 'URL',
},
timeout: {
type: 'number',
- label: 'HTTP call timeout'
+ label: 'HTTP call timeout',
},
ttl: {
type: 'number',
- label: 'Cache TTL for the keyset'
+ label: 'Cache TTL for the keyset',
},
headers: {
- type: "object",
- label: "Headers"
+ type: 'object',
+ label: 'Headers',
},
kty: {
type: 'select',
label: 'Key type',
props: {
- options: ['RSA', 'EC']
- }
- }
+ options: ['RSA', 'EC'],
+ },
+ },
},
flow: (props, v) => {
return {
@@ -96,177 +99,205 @@ const AlgoSettingsForm = {
RSAKPAlgoSettings: ['type', 'size', 'certId'],
ESKPAlgoSettings: ['type', 'size', 'certId'],
ESAlgoSettings: ['type', 'size', 'publicKey', 'privateKey'],
- JWKSAlgoSettings: [
- 'type',
- 'url',
- 'timeout',
- 'ttl',
- 'headers',
- 'kty'
- ],
- [undefined]: ['type']
- }[v.value?.type]
- }
-}
+ JWKSAlgoSettings: ['type', 'url', 'timeout', 'ttl', 'headers', 'kty'],
+ [undefined]: ['type'],
+ }[v.value?.type];
+ },
+};
const VERIFIER_STRATEGIES = [
{
- strategy: 'PassThrough', title: ['Verify'],
+ strategy: 'PassThrough',
+ title: ['Verify'],
desc: 'PassThrough will only verifiy token signing and fields values if provided. ',
- tags: ['verify']
+ tags: ['verify'],
},
{
- strategy: 'Sign', title: ['Verify and re-sign'],
- desc: 'Sign will do the same as PassThrough plus will re-sign the JWT token with the provided algo. settings.',
- tags: ['verify', 'sign']
+ strategy: 'Sign',
+ title: ['Verify and re-sign'],
+ desc:
+ 'Sign will do the same as PassThrough plus will re-sign the JWT token with the provided algo. settings.',
+ tags: ['verify', 'sign'],
},
{
- strategy: 'Transform', title: ['Verify, re-sign and Transform'],
+ strategy: 'Transform',
+ title: ['Verify, re-sign and Transform'],
desc: 'Transform will do the same as Sign plus will be able to transform the token.',
- tags: ['verify', 'sign', 'transform']
- }
-]
+ tags: ['verify', 'sign', 'transform'],
+ },
+];
const StrategyForm = {
type: {
- renderer: props => {
+ renderer: (props) => {
const [open, setOpen] = useState(false);
if (props.readOnly) {
- return
-
- {props.value}
-
-
+ return (
+
+
+ {props.value}
+
+
+ );
} else {
if (!open) {
- return
+ );
}
}
- }
- }
-}
+ },
+ },
+};
const JwtLocationExamples = {
- renderer: props => {
- if (props.readOnly)
- return null;
+ renderer: (props) => {
+ if (props.readOnly) return null;
else {
- return
+
@@ -519,23 +574,22 @@ export class NgBoxBooleanRenderer extends Component {
}
export class NgArrayRenderer extends Component {
-
canShowActions(path) {
const breadcrumbAsArray = this.props.breadcrumb || [];
const pathAsArray = path || this.props.path || [];
- if (this.props.breadcrumb === undefined)
- return true;
+ if (this.props.breadcrumb === undefined) return true;
- if (path)
- return isEqual(pathAsArray, breadcrumbAsArray)
+ if (path) return isEqual(pathAsArray, breadcrumbAsArray);
- return pathAsArray.length >= breadcrumbAsArray.length &&
+ return (
+ pathAsArray.length >= breadcrumbAsArray.length &&
(pathAsArray.join('-').startsWith(pathAsArray.join('-')) ||
pathAsArray.join('-').startsWith(pathAsArray.join('-')))
+ );
}
- isAnObject = v => typeof v === 'object' && v !== null && !Array.isArray(v);
+ isAnObject = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
defaultValues = (current) => ({
number: () => 0,
@@ -544,23 +598,22 @@ export class NgArrayRenderer extends Component {
array: () => [],
select: () => current?.props?.options[0] || '',
form: () => ({
- ...this.generateDefaultValue(current.schema)
+ ...this.generateDefaultValue(current.schema),
}),
- object: () => { },
- json: () => { },
- })
-
- generateDefaultValue = obj => {
- return Object.entries(obj)
- .reduce((acc, current) => {
- const type = current[1] ? current[1].type : undefined;
- const value = this.defaultValues(current[1])[type];
- return {
- ...acc,
- [current[0]]: value ? value() : ''
- }
- }, {})
- }
+ object: () => {},
+ json: () => {},
+ });
+
+ generateDefaultValue = (obj) => {
+ return Object.entries(obj).reduce((acc, current) => {
+ const type = current[1] ? current[1].type : undefined;
+ const value = this.defaultValues(current[1])[type];
+ return {
+ ...acc,
+ [current[0]]: value ? value() : '',
+ };
+ }, {});
+ };
render() {
const schema = this.props.schema;
@@ -568,19 +621,21 @@ export class NgArrayRenderer extends Component {
const readOnly = this.props.readOnly;
const ItemRenderer = schema.itemRenderer || this.props.rawSchema.itemRenderer;
- const showActions = this.canShowActions()
+ const showActions = this.canShowActions();
- if (readOnly && Array.isArray(this.props.value) && this.props.value.length === 0)
- return null;
+ if (readOnly && Array.isArray(this.props.value) && this.props.value.length === 0) return null;
return (
+
+ {label}
+
+ {description}
- {readOnly ? -
{value &&
- }
+ )}
{value ? 'On' : 'Off'}
+{value ? 'On' : 'Off'}
+
{Array.isArray(this.props.value) &&
this.props.value.map((value, idx) => {
- const path = [...this.props.path, String(idx)]
+ const path = [...this.props.path, String(idx)];
const showItem = this.canShowActions(path);
return (
@@ -591,10 +646,13 @@ export class NgArrayRenderer extends Component {
width: '100%',
outline: showItem ? 'rgb(65, 65, 62) solid 1px' : 'none',
padding: showItem ? '6px' : 0,
- marginBottom: showItem ? '6px' : 0
- }} key={path}>
- {!ItemRenderer && (
- readOnly ?
);
})}
- {showActions && !readOnly && }
+ {showActions && !readOnly && (
+
+ )}
- - })} /> : + {readOnly ? ( +
+ + ); + })} + /> + ) : (
-
-
+ return (
+
+
+
+ );
} else {
- return
- {VERIFIER_STRATEGIES.map(({ strategy, desc, title, tags }) => {
- return
+
+ );
+ })}
+
-
+
+ }}
+ flow={[
+ {
+ type: 'group',
+ collapsable: false,
+ name: 'A bearer token expected in Authorization header',
+ fields: ['header'],
+ },
+ ]}
+ />
+ Examples
-
- A common use case is a request containing a JSON Web token prefixed with Bearer to indicate that the user accessing the resources is authenticated.
- In our example, the token location is the Authorization header.
- To match this case, you must set Authorization for the name entry and Bearer followed by a space for the Remove value entry.
-
Examples
+
+ A common use case is a request containing a JSON Web token prefixed with Bearer to
+ indicate that the user accessing the resources is authenticated.
+
+ In our example, the token location is the Authorization header.
+
+ To match this case, you must set Authorization for the name entry and Bearer followed by
+ a space for the Remove value entry.
+
- {
- return
+ );
}
}
-}
\ No newline at end of file
+}
diff --git a/otoroshi/javascript/src/forms/wizards/JwtVerifierWizard.js b/otoroshi/javascript/src/forms/wizards/JwtVerifierWizard.js
index b93dc15cbe..4fa54891b0 100644
--- a/otoroshi/javascript/src/forms/wizards/JwtVerifierWizard.js
+++ b/otoroshi/javascript/src/forms/wizards/JwtVerifierWizard.js
@@ -11,137 +11,159 @@ import { FeedbackButton } from '../../pages/RouteDesigner/FeedbackButton';
import { v4 as uuid } from 'uuid';
function WizardStepButton(props) {
- return
+ return (
+
+ );
}
function Breadcrumb({ value, onClick }) {
- return
-
-
-
-
- }
- }
- }}
- flow={[
- {
- type: 'group',
- name: props => {
- if (!props.value)
- return 'Selected verifier'
- else {
- return `${props.value.name} - ${props.value.desc}`
- }
+ return (
+
+ {
+ return (
+
+ }}
+ flow={[
+ {
+ type: 'group',
+ name: (props) => {
+ if (!props.value) return 'Selected verifier';
+ else {
+ return `${props.value.name} - ${props.value.desc}`;
+ }
+ },
+ fields: ['actions'],
+ },
+ ]}
+ />
+
+
+
+
+
+ );
+ },
},
- fields: ['actions']
- }
- ]}
- />
- {value.map((part, i) => {
- return onClick(i)}>
- {part}
- {(i + 1) < value.length && }
-
- })}
+ return (
+
+ {value.map((part, i) => {
+ return (
+ onClick(i)}>
+ {part}
+ {i + 1 < value.length && }
+
+ );
+ })}
+
+ );
}
function Header({ onClose, mode }) {
- return
+ return (
+
+ );
}
function WizardActions({ nextStep, prevStep, step, goBack }) {
- return
-
-
+ return (
+
+
+
+ );
}
function Selector({ setMode, disableSelectMode }) {
- return
-
Getting started
-
- {[
- { title: 'NEW', text: 'Create a new JWT verifier', mode: 'creation' },
- { title: 'SELECT', text: 'Use an existing JWT verifier', mode: 'edition', disabled: disableSelectMode },
- { title: 'CLONE', text: 'Create a new one fron an existing JWT verifier', mode: 'clone' }
- ].map(({ title, text, mode, disabled }) => disabled ? null :
- )}
+ return (
+
+ );
}
function JwtVerifierSelector({ handleSelect, allowedStrategy, mode }) {
const [verifiers, setVerifiers] = useState([]);
useEffect(() => {
- BackOfficeServices.findAllJwtVerifiers()
- .then(setVerifiers)
+ BackOfficeServices.findAllJwtVerifiers().then(setVerifiers);
}, []);
- return
+
- Getting started
+
+ {[
+ { title: 'NEW', text: 'Create a new JWT verifier', mode: 'creation' },
+ {
+ title: 'SELECT',
+ text: 'Use an existing JWT verifier',
+ mode: 'edition',
+ disabled: disableSelectMode,
+ },
+ { title: 'CLONE', text: 'Create a new one fron an existing JWT verifier', mode: 'clone' },
+ ].map(({ title, text, mode, disabled }) =>
+ disabled ? null : (
+
+ )
+ )}
+
-
-
- Select {mode === 'clone' ? 'the verifier to clone' : 'a verifier'}
-
- {
- handleSelect(verifiers.find(v => v.id === id))
- }}
- options={verifiers.filter(verifier => allowedStrategy ? verifier.strategy.type === allowedStrategy : true)}
- optionsTransformer={arr => arr.map(item => ({ value: item.id, label: item.name }))} />
+ return (
+
+ );
}
function GoBackSelection({ goBack }) {
- return
+
-
+
+ Select {mode === 'clone' ? 'the verifier to clone' : 'a verifier'}
+
+ {
+ handleSelect(verifiers.find((v) => v.id === id));
+ }}
+ options={verifiers.filter((verifier) =>
+ allowedStrategy ? verifier.strategy.type === allowedStrategy : true
+ )}
+ optionsTransformer={(arr) => arr.map((item) => ({ value: item.id, label: item.name }))}
+ />
+
-
-
+ return (
+
+
+
+ );
}
export class JwtVerifierWizard extends React.Component {
init = () => {
if (this.props.jwtVerifier) {
if (!this.props.allowedNewStrategy) {
- return this.props.jwtVerifier
+ return this.props.jwtVerifier;
} else {
return {
strict: false,
@@ -149,11 +171,10 @@ export class JwtVerifierWizard extends React.Component {
type: 'PassThrough',
verificationSettings: { fields: { iss: 'The Issuer' }, arrayFields: {} },
},
- ...this.props.jwtVerifier
- }
+ ...this.props.jwtVerifier,
+ };
}
- }
- else {
+ } else {
return {
type: 'global',
strict: false,
@@ -162,264 +183,318 @@ export class JwtVerifierWizard extends React.Component {
strategy: {
type: 'PassThrough',
verificationSettings: { fields: { iss: 'The Issuer' }, arrayFields: {} },
- }
- }
+ },
+ };
}
- }
+ };
state = {
step: 1,
jwtVerifier: this.init(),
- breadcrumb: [
- 'Informations'
- ],
- mode: this.props.mode || 'selector'
- }
+ breadcrumb: ['Informations'],
+ mode: this.props.mode || 'selector',
+ };
onChange = (field, value) => {
this.setState({
jwtVerifier: {
...this.state.jwtVerifier,
- [field]: value
- }
- })
- }
+ [field]: value,
+ },
+ });
+ };
prevStep = () => {
- if (this.state.step - 1 > 0)
- this.setState({ step: this.state.step - 1 });
+ if (this.state.step - 1 > 0) this.setState({ step: this.state.step - 1 });
};
nextStep = () => {
this.setState({
- step: this.state.step + 1
+ step: this.state.step + 1,
});
};
updateBreadcrumb = (value, i) => {
if (i >= this.state.breadcrumb.length) {
this.setState({
- breadcrumb: [...this.state.breadcrumb, value]
+ breadcrumb: [...this.state.breadcrumb, value],
});
- }
- else {
+ } else {
this.setState({
breadcrumb: this.state.breadcrumb.map((v, j) => {
- if (j === i)
- return value
- return v
- })
- })
+ if (j === i) return value;
+ return v;
+ }),
+ });
}
- }
+ };
render() {
const { step, jwtVerifier, mode } = this.state;
if (mode === 'update_in_wizard') {
- return
-
-
-
- this.setState({ jwtVerifier })} />
-
-
-
+
- }
- }
+ result: {
+ type: 'form',
+ label: 'Form values',
+ schema: {
+ headerName: {
+ type: 'string',
+ label: 'Name',
+ props: {
+ disabled: true,
+ defaultValue: 'Authorization',
+ },
+ },
+ remove: {
+ type: 'string',
+ label: 'Remove value',
+ props: {
+ disabled: true,
+ defaultValue: 'Bearer ',
+ },
+ },
+ },
+ flow: ['headerName', 'remove'],
+ },
+ }}
+ flow={[
+ {
+ type: 'group',
+ collapsable: false,
+ name: 'A bearer token expected in Authorization header',
+ fields: ['header', 'result'],
+ },
+ ]}
+ />
+
+ );
+ },
+ },
},
flow: [
'type',
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InHeader',
+ visible: (props) => props?.type === 'InHeader',
name: 'Header informations',
- fields: ['name', 'remove', 'debug']
+ fields: ['name', 'remove', 'debug'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InQueryParam',
+ visible: (props) => props?.type === 'InQueryParam',
name: 'Query param name',
- fields: ['name']
+ fields: ['name'],
},
{
type: 'group',
collapsable: false,
- visible: props => props?.type === 'InCookie',
+ visible: (props) => props?.type === 'InCookie',
name: 'Cookie name',
- fields: ['name']
- }
- ]
- }
- }
-}
+ fields: ['name'],
+ },
+ ],
+ },
+ },
+};
function DefaultTokenStep({ value, onChange }) {
-
return (
<>
-
- }
+ marginBottom: '6px',
+ }}
+ className="mt-3">
+ {started && (
+
+
+
+ )}
{!started && }
);
-};
\ No newline at end of file
+}
diff --git a/otoroshi/javascript/src/forms/wizards/index.js b/otoroshi/javascript/src/forms/wizards/index.js
index 1148f36cf7..1cf5f8ed9e 100644
--- a/otoroshi/javascript/src/forms/wizards/index.js
+++ b/otoroshi/javascript/src/forms/wizards/index.js
@@ -1,5 +1,5 @@
-import { JwtVerifierWizard } from "./JwtVerifierWizard";
+import { JwtVerifierWizard } from './JwtVerifierWizard';
export const Wizards = {
- 'JwtVerifierWizard': JwtVerifierWizard
-}
\ No newline at end of file
+ JwtVerifierWizard: JwtVerifierWizard,
+};
diff --git a/otoroshi/javascript/src/pages/JwtVerifiersPage.js b/otoroshi/javascript/src/pages/JwtVerifiersPage.js
index fd47d29a23..e3356ceb1b 100644
--- a/otoroshi/javascript/src/pages/JwtVerifiersPage.js
+++ b/otoroshi/javascript/src/pages/JwtVerifiersPage.js
@@ -5,7 +5,7 @@ import { JwtVerifier } from '../components/JwtVerifier';
import { Button } from '../components/Button';
import { ClassifiedForms } from '../forms';
import { FeedbackButton } from './RouteDesigner/FeedbackButton';
-import PageTitle from '../components/PageTitle'
+import PageTitle from '../components/PageTitle';
import { Dropdown } from '../components/Dropdown';
import { YAMLExportButton } from '../components/exporters/YAMLButton';
import { JsonExportButton } from '../components/exporters/JSONButton';
@@ -14,13 +14,13 @@ import { ENTITIES, FormSelector } from '../components/FormSelector';
export class JwtVerifiersPage extends Component {
state = {
- showWizard: false
- }
+ showWizard: false,
+ };
columns = [
{ title: 'Name', content: (item) => item.name },
{ title: 'Description', content: (item) => item.desc },
- { title: 'Strategy', content: (item) => item.strategy?.type }
+ { title: 'Strategy', content: (item) => item.strategy?.type },
];
componentDidMount() {
@@ -32,41 +32,44 @@ export class JwtVerifiersPage extends Component {
const pathname = window.location.href;
const isEditPage = pathname.includes('edit');
- const SaveButton = isEditPage ? }
- /> : null;
+ const SaveButton = isEditPage ? (
+ }
+ />
+ ) : null;
- return
- {isEditPage &&
-
- {
- const what = window.location.pathname.split('/')[3];
- const id = window.location.pathname.split('/')[5];
- window
- .newConfirm('Delete this verifier ?')
- .then((ok) => {
+ return (
+
+ {isEditPage && (
+
+ {
+ const what = window.location.pathname.split('/')[3];
+ const id = window.location.pathname.split('/')[5];
+ window.newConfirm('Delete this verifier ?').then((ok) => {
if (ok) {
- BackOfficeServices.deleteJwtVerifier(id)
- .then(() => {
- history.push('/' + what);
- });
+ BackOfficeServices.deleteJwtVerifier(id).then(() => {
+ history.push('/' + what);
+ });
}
});
- }}
- icon="fa-trash"
- text="Delete" />
- }
- {SaveButton}
-
- })
- }
+ }}
+ icon="fa-trash"
+ text="Delete"
+ />
+
+ )}
+ {SaveButton}
+
+ );
+ });
+ };
gotoVerifier = (verifier) => {
window.location = `/bo/dashboard/jwt-verifiers/edit/${verifier.id}`;
@@ -75,15 +78,20 @@ export class JwtVerifiersPage extends Component {
render() {
const { showWizard } = this.state;
- const JwtVerifierWizard = ClassifiedForms.wizards.JwtVerifierWizard
+ const JwtVerifierWizard = ClassifiedForms.wizards.JwtVerifierWizard;
return (
- BackOfficeServices.updateJwtVerifier(jwtVerifier)}
- onSuccess={this.props.hide}
- icon={() => }
- text="Save the verifier"
+ return (
+
+ );
} else {
const STEPS = [
{
component: InformationsStep,
props: {
name: jwtVerifier.name,
- onChange: value => {
- this.onChange('name', value)
+ onChange: (value) => {
+ this.onChange('name', value);
this.updateBreadcrumb(value, 0);
- }
- }
+ },
+ },
},
{
component: StrategyStep,
hide: this.props.allowedNewStrategy ? true : undefined,
props: {
value: jwtVerifier.strategy?.type,
- onChange: value => {
- if (value?.strategy)
- this.updateBreadcrumb(value.strategy, 1);
- this.setState({
- jwtVerifier: {
- ...jwtVerifier,
- strategy: {
- ...(jwtVerifier.strategy || {}),
- type: value?.strategy
- }
+ onChange: (value) => {
+ if (value?.strategy) this.updateBreadcrumb(value.strategy, 1);
+ this.setState(
+ {
+ jwtVerifier: {
+ ...jwtVerifier,
+ strategy: {
+ ...(jwtVerifier.strategy || {}),
+ type: value?.strategy,
+ },
+ },
+ },
+ () => {
+ if (value?.strategy) this.nextStep();
}
- }, () => {
- if (value?.strategy)
- this.nextStep()
- })
- }
- }
+ );
+ },
+ },
},
{
component: DefaultTokenStep,
hide: this.props.allowedNewStrategy ? true : undefined,
onChange: (_, index) => {
this.updateBreadcrumb(`${this.state.jwtVerifier.source?.type || ''} Location`, index);
- }
+ },
},
{
component: TokenSignatureStep,
props: {
root: 'algoSettings',
value: jwtVerifier,
- title: this.props.allowedNewStrategy === 'PassThrough' ? 'Verify token with' : undefined,
- onChange: (value, index) => this.setState({ jwtVerifier: value }, () => {
- this.updateBreadcrumb(`${this.state.jwtVerifier.algoSettings?.type || ''} Algo.`, index);
- })
- }
+ title:
+ this.props.allowedNewStrategy === 'PassThrough' ? 'Verify token with' : undefined,
+ onChange: (value, index) =>
+ this.setState({ jwtVerifier: value }, () => {
+ this.updateBreadcrumb(
+ `${this.state.jwtVerifier.algoSettings?.type || ''} Algo.`,
+ index
+ );
+ }),
+ },
},
{
component: TokenSignatureStep,
- condition: value => ['Sign', 'Transform'].includes(value.strategy?.type),
+ condition: (value) => ['Sign', 'Transform'].includes(value.strategy?.type),
props: {
value: jwtVerifier['strategy'],
root: 'algoSettings',
title: 'Resign token with',
- onChange: (value, index) => this.setState({
- jwtVerifier: {
- ...jwtVerifier,
- ['strategy']: value
- }
- }, () => {
- this.updateBreadcrumb(`${this.state.jwtVerifier.strategy?.algoSettings?.type || ''} Resign Algo.`, index);
- })
- }
+ onChange: (value, index) =>
+ this.setState(
+ {
+ jwtVerifier: {
+ ...jwtVerifier,
+ ['strategy']: value,
+ },
+ },
+ () => {
+ this.updateBreadcrumb(
+ `${this.state.jwtVerifier.strategy?.algoSettings?.type || ''} Resign Algo.`,
+ index
+ );
+ }
+ ),
+ },
},
{
component: TokenTransformStep,
- condition: value => 'Transform' === value.strategy?.type,
+ condition: (value) => 'Transform' === value.strategy?.type,
props: {
value: jwtVerifier.strategy?.transformSettings,
onChange: (value, index) => {
- this.setState({
- jwtVerifier: {
- ...jwtVerifier,
- strategy: {
- ...(jwtVerifier.strategy || {}),
- transformSettings: value
- }
+ this.setState(
+ {
+ jwtVerifier: {
+ ...jwtVerifier,
+ strategy: {
+ ...(jwtVerifier.strategy || {}),
+ transformSettings: value,
+ },
+ },
+ },
+ () => {
+ const transformSettings =
+ this.state.jwtVerifier.strategy?.transformSettings || {};
+ const sameLocation =
+ transformSettings.location === undefined ? true : transformSettings.location;
+ const outLocation = transformSettings.out_location?.source?.type || '';
+ this.updateBreadcrumb(
+ `${
+ sameLocation ? this.state.jwtVerifier.source?.type : outLocation
+ } Out location.`,
+ index
+ );
}
- }, () => {
- const transformSettings = this.state.jwtVerifier.strategy?.transformSettings || {};
- const sameLocation = transformSettings.location === undefined ? true : transformSettings.location;
- const outLocation = transformSettings.out_location?.source?.type || '';
- this.updateBreadcrumb(`${sameLocation ? this.state.jwtVerifier.source?.type : outLocation} Out location.`, index);
- })
- }
- }
- }
- ]
- .filter(item => item.hide === undefined)
+ );
+ },
+ },
+ },
+ ].filter((item) => item.hide === undefined);
const showSummary = !STEPS.find((item, i) => {
- return step === (i + 1) && (item.condition ? item.condition(jwtVerifier) : true)
+ return step === i + 1 && (item.condition ? item.condition(jwtVerifier) : true);
});
return (
+
-
+
+
+ this.setState({ jwtVerifier })}
/>
+
+
+ BackOfficeServices.updateJwtVerifier(jwtVerifier)}
+ onSuccess={this.props.hide}
+ icon={() => }
+ text="Save the verifier"
+ />
+
-
@@ -437,33 +512,31 @@ function WizardLastStep({ value, breadcrumb, onConfirm }) {
const create = () => {
setCreating(true);
- BackOfficeServices.createNewJwtVerifier()
- .then(template => {
- BackOfficeServices.createJwtVerifier({
- ...template,
- name: value.name || 'Default name',
- source: value.source,
- algoSettings: {
- ...template.algoSettings,
- ...value.algoSettings,
- },
- strategy: {
- ...template.strategy,
- ...value.strategy,
- type: value.strategy.type
- }
- })
- .then(res => {
- if (res.error) {
- setError(true);
- } else if (onConfirm) {
- onConfirm(template.id)
- } else {
- setVerifier(template);
- }
- })
- })
- }
+ BackOfficeServices.createNewJwtVerifier().then((template) => {
+ BackOfficeServices.createJwtVerifier({
+ ...template,
+ name: value.name || 'Default name',
+ source: value.source,
+ algoSettings: {
+ ...template.algoSettings,
+ ...value.algoSettings,
+ },
+ strategy: {
+ ...template.strategy,
+ ...value.strategy,
+ type: value.strategy.type,
+ },
+ }).then((res) => {
+ if (res.error) {
+ setError(true);
+ } else if (onConfirm) {
+ onConfirm(template.id);
+ } else {
+ setVerifier(template);
+ }
+ });
+ });
+ };
return (
<>
@@ -471,32 +544,44 @@ function WizardLastStep({ value, breadcrumb, onConfirm }) {
Creation steps
-
+
this.setState({ mode })} disableSelectMode={this.props.disableSelectMode} />}
-
- {mode !== 'selector' && <>
- {['edition', 'clone'].includes(mode) ?
- {
- if (this.props.onConfirm && mode === 'edition') {
- this.props.onConfirm(verifier.id);
- } else {
- this.setState({
- mode: 'continue',
- jwtVerifier: {
- ...verifier,
- id: `jwt_verifier_${uuid()}`
- }
- })
- }
- }} /> :
- <>
- this.setState({ step: i + 1 })} />
- {
+ this.setState({
+ mode: this.props.mode || 'selector',
+ });
+ }}
+ />
+ )}
- {STEPS.map(({ component, props, condition, onChange }, i) => {
- if (step === (i + 1) && (condition ? condition(jwtVerifier) : true)) {
- const defaultProps = {
- value: jwtVerifier,
- onChange: value => this.setState({ jwtVerifier: value }, onChange)
- };
-
- const allProps = props ? {
- ...props,
- onChange: e => props.onChange(e, i)
- } : defaultProps;
-
- return React.createElement(component, { key: component.Type, ...allProps });
+ {mode === 'selector' && (
+ this.setState({ mode })}
+ disableSelectMode={this.props.disableSelectMode}
+ />
+ )}
+
+ {mode !== 'selector' && (
+ <>
+ {['edition', 'clone'].includes(mode) ? (
+ {
+ if (this.props.onConfirm && mode === 'edition') {
+ this.props.onConfirm(verifier.id);
} else {
- return null;
+ this.setState({
+ mode: 'continue',
+ jwtVerifier: {
+ ...verifier,
+ id: `jwt_verifier_${uuid()}`,
+ },
+ });
}
- })}
- {showSummary && this.setState({ step: i + 1 })}
+ />
+ {
- this.setState({
- mode: this.props.mode || 'selector'
- })
- }} />}
+ })}
+ {showSummary && (
+ {
+ this.setState({
+ mode: this.props.mode || 'selector',
+ });
+ }}
+ />
+ )}
+
+
+ )}
+
+ )}
+ {['edition', 'clone'].includes(mode) && (
+
+ {STEPS.map(({ component, props, condition, onChange }, i) => {
+ if (step === i + 1 && (condition ? condition(jwtVerifier) : true)) {
+ const defaultProps = {
+ value: jwtVerifier,
+ onChange: (value) => this.setState({ jwtVerifier: value }, onChange),
+ };
+
+ const allProps = props
+ ? {
+ ...props,
+ onChange: (e) => props.onChange(e, i),
+ }
+ : defaultProps;
+
+ return React.createElement(component, {
+ key: component.Type,
+ ...allProps,
+ });
+ } else {
+ return null;
}
- }} />}
- {!showSummary && {
- this.setState({
- mode: this.props.mode || 'selector'
- })
- }} />}
-
- }
- }
- {['edition', 'clone'].includes(mode) &&
+
- )
+ );
}
function StrategyStep({ value, onChange }) {
-
const schema = {
strategy: {
- renderer: props => {
- return
{breadcrumb.map((part, i) => {
- return
- {!creating && }
-
- {(verifier || error) && }
+ {!creating && (
+
+ )}
+
+ {(verifier || error) && (
+
+ )}
- )
+ );
}
function InformationsStep({ name, onChange }) {
@@ -520,107 +605,120 @@ function InformationsStep({ name, onChange }) {
/>
- {[
- {
- strategy: 'PassThrough', title: ['Verify'],
- desc: 'PassThrough will only verifiy token signing and fields values if provided. ',
- tags: ['verify']
- },
- {
- strategy: 'Sign', title: ['Verify and re-sign'],
- desc: 'Sign will do the same as PassThrough plus will re-sign the JWT token with the provided algo. settings.',
- tags: ['verify', 'sign']
- },
- {
- strategy: 'Transform', title: ['Verify, re-sign and Transform'],
- desc: 'Transform will do the same as Sign plus will be able to transform the token.',
- tags: ['verify', 'sign', 'transform']
- }
- ].map(({ strategy, desc, title, tags }) => {
- return
+ );
+ })}
+
+ );
+ },
+ },
+ };
- const flow = [
- 'strategy'
- ];
+ const flow = ['strategy'];
return (
<>
What kind of strategy will be used
-The location of the token
@@ -748,11 +848,10 @@ function DefaultTokenStep({ value, onChange }) { onChange={onChange} /> - ) + ); } function TokenSignatureStep({ root, value, onChange, title }) { - const schema = { [root]: { type: 'form', @@ -769,71 +868,74 @@ function TokenSignatureStep({ root, value, onChange, title }) { { label: 'JWK Set (only for verification)', value: 'JWKSAlgoSettings' }, { label: 'RSASSA-PKCS1 + SHA from KeyPair', value: 'RSAKPAlgoSettings' }, { label: 'ECDSA + SHA from KeyPair', value: 'ESKPAlgoSettings' }, - { label: 'Otoroshi KeyPair from token kid (only for verification)', value: 'KidAlgoSettings' } - ] - } + { + label: 'Otoroshi KeyPair from token kid (only for verification)', + value: 'KidAlgoSettings', + }, + ], + }, }, onlyExposedCerts: { type: 'bool', - label: 'Use only exposed keypairs' + label: 'Use only exposed keypairs', }, size: { type: 'dots', label: 'SHA size', props: { - options: [256, 384, 512] - } + options: [256, 384, 512], + }, }, secret: { type: 'string', - label: 'HMAC secret' + label: 'HMAC secret', }, base64: { type: 'bool', - label: 'Base64 encoded secret' + label: 'Base64 encoded secret', }, publicKey: { type: 'text', - label: 'Public key' + label: 'Public key', }, privateKey: { type: 'text', - label: 'Private key' + label: 'Private key', }, certId: { - type: "select", - label: "Cert. id", + type: 'select', + label: 'Cert. id', props: { - optionsFrom: "/bo/api/proxy/api/certificates", + optionsFrom: '/bo/api/proxy/api/certificates', optionsTransformer: { - label: "name", - value: "id" - } - } + label: 'name', + value: 'id', + }, + }, }, url: { type: 'string', - label: 'URL' + label: 'URL', }, timeout: { type: 'number', - label: 'HTTP call timeout' + label: 'HTTP call timeout', }, ttl: { type: 'number', - label: 'Cache TTL for the keyset' + label: 'Cache TTL for the keyset', }, headers: { - type: "object", - label: "Headers" + type: 'object', + label: 'Headers', }, kty: { type: 'select', label: 'Key type', props: { - options: ['RSA', 'EC'] - } - } + options: ['RSA', 'EC'], + }, + }, }, flow: (props, v) => { return { @@ -843,19 +945,12 @@ function TokenSignatureStep({ root, value, onChange, title }) { RSAKPAlgoSettings: ['type', 'size', 'certId'], ESKPAlgoSettings: ['type', 'size', 'certId'], ESAlgoSettings: ['type', 'size', 'publicKey', 'privateKey'], - JWKSAlgoSettings: [ - 'type', - 'url', - 'timeout', - 'ttl', - 'headers', - 'kty' - ], - [undefined]: ['type'] - }[v.value?.type] - } - } - } + JWKSAlgoSettings: ['type', 'url', 'timeout', 'ttl', 'headers', 'kty'], + [undefined]: ['type'], + }[v.value?.type]; + }, + }, + }; const flow = [root]; @@ -863,14 +958,9 @@ function TokenSignatureStep({ root, value, onChange, title }) { <>{title || 'Generate token with'}
-Location of the generated token
-
- {showWizard && this.setState({ showWizard: false })} disableSelectMode={true} />}
+ {showWizard && (
+ this.setState({ showWizard: false })}
+ disableSelectMode={true}
+ />
+ )}
item.id}
formPassProps={{
global: true,
- showHeader: window.location.href.includes('edit')
+ showHeader: window.location.href.includes('edit'),
}}
injectBottomBar={({ closeEditForm, state, setState }) => {
- return