goauthentik / authentik

The authentication glue you need.
https://goauthentik.io
Other
12.89k stars 859 forks source link

stages/prompt: Add custom value to RadioButtonGroup and Dropdown #5197

Open macmoritz opened 1 year ago

macmoritz commented 1 year ago

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("") || ""
                );
benedikt-bartscher commented 1 year ago

+1 for custom values