trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/*: add loading indicator to select inputs

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-04 00:24:06 +02:00
parent 87fdb591ce
commit 1835981f3d
23 changed files with 46 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/pages/applications/ApplicationForm.ts
View file

@ -94,7 +94,7 @@ export class ApplicationForm extends Form<Application> {
<option value="" ?selected=${this.application?.provider === undefined}>---------</option>
${until(new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then(providers => {
return this.groupProviders(providers.results);
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal

4
web/src/pages/events/RuleForm.ts
View file

@ -66,7 +66,7 @@ export class RuleForm extends Form<NotificationRule> {
return groups.results.map(group => {
return html`<option value=${ifDefined(group.pk)} ?selected=${this.rule?.group?.groupUuid === group.pk}>${group.name}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
@ -81,7 +81,7 @@ export class RuleForm extends Form<NotificationRule> {
});
return html`<option value=${ifDefined(transport.pk)} ?selected=${selected}>${transport.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Select which transports should be used to notify the user. If none are selected, the notification will only be shown in the authentik UI.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>

4
web/src/pages/flows/StageBindingForm.ts
View file

@ -82,7 +82,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
// No ?selected check here, as this input isnt shown on update forms
return html`<option value=${ifDefined(flow.pk)}>${flow.name} (${flow.slug})</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>`;
}
@ -99,7 +99,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
ordering: "pk"
}).then(stages => {
return this.groupStages(stages.results);
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="evaluateOnPlan">

4
web/src/pages/groups/GroupForm.ts
View file

@ -64,7 +64,7 @@ export class GroupForm extends Form<Group> {
return groups.results.map(group => {
return html`<option value=${ifDefined(group.pk)} ?selected=${this.group?.parent === group.pk}>${group.name}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
@ -81,7 +81,7 @@ export class GroupForm extends Form<Group> {
});
return html`<option value=${ifDefined(user.pk)} ?selected=${selected}>${user.username} (${user.name})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/outposts/OutpostForm.ts
View file

@ -64,7 +64,7 @@ export class OutpostForm extends Form<Outpost> {
return scs.results.map(sc => {
return html`<option value=${ifDefined(sc.pk)} ?selected=${this.outpost?.serviceConnection === sc.pk}>${sc.name}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Selecting a service-connection enables the management of the outpost by authentik.`}</p>
<p class="pf-c-form__helper-text">
@ -85,7 +85,7 @@ export class OutpostForm extends Form<Outpost> {
});
return html`<option value=${ifDefined(provider.pk)} ?selected=${selected}>${provider.verboseName} ${provider.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/outposts/ServiceConnectionDockerForm.ts
View file

@ -79,7 +79,7 @@ export class ServiceConnectionDockerForm extends Form<DockerServiceConnection> {
return certs.results.map(cert => {
return html`<option value=${ifDefined(cert.pk)} ?selected=${this.sc?.tlsVerification === cert.pk}>${cert.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`}</p>
</ak-form-element-horizontal>
@ -95,7 +95,7 @@ export class ServiceConnectionDockerForm extends Form<DockerServiceConnection> {
return certs.results.map(cert => {
return html`<option value=${ifDefined(cert.pk)} ?selected=${this.sc?.tlsAuthentication === cert.pk}>${cert.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Certificate/Key used for authentication. Can be left empty for no authentication.`}</p>
</ak-form-element-horizontal>

6
web/src/pages/policies/PolicyBindingForm.ts
View file

@ -80,7 +80,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
ordering: "pk"
}).then(policies => {
return this.groupPolicies(policies.results);
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
@ -94,7 +94,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
return groups.results.map(group => {
return html`<option value=${ifDefined(group.pk)} ?selected=${group.pk === this.binding?.group}>${group.name}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
@ -108,7 +108,7 @@ export class PolicyBindingForm extends Form<PolicyBinding> {
return users.results.map(user => {
return html`<option value=${ifDefined(user.pk)} ?selected=${user.pk === this.binding?.user}>${user.name}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<input required name="target" type="hidden" value=${ifDefined(this.binding?.target || this.targetPk)}>

2
web/src/pages/policies/PolicyTestForm.ts
View file

@ -69,7 +69,7 @@ export class PolicyTestForm extends Form<PolicyTest> {
return users.results.map(user => {
return html`<option value=${ifDefined(user.pk)}>${user.username}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal

4
web/src/pages/policies/event_matcher/EventMatcherPolicyForm.ts
View file

@ -75,7 +75,7 @@ export class EventMatcherPolicyForm extends Form<EventMatcherPolicy> {
return actions.map(action => {
return html`<option value=${action.component} ?selected=${this.policy?.action === action.component}>${action.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Match created events with this action type. When left empty, all action types will be matched.`}</p>
</ak-form-element-horizontal>
@ -94,7 +94,7 @@ export class EventMatcherPolicyForm extends Form<EventMatcherPolicy> {
return apps.map(app => {
return html`<option value=${app.name} ?selected=${this.policy?.app === app.name}>${app.label}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Match events created by selected application. When left empty, all applications are matched.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/property-mappings/PropertyMappingTestForm.ts
View file

@ -58,7 +58,7 @@ export class PolicyTestForm extends Form<PolicyTest> {
return users.results.map(user => {
return html`<option value=${ifDefined(user.pk)}>${user.username}</option>`;
});
}), html``)}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal

6
web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
View file

@ -69,7 +69,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used when authorizing this provider.`}</p>
</ak-form-element-horizontal>
@ -159,7 +159,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
});
return html`<option value=${ifDefined(scope.pk)} ?selected=${selected}>${scope.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Select which scopes can be used by the client. The client stil has to specify the scope to access the data.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
@ -177,7 +177,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.rsaKey === key.pk}>${key.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Key used to sign the tokens. Only required when JWT Algorithm is set to RS256.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/providers/proxy/ProxyProviderForm.ts
View file

@ -65,7 +65,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used when authorizing this provider.`}</p>
</ak-form-element-horizontal>
@ -114,7 +114,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.certificate === key.pk}>${key.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>

10
web/src/pages/providers/saml/SAMLProviderForm.ts
View file

@ -64,7 +64,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)} ?selected=${this.provider?.authorizationFlow === flow.pk}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used when authorizing this provider.`}</p>
</ak-form-element-horizontal>
@ -125,7 +125,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.signingKp === key.pk}>${key.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Keypair used to sign outgoing Responses going to the Service Provider.`}</p>
</ak-form-element-horizontal>
@ -140,7 +140,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.provider?.verificationKp === key.pk}>${key.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.`}</p>
</ak-form-element-horizontal>
@ -159,7 +159,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
});
return html`<option value=${ifDefined(mapping.pk)} ?selected=${selected}>${mapping.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
</ak-form-element-horizontal>
@ -174,7 +174,7 @@ export class SAMLProviderFormPage extends Form<SAMLProvider> {
return mappings.results.map(mapping => {
return html`<option value=${ifDefined(mapping.pk)} ?selected=${this.provider?.nameIdMapping === mapping.pk}>${mapping.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/providers/saml/SAMLProviderImportForm.ts
View file

@ -48,7 +48,7 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
return flows.results.map(flow => {
return html`<option value=${ifDefined(flow.pk)}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used when authorizing this provider.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/sources/ldap/LDAPSourceForm.ts
View file

@ -153,7 +153,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
}
return html`<option value=${ifDefined(mapping.pk)} ?selected=${selected}>${mapping.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Property mappings used to user creation.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
@ -177,7 +177,7 @@ export class LDAPSourceForm extends Form<LDAPSource> {
}
return html`<option value=${ifDefined(mapping.pk)} ?selected=${selected}>${mapping.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Property mappings used to group creation.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>

6
web/src/pages/sources/oauth/OAuthSourceForm.ts
View file

@ -145,7 +145,7 @@ export class OAuthSourceForm extends Form<OAuthSource> {
return types.map(type => {
return html`<option ?data-urls-custom=${type.urlsCustomizable} value=${type.slug} ?selected=${this.source?.providerType === type.slug}>${type.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Keypair which is used to sign outgoing requests. Leave empty to disable signing.`}</p>
</ak-form-element-horizontal>
@ -173,7 +173,7 @@ export class OAuthSourceForm extends Form<OAuthSource> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow to use when authenticating existing users.`}</p>
</ak-form-element-horizontal>
@ -193,7 +193,7 @@ export class OAuthSourceForm extends Form<OAuthSource> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow to use when enrolling new users.`}</p>
</ak-form-element-horizontal>

8
web/src/pages/sources/saml/SAMLSourceForm.ts
View file

@ -118,7 +118,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
return keys.results.map(key => {
return html`<option value=${ifDefined(key.pk)} ?selected=${this.source?.signingKp === key.pk}>${key.name}</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Keypair which is used to sign outgoing requests. Leave empty to disable signing.`}</p>
</ak-form-element-horizontal>
@ -231,7 +231,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used before authentication.`}</p>
</ak-form-element-horizontal>
@ -251,7 +251,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow to use when authenticating existing users.`}</p>
</ak-form-element-horizontal>
@ -271,7 +271,7 @@ export class SAMLSourceForm extends Form<SAMLSource> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow to use when enrolling new users.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/stages/authenticator_static/AuthenticatorStaticStageForm.ts
View file

@ -80,7 +80,7 @@ export class AuthenticatorStaticStageForm extends Form<AuthenticatorStaticStage>
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used by an authenticated user to configure this Stage. If empty, user will not be able to configure this stage.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
View file

@ -86,7 +86,7 @@ export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used by an authenticated user to configure this Stage. If empty, user will not be able to configure this stage.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
View file

@ -122,7 +122,7 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
const selected = this.stage?.configurationStage === stage.pk;
return html`<option value=${ifDefined(stage.pk)} ?selected=${selected}>${stage.name} (${stage.verboseName})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Stage used to configure Authenticator when user doesn't have any compatible devices. After this configuration Stage passes, the user is not prompted again.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/stages/identification/IdentificationStageForm.ts
View file

@ -109,7 +109,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
const selected = this.stage?.enrollmentFlow === flow.pk;
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Optional enrollment flow, which is linked at the bottom of the page.`}</p>
</ak-form-element-horizontal>
@ -126,7 +126,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
const selected = this.stage?.recoveryFlow === flow.pk;
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Optional recovery flow, which is linked at the bottom of the page.`}</p>
</ak-form-element-horizontal>

2
web/src/pages/stages/password/PasswordStageForm.ts
View file

@ -96,7 +96,7 @@ export class PasswordStageForm extends Form<PasswordStage> {
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Flow used by an authenticated user to configure their password. If empty, user will not be able to configure change their password.`}</p>
</ak-form-element-horizontal>

4
web/src/pages/stages/prompt/PromptStageForm.ts
View file

@ -73,7 +73,7 @@ export class PromptStageForm extends Form<PromptStage> {
${t`${prompt.fieldKey} ('${prompt.label}', Type ${prompt.type})`}
</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
</ak-form-element-horizontal>
@ -92,7 +92,7 @@ export class PromptStageForm extends Form<PromptStage> {
${t`${policy.name} (${policy.verboseName})`}
</option>`;
});
}))}
}), html`<option>${t`Loading...`}</option>`)}
</select>
<p class="pf-c-form__helper-text">${t`Selected policies are executed when the stage is submitted to validate the data.`}</p>
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>