habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: migrate webauthn forms to radio

Browse Source 
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 730139e43c
commit 805a4b766a
2 changed files with 78 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/admin/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
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,
${t`User verification must occur.`} },
</option> {
<option label: t`User verification is preferred if available, but not required.`,
value="${UserVerificationEnum.Preferred}" value: UserVerificationEnum.Preferred,
?selected=${this.instance?.webauthnUserVerification === },
UserVerificationEnum.Preferred} {
> label: t`User verification should not occur.`,
${t`User verification is preferred if available, but not required.`} value: UserVerificationEnum.Discouraged,
</option> },
<option ]}
value="${UserVerificationEnum.Discouraged}" .value=${this.instance?.webauthnUserVerification}
?selected=${this.instance?.webauthnUserVerification === >
UserVerificationEnum.Discouraged} </ak-radio>
>
${t`User verification should not occur.`}
</option>
</select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.showConfigurationStages ${this.showConfigurationStages
? html` ? html`

126
web/src/admin/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
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,
${t`User verification must occur.`} },
</option> {
<option label: t`User verification is preferred if available, but not required.`,
value="${UserVerificationEnum.Preferred}" value: UserVerificationEnum.Preferred,
?selected=${this.instance?.userVerification === },
UserVerificationEnum.Preferred} {
> label: t`User verification should not occur.`,
${t`User verification is preferred if available, but not required.`} value: UserVerificationEnum.Discouraged,
</option> },
<option ]}
value="${UserVerificationEnum.Discouraged}" .value=${this.instance?.userVerification}
?selected=${this.instance?.userVerification === >
UserVerificationEnum.Discouraged} </ak-radio>
>
${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,
${t`The authenticator should not create a dedicated credential`} },
</option> {
<option label: t`The authenticator can create and store a dedicated credential, but if it doesn't that's alright too`,
value="${ResidentKeyRequirementEnum.Preferred}" value: ResidentKeyRequirementEnum.Preferred,
?selected=${this.instance?.residentKeyRequirement === },
ResidentKeyRequirementEnum.Preferred} {
> label: t`The authenticator MUST create a dedicated credential. If it cannot, the RP is prepared for an error to occur`,
${t`The authenticator can create and store a dedicated credential, but if it doesn't that's alright too`} value: ResidentKeyRequirementEnum.Discouraged,
</option> },
<option ]}
value="${ResidentKeyRequirementEnum.Required}" .value=${this.instance?.residentKeyRequirement}
?selected=${this.instance?.residentKeyRequirement === >
ResidentKeyRequirementEnum.Required} </ak-radio>
>
${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,
${t`No preference is sent`} default: true,
</option> },
<option {
value="${AuthenticatorAttachmentEnum.Platform}" label: t`A non-removable authenticator, like TouchID or Windows Hello`,
?selected=${this.instance?.authenticatorAttachment === value: AuthenticatorAttachmentEnum.Platform,
AuthenticatorAttachmentEnum.Platform} },
> {
${t`A non-removable authenticator, like TouchID or Windows Hello`} label: t`A "roaming" authenticator, like a YubiKey`,
</option> value: AuthenticatorAttachmentEnum.CrossPlatform,
<option },
value="${AuthenticatorAttachmentEnum.CrossPlatform}" ]}
?selected=${this.instance?.authenticatorAttachment === .value=${this.instance?.authenticatorAttachment}
AuthenticatorAttachmentEnum.CrossPlatform} >
> </ak-radio>
${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