authentik
authentik copied to clipboard
stages/prompt: Add custom value to RadioButtonGroup and Dropdown
Is your feature request related to a problem? Please describe. Since #4822 we have RadioButtonGroups and Dropdowns in prompts. Sadly we cannot set an internal value. Value and the choice seen by the user is the same. Processing the choices is a bit difficult, especially when using an external api.
Describe the solution you'd like
The option to have a list of strings where the value and displayed is the same.
As well as a list of tuples which contains value (string) and the displayed value (string).
return [("value1", "choice1"), ("value2", "choice2")] -> <option (...) value="value">choice1</option> <option (...) value="value2">value2</option>
Describe alternatives you've considered Using only values produces duplicated code or duplicated api calls (getting id for an object after user chose an option) or bad ui/ux.
Additional context
important lines: value="${choice}" and <option (...)>${choice}</option>;
Source
case PromptTypeEnum.Dropdown:
return `<select class="pf-c-form-control" name="${prompt.fieldKey}">
${prompt.choices
?.map((choice) => {
return `<option
value="${choice}"
?selected=${prompt.placeholder === choice}
>
${choice}
</option>`;
})
.join("")}
</select>`;
case PromptTypeEnum.RadioButtonGroup:
return (
prompt.choices
?.map((choice) => {
return ` <div class="pf-c-check">
<input
type="radio"
class="pf-c-check__input"
name="${prompt.fieldKey}"
checked="${prompt.placeholder === choice}"
required="${prompt.required}"
value="${choice}"
/>
<label class="pf-c-check__label">${choice}</label>
</div>
`;
})
.join("") || ""
);
+1 for custom values