web: cleanup (#6664)

* web: remove <p> used for padding and do it properly

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: remove .form-help-text as it didn't change anything

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* move data-list styling to correct scope

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove title from navbar for docs-only build

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L 2023-08-29 18:24:11 +02:00 committed by GitHub
parent ccfd45774e
commit af200a6bf9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 57 additions and 69 deletions

View file

@ -78,7 +78,6 @@
</main> </main>
{% endblock %} {% endblock %}
<footer class="pf-c-login__footer"> <footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline"> <ul class="pf-c-list pf-m-inline">
{% for link in footer_links %} {% for link in footer_links %}
<li> <li>

View file

@ -59,7 +59,6 @@
</div> </div>
</main> </main>
<footer class="pf-c-login__footer"> <footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline"> <ul class="pf-c-list pf-m-inline">
<li> <li>
<a href="https://goauthentik.io?utm_source=authentik_outpost&utm_campaign=proxy_error"> <a href="https://goauthentik.io?utm_source=authentik_outpost&utm_campaign=proxy_error">

View file

@ -42,11 +42,11 @@ export class DummyPolicyForm extends ModelForm<DummyPolicy, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"A policy used for testing. Always returns the same result as specified below after waiting a random duration.", "A policy used for testing. Always returns the same result as specified below after waiting a random duration.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -54,11 +54,11 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Matches an event against a set of criteria. If any of the configured values match, the policy passes.", "Matches an event against a set of criteria. If any of the configured values match, the policy passes.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -42,11 +42,11 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Checks if the request's user's password has been changed in the last x days, and denys based on settings.", "Checks if the request's user's password has been changed in the last x days, and denys based on settings.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -44,11 +44,11 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Executes the python snippet to determine whether to allow or deny a request.", "Executes the python snippet to determine whether to allow or deny a request.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -230,11 +230,11 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Checks the value from the policy request against several rules, mostly used to ensure password strength.", "Checks the value from the policy request against several rules, mostly used to ensure password strength.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -42,21 +42,21 @@ export class ReputationPolicyForm extends ModelForm<ReputationPolicy, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg("Allows/denys requests based on the users and/or the IPs reputation.")} ${msg("Allows/denys requests based on the users and/or the IPs reputation.")}
</div> </span>
<div class="form-help-text"> <span>
${msg( ${msg(
`Invalid login attempts will decrease the score for the client's IP, and the `Invalid login attempts will decrease the score for the client's IP, and the
username they are attempting to login as, by one.`, username they are attempting to login as, by one.`,
)} )}
</div> </span>
<div class="form-help-text"> <span>
${msg( ${msg(
`The policy passes when the reputation score is below the threshold, and `The policy passes when the reputation score is below the threshold, and
doesn't pass when either or both of the selected options are equal or above the threshold.`, doesn't pass when either or both of the selected options are equal or above the threshold.`,
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -51,11 +51,11 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Stage used to configure a duo-based authenticator. This stage should be used for configuration flows.", "Stage used to configure a duo-based authenticator. This stage should be used for configuration flows.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -208,9 +208,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span> ${msg("Stage used to configure an SMS-based TOTP authenticator.")} </span>
${msg("Stage used to configure an SMS-based TOTP authenticator.")}
</div>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -49,11 +49,11 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Stage used to configure a static authenticator (i.e. static tokens). This stage should be used for configuration flows.", "Stage used to configure a static authenticator (i.e. static tokens). This stage should be used for configuration flows.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -51,11 +51,11 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Stage used to configure a TOTP authenticator (i.e. Authy/Google Authenticator).", "Stage used to configure a TOTP authenticator (i.e. Authy/Google Authenticator).",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -72,11 +72,11 @@ export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValid
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Stage used to validate any authenticator. This stage should be used during authentication or authorization flows.", "Stage used to validate any authenticator. This stage should be used during authentication or authorization flows.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -56,11 +56,11 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).", "Stage used to configure a WebAutnn authenticator (i.e. Yubikey, FaceID/Windows Hello).",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -41,11 +41,11 @@ export class CaptchaStageForm extends ModelForm<CaptchaStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"This stage checks the user's current session against the Google reCaptcha (or compatible) service.", "This stage checks the user's current session against the Google reCaptcha (or compatible) service.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -50,11 +50,11 @@ export class ConsentStageForm extends ModelForm<ConsentStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Prompt for the user's consent. The consent can either be permanent or expire in a defined amount of time.", "Prompt for the user's consent. The consent can either be permanent or expire in a defined amount of time.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -40,11 +40,11 @@ export class DenyStageForm extends ModelForm<DenyStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Statically deny the flow. To use this stage effectively, disable *Evaluate on plan* on the respective binding.", "Statically deny the flow. To use this stage effectively, disable *Evaluate on plan* on the respective binding.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -41,11 +41,11 @@ export class DummyStageForm extends ModelForm<DummyStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Dummy stage used for testing. Shows a simple continue button and always passes.", "Dummy stage used for testing. Shows a simple continue button and always passes.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -148,11 +148,11 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Verify the user's email address by sending them a one-time-link. Can also be used for recovery to verify the user's authenticity.", "Verify the user's email address by sending them a one-time-link. Can also be used for recovery to verify the user's authenticity.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -69,9 +69,9 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg("Let the user identify themselves with their username or Email address.")} ${msg("Let the user identify themselves with their username or Email address.")}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -41,9 +41,9 @@ export class InvitationStageForm extends ModelForm<InvitationStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg("This stage can be included in enrollment flows to accept invitations.")} ${msg("This stage can be included in enrollment flows to accept invitations.")}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -63,9 +63,7 @@ export class PasswordStageForm extends ModelForm<PasswordStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span> ${msg("Validate the user's password against the selected backend(s).")} </span>
${msg("Validate the user's password against the selected backend(s).")}
</div>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -61,11 +61,11 @@ export class PromptStageForm extends ModelForm<PromptStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Show arbitrary input fields to the user, for example during enrollment. Data is saved in the flow context under the 'prompt_data' variable.", "Show arbitrary input fields to the user, for example during enrollment. Data is saved in the flow context under the 'prompt_data' variable.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -40,11 +40,11 @@ export class UserDeleteStageForm extends ModelForm<UserDeleteStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
"Delete the currently pending user. CAUTION, this stage does not ask for confirmation. Use a consent stage to ensure the user is aware of their actions.", "Delete the currently pending user. CAUTION, this stage does not ask for confirmation. Use a consent stage to ensure the user is aware of their actions.",
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -43,7 +43,7 @@ export class UserLoginStageForm extends ModelForm<UserLoginStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">${msg("Log the currently pending user in.")}</div> <span>${msg("Log the currently pending user in.")}</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -40,7 +40,7 @@ export class UserLogoutStageForm extends ModelForm<UserLogoutStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">${msg("Remove the user from the current session.")}</div> <span>${msg("Remove the user from the current session.")}</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -45,12 +45,12 @@ export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text"> <span>
${msg( ${msg(
`Write any data from the flow's context's 'prompt_data' to the currently pending user. If no user `Write any data from the flow's context's 'prompt_data' to the currently pending user. If no user
is pending, a new user is created, and data is written to them.`, is pending, a new user is created, and data is written to them.`,
)} )}
</div> </span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input <input
type="text" type="text"

View file

@ -78,9 +78,13 @@ html > form > input {
} }
.pf-c-login__footer { .pf-c-login__footer {
flex-grow: 2; flex-grow: 2;
display: flex;
justify-content: start;
flex-direction: column;
} }
.pf-c-login__footer ul.pf-c-list.pf-m-inline { .pf-c-login__footer ul.pf-c-list.pf-m-inline {
justify-content: center; justify-content: center;
padding: 2rem 0;
} }
/***************************** /*****************************
* End Login adjustments * End Login adjustments
@ -113,15 +117,7 @@ html > form > input {
color: var(--pf-global--danger-color--100); color: var(--pf-global--danger-color--100);
} }
.form-help-text {
color: var(--pf-global--Color--100);
}
.pf-c-description-list__description .pf-c-button { .pf-c-description-list__description .pf-c-button {
margin-right: 6px; margin-right: 6px;
margin-bottom: 6px; margin-bottom: 6px;
} }
.pf-c-data-list__item {
background-color: transparent;
}

View file

@ -208,9 +208,6 @@ select[multiple] option:checked {
.pf-c-check__label { .pf-c-check__label {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);
} }
.form-help-text {
color: var(--ak-dark-foreground);
}
.pf-c-dropdown__toggle::before { .pf-c-dropdown__toggle::before {
border-color: transparent; border-color: transparent;
} }

View file

@ -509,7 +509,6 @@ export class FlowExecutor extends Interface implements StageHost {
${this.renderChallengeWrapper()} ${this.renderChallengeWrapper()}
</div> </div>
<footer class="pf-c-login__footer"> <footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline"> <ul class="pf-c-list pf-m-inline">
${this.tenant?.uiFooterLinks?.map((link) => { ${this.tenant?.uiFooterLinks?.map((link) => {
return html`<li> return html`<li>

View file

@ -42,6 +42,9 @@ export class UserSourceSettingsPage extends AKElement {
:host([theme="dark"]) .pf-c-data-list__cell img { :host([theme="dark"]) .pf-c-data-list__cell img {
filter: invert(1); filter: invert(1);
} }
.pf-c-data-list__item {
background-color: transparent;
}
`, `,
]; ];
} }

View file

@ -14,7 +14,6 @@ module.exports = async function () {
projectName: "authentik", projectName: "authentik",
themeConfig: { themeConfig: {
navbar: { navbar: {
title: "authentik",
logo: { logo: {
alt: "authentik logo", alt: "authentik logo",
src: "img/icon_left_brand.svg", src: "img/icon_left_brand.svg",