web/admin: migrate webauthn forms to radio

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2023-01-04 22:33:30 +01:00
parent 3e7320734c
commit 471293ba25
No known key found for this signature in database
2 changed files with 78 additions and 91 deletions

View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/utils/TimeDeltaHelp"; import "@goauthentik/elements/utils/TimeDeltaHelp";
@ -188,29 +189,25 @@ export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValid
?required=${true} ?required=${true}
name="webauthnUserVerification" name="webauthnUserVerification"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${UserVerificationEnum.Required}" {
?selected=${this.instance?.webauthnUserVerification === label: t`User verification must occur.`,
UserVerificationEnum.Required} value: UserVerificationEnum.Required,
default: true,
},
{
label: t`User verification is preferred if available, but not required.`,
value: UserVerificationEnum.Preferred,
},
{
label: t`User verification should not occur.`,
value: UserVerificationEnum.Discouraged,
},
]}
.value=${this.instance?.webauthnUserVerification}
> >
${t`User verification must occur.`} </ak-radio>
</option>
<option
value="${UserVerificationEnum.Preferred}"
?selected=${this.instance?.webauthnUserVerification ===
UserVerificationEnum.Preferred}
>
${t`User verification is preferred if available, but not required.`}
</option>
<option
value="${UserVerificationEnum.Discouraged}"
?selected=${this.instance?.webauthnUserVerification ===
UserVerificationEnum.Discouraged}
>
${t`User verification should not occur.`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.showConfigurationStages ${this.showConfigurationStages
? html` ? html`

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect"; import "@goauthentik/elements/forms/SearchSelect";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
@ -74,86 +75,75 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
?required=${true} ?required=${true}
name="userVerification" name="userVerification"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${UserVerificationEnum.Required}" {
?selected=${this.instance?.userVerification === label: t`User verification must occur.`,
UserVerificationEnum.Required} value: UserVerificationEnum.Required,
default: true,
},
{
label: t`User verification is preferred if available, but not required.`,
value: UserVerificationEnum.Preferred,
},
{
label: t`User verification should not occur.`,
value: UserVerificationEnum.Discouraged,
},
]}
.value=${this.instance?.userVerification}
> >
${t`User verification must occur.`} </ak-radio>
</option>
<option
value="${UserVerificationEnum.Preferred}"
?selected=${this.instance?.userVerification ===
UserVerificationEnum.Preferred}
>
${t`User verification is preferred if available, but not required.`}
</option>
<option
value="${UserVerificationEnum.Discouraged}"
?selected=${this.instance?.userVerification ===
UserVerificationEnum.Discouraged}
>
${t`User verification should not occur.`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Resident key requirement`} label=${t`Resident key requirement`}
?required=${true} ?required=${true}
name="residentKeyRequirement" name="residentKeyRequirement"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="${ResidentKeyRequirementEnum.Discouraged}" {
?selected=${this.instance?.residentKeyRequirement === label: t`The authenticator should not create a dedicated credential`,
ResidentKeyRequirementEnum.Discouraged} value: ResidentKeyRequirementEnum.Required,
default: true,
},
{
label: t`The authenticator can create and store a dedicated credential, but if it doesn't that's alright too`,
value: ResidentKeyRequirementEnum.Preferred,
},
{
label: t`The authenticator MUST create a dedicated credential. If it cannot, the RP is prepared for an error to occur`,
value: ResidentKeyRequirementEnum.Discouraged,
},
]}
.value=${this.instance?.residentKeyRequirement}
> >
${t`The authenticator should not create a dedicated credential`} </ak-radio>
</option>
<option
value="${ResidentKeyRequirementEnum.Preferred}"
?selected=${this.instance?.residentKeyRequirement ===
ResidentKeyRequirementEnum.Preferred}
>
${t`The authenticator can create and store a dedicated credential, but if it doesn't that's alright too`}
</option>
<option
value="${ResidentKeyRequirementEnum.Required}"
?selected=${this.instance?.residentKeyRequirement ===
ResidentKeyRequirementEnum.Required}
>
${t`The authenticator MUST create a dedicated credential. If it cannot, the RP is prepared for an error to occur`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Authenticator Attachment`} label=${t`Authenticator Attachment`}
?required=${true} ?required=${true}
name="authenticatorAttachment" name="authenticatorAttachment"
> >
<select class="pf-c-form-control"> <ak-radio
<option .options=${[
value="" {
?selected=${this.instance?.authenticatorAttachment === null} label: t`No preference is sent`,
value: null,
default: true,
},
{
label: t`A non-removable authenticator, like TouchID or Windows Hello`,
value: AuthenticatorAttachmentEnum.Platform,
},
{
label: t`A "roaming" authenticator, like a YubiKey`,
value: AuthenticatorAttachmentEnum.CrossPlatform,
},
]}
.value=${this.instance?.authenticatorAttachment}
> >
${t`No preference is sent`} </ak-radio>
</option>
<option
value="${AuthenticatorAttachmentEnum.Platform}"
?selected=${this.instance?.authenticatorAttachment ===
AuthenticatorAttachmentEnum.Platform}
>
${t`A non-removable authenticator, like TouchID or Windows Hello`}
</option>
<option
value="${AuthenticatorAttachmentEnum.CrossPlatform}"
?selected=${this.instance?.authenticatorAttachment ===
AuthenticatorAttachmentEnum.CrossPlatform}
>
${t`A "roaming" authenticator, like a YubiKey`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Configuration flow`} name="configureFlow"> <ak-form-element-horizontal label=${t`Configuration flow`} name="configureFlow">
<ak-search-select <ak-search-select