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>
{% endblock %}
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
{% for link in footer_links %}
<li>

View file

@ -59,7 +59,6 @@
</div>
</main>
<footer class="pf-c-login__footer">
<p></p>
<ul class="pf-c-list pf-m-inline">
<li>
<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 {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -54,11 +54,11 @@ export class EventMatcherPolicyForm extends ModelForm<EventMatcherPolicy, string
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -42,11 +42,11 @@ export class PasswordExpiryPolicyForm extends ModelForm<PasswordExpiryPolicy, st
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -44,11 +44,11 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -230,11 +230,11 @@ export class PasswordPolicyForm extends ModelForm<PasswordPolicy, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -42,21 +42,21 @@ export class ReputationPolicyForm extends ModelForm<ReputationPolicy, string> {
renderForm(): TemplateResult {
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.")}
</div>
<div class="form-help-text">
</span>
<span>
${msg(
`Invalid login attempts will decrease the score for the client's IP, and the
username they are attempting to login as, by one.`,
)}
</div>
<div class="form-help-text">
</span>
<span>
${msg(
`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.`,
)}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

@ -51,11 +51,11 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

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

View file

@ -49,11 +49,11 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -51,11 +51,11 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -72,11 +72,11 @@ export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValid
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -56,11 +56,11 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -41,11 +41,11 @@ export class CaptchaStageForm extends ModelForm<CaptchaStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -50,11 +50,11 @@ export class ConsentStageForm extends ModelForm<ConsentStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -40,11 +40,11 @@ export class DenyStageForm extends ModelForm<DenyStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -41,11 +41,11 @@ export class DummyStageForm extends ModelForm<DummyStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -148,11 +148,11 @@ export class EmailStageForm extends ModelForm<EmailStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${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.",
)}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

@ -69,9 +69,9 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
renderForm(): TemplateResult {
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.")}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

@ -41,9 +41,9 @@ export class InvitationStageForm extends ModelForm<InvitationStage, string> {
renderForm(): TemplateResult {
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.")}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

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

View file

@ -61,11 +61,11 @@ export class PromptStageForm extends ModelForm<PromptStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
"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">
<input
type="text"

View file

@ -40,11 +40,11 @@ export class UserDeleteStageForm extends ModelForm<UserDeleteStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${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.",
)}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

@ -43,7 +43,7 @@ export class UserLoginStageForm extends ModelForm<UserLoginStage, string> {
renderForm(): TemplateResult {
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">
<input
type="text"

View file

@ -40,7 +40,7 @@ export class UserLogoutStageForm extends ModelForm<UserLogoutStage, string> {
renderForm(): TemplateResult {
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">
<input
type="text"

View file

@ -45,12 +45,12 @@ export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<div class="form-help-text">
<span>
${msg(
`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.`,
)}
</div>
</span>
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input
type="text"

View file

@ -78,9 +78,13 @@ html > form > input {
}
.pf-c-login__footer {
flex-grow: 2;
display: flex;
justify-content: start;
flex-direction: column;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
justify-content: center;
padding: 2rem 0;
}
/*****************************
* End Login adjustments
@ -113,15 +117,7 @@ html > form > input {
color: var(--pf-global--danger-color--100);
}
.form-help-text {
color: var(--pf-global--Color--100);
}
.pf-c-description-list__description .pf-c-button {
margin-right: 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 {
color: var(--ak-dark-foreground);
}
.form-help-text {
color: var(--ak-dark-foreground);
}
.pf-c-dropdown__toggle::before {
border-color: transparent;
}

View file

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

View file

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

View file

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