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

initial fix with class-name-updater

Browse source 
https://github.com/patternfly/pf-codemods/tree/main/packages/class-name-updater
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens Langhammer 2023-07-27 12:42:55 +02:00
parent e1fddedfb4
commit 310801dd2f
No known key found for this signature in database
166 changed files with 1920 additions and 1920 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/src/admin/AdminInterface.ts
View file

@ -68,21 +68,21 @@ export class AdminInterface extends Interface {
PFButton, PFButton,
PFDrawer, PFDrawer,
css` css`
.pf-c-page__main, .pf-v5-c-page__main,
.pf-c-drawer__content, .pf-v5-c-drawer__content,
.pf-c-page__drawer { .pf-v5-c-page__drawer {
z-index: auto !important; z-index: auto !important;
background-color: transparent; background-color: transparent;
} }
.display-none { .display-none {
display: none; display: none;
} }
.pf-c-page { .pf-v5-c-page {
background-color: var(--pf-c-page--BackgroundColor) !important; background-color: var(--pf-v5-c-page--BackgroundColor) !important;
} }
/* Global page background colour */ /* Global page background colour */
:host([theme="dark"]) .pf-c-page { :host([theme="dark"]) .pf-v5-c-page {
--pf-c-page--BackgroundColor: var(--ak-dark-background); --pf-v5-c-page--BackgroundColor: var(--ak-dark-background);
} }
`, `,
]; ];
@ -123,9 +123,9 @@ export class AdminInterface extends Interface {
render(): TemplateResult { render(): TemplateResult {
return html` <ak-locale-context> return html` <ak-locale-context>
<div class="pf-c-page"> <div class="pf-v5-c-page">
<ak-sidebar <ak-sidebar
class="pf-c-page__sidebar ${this.sidebarOpen class="pf-v5-c-page__sidebar ${this.sidebarOpen
? "pf-m-expanded" ? "pf-m-expanded"
: "pf-m-collapsed"} ${this.activeTheme === UiThemeEnum.Light : "pf-m-collapsed"} ${this.activeTheme === UiThemeEnum.Light
? "pf-m-light" ? "pf-m-light"
@ -133,19 +133,19 @@ export class AdminInterface extends Interface {
> >
${this.renderSidebarItems()} ${this.renderSidebarItems()}
</ak-sidebar> </ak-sidebar>
<div class="pf-c-page__drawer"> <div class="pf-v5-c-page__drawer">
<div <div
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen class="pf-v5-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
? "pf-m-expanded" ? "pf-m-expanded"
: "pf-m-collapsed"}" : "pf-m-collapsed"}"
> >
<div class="pf-c-drawer__main"> <div class="pf-v5-c-drawer__main">
<div class="pf-c-drawer__content"> <div class="pf-v5-c-drawer__content">
<div class="pf-c-drawer__body"> <div class="pf-v5-c-drawer__body">
<main class="pf-c-page__main"> <main class="pf-v5-c-page__main">
<ak-router-outlet <ak-router-outlet
role="main" role="main"
class="pf-c-page__main" class="pf-v5-c-page__main"
tabindex="-1" tabindex="-1"
id="main-content" id="main-content"
defaultUrl="/administration/overview" defaultUrl="/administration/overview"
@ -156,14 +156,14 @@ export class AdminInterface extends Interface {
</div> </div>
</div> </div>
<ak-notification-drawer <ak-notification-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this class="pf-v5-c-drawer__panel pf-m-width-33 ${this
.notificationDrawerOpen .notificationDrawerOpen
? "" ? ""
: "display-none"}" : "display-none"}"
?hidden=${!this.notificationDrawerOpen} ?hidden=${!this.notificationDrawerOpen}
></ak-notification-drawer> ></ak-notification-drawer>
<ak-api-drawer <ak-api-drawer
class="pf-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen class="pf-v5-c-drawer__panel pf-m-width-33 ${this.apiDrawerOpen
? "" ? ""
: "display-none"}" : "display-none"}"
?hidden=${!this.apiDrawerOpen} ?hidden=${!this.apiDrawerOpen}

20
web/src/admin/DebugPage.ts
View file

@ -25,13 +25,13 @@ export class DebugPage extends AKElement {
render(): TemplateResult { render(): TemplateResult {
return html` return html`
<ak-page-header icon="pf-icon pf-icon-user" header="Debug"> </ak-page-header> <ak-page-header icon="pf-icon pf-icon-user" header="Debug"> </ak-page-header>
<section class="pf-c-page__main-section"> <section class="pf-v5-c-page__main-section">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-l-grid__item pf-m-3-col pf-c-card"> <div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
<div class="pf-c-card__title">Sentry</div> <div class="pf-v5-c-card__title">Sentry</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<button <button
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
@click=${() => { @click=${() => {
Sentry.captureException(new Error("test error")); Sentry.captureException(new Error("test error"));
}} }}
@ -40,11 +40,11 @@ export class DebugPage extends AKElement {
</button> </button>
</div> </div>
</div> </div>
<div class="pf-l-grid__item pf-m-3-col pf-c-card"> <div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
<div class="pf-c-card__title">Misc</div> <div class="pf-v5-c-card__title">Misc</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<button <button
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
@click=${() => { @click=${() => {
new AdminApi(DEFAULT_CONFIG) new AdminApi(DEFAULT_CONFIG)
.adminSystemCreate() .adminSystemCreate()

40
web/src/admin/admin-overview/AdminOverviewPage.ts
View file

@ -72,22 +72,22 @@ export class AdminOverviewPage extends AKElement {
return html`<ak-page-header icon="" header="" description=${msg("General system status")}> return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
<span slot="header"> ${msg(str`Welcome, ${name}.`)} </span> <span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
</ak-page-header> </ak-page-header>
<section class="pf-c-page__main-section"> <section class="pf-v5-c-page__main-section">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<!-- row 1 --> <!-- row 1 -->
<div class="pf-l-grid__item pf-m-6-col pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid__item pf-m-6-col pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
> >
<ak-aggregate-card <ak-aggregate-card
icon="fa fa-share" icon="fa fa-share"
header=${msg("Quick actions")} header=${msg("Quick actions")}
.isCenter=${false} .isCenter=${false}
> >
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
<li> <li>
<a <a
class="pf-u-mb-xl" class="pf-v5-u-mb-xl"
href=${paramURL("/core/applications", { href=${paramURL("/core/applications", {
createForm: true, createForm: true,
})} })}
@ -95,26 +95,26 @@ export class AdminOverviewPage extends AKElement {
> >
</li> </li>
<li> <li>
<a class="pf-u-mb-xl" href=${paramURL("/events/log")} <a class="pf-v5-u-mb-xl" href=${paramURL("/events/log")}
>${msg("Check the logs")}</a >${msg("Check the logs")}</a
> >
</li> </li>
<li> <li>
<a <a
class="pf-u-mb-xl" class="pf-v5-u-mb-xl"
target="_blank" target="_blank"
href="https://goauthentik.io/integrations/" href="https://goauthentik.io/integrations/"
>${msg("Explore integrations")}</a >${msg("Explore integrations")}</a
> >
</li> </li>
<li> <li>
<a class="pf-u-mb-xl" href=${paramURL("/identity/users")} <a class="pf-v5-u-mb-xl" href=${paramURL("/identity/users")}
>${msg("Manage users")}</a >${msg("Manage users")}</a
> >
</li> </li>
<li> <li>
<a <a
class="pf-u-mb-xl" class="pf-v5-u-mb-xl"
target="_blank" target="_blank"
href="https://goauthentik.io/docs/releases/${versionFamily()}#fixed-in-${VERSION.replaceAll( href="https://goauthentik.io/docs/releases/${versionFamily()}#fixed-in-${VERSION.replaceAll(
".", ".",
@ -127,7 +127,7 @@ export class AdminOverviewPage extends AKElement {
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl graph-container"
> >
<ak-aggregate-card <ak-aggregate-card
icon="pf-icon pf-icon-zone" icon="pf-icon pf-icon-zone"
@ -138,40 +138,40 @@ export class AdminOverviewPage extends AKElement {
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl graph-container"
> >
<ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}> <ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}>
<ak-admin-status-chart-sync></ak-admin-status-chart-sync> <ak-admin-status-chart-sync></ak-admin-status-chart-sync>
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div class="pf-l-grid__item pf-m-12-col row-divider"> <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
<hr /> <hr />
</div> </div>
<div <div
class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container" class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
> >
<ak-admin-status-system> </ak-admin-status-system> <ak-admin-status-system> </ak-admin-status-system>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container" class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
> >
<ak-admin-status-version> </ak-admin-status-version> <ak-admin-status-version> </ak-admin-status-version>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container" class="pf-v5-l-grid__item pf-m-6-col pf-m-4-col-on-md pf-m-4-col-on-xl card-container"
> >
<ak-admin-status-card-workers> </ak-admin-status-card-workers> <ak-admin-status-card-workers> </ak-admin-status-card-workers>
</div> </div>
</div> </div>
<div class="pf-l-grid__item pf-m-6-col"> <div class="pf-v5-l-grid__item pf-m-6-col">
<ak-recent-events pageSize="6"></ak-recent-events> <ak-recent-events pageSize="6"></ak-recent-events>
</div> </div>
<div class="pf-l-grid__item pf-m-12-col row-divider"> <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
<hr /> <hr />
</div> </div>
<!-- row 3 --> <!-- row 3 -->
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-8-col-on-2xl big-graph-container"
> >
<ak-aggregate-card <ak-aggregate-card
icon="pf-icon pf-icon-server" icon="pf-icon pf-icon-server"
@ -183,7 +183,7 @@ export class AdminOverviewPage extends AKElement {
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl big-graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl big-graph-container"
> >
<ak-aggregate-card <ak-aggregate-card
icon="pf-icon pf-icon-server" icon="pf-icon pf-icon-server"

12
web/src/admin/admin-overview/DashboardUserPage.ts
View file

@ -43,10 +43,10 @@ export class DashboardUserPage extends AKElement {
render(): TemplateResult { render(): TemplateResult {
return html`<ak-page-header icon="pf-icon pf-icon-user" header=${msg("User statistics")}> return html`<ak-page-header icon="pf-icon pf-icon-user" header=${msg("User statistics")}>
</ak-page-header> </ak-page-header>
<section class="pf-c-page__main-section"> <section class="pf-v5-c-page__main-section">
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
> >
<ak-aggregate-card header=${msg("Users created per day in the last month")}> <ak-aggregate-card header=${msg("Users created per day in the last month")}>
<ak-charts-admin-model-per-day <ak-charts-admin-model-per-day
@ -58,12 +58,12 @@ export class DashboardUserPage extends AKElement {
</ak-charts-admin-model-per-day> </ak-charts-admin-model-per-day>
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div class="pf-l-grid__item pf-m-12-col row-divider"> <div class="pf-v5-l-grid__item pf-m-12-col row-divider">
<hr /> <hr />
</div> </div>
<!-- row 2 --> <!-- row 2 -->
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
> >
<ak-aggregate-card header=${msg("Logins per day in the last month")}> <ak-aggregate-card header=${msg("Logins per day in the last month")}>
<ak-charts-admin-model-per-day action=${EventActions.Login}> <ak-charts-admin-model-per-day action=${EventActions.Login}>
@ -71,7 +71,7 @@ export class DashboardUserPage extends AKElement {
</ak-aggregate-card> </ak-aggregate-card>
</div> </div>
<div <div
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container" class="pf-v5-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
> >
<ak-aggregate-card header=${msg("Failed Logins per day in the last month")}> <ak-aggregate-card header=${msg("Failed Logins per day in the last month")}>
<ak-charts-admin-model-per-day action=${EventActions.LoginFailed}> <ak-charts-admin-model-per-day action=${EventActions.LoginFailed}>

2
web/src/admin/admin-overview/TopApplicationsTable.ts
View file

@ -44,7 +44,7 @@ export class TopApplicationsTable extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<table class="pf-c-table pf-m-compact" role="grid"> return html`<table class="pf-v5-c-table pf-m-compact" role="grid">
<thead> <thead>
<tr role="row"> <tr role="row">
<th role="columnheader" scope="col">${msg("Application")}</th> <th role="columnheader" scope="col">${msg("Application")}</th>

12
web/src/admin/admin-overview/cards/RecentEventsCard.ts
View file

@ -40,12 +40,12 @@ export class RecentEventsCard extends Table<Event> {
return super.styles.concat( return super.styles.concat(
PFCard, PFCard,
css` css`
.pf-c-card__title { .pf-v5-c-card__title {
--pf-c-card__title--FontFamily: var( --pf-v5-c-card__title--FontFamily: var(
--pf-global--FontFamily--heading--sans-serif --pf-v5-global--FontFamily--heading--sans-serif
); );
--pf-c-card__title--FontSize: var(--pf-global--FontSize--md); --pf-v5-c-card__title--FontSize: var(--pf-v5-global--FontSize--md);
--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold); --pf-v5-c-card__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
} }
`, `,
); );
@ -62,7 +62,7 @@ export class RecentEventsCard extends Table<Event> {
} }
renderToolbar(): TemplateResult { renderToolbar(): TemplateResult {
return html`<div class="pf-c-card__title"> return html`<div class="pf-v5-c-card__title">
<i class="pf-icon pf-icon-catalog"></i>&nbsp;${msg("Recent events")} <i class="pf-icon pf-icon-catalog"></i>&nbsp;${msg("Recent events")}
</div>`; </div>`;
} }

30
web/src/admin/applications/ApplicationCheckAccessForm.ts
View file

@ -54,9 +54,9 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
renderResult(): TemplateResult { renderResult(): TemplateResult {
return html` return html`
<ak-form-element-horizontal label=${msg("Passing")}> <ak-form-element-horizontal label=${msg("Passing")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text"> <span class="pf-v5-c-form__label-text">
<ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}> <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
${this.result?.passing ? msg("Yes") : msg("No")} ${this.result?.passing ? msg("Yes") : msg("No")}
</ak-label> </ak-label>
@ -65,44 +65,44 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
</div> </div>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Messages")}> <ak-form-element-horizontal label=${msg("Messages")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<ul> <ul>
${(this.result?.messages || []).length > 0 ${(this.result?.messages || []).length > 0
? this.result?.messages?.map((m) => { ? this.result?.messages?.map((m) => {
return html`<li> return html`<li>
<span class="pf-c-form__label-text">${m}</span> <span class="pf-v5-c-form__label-text">${m}</span>
</li>`; </li>`;
}) })
: html`<li> : html`<li>
<span class="pf-c-form__label-text">-</span> <span class="pf-v5-c-form__label-text">-</span>
</li>`} </li>`}
</ul> </ul>
</div> </div>
</div> </div>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Log messages")}> <ak-form-element-horizontal label=${msg("Log messages")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<dl class="pf-c-description-list pf-m-horizontal"> <dl class="pf-v5-c-description-list pf-m-horizontal">
${(this.result?.logMessages || []).length > 0 ${(this.result?.logMessages || []).length > 0
? this.result?.logMessages?.map((m) => { ? this.result?.logMessages?.map((m) => {
return html`<div class="pf-c-description-list__group"> return html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${m.log_level}</span >${m.log_level}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${m.event} ${m.event}
</div> </div>
</dd> </dd>
</div>`; </div>`;
}) })
: html`<div class="pf-c-description-list__group"> : html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("No log messages.")}</span >${msg("No log messages.")}</span
> >
</dt> </dt>

100
web/src/admin/applications/ApplicationViewPage.ts
View file

@ -102,31 +102,31 @@ export class ApplicationViewPage extends AKElement {
} }
return html`<ak-tabs> return html`<ak-tabs>
${this.missingOutpost ${this.missingOutpost
? html`<div slot="header" class="pf-c-banner pf-m-warning"> ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Application is not used by any Outpost.")} ${msg("Warning: Application is not used by any Outpost.")}
</div>` </div>`
: html``} : html``}
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Related")}</div> <div class="pf-v5-c-card__title">${msg("Related")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-v5-c-description-list">
${this.application.providerObj ${this.application.providerObj
? html`<div class="pf-c-description-list__group"> ? html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Provider")}</span >${msg("Provider")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a <a
href="#/core/providers/${this.application href="#/core/providers/${this.application
.providerObj?.pk}" .providerObj?.pk}"
@ -139,15 +139,15 @@ export class ApplicationViewPage extends AKElement {
</div>` </div>`
: html``} : html``}
${(this.application.backchannelProvidersObj || []).length > 0 ${(this.application.backchannelProvidersObj || []).length > 0
? html`<div class="pf-c-description-list__group"> ? html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Backchannel Providers")}</span >${msg("Backchannel Providers")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
${this.application.backchannelProvidersObj.map( ${this.application.backchannelProvidersObj.map(
(provider) => { (provider) => {
return html` return html`
@ -167,26 +167,26 @@ export class ApplicationViewPage extends AKElement {
</dd> </dd>
</div>` </div>`
: html``} : html``}
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Policy engine mode")}</span >${msg("Policy engine mode")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.application.policyEngineMode?.toUpperCase()} ${this.application.policyEngineMode?.toUpperCase()}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Edit")}</span >${msg("Edit")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> <span slot="header">
@ -199,7 +199,7 @@ export class ApplicationViewPage extends AKElement {
</ak-application-form> </ak-application-form>
<button <button
slot="trigger" slot="trigger"
class="pf-c-button pf-m-secondary" class="pf-v5-c-button pf-m-secondary"
> >
${msg("Edit")} ${msg("Edit")}
</button> </button>
@ -207,14 +207,14 @@ export class ApplicationViewPage extends AKElement {
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Check access")}</span >${msg("Check access")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-forms-modal .closeAfterSuccessfulSubmit=${false}> <ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
<span slot="submit"> ${msg("Check")} </span> <span slot="submit"> ${msg("Check")} </span>
<span slot="header"> <span slot="header">
@ -227,7 +227,7 @@ export class ApplicationViewPage extends AKElement {
</ak-application-check-access-form> </ak-application-check-access-form>
<button <button
slot="trigger" slot="trigger"
class="pf-c-button pf-m-secondary" class="pf-v5-c-button pf-m-secondary"
> >
${msg("Test")} ${msg("Test")}
</button> </button>
@ -236,19 +236,19 @@ export class ApplicationViewPage extends AKElement {
</dd> </dd>
</div> </div>
${this.application.launchUrl ${this.application.launchUrl
? html`<div class="pf-c-description-list__group"> ? html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Launch")}</span >${msg("Launch")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a <a
target="_blank" target="_blank"
href=${this.application.launchUrl} href=${this.application.launchUrl}
slot="trigger" slot="trigger"
class="pf-c-button pf-m-secondary" class="pf-v5-c-button pf-m-secondary"
> >
${msg("Launch")} ${msg("Launch")}
</a> </a>
@ -260,12 +260,12 @@ export class ApplicationViewPage extends AKElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
> >
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg("Logins over the last week (per 8 hours)")} ${msg("Logins over the last week (per 8 hours)")}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${this.application && ${this.application &&
html` <ak-charts-application-authorize html` <ak-charts-application-authorize
applicationSlug=${this.application.slug} applicationSlug=${this.application.slug}
@ -273,9 +273,9 @@ export class ApplicationViewPage extends AKElement {
</ak-charts-application-authorize>`} </ak-charts-application-authorize>`}
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Changelog")}</div> <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.application.pk || ""} targetModelPk=${this.application.pk || ""}
targetModelApp="authentik_core" targetModelApp="authentik_core"
@ -289,10 +289,10 @@ export class ApplicationViewPage extends AKElement {
<section <section
slot="page-policy-bindings" slot="page-policy-bindings"
data-tab-title="${msg("Policy / Group / User Bindings")}" data-tab-title="${msg("Policy / Group / User Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg("These policies control which users can access this application.")} ${msg("These policies control which users can access this application.")}
</div> </div>
<ak-bound-policies-list .target=${this.application.pk}> <ak-bound-policies-list .target=${this.application.pk}>

10
web/src/admin/applications/ProviderSelectModal.ts
View file

@ -56,15 +56,15 @@ export class ProviderSelectModal extends TableModal<Provider> {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-v5-c-title pf-m-2xl">
${msg("Select providers to add to application")} ${msg("Select providers to add to application")}
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section> <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${async () => { .callAction=${async () => {
await this.confirm(this.selectedElements); await this.confirm(this.selectedElements);

2
web/src/admin/applications/wizard/ApplicationWizard.ts
View file

@ -54,7 +54,7 @@ export class ApplicationWizard extends AKElement {
}} }}
> >
${this.showButton ${this.showButton
? html`<button slot="trigger" class="pf-c-button pf-m-primary"> ? html`<button slot="trigger" class="pf-v5-c-button pf-m-primary">
${this.createText} ${this.createText}
</button>` </button>`
: html``} : html``}

12
web/src/admin/applications/wizard/InitialApplicationWizardPage.ts
View file

@ -50,22 +50,22 @@ export class InitialApplicationWizardPage extends WizardFormPage {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html` return html`
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name"> <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
<input type="text" value="" class="pf-c-form-control" required /> <input type="text" value="" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text">${msg("Application's display Name.")}</p> <p class="pf-v5-c-form__helper-text">${msg("Application's display Name.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group ?expanded=${true}> <ak-form-group ?expanded=${true}>
<span slot="header"> ${msg("Additional UI settings")} </span> <span slot="header"> ${msg("Additional UI settings")} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${msg("Description")} label=${msg("Description")}
name="metaDescription" name="metaDescription"
> >
<textarea class="pf-c-form-control"></textarea> <textarea class="pf-v5-c-form-control"></textarea>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Publisher")} name="metaPublisher"> <ak-form-element-horizontal label=${msg("Publisher")} name="metaPublisher">
<input type="text" value="" class="pf-c-form-control" /> <input type="text" value="" class="pf-v5-c-form-control" />
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

10
web/src/admin/applications/wizard/TypeApplicationWizardPage.ts
View file

@ -59,11 +59,11 @@ export class TypeApplicationWizardPage extends WizardPage {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.applicationTypes.map((type) => { ${this.applicationTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${type.component} id=${type.component}
@ -76,8 +76,8 @@ export class TypeApplicationWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label> <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;

4
web/src/admin/applications/wizard/ldap/TypeLDAPApplicationWizardPage.ts
View file

@ -64,9 +64,9 @@ export class TypeLDAPApplicationWizardPage extends WizardFormPage {
renderForm(): TemplateResult { renderForm(): TemplateResult {
const domainParts = window.location.hostname.split("."); const domainParts = window.location.hostname.split(".");
const defaultBaseDN = domainParts.map((part) => `dc=${part}`).join(","); const defaultBaseDN = domainParts.map((part) => `dc=${part}`).join(",");
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Base DN")} name="baseDN" ?required=${true}> <ak-form-element-horizontal label=${msg("Base DN")} name="baseDN" ?required=${true}>
<input type="text" value="${defaultBaseDN}" class="pf-c-form-control" required /> <input type="text" value="${defaultBaseDN}" class="pf-v5-c-form-control" required />
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form> `; </form> `;
} }

6
web/src/admin/applications/wizard/link/TypeLinkApplicationWizardPage.ts
View file

@ -17,10 +17,10 @@ export class TypeLinkApplicationWizardPage extends WizardFormPage {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html` return html`
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Link")} ?required=${true} name="link"> <ak-form-element-horizontal label=${msg("Link")} ?required=${true} name="link">
<input type="text" value="" class="pf-c-form-control" required /> <input type="text" value="" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("URL which will be opened when a user clicks on the application.")} ${msg("URL which will be opened when a user clicks on the application.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

2
web/src/admin/applications/wizard/oauth/TypeOAuthAPIApplicationWizardPage.ts
View file

@ -19,7 +19,7 @@ export class TypeOAuthAPIApplicationWizardPage extends WizardPage {
sidebarLabel = () => msg("Method details"); sidebarLabel = () => msg("Method details");
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<p> <p>
${msg( ${msg(
"This configuration can be used to authenticate to authentik with other APIs other otherwise programmatically.", "This configuration can be used to authenticate to authentik with other APIs other otherwise programmatically.",

10
web/src/admin/applications/wizard/oauth/TypeOAuthApplicationWizardPage.ts
View file

@ -56,11 +56,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
sidebarLabel = () => msg("Application type"); sidebarLabel = () => msg("Application type");
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.applicationTypes.map((type) => { ${this.applicationTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${type.component} id=${type.component}
@ -75,8 +75,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label> <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form> `; </form> `;

2
web/src/admin/applications/wizard/oauth/TypeOAuthImplicitApplicationWizardPage.ts
View file

@ -10,6 +10,6 @@ export class TypeOAuthImplicitApplicationWizardPage extends WizardFormPage {
sidebarLabel = () => msg("Method details"); sidebarLabel = () => msg("Method details");
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">some stuff idk</form> `; return html`<form class="pf-v5-c-form pf-m-horizontal">some stuff idk</form> `;
} }
} }

6
web/src/admin/applications/wizard/proxy/TypeProxyApplicationWizardPage.ts
View file

@ -48,14 +48,14 @@ export class TypeProxyApplicationWizardPage extends WizardFormPage {
}; };
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${msg("External domain")} label=${msg("External domain")}
name="externalHost" name="externalHost"
?required=${true} ?required=${true}
> >
<input type="text" value="" class="pf-c-form-control" required /> <input type="text" value="" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("External domain you will be accessing the domain from.")} ${msg("External domain you will be accessing the domain from.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

10
web/src/admin/applications/wizard/saml/TypeSAMLApplicationWizardPage.ts
View file

@ -38,11 +38,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
sidebarLabel = () => msg("Application type"); sidebarLabel = () => msg("Application type");
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.applicationTypes.map((type) => { ${this.applicationTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${type.component} id=${type.component}
@ -57,8 +57,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label> <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form> `; </form> `;

6
web/src/admin/applications/wizard/saml/TypeSAMLConfigApplicationWizardPage.ts
View file

@ -43,10 +43,10 @@ export class TypeSAMLApplicationWizardPage extends WizardFormPage {
}; };
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("ACS URL")} name="acsUrl" ?required=${true}> <ak-form-element-horizontal label=${msg("ACS URL")} name="acsUrl" ?required=${true}>
<input type="text" value="" class="pf-c-form-control" required /> <input type="text" value="" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"URL that authentik will redirect back to after successful authentication.", "URL that authentik will redirect back to after successful authentication.",
)} )}

4
web/src/admin/applications/wizard/saml/TypeSAMLImportApplicationWizardPage.ts
View file

@ -48,9 +48,9 @@ export class TypeSAMLImportApplicationWizardPage extends WizardFormPage {
}; };
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Metadata")} name="metadata"> <ak-form-element-horizontal label=${msg("Metadata")} name="metadata">
<input type="file" value="" class="pf-c-form-control" /> <input type="file" value="" class="pf-v5-c-form-control" />
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form> `; </form> `;
} }

8
web/src/admin/crypto/CertificateGenerateForm.ts
View file

@ -26,11 +26,11 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
name="commonName" name="commonName"
?required=${true} ?required=${true}
> >
<input type="text" class="pf-c-form-control" required /> <input type="text" class="pf-v5-c-form-control" required />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Subject-alt name")} name="subjectAltName"> <ak-form-element-horizontal label=${msg("Subject-alt name")} name="subjectAltName">
<input class="pf-c-form-control" type="text" /> <input class="pf-v5-c-form-control" type="text" />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Optional, comma-separated SubjectAlt Names.")} ${msg("Optional, comma-separated SubjectAlt Names.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -39,7 +39,7 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
name="validityDays" name="validityDays"
?required=${true} ?required=${true}
> >
<input class="pf-c-form-control" type="number" value="365" /> <input class="pf-v5-c-form-control" type="number" value="365" />
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;
} }
} }

12
web/src/admin/crypto/CertificateKeyPairForm.ts
View file

@ -40,12 +40,12 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}> <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -55,16 +55,16 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
?required=${true} ?required=${true}
> >
<textarea class="pf-c-form-control" required></textarea> <textarea class="pf-v5-c-form-control" required></textarea>
<p class="pf-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p> <p class="pf-v5-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
name="keyData" name="keyData"
?writeOnly=${this.instance !== undefined} ?writeOnly=${this.instance !== undefined}
label=${msg("Private Key")} label=${msg("Private Key")}
> >
<textarea class="pf-c-form-control"></textarea> <textarea class="pf-v5-c-form-control"></textarea>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Optional Private Key. If this is set, you can use this keypair for encryption.", "Optional Private Key. If this is set, you can use this keypair for encryption.",
)} )}

6
web/src/admin/enterprise/EnterpriseLicenseForm.ts
View file

@ -46,12 +46,12 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
// prettier-ignore // prettier-ignore
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Install ID")}> <ak-form-element-horizontal label=${msg("Install ID")}>
<input class="pf-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" /> <input class="pf-v5-c-form-control" readonly type="text" value="${ifDefined(this.installID)}" />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}> <ak-form-element-horizontal name="key" ?writeOnly=${this.instance !== undefined} label=${msg("License key")}>
<textarea class="pf-c-form-control"></textarea> <textarea class="pf-v5-c-form-control"></textarea>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

2
web/src/admin/events/EventListPage.ts
View file

@ -86,7 +86,7 @@ export class EventListPage extends TablePage<Event> {
renderExpanded(item: Event): TemplateResult { renderExpanded(item: Event): TemplateResult {
return html` <td role="cell" colspan="3"> return html` <td role="cell" colspan="3">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
<ak-event-info .event=${item as EventWithContext}></ak-event-info> <ak-event-info .event=${item as EventWithContext}></ak-event-info>
</div> </div>
</td> </td>

12
web/src/admin/events/RuleForm.ts
View file

@ -58,12 +58,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -91,7 +91,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
?blankable=${true} ?blankable=${true}
> >
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Select the group of users which the alerts are sent to. If no group is selected the rule is disabled.", "Select the group of users which the alerts are sent to. If no group is selected the rule is disabled.",
)} )}
@ -102,7 +102,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
?required=${true} ?required=${true}
name="transports" name="transports"
> >
<select class="pf-c-form-control" multiple> <select class="pf-v5-c-form-control" multiple>
${this.eventTransports?.results.map((transport) => { ${this.eventTransports?.results.map((transport) => {
const selected = Array.from(this.instance?.transports || []).some((su) => { const selected = Array.from(this.instance?.transports || []).some((su) => {
return su == transport.pk; return su == transport.pk;
@ -112,12 +112,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
</option>`; </option>`;
})} })}
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Select which transports should be used to notify the user. If none are selected, the notification will only be shown in the authentik UI.", "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>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Hold control/command to select multiple items.")} ${msg("Hold control/command to select multiple items.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

18
web/src/admin/events/TransportForm.ts
View file

@ -68,12 +68,12 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -114,7 +114,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.webhookUrl)}" value="${ifDefined(this.instance?.webhookUrl)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
@ -151,20 +151,20 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
</ak-search-select> </ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="sendOnce"> <ak-form-element-horizontal name="sendOnce">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.sendOnce, false)} ?checked=${first(this.instance?.sendOnce, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Send once")}</span> <span class="pf-v5-c-switch__label">${msg("Send once")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Only send notification once, for example when sending a webhook into a chat channel.", "Only send notification once, for example when sending a webhook into a chat channel.",
)} )}

14
web/src/admin/flows/BoundStagesList.ts
View file

@ -65,7 +65,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
}); });
}} }}
> >
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger"> <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
${msg("Delete")} ${msg("Delete")}
</button> </button>
</ak-forms-delete-bulk>`; </ak-forms-delete-bulk>`;
@ -87,7 +87,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
type=${ifDefined(item.stageObj?.component)} type=${ifDefined(item.stageObj?.component)}
> >
</ak-proxy-form> </ak-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit Stage")} ${msg("Edit Stage")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -96,7 +96,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
<span slot="header"> ${msg("Update Stage binding")} </span> <span slot="header"> ${msg("Update Stage binding")} </span>
<ak-stage-binding-form slot="form" .instancePk=${item.pk}> <ak-stage-binding-form slot="form" .instancePk=${item.pk}>
</ak-stage-binding-form> </ak-stage-binding-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit Binding")} ${msg("Edit Binding")}
</button> </button>
</ak-forms-modal>`, </ak-forms-modal>`,
@ -106,8 +106,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
renderExpanded(item: FlowStageBinding): TemplateResult { renderExpanded(item: FlowStageBinding): TemplateResult {
return html` <td></td> return html` <td></td>
<td role="cell" colspan="4"> <td role="cell" colspan="4">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<p> <p>
${msg( ${msg(
"These bindings control if this stage will be applied to the flow.", "These bindings control if this stage will be applied to the flow.",
@ -130,7 +130,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
<span slot="header"> ${msg("Create Stage binding")} </span> <span slot="header"> ${msg("Create Stage binding")} </span>
<ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}> <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
</ak-stage-binding-form> </ak-stage-binding-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Bind stage")} ${msg("Bind stage")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -151,7 +151,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
<span slot="header"> ${msg("Create Stage binding")} </span> <span slot="header"> ${msg("Create Stage binding")} </span>
<ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}> <ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
</ak-stage-binding-form> </ak-stage-binding-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Bind existing stage")} ${msg("Bind existing stage")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>

62
web/src/admin/flows/FlowForm.ts
View file

@ -78,12 +78,12 @@ export class FlowForm extends ModelForm<Flow, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -91,26 +91,26 @@ export class FlowForm extends ModelForm<Flow, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.title)}" value="${ifDefined(this.instance?.title)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p> <p class="pf-v5-c-form__helper-text">${msg("Shown as the Title in Flow pages.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug"> <ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.slug)}" value="${ifDefined(this.instance?.slug)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text">${msg("Visible in the URL.")}</p> <p class="pf-v5-c-form__helper-text">${msg("Visible in the URL.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${msg("Designation")} label=${msg("Designation")}
?required=${true} ?required=${true}
name="designation" name="designation"
> >
<select class="pf-c-form-control"> <select class="pf-v5-c-form-control">
<option value="" ?selected=${this.instance?.designation === undefined}> <option value="" ?selected=${this.instance?.designation === undefined}>
--------- ---------
</option> </option>
@ -160,7 +160,7 @@ export class FlowForm extends ModelForm<Flow, string> {
${DesignationToLabel(FlowDesignationEnum.Unenrollment)} ${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
</option> </option>
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.", "Decides what this Flow is used for. For example, the Authentication flow is redirect to when an un-authenticated user visits authentik.",
)} )}
@ -171,7 +171,7 @@ export class FlowForm extends ModelForm<Flow, string> {
?required=${true} ?required=${true}
name="authentication" name="authentication"
> >
<select class="pf-c-form-control"> <select class="pf-v5-c-form-control">
<option <option
value=${AuthenticationEnum.None} value=${AuthenticationEnum.None}
?selected=${this.instance?.authentication === AuthenticationEnum.None} ?selected=${this.instance?.authentication === AuthenticationEnum.None}
@ -200,28 +200,28 @@ export class FlowForm extends ModelForm<Flow, string> {
${msg("Require superuser.")} ${msg("Require superuser.")}
</option> </option>
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Required authentication level for this flow.")} ${msg("Required authentication level for this flow.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group> <ak-form-group>
<span slot="header"> ${msg("Behavior settings")} </span> <span slot="header"> ${msg("Behavior settings")} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal name="compatibilityMode"> <ak-form-element-horizontal name="compatibilityMode">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.compatibilityMode, false)} ?checked=${first(this.instance?.compatibilityMode, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Compatibility mode")}</span> <span class="pf-v5-c-switch__label">${msg("Compatibility mode")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Increases compatibility with password managers and mobile devices.", "Increases compatibility with password managers and mobile devices.",
)} )}
@ -260,7 +260,7 @@ export class FlowForm extends ModelForm<Flow, string> {
.value=${this.instance?.deniedAction} .value=${this.instance?.deniedAction}
> >
</ak-radio> </ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Decides the response when a policy denies access to this flow for a user.", "Decides the response when a policy denies access to this flow for a user.",
)} )}
@ -297,13 +297,13 @@ export class FlowForm extends ModelForm<Flow, string> {
</ak-form-group> </ak-form-group>
<ak-form-group> <ak-form-group>
<span slot="header"> ${msg("Appearance settings")} </span> <span slot="header"> ${msg("Appearance settings")} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${msg("Layout")} label=${msg("Layout")}
?required=${true} ?required=${true}
name="layout" name="layout"
> >
<select class="pf-c-form-control"> <select class="pf-v5-c-form-control">
<option <option
value=${LayoutEnum.Stacked} value=${LayoutEnum.Stacked}
?selected=${this.instance?.layout === LayoutEnum.Stacked} ?selected=${this.instance?.layout === LayoutEnum.Stacked}
@ -341,26 +341,26 @@ export class FlowForm extends ModelForm<Flow, string> {
label=${msg("Background")} label=${msg("Background")}
name="background" name="background"
> >
<input type="file" value="" class="pf-c-form-control" /> <input type="file" value="" class="pf-v5-c-form-control" />
${this.instance?.background ${this.instance?.background
? html` ? html`
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Currently set to:")} ${msg("Currently set to:")}
${this.instance?.background} ${this.instance?.background}
</p> </p>
` `
: html``} : html``}
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Background shown during execution.")} ${msg("Background shown during execution.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.instance?.background ${this.instance?.background
? html` ? html`
<ak-form-element-horizontal> <ak-form-element-horizontal>
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
@change=${(ev: Event) => { @change=${(ev: Event) => {
const target = const target =
@ -368,19 +368,19 @@ export class FlowForm extends ModelForm<Flow, string> {
this.clearBackground = target.checked; this.clearBackground = target.checked;
}} }}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i <i
class="fas fa-check" class="fas fa-check"
aria-hidden="true" aria-hidden="true"
></i> ></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label"> <span class="pf-v5-c-switch__label">
${msg("Clear background")} ${msg("Clear background")}
</span> </span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Delete currently set background image.")} ${msg("Delete currently set background image.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -393,9 +393,9 @@ export class FlowForm extends ModelForm<Flow, string> {
<input <input
type="text" type="text"
value="${first(this.instance?.background, "")}" value="${first(this.instance?.background, "")}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Background shown during execution.")} ${msg("Background shown during execution.")}
</p> </p>
</ak-form-element-horizontal>`} </ak-form-element-horizontal>`}

28
web/src/admin/flows/FlowImportForm.ts
View file

@ -43,9 +43,9 @@ export class FlowImportForm extends Form<Flow> {
renderResult(): TemplateResult { renderResult(): TemplateResult {
return html` return html`
<ak-form-element-horizontal label=${msg("Successful")}> <ak-form-element-horizontal label=${msg("Successful")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text"> <span class="pf-v5-c-form__label-text">
<ak-label color=${this.result?.success ? PFColor.Green : PFColor.Red}> <ak-label color=${this.result?.success ? PFColor.Green : PFColor.Red}>
${this.result?.success ? msg("Yes") : msg("No")} ${this.result?.success ? msg("Yes") : msg("No")}
</ak-label> </ak-label>
@ -54,27 +54,27 @@ export class FlowImportForm extends Form<Flow> {
</div> </div>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Log messages")}> <ak-form-element-horizontal label=${msg("Log messages")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<dl class="pf-c-description-list pf-m-horizontal"> <dl class="pf-v5-c-description-list pf-m-horizontal">
${(this.result?.logs || []).length > 0 ${(this.result?.logs || []).length > 0
? this.result?.logs?.map((m) => { ? this.result?.logs?.map((m) => {
return html`<div class="pf-c-description-list__group"> return html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${m.log_level}</span >${m.log_level}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${m.event} ${m.event}
</div> </div>
</dd> </dd>
</div>`; </div>`;
}) })
: html`<div class="pf-c-description-list__group"> : html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("No log messages.")}</span >${msg("No log messages.")}</span
> >
</dt> </dt>
@ -88,8 +88,8 @@ export class FlowImportForm extends Form<Flow> {
renderInlineForm(): TemplateResult { renderInlineForm(): TemplateResult {
return html`<ak-form-element-horizontal label=${msg("Flow")} name="flow"> return html`<ak-form-element-horizontal label=${msg("Flow")} name="flow">
<input type="file" value="" class="pf-c-form-control" /> <input type="file" value="" class="pf-v5-c-form-control" />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
".yaml files, which can be found on goauthentik.io and can be exported by authentik.", ".yaml files, which can be found on goauthentik.io and can be exported by authentik.",
)} )}

74
web/src/admin/flows/FlowViewPage.ts
View file

@ -64,23 +64,23 @@ export class FlowViewPage extends AKElement {
<div <div
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Flow Overview")}" data-tab-title="${msg("Flow Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-2-col-on-xl pf-m-2-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Related actions")}</div> <div class="pf-v5-c-card__title">${msg("Related actions")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-v5-c-description-list">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Edit")}</span >${msg("Edit")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> <span slot="header">
@ -93,22 +93,22 @@ export class FlowViewPage extends AKElement {
</ak-flow-form> </ak-flow-form>
<button <button
slot="trigger" slot="trigger"
class="pf-c-button pf-m-block pf-m-secondary" class="pf-v5-c-button pf-m-block pf-m-secondary"
> >
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</dd> </dd>
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Execute flow")}</span >${msg("Execute flow")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<button <button
class="pf-c-button pf-m-block pf-m-primary" class="pf-v5-c-button pf-m-block pf-m-primary"
@click=${() => { @click=${() => {
const finalURL = `${ const finalURL = `${
window.location.origin window.location.origin
@ -121,7 +121,7 @@ export class FlowViewPage extends AKElement {
${msg("Normal")} ${msg("Normal")}
</button> </button>
<button <button
class="pf-c-button pf-m-block pf-m-secondary" class="pf-v5-c-button pf-m-block pf-m-secondary"
@click=${() => { @click=${() => {
new FlowsApi(DEFAULT_CONFIG) new FlowsApi(DEFAULT_CONFIG)
.flowsInstancesExecuteRetrieve({ .flowsInstancesExecuteRetrieve({
@ -140,7 +140,7 @@ export class FlowViewPage extends AKElement {
${msg("with current user")} ${msg("with current user")}
</button> </button>
<button <button
class="pf-c-button pf-m-block pf-m-secondary" class="pf-v5-c-button pf-m-block pf-m-secondary"
@click=${() => { @click=${() => {
new FlowsApi(DEFAULT_CONFIG) new FlowsApi(DEFAULT_CONFIG)
.flowsInstancesExecuteRetrieve({ .flowsInstancesExecuteRetrieve({
@ -168,15 +168,15 @@ export class FlowViewPage extends AKElement {
</button> </button>
</div> </div>
</dd> </dd>
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Export flow")}</span >${msg("Export flow")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a <a
class="pf-c-button pf-m-block pf-m-secondary" class="pf-v5-c-button pf-m-block pf-m-secondary"
href=${this.flow.exportUrl} href=${this.flow.exportUrl}
> >
${msg("Export")} ${msg("Export")}
@ -188,18 +188,18 @@ export class FlowViewPage extends AKElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-10-col-on-xl pf-m-10-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Diagram")}</div> <div class="pf-v5-c-card__title">${msg("Diagram")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-flow-diagram flowSlug=${this.flow.slug}> </ak-flow-diagram> <ak-flow-diagram flowSlug=${this.flow.slug}> </ak-flow-diagram>
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Changelog")}</div> <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.flow.pk || ""} targetModelPk=${this.flow.pk || ""}
targetModelApp="authentik_flows" targetModelApp="authentik_flows"
@ -213,10 +213,10 @@ export class FlowViewPage extends AKElement {
<div <div
slot="page-stage-bindings" slot="page-stage-bindings"
data-tab-title="${msg("Stage Bindings")}" data-tab-title="${msg("Stage Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-bound-stages-list .target=${this.flow.pk}> </ak-bound-stages-list> <ak-bound-stages-list .target=${this.flow.pk}> </ak-bound-stages-list>
</div> </div>
</div> </div>
@ -224,13 +224,13 @@ export class FlowViewPage extends AKElement {
<div <div
slot="page-policy-bindings" slot="page-policy-bindings"
data-tab-title="${msg("Policy / Group / User Bindings")}" data-tab-title="${msg("Policy / Group / User Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg("These bindings control which users can access this flow.")} ${msg("These bindings control which users can access this flow.")}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}> <ak-bound-policies-list .target=${this.flow.policybindingmodelPtrId}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>

30
web/src/admin/flows/StageBindingForm.ts
View file

@ -92,7 +92,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.renderTarget()} ${this.renderTarget()}
<ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage"> <ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage">
<ak-search-select <ak-search-select
@ -125,43 +125,43 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
<input <input
type="number" type="number"
value="${first(this.instance?.order, this.defaultOrder)}" value="${first(this.instance?.order, this.defaultOrder)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="evaluateOnPlan"> <ak-form-element-horizontal name="evaluateOnPlan">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.evaluateOnPlan, false)} ?checked=${first(this.instance?.evaluateOnPlan, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Evaluate when flow is planned")}</span> <span class="pf-v5-c-switch__label">${msg("Evaluate when flow is planned")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Evaluate policies during the Flow planning process.")} ${msg("Evaluate policies during the Flow planning process.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="reEvaluatePolicies"> <ak-form-element-horizontal name="reEvaluatePolicies">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.reEvaluatePolicies, true)} ?checked=${first(this.instance?.reEvaluatePolicies, true)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Evaluate when stage is run")}</span> <span class="pf-v5-c-switch__label">${msg("Evaluate when stage is run")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Evaluate policies before the Stage is present to the user.")} ${msg("Evaluate policies before the Stage is present to the user.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -196,7 +196,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
.value=${this.instance?.invalidResponseAction} .value=${this.instance?.invalidResponseAction}
> >
</ak-radio> </ak-radio>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.", "Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.",
)} )}

22
web/src/admin/groups/GroupForm.ts
View file

@ -20,10 +20,10 @@ import { CoreApi, CoreGroupsListRequest, Group } from "@goauthentik/api";
export class GroupForm extends ModelForm<Group, string> { export class GroupForm extends ModelForm<Group, string> {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return super.styles.concat(css` return super.styles.concat(css`
.pf-c-button.pf-m-control { .pf-v5-c-button.pf-m-control {
height: 100%; height: 100%;
} }
.pf-c-form-control { .pf-v5-c-form-control {
height: auto !important; height: auto !important;
} }
`); `);
@ -58,30 +58,30 @@ export class GroupForm extends ModelForm<Group, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="isSuperuser"> <ak-form-element-horizontal name="isSuperuser">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.isSuperuser, false)} ?checked=${first(this.instance?.isSuperuser, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Is superuser")}</span> <span class="pf-v5-c-switch__label">${msg("Is superuser")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Users added to this group will be superusers.")} ${msg("Users added to this group will be superusers.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -123,7 +123,7 @@ export class GroupForm extends ModelForm<Group, string> {
value="${YAML.stringify(first(this.instance?.attributes, {}))}" value="${YAML.stringify(first(this.instance?.attributes, {}))}"
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Set custom attributes using YAML or JSON.")} ${msg("Set custom attributes using YAML or JSON.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

54
web/src/admin/groups/GroupViewPage.ts
View file

@ -84,35 +84,35 @@ export class GroupViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Group Info")}</div> <div class="pf-v5-c-card__title">${msg("Group Info")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col"> <dl class="pf-v5-c-description-list pf-m-2-col">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.group.name} ${this.group.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Superuser")}</span >${msg("Superuser")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-label <ak-label
color=${this.group.isSuperuser color=${this.group.isSuperuser
? PFColor.Green ? PFColor.Green
@ -123,23 +123,23 @@ export class GroupViewPage extends AKElement {
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Group")} </span> <span slot="header"> ${msg("Update Group")} </span>
<ak-group-form slot="form" .instancePk=${this.group.pk}> <ak-group-form slot="form" .instancePk=${this.group.pk}>
</ak-group-form> </ak-group-form>
<button slot="trigger" class="pf-m-primary pf-c-button"> <button slot="trigger" class="pf-m-primary pf-v5-c-button">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-9-col-on-xl pf-m-9-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Notes")}</div> <div class="pf-v5-c-card__title">${msg("Notes")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${Object.hasOwn(this.group?.attributes || {}, "notes") ${Object.hasOwn(this.group?.attributes || {}, "notes")
? html`${this.group.attributes?.notes}` ? html`${this.group.attributes?.notes}`
: html` : html`
@ -152,10 +152,10 @@ export class GroupViewPage extends AKElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
> >
<div class="pf-c-card__title">${msg("Changelog")}</div> <div class="pf-v5-c-card__title">${msg("Changelog")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.group.pk} targetModelPk=${this.group.pk}
targetModelApp="authentik_core" targetModelApp="authentik_core"
@ -169,10 +169,10 @@ export class GroupViewPage extends AKElement {
<section <section
slot="page-users" slot="page-users"
data-tab-title="${msg("Users")}" data-tab-title="${msg("Users")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-user-related-list .targetGroup=${this.group}> </ak-user-related-list> <ak-user-related-list .targetGroup=${this.group}> </ak-user-related-list>
</div> </div>
</div> </div>

10
web/src/admin/groups/MemberSelectModal.ts
View file

@ -60,13 +60,13 @@ export class MemberSelectTable extends TableModal<User> {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl">${msg("Select users to add")}</h1> <h1 class="pf-v5-c-title pf-m-2xl">${msg("Select users to add")}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section> <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(this.selectedElements).then(() => { return this.confirm(this.selectedElements).then(() => {

42
web/src/admin/outposts/OutpostDeploymentModal.ts
View file

@ -15,10 +15,10 @@ export class OutpostDeploymentModal extends ModalButton {
outpost?: Outpost; outpost?: Outpost;
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<div class="pf-c-modal-box__header"> return html`<div class="pf-v5-c-modal-box__header">
<h1 class="pf-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1> <h1 class="pf-v5-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
</div> </div>
<div class="pf-c-modal-box__body"> <div class="pf-v5-c-modal-box__body">
<p> <p>
<a <a
target="_blank" target="_blank"
@ -26,21 +26,21 @@ export class OutpostDeploymentModal extends ModalButton {
>${msg("View deployment documentation")}</a >${msg("View deployment documentation")}</a
> >
</p> </p>
<form class="pf-c-form"> <form class="pf-v5-c-form">
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">AUTHENTIK_HOST</span> <span class="pf-v5-c-form__label-text">AUTHENTIK_HOST</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${document.location.origin}" value="${document.location.origin}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span> <span class="pf-v5-c-form__label-text">AUTHENTIK_TOKEN</span>
</label> </label>
<div> <div>
<ak-token-copy-button <ak-token-copy-button
@ -56,11 +56,11 @@ export class OutpostDeploymentModal extends ModalButton {
"If your authentik Instance is using a self-signed certificate, set this value.", "If your authentik Instance is using a self-signed certificate, set this value.",
)} )}
</h3> </h3>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span> <span class="pf-v5-c-form__label-text">AUTHENTIK_INSECURE</span>
</label> </label>
<input class="pf-c-form-control" readonly type="text" value="true" /> <input class="pf-v5-c-form-control" readonly type="text" value="true" />
</div> </div>
${this.outpost?.type == OutpostTypeEnum.Proxy ${this.outpost?.type == OutpostTypeEnum.Proxy
? html` ? html`
@ -69,14 +69,14 @@ export class OutpostDeploymentModal extends ModalButton {
"If your authentik_host setting does not match the URL you want to login with, add this setting.", "If your authentik_host setting does not match the URL you want to login with, add this setting.",
)} )}
</h3> </h3>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>AUTHENTIK_HOST_BROWSER</span >AUTHENTIK_HOST_BROWSER</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${document.location.origin}" value="${document.location.origin}"
@ -86,9 +86,9 @@ export class OutpostDeploymentModal extends ModalButton {
: html``} : html``}
</form> </form>
</div> </div>
<footer class="pf-c-modal-box__footer pf-m-align-left"> <footer class="pf-v5-c-modal-box__footer pf-m-align-left">
<button <button
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
@click=${() => { @click=${() => {
this.open = false; this.open = false;
}} }}

20
web/src/admin/outposts/OutpostForm.ts
View file

@ -99,18 +99,18 @@ export class OutpostForm extends ModelForm<Outpost, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type"> <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
<select <select
class="pf-c-form-control" class="pf-v5-c-form-control"
@change=${(ev: Event) => { @change=${(ev: Event) => {
const target = ev.target as HTMLSelectElement; const target = ev.target as HTMLSelectElement;
this.type = target.selectedOptions[0].value as OutpostTypeEnum; this.type = target.selectedOptions[0].value as OutpostTypeEnum;
@ -170,12 +170,12 @@ export class OutpostForm extends ModelForm<Outpost, string> {
?blankable=${true} ?blankable=${true}
> >
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Selecting an integration enables the management of the outpost by authentik.", "Selecting an integration enables the management of the outpost by authentik.",
)} )}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
See See
<a target="_blank" href="${docLink("/docs/outposts?utm_source=authentik")}" <a target="_blank" href="${docLink("/docs/outposts?utm_source=authentik")}"
>documentation</a >documentation</a
@ -187,7 +187,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
?required=${!this.embedded} ?required=${!this.embedded}
name="providers" name="providers"
> >
<select class="pf-c-form-control" multiple> <select class="pf-v5-c-form-control" multiple>
${this.providers?.results.map((provider) => { ${this.providers?.results.map((provider) => {
const selected = Array.from(this.instance?.providers || []).some((sp) => { const selected = Array.from(this.instance?.providers || []).some((sp) => {
return sp == provider.pk; return sp == provider.pk;
@ -201,10 +201,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
</option>`; </option>`;
})} })}
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("You can only select providers that match the type of the outpost.")} ${msg("You can only select providers that match the type of the outpost.")}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Hold control/command to select multiple items.")} ${msg("Hold control/command to select multiple items.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -215,10 +215,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
this.instance ? this.instance.config : this.defaultConfig?.config, this.instance ? this.instance.config : this.defaultConfig?.config,
)}" )}"
></ak-codemirror> ></ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Set custom attributes using YAML or JSON.")} ${msg("Set custom attributes using YAML or JSON.")}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("See more here:")}&nbsp; ${msg("See more here:")}&nbsp;
<a <a
target="_blank" target="_blank"

32
web/src/admin/outposts/OutpostHealth.ts
View file

@ -39,25 +39,25 @@ export class OutpostHealthElement extends AKElement {
8, 8,
)})`; )})`;
} }
return html`<dl class="pf-c-description-list pf-m-compact"> return html`<dl class="pf-v5-c-description-list pf-m-compact">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Last seen")}</span> <span class="pf-v5-c-description-list__text">${msg("Last seen")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-label color=${PFColor.Green} ?compact=${true}> <ak-label color=${PFColor.Green} ?compact=${true}>
${this.outpostHealth.lastSeen?.toLocaleTimeString()} ${this.outpostHealth.lastSeen?.toLocaleTimeString()}
</ak-label> </ak-label>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Version")}</span> <span class="pf-v5-c-description-list__text">${msg("Version")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.outpostHealth.versionOutdated ${this.outpostHealth.versionOutdated
? html`<ak-label color=${PFColor.Red} ?compact=${true} ? html`<ak-label color=${PFColor.Red} ?compact=${true}
>${msg( >${msg(
@ -70,12 +70,12 @@ export class OutpostHealthElement extends AKElement {
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Hostname")}</span> <span class="pf-v5-c-description-list__text">${msg("Hostname")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text">${this.outpostHealth.hostname}</div> <div class="pf-v5-c-description-list__text">${this.outpostHealth.hostname}</div>
</dd> </dd>
</div> </div>
</dl> `; </dl> `;

28
web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
View file

@ -45,30 +45,30 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="local"> <ak-form-element-horizontal name="local">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.local, false)} ?checked=${first(this.instance?.local, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Local")}</span> <span class="pf-v5-c-switch__label">${msg("Local")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"If enabled, use the local connection. Required Docker socket/Kubernetes Integration.", "If enabled, use the local connection. Required Docker socket/Kubernetes Integration.",
)} )}
@ -80,23 +80,23 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}" value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Set custom attributes using YAML or JSON.")} ${msg("Set custom attributes using YAML or JSON.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="verifySsl"> <ak-form-element-horizontal name="verifySsl">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.verifySsl, true)} ?checked=${first(this.instance?.verifySsl, true)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label" <span class="pf-v5-c-switch__label"
>${msg("Verify Kubernetes API SSL Certificate")}</span >${msg("Verify Kubernetes API SSL Certificate")}</span
> >
</label> </label>

12
web/src/admin/outposts/ServiceConnectionWizard.ts
View file

@ -41,11 +41,11 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
}; };
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.connectionTypes.map((type) => { ${this.connectionTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${`${type.component}-${type.modelName}`} id=${`${type.component}-${type.modelName}`}
@ -57,10 +57,10 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`} <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
>${type.name}</label >${type.name}</label
> >
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -107,7 +107,7 @@ export class ServiceConnectionWizard extends AKElement {
</ak-wizard-page-form> </ak-wizard-page-form>
`; `;
})} })}
<button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

14
web/src/admin/policies/BoundPoliciesList.ts
View file

@ -85,7 +85,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
type=${ifDefined(item.policyObj?.component)} type=${ifDefined(item.policyObj?.component)}
> >
</ak-proxy-form> </ak-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit Policy")} ${msg("Edit Policy")}
</button> </button>
</ak-forms-modal>`; </ak-forms-modal>`;
@ -94,7 +94,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Group")} </span> <span slot="header"> ${msg("Update Group")} </span>
<ak-group-form slot="form" .instancePk=${item.groupObj?.pk}> </ak-group-form> <ak-group-form slot="form" .instancePk=${item.groupObj?.pk}> </ak-group-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit Group")} ${msg("Edit Group")}
</button> </button>
</ak-forms-modal>`; </ak-forms-modal>`;
@ -103,7 +103,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update User")} </span> <span slot="header"> ${msg("Update User")} </span>
<ak-user-form slot="form" .instancePk=${item.userObj?.pk}> </ak-user-form> <ak-user-form slot="form" .instancePk=${item.userObj?.pk}> </ak-user-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit User")} ${msg("Edit User")}
</button> </button>
</ak-forms-modal>`; </ak-forms-modal>`;
@ -137,7 +137,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
}); });
}} }}
> >
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger"> <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
${msg("Delete")} ${msg("Delete")}
</button> </button>
</ak-forms-delete-bulk>`; </ak-forms-delete-bulk>`;
@ -162,7 +162,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
?policyOnly=${this.policyOnly} ?policyOnly=${this.policyOnly}
> >
</ak-policy-binding-form> </ak-policy-binding-form>
<button slot="trigger" class="pf-c-button pf-m-secondary"> <button slot="trigger" class="pf-v5-c-button pf-m-secondary">
${msg("Edit Binding")} ${msg("Edit Binding")}
</button> </button>
</ak-forms-modal>`, </ak-forms-modal>`,
@ -183,7 +183,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
?policyOnly=${this.policyOnly} ?policyOnly=${this.policyOnly}
> >
</ak-policy-binding-form> </ak-policy-binding-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Create Binding")} ${msg("Create Binding")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -207,7 +207,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
?policyOnly=${this.policyOnly} ?policyOnly=${this.policyOnly}
> >
</ak-policy-binding-form> </ak-policy-binding-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Bind existing policy")} ${msg("Bind existing policy")}
</button> </button>
</ak-forms-modal> `; </ak-forms-modal> `;

32
web/src/admin/policies/PolicyTestForm.ts
View file

@ -54,9 +54,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
renderResult(): TemplateResult { renderResult(): TemplateResult {
return html` return html`
<ak-form-element-horizontal label=${msg("Passing")}> <ak-form-element-horizontal label=${msg("Passing")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text"> <span class="pf-v5-c-form__label-text">
<ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}> <ak-label color=${this.result?.passing ? PFColor.Green : PFColor.Red}>
${this.result?.passing ? msg("Yes") : msg("No")} ${this.result?.passing ? msg("Yes") : msg("No")}
</ak-label> </ak-label>
@ -65,17 +65,17 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
</div> </div>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Messages")}> <ak-form-element-horizontal label=${msg("Messages")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<ul> <ul>
${(this.result?.messages || []).length > 0 ${(this.result?.messages || []).length > 0
? this.result?.messages?.map((m) => { ? this.result?.messages?.map((m) => {
return html`<li> return html`<li>
<span class="pf-c-form__label-text">${m}</span> <span class="pf-v5-c-form__label-text">${m}</span>
</li>`; </li>`;
}) })
: html`<li> : html`<li>
<span class="pf-c-form__label-text">-</span> <span class="pf-v5-c-form__label-text">-</span>
</li>`} </li>`}
</ul> </ul>
</div> </div>
@ -83,27 +83,27 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Log messages")}> <ak-form-element-horizontal label=${msg("Log messages")}>
<div class="pf-c-form__group-label"> <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<dl class="pf-c-description-list pf-m-horizontal"> <dl class="pf-v5-c-description-list pf-m-horizontal">
${(this.result?.logMessages || []).length > 0 ${(this.result?.logMessages || []).length > 0
? this.result?.logMessages?.map((m) => { ? this.result?.logMessages?.map((m) => {
return html`<div class="pf-c-description-list__group"> return html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${m.log_level}</span >${m.log_level}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${m.event} ${m.event}
</div> </div>
</dd> </dd>
</div>`; </div>`;
}) })
: html`<div class="pf-c-description-list__group"> : html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("No log messages.")}</span >${msg("No log messages.")}</span
> >
</dt> </dt>
@ -149,7 +149,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
value=${YAML.stringify(first(this.request?.context, {}))} value=${YAML.stringify(first(this.request?.context, {}))}
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Set custom attributes using YAML or JSON.")} ${msg("Set custom attributes using YAML or JSON.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

12
web/src/admin/policies/PolicyWizard.ts
View file

@ -47,11 +47,11 @@ export class InitialPolicyWizardPage extends WizardPage {
}; };
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.policyTypes.map((type) => { ${this.policyTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${`${type.component}-${type.modelName}`} id=${`${type.component}-${type.modelName}`}
@ -70,10 +70,10 @@ export class InitialPolicyWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`} <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
>${type.name}</label >${type.name}</label
> >
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -144,7 +144,7 @@ export class PolicyWizard extends AKElement {
></ak-policy-binding-form> ></ak-policy-binding-form>
</ak-wizard-page-form>` </ak-wizard-page-form>`
: html``} : html``}
<button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

2
web/src/admin/policies/reputation/ReputationListPage.ts
View file

@ -71,7 +71,7 @@ export class ReputationListPage extends TablePage<Reputation> {
}); });
}} }}
> >
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger"> <button ?disabled=${disabled} slot="trigger" class="pf-v5-c-button pf-m-danger">
${msg("Delete")} ${msg("Delete")}
</button> </button>
</ak-forms-delete-bulk>`; </ak-forms-delete-bulk>`;

10
web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
View file

@ -41,12 +41,12 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -58,10 +58,10 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.objectField)}" value="${ifDefined(this.instance?.objectField)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Field of the user object this value is written to.")} ${msg("Field of the user object this value is written to.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -72,7 +72,7 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}
<a <a
target="_blank" target="_blank"

6
web/src/admin/property-mappings/PropertyMappingNotification.ts
View file

@ -41,12 +41,12 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -57,7 +57,7 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}
<a <a
target="_blank" target="_blank"

14
web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
View file

@ -41,12 +41,12 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -58,10 +58,10 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.samlName)}" value="${ifDefined(this.instance?.samlName)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Attribute name used for SAML Assertions. Can be a URN OID, a schema reference, or a any other string. If this property mapping is used for NameID Property, this field is discarded.", "Attribute name used for SAML Assertions. Can be a URN OID, a schema reference, or a any other string. If this property mapping is used for NameID Property, this field is discarded.",
)} )}
@ -71,9 +71,9 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.friendlyName || "")}" value="${ifDefined(this.instance?.friendlyName || "")}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Optionally set the 'FriendlyName' value of the Assertion attribute.")} ${msg("Optionally set the 'FriendlyName' value of the Assertion attribute.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -84,7 +84,7 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}
<a <a
target="_blank" target="_blank"

6
web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
View file

@ -41,12 +41,12 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -57,7 +57,7 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}
<a <a
target="_blank" target="_blank"

14
web/src/admin/property-mappings/PropertyMappingScopeForm.ts
View file

@ -41,12 +41,12 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -58,10 +58,10 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.scopeName)}" value="${ifDefined(this.instance?.scopeName)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Scope which the client can specify to access these properties.")} ${msg("Scope which the client can specify to access these properties.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -69,9 +69,9 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.description)}" value="${ifDefined(this.instance?.description)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Description shown to the user when consenting. If left empty, the user won't be informed.", "Description shown to the user when consenting. If left empty, the user won't be informed.",
)} )}
@ -84,7 +84,7 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}
<a <a
target="_blank" target="_blank"

10
web/src/admin/property-mappings/PropertyMappingTestForm.ts
View file

@ -55,9 +55,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
value="${ifDefined(this.result?.result)}" value="${ifDefined(this.result?.result)}"
> >
</ak-codemirror>` </ak-codemirror>`
: html` <div class="pf-c-form__group-label"> : html` <div class="pf-v5-c-form__group-label">
<div class="c-form__horizontal-group"> <div class="c-form__horizontal-group">
<span class="pf-c-form__label-text">${this.result?.result}</span> <span class="pf-v5-c-form__label-text">${this.result?.result}</span>
</div> </div>
</div>`} </div>`}
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;
@ -76,7 +76,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
renderExampleLDAP(): TemplateResult { renderExampleLDAP(): TemplateResult {
return html` return html`
<button <button
class="pf-c-button pf-m-secondary" class="pf-v5-c-button pf-m-secondary"
role="button" role="button"
@click=${() => { @click=${() => {
this.request = { this.request = {
@ -97,7 +97,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
${msg("Active Directory User")} ${msg("Active Directory User")}
</button> </button>
<button <button
class="pf-c-button pf-m-secondary" class="pf-v5-c-button pf-m-secondary"
role="button" role="button"
@click=${() => { @click=${() => {
this.request = { this.request = {
@ -152,7 +152,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
value=${YAML.stringify(first(this.request?.context, {}))} value=${YAML.stringify(first(this.request?.context, {}))}
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text">${this.renderExampleButtons()}</p> <p class="pf-v5-c-form__helper-text">${this.renderExampleButtons()}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.result ? this.renderResult() : html``}`; ${this.result ? this.renderResult() : html``}`;
} }

12
web/src/admin/property-mappings/PropertyMappingWizard.ts
View file

@ -44,11 +44,11 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
}; };
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.mappingTypes.map((type) => { ${this.mappingTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${`${type.component}-${type.modelName}`} id=${`${type.component}-${type.modelName}`}
@ -60,10 +60,10 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`} <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
>${type.name}</label >${type.name}</label
> >
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -107,7 +107,7 @@ export class PropertyMappingWizard extends AKElement {
</ak-wizard-page-form> </ak-wizard-page-form>
`; `;
})} })}
<button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

22
web/src/admin/providers/ProviderWizard.ts
View file

@ -46,16 +46,16 @@ export class InitialProviderWizardPage extends WizardPage {
}; };
renderHint(): TemplateResult { renderHint(): TemplateResult {
return html`<div class="pf-c-hint"> return html`<div class="pf-v5-c-hint">
<div class="pf-c-hint__title">${msg("Try the new application wizard")}</div> <div class="pf-v5-c-hint__title">${msg("Try the new application wizard")}</div>
<div class="pf-c-hint__body"> <div class="pf-v5-c-hint__body">
${msg( ${msg(
"The new application wizard greatly simplifies the steps required to create applications and providers.", "The new application wizard greatly simplifies the steps required to create applications and providers.",
)} )}
</div> </div>
<div class="pf-c-hint__footer"> <div class="pf-v5-c-hint__footer">
<a <a
class="pf-c-button pf-m-link pf-m-inline" class="pf-v5-c-button pf-m-link pf-m-inline"
href=${paramURL("/core/applications", { href=${paramURL("/core/applications", {
createForm: true, createForm: true,
})} })}
@ -67,11 +67,11 @@ export class InitialProviderWizardPage extends WizardPage {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.providerTypes.map((type) => { ${this.providerTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${type.component} id=${type.component}
@ -80,8 +80,8 @@ export class InitialProviderWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label> <label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -133,7 +133,7 @@ export class ProviderWizard extends AKElement {
</ak-wizard-page-form> </ak-wizard-page-form>
`; `;
})} })}
<button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

2
web/src/admin/providers/RelatedApplicationButton.ts
View file

@ -31,7 +31,7 @@ export class RelatedApplicationButton extends AKElement {
<span slot="submit"> ${msg("Create")} </span> <span slot="submit"> ${msg("Create")} </span>
<span slot="header"> ${msg("Create Application")} </span> <span slot="header"> ${msg("Create Application")} </span>
<ak-application-form slot="form" .provider=${this.provider?.pk}> </ak-application-form> <ak-application-form slot="form" .provider=${this.provider?.pk}> </ak-application-form>
<button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
</ak-forms-modal>`; </ak-forms-modal>`;
} }
} }

84
web/src/admin/providers/ldap/LDAPProviderViewPage.ts
View file

@ -89,10 +89,10 @@ export class LDAPProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider?.pk || ""} targetModelPk=${this.provider?.pk || ""}
targetModelName=${this.provider?.metaModelName || ""} targetModelName=${this.provider?.metaModelName || ""}
@ -111,109 +111,109 @@ export class LDAPProviderViewPage extends AKElement {
return html` return html`
${ ${
this.provider?.outpostSet.length < 1 this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning"> ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by any Outpost.")} ${msg("Warning: Provider is not used by any Outpost.")}
</div>` </div>`
: html`` : html``
} }
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"> <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Name")}</span> <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Assigned to application")}</span >${msg("Assigned to application")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-provider-related-application <ak-provider-related-application
.provider=${this.provider} .provider=${this.provider}
></ak-provider-related-application> ></ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Base DN")}</span >${msg("Base DN")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.baseDn} ${this.provider.baseDn}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update LDAP Provider")} </span> <span slot="header"> ${msg("Update LDAP Provider")} </span>
<ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}> <ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}>
</ak-provider-ldap-form> </ak-provider-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg("How to connect")} ${msg("How to connect")}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<p> <p>
${msg("Connect to the LDAP Server on port 389:")} ${msg("Connect to the LDAP Server on port 389:")}
</p> </p>
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
<li>${msg("Check the IP of the Kubernetes service, or")}</li> <li>${msg("Check the IP of the Kubernetes service, or")}</li>
<li>${msg("The Host IP of the docker host")}</li> <li>${msg("The Host IP of the docker host")}</li>
</ul> </ul>
<form class="pf-c-form"> <form class="pf-v5-c-form">
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg("Bind DN")}</span> <span class="pf-v5-c-form__label-text">${msg("Bind DN")}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value=${`cn=${this.me?.user value=${`cn=${this.me?.user
.username},ou=users,${this.provider?.baseDn?.toLowerCase()}`} .username},ou=users,${this.provider?.baseDn?.toLowerCase()}`}
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg( <span class="pf-v5-c-form__label-text">${msg(
"Bind Password", "Bind Password",
)}</span> )}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="Your authentik password" value="Your authentik password"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg("Search base")}</span> <span class="pf-v5-c-form__label-text">${msg("Search base")}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value=${ifDefined(this.provider?.baseDn?.toLowerCase())} value=${ifDefined(this.provider?.baseDn?.toLowerCase())}

144
web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
View file

@ -116,10 +116,10 @@ export class OAuth2ProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider?.pk || ""} targetModelPk=${this.provider?.pk || ""}
targetModelName=${this.provider?.metaModelName || ""} targetModelName=${this.provider?.metaModelName || ""}
@ -137,77 +137,77 @@ export class OAuth2ProviderViewPage extends AKElement {
} }
return html` ${this.provider?.assignedApplicationName return html` ${this.provider?.assignedApplicationName
? html`` ? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning"> : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by an Application.")} ${msg("Warning: Provider is not used by an Application.")}
</div>`} </div>`}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"> <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
<div <div
class="pf-c-card pf-l-grid__item pf-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-v5-l-grid__item pf-m-12-col pf-m-3-col-on-xl pf-m-3-col-on-2xl"
> >
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list"> <dl class="pf-v5-c-description-list">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Name")}</span> <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Assigned to application")}</span >${msg("Assigned to application")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-provider-related-application .provider=${this.provider}> <ak-provider-related-application .provider=${this.provider}>
</ak-provider-related-application> </ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Client type")}</span >${msg("Client type")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${convertToTitle(this.provider.clientType || "")} ${convertToTitle(this.provider.clientType || "")}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Client ID")}</span >${msg("Client ID")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.clientId} ${this.provider.clientId}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Redirect URIs")}</span >${msg("Redirect URIs")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.redirectUris} ${this.provider.redirectUris}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update OAuth2 Provider")} </span> <span slot="header"> ${msg("Update OAuth2 Provider")} </span>
@ -216,96 +216,96 @@ export class OAuth2ProviderViewPage extends AKElement {
.instancePk=${this.provider.pk || 0} .instancePk=${this.provider.pk || 0}
> >
</ak-provider-oauth2-form> </ak-provider-oauth2-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-7-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-7-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<form class="pf-c-form"> <form class="pf-v5-c-form">
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("OpenID Configuration URL")}</span >${msg("OpenID Configuration URL")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.providerInfo || msg("-")}" value="${this.providerUrls?.providerInfo || msg("-")}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("OpenID Configuration Issuer")}</span >${msg("OpenID Configuration Issuer")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.issuer || msg("-")}" value="${this.providerUrls?.issuer || msg("-")}"
/> />
</div> </div>
<hr /> <hr />
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("Authorize URL")}</span >${msg("Authorize URL")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.authorize || msg("-")}" value="${this.providerUrls?.authorize || msg("-")}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg("Token URL")}</span> <span class="pf-v5-c-form__label-text">${msg("Token URL")}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.token || msg("-")}" value="${this.providerUrls?.token || msg("-")}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("Userinfo URL")}</span >${msg("Userinfo URL")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.userInfo || msg("-")}" value="${this.providerUrls?.userInfo || msg("-")}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg("Logout URL")}</span> <span class="pf-v5-c-form__label-text">${msg("Logout URL")}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.logout || msg("-")}" value="${this.providerUrls?.logout || msg("-")}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${msg("JWKS URL")}</span> <span class="pf-v5-c-form__label-text">${msg("JWKS URL")}</span>
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${this.providerUrls?.jwks || msg("-")}" value="${this.providerUrls?.jwks || msg("-")}"
@ -315,9 +315,9 @@ export class OAuth2ProviderViewPage extends AKElement {
</div> </div>
</div> </div>
<div <div
class="pf-c-card pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl" class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl"
> >
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-markdown <ak-markdown
.replacers=${[ .replacers=${[
(input: string) => { (input: string) => {
@ -342,13 +342,13 @@ export class OAuth2ProviderViewPage extends AKElement {
return html``; return html``;
} }
return html` <div return html` <div
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter" class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg("Example JWT payload (for currently authenticated user)")} ${msg("Example JWT payload (for currently authenticated user)")}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${this.preview ${this.preview
? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>` ? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>`
: html` <ak-empty-state ?loading=${true}></ak-empty-state> `} : html` <ak-empty-state ?loading=${true}></ak-empty-state> `}

132
web/src/admin/providers/proxy/ProxyProviderViewPage.ts
View file

@ -174,7 +174,7 @@ export class ProxyProviderViewPage extends AKElement {
return html`<section return html`<section
slot="page-${convertToSlug(server.label)}" slot="page-${convertToSlug(server.label)}"
data-tab-title="${server.label}" data-tab-title="${server.label}"
class="pf-c-page__main-section pf-m-light pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-light pf-m-no-padding-mobile"
> >
<ak-markdown .replacers=${replacers} .md=${server.md}></ak-markdown> <ak-markdown .replacers=${replacers} .md=${server.md}></ak-markdown>
</section>`; </section>`;
@ -196,10 +196,10 @@ export class ProxyProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider?.pk || ""} targetModelPk=${this.provider?.pk || ""}
targetModelName=${this.provider?.metaModelName || ""} targetModelName=${this.provider?.metaModelName || ""}
@ -216,17 +216,17 @@ export class ProxyProviderViewPage extends AKElement {
return html``; return html``;
} }
return html`<div return html`<div
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter" class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
> >
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Client ID")}</span> <span class="pf-v5-c-description-list__text">${msg("Client ID")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<pre>${this.provider.clientId}</pre> <pre>${this.provider.clientId}</pre>
</div> </div>
</dd> </dd>
@ -234,8 +234,8 @@ export class ProxyProviderViewPage extends AKElement {
</dl> </dl>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-markdown .md=${MDHeaderAuthentication}></ak-markdown> <ak-markdown .md=${MDHeaderAuthentication}></ak-markdown>
</div> </div>
</div> </div>
@ -248,76 +248,76 @@ export class ProxyProviderViewPage extends AKElement {
} }
return html`${this.provider?.assignedApplicationName return html`${this.provider?.assignedApplicationName
? html`` ? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning"> : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by an Application.")} ${msg("Warning: Provider is not used by an Application.")}
</div>`} </div>`}
${this.provider?.outpostSet.length < 1 ${this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning"> ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by any Outpost.")} ${msg("Warning: Provider is not used by any Outpost.")}
</div>` </div>`
: html``} : html``}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"> <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Name")}</span> <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Assigned to application")}</span >${msg("Assigned to application")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-provider-related-application <ak-provider-related-application
.provider=${this.provider} .provider=${this.provider}
></ak-provider-related-application> ></ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Internal Host")}</span >${msg("Internal Host")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.internalHost} ${this.provider.internalHost}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("External Host")}</span >${msg("External Host")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a target="_blank" href="${this.provider.externalHost}" <a target="_blank" href="${this.provider.externalHost}"
>${this.provider.externalHost}</a >${this.provider.externalHost}</a
> >
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Basic-Auth")}</span >${msg("Basic-Auth")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-label <ak-label
color=${this.provider.basicAuthEnabled color=${this.provider.basicAuthEnabled
? PFColor.Green ? PFColor.Green
@ -330,19 +330,19 @@ export class ProxyProviderViewPage extends AKElement {
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Mode")}</span> <span class="pf-v5-c-description-list__text">${msg("Mode")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${ModeToLabel(this.provider.mode || ProxyMode.Proxy)} ${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Proxy Provider")} </span> <span slot="header"> ${msg("Update Proxy Provider")} </span>
@ -351,25 +351,25 @@ export class ProxyProviderViewPage extends AKElement {
.instancePk=${this.provider.pk || 0} .instancePk=${this.provider.pk || 0}
> >
</ak-provider-proxy-form> </ak-provider-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Protocol Settings")}</div> <div class="pf-v5-c-card__title">${msg("Protocol Settings")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Allowed Redirect URIs")}</span >${msg("Allowed Redirect URIs")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
${this.provider.redirectUris.split("\n").map((url) => { ${this.provider.redirectUris.split("\n").map((url) => {
return html`<li><pre>${url}</pre></li>`; return html`<li><pre>${url}</pre></li>`;
})} })}
@ -380,9 +380,9 @@ export class ProxyProviderViewPage extends AKElement {
</dl> </dl>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Setup")}</div> <div class="pf-v5-c-card__title">${msg("Setup")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${isForward(this.provider?.mode || ProxyMode.Proxy) ${isForward(this.provider?.mode || ProxyMode.Proxy)
? html` ${this.renderConfig()} ` ? html` ${this.renderConfig()} `
: html` <p>${msg("No additional setup is required.")}</p> `} : html` <p>${msg("No additional setup is required.")}</p> `}

54
web/src/admin/providers/radius/RadiusProviderViewPage.ts
View file

@ -76,59 +76,59 @@ export class RadiusProviderViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
${this.provider?.outpostSet.length < 1 ${this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning"> ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by any Outpost.")} ${msg("Warning: Provider is not used by any Outpost.")}
</div>` </div>`
: html``} : html``}
<div class="pf-u-display-flex pf-u-justify-content-center"> <div class="pf-v5-u-display-flex pf-v5-u-justify-content-center">
<div class="pf-u-w-75"> <div class="pf-v5-u-w-75">
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Assigned to application")}</span >${msg("Assigned to application")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-provider-related-application <ak-provider-related-application
.provider=${this.provider} .provider=${this.provider}
></ak-provider-related-application> ></ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Client Networks")}</span >${msg("Client Networks")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.clientNetworks} ${this.provider.clientNetworks}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Radius Provider")} </span> <span slot="header"> ${msg("Update Radius Provider")} </span>
@ -137,7 +137,7 @@ export class RadiusProviderViewPage extends AKElement {
.instancePk=${this.provider.pk} .instancePk=${this.provider.pk}
> >
</ak-provider-radius-form> </ak-provider-radius-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -149,10 +149,10 @@ export class RadiusProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider.pk || ""} targetModelPk=${this.provider.pk || ""}
targetModelApp="authentik_providers_radius" targetModelApp="authentik_providers_radius"

206
web/src/admin/providers/saml/SAMLProviderViewPage.ts
View file

@ -121,14 +121,14 @@ export class SAMLProviderViewPage extends AKElement {
const relatedObjects = []; const relatedObjects = [];
if (this.provider?.assignedApplicationName) { if (this.provider?.assignedApplicationName) {
relatedObjects.push( relatedObjects.push(
html`<div class="pf-c-description-list__group"> html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Metadata")}</span> <span class="pf-v5-c-description-list__text">${msg("Metadata")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a <a
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
target="_blank" target="_blank"
href=${ifDefined(this.provider?.urlDownloadMetadata)} href=${ifDefined(this.provider?.urlDownloadMetadata)}
> >
@ -159,16 +159,16 @@ export class SAMLProviderViewPage extends AKElement {
} }
if (this.signer) { if (this.signer) {
relatedObjects.push( relatedObjects.push(
html`<div class="pf-c-description-list__group"> html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Download signing certificate")}</span >${msg("Download signing certificate")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<a <a
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
href=${this.signer.certificateDownloadUrl} href=${this.signer.certificateDownloadUrl}
>${msg("Download")}</a >${msg("Download")}</a
> >
@ -177,10 +177,10 @@ export class SAMLProviderViewPage extends AKElement {
</div>`, </div>`,
); );
} }
return html` <div class="pf-c-card pf-l-grid__item pf-m-12-col"> return html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Related objects")}</div> <div class="pf-v5-c-card__title">${msg("Related objects")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col"> <dl class="pf-v5-c-description-list pf-m-2-col">
${relatedObjects.length > 0 ? relatedObjects : html`-`} ${relatedObjects.length > 0 ? relatedObjects : html`-`}
</dl> </dl>
</div> </div>
@ -214,10 +214,10 @@ export class SAMLProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider?.pk || ""} targetModelPk=${this.provider?.pk || ""}
targetModelName=${this.provider?.metaModelName || ""} targetModelName=${this.provider?.metaModelName || ""}
@ -236,83 +236,83 @@ export class SAMLProviderViewPage extends AKElement {
return html`${ return html`${
this.provider?.assignedApplicationName this.provider?.assignedApplicationName
? html`` ? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning"> : html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg("Warning: Provider is not used by an Application.")} ${msg("Warning: Provider is not used by an Application.")}
</div>` </div>`
} }
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"> <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Name")}</span> <span class="pf-v5-c-description-list__text">${msg("Name")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Assigned to application")}</span >${msg("Assigned to application")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ak-provider-related-application <ak-provider-related-application
.provider=${this.provider} .provider=${this.provider}
></ak-provider-related-application> ></ak-provider-related-application>
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg( <span class="pf-v5-c-description-list__text">${msg(
"ACS URL", "ACS URL",
)}</span> )}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.acsUrl} ${this.provider.acsUrl}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg( <span class="pf-v5-c-description-list__text">${msg(
"Audience", "Audience",
)}</span> )}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.audience || "-"} ${this.provider.audience || "-"}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg( <span class="pf-v5-c-description-list__text">${msg(
"Issuer", "Issuer",
)}</span> )}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.issuer} ${this.provider.issuer}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update SAML Provider")} </span> <span slot="header"> ${msg("Update SAML Provider")} </span>
<ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}> <ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}>
</ak-provider-saml-form> </ak-provider-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -321,83 +321,83 @@ export class SAMLProviderViewPage extends AKElement {
${this.renderRelatedObjects()} ${this.renderRelatedObjects()}
${ ${
this.provider.assignedApplicationName this.provider.assignedApplicationName
? html` <div class="pf-c-card pf-l-grid__item pf-m-12-col"> ? html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("SAML Configuration")}</div> <div class="pf-v5-c-card__title">${msg("SAML Configuration")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<form class="pf-c-form"> <form class="pf-v5-c-form">
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("EntityID/Issuer")}</span >${msg("EntityID/Issuer")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider?.issuer)}" value="${ifDefined(this.provider?.issuer)}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("SSO URL (Post)")}</span >${msg("SSO URL (Post)")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider.urlSsoPost)}" value="${ifDefined(this.provider.urlSsoPost)}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("SSO URL (Redirect)")}</span >${msg("SSO URL (Redirect)")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider.urlSsoRedirect)}" value="${ifDefined(this.provider.urlSsoRedirect)}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("SSO URL (IdP-initiated Login)")}</span >${msg("SSO URL (IdP-initiated Login)")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider.urlSsoInit)}" value="${ifDefined(this.provider.urlSsoInit)}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("SLO URL (Post)")}</span >${msg("SLO URL (Post)")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider.urlSloPost)}" value="${ifDefined(this.provider.urlSloPost)}"
/> />
</div> </div>
<div class="pf-c-form__group"> <div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text" <span class="pf-v5-c-form__label-text"
>${msg("SLO URL (Redirect)")}</span >${msg("SLO URL (Redirect)")}</span
> >
</label> </label>
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value="${ifDefined(this.provider.urlSloRedirect)}" value="${ifDefined(this.provider.urlSloRedirect)}"
@ -430,13 +430,13 @@ export class SAMLProviderViewPage extends AKElement {
}} }}
> >
<div <div
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter" class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
> >
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("SAML Metadata")}</div> <div class="pf-v5-c-card__title">${msg("SAML Metadata")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<a <a
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
target="_blank" target="_blank"
href=${this.provider.urlDownloadMetadata} href=${this.provider.urlDownloadMetadata}
> >
@ -462,7 +462,7 @@ export class SAMLProviderViewPage extends AKElement {
${msg("Copy download URL")} ${msg("Copy download URL")}
</ak-action-button> </ak-action-button>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-codemirror <ak-codemirror
mode="xml" mode="xml"
?readOnly=${true} ?readOnly=${true}
@ -481,36 +481,36 @@ export class SAMLProviderViewPage extends AKElement {
return html`<ak-empty-state ?loading=${true}></ak-empty-state>`; return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
} }
return html` <div return html` <div
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter" class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__title">${msg("Example SAML attributes")}</div> <div class="pf-v5-c-card__title">${msg("Example SAML attributes")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("NameID attribute")}</span >${msg("NameID attribute")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.preview?.nameID} ${this.preview?.nameID}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
${this.preview?.attributes.map((attr) => { ${this.preview?.attributes.map((attr) => {
return html` <div class="pf-c-description-list__group"> return html` <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${attr.Name}</span> <span class="pf-v5-c-description-list__text">${attr.Name}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
${attr.Value.map((value) => { ${attr.Value.map((value) => {
return html` <li><pre>${value}</pre></li> `; return html` <li><pre>${value}</pre></li> `;
})} })}

42
web/src/admin/providers/scim/SCIMProviderForm.ts
View file

@ -61,26 +61,26 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> ${msg("Protocol settings")} </span> <span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal label=${msg("URL")} ?required=${true} name="url"> <ak-form-element-horizontal label=${msg("URL")} ?required=${true} name="url">
<input <input
type="text" type="text"
value="${first(this.instance?.url, "")}" value="${first(this.instance?.url, "")}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("SCIM base url, usually ends in /v2.")} ${msg("SCIM base url, usually ends in /v2.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -92,10 +92,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
<input <input
type="text" type="text"
value="${first(this.instance?.token, "")}" value="${first(this.instance?.token, "")}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Token to authenticate with. Currently only bearer authentication is supported.", "Token to authenticate with. Currently only bearer authentication is supported.",
)} )}
@ -105,20 +105,20 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
</ak-form-group> </ak-form-group>
<ak-form-group ?expanded=${true}> <ak-form-group ?expanded=${true}>
<span slot="header">${msg("User filtering")}</span> <span slot="header">${msg("User filtering")}</span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal name="excludeUsersServiceAccount"> <ak-form-element-horizontal name="excludeUsersServiceAccount">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.excludeUsersServiceAccount, true)} ?checked=${first(this.instance?.excludeUsersServiceAccount, true)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label" <span class="pf-v5-c-switch__label"
>${msg("Exclude service accounts")}</span >${msg("Exclude service accounts")}</span
> >
</label> </label>
@ -149,7 +149,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
?blankable=${true} ?blankable=${true}
> >
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Only sync users within the selected group.")} ${msg("Only sync users within the selected group.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -157,13 +157,13 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
</ak-form-group> </ak-form-group>
<ak-form-group ?expanded=${true}> <ak-form-group ?expanded=${true}>
<span slot="header"> ${msg("Attribute mapping")} </span> <span slot="header"> ${msg("Attribute mapping")} </span>
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-v5-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${msg("User Property Mappings")} label=${msg("User Property Mappings")}
?required=${true} ?required=${true}
name="propertyMappings" name="propertyMappings"
> >
<select class="pf-c-form-control" multiple> <select class="pf-v5-c-form-control" multiple>
${this.propertyMappings?.results.map((mapping) => { ${this.propertyMappings?.results.map((mapping) => {
let selected = false; let selected = false;
if (!this.instance?.propertyMappings) { if (!this.instance?.propertyMappings) {
@ -185,10 +185,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
</option>`; </option>`;
})} })}
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Property mappings used to user mapping.")} ${msg("Property mappings used to user mapping.")}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Hold control/command to select multiple items.")} ${msg("Hold control/command to select multiple items.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -197,7 +197,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
?required=${true} ?required=${true}
name="propertyMappingsGroup" name="propertyMappingsGroup"
> >
<select class="pf-c-form-control" multiple> <select class="pf-v5-c-form-control" multiple>
${this.propertyMappings?.results.map((mapping) => { ${this.propertyMappings?.results.map((mapping) => {
let selected = false; let selected = false;
if (!this.instance?.propertyMappingsGroup) { if (!this.instance?.propertyMappingsGroup) {
@ -218,10 +218,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
</option>`; </option>`;
})} })}
</select> </select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Property mappings used to group creation.")} ${msg("Property mappings used to group creation.")}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Hold control/command to select multiple items.")} ${msg("Hold control/command to select multiple items.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

58
web/src/admin/providers/scim/SCIMProviderViewPage.ts
View file

@ -101,10 +101,10 @@ export class SCIMProviderViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-c-card"> <div class="pf-v5-c-card">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.provider?.pk || ""} targetModelPk=${this.provider?.pk || ""}
targetModelName=${this.provider?.metaModelName || ""} targetModelName=${this.provider?.metaModelName || ""}
@ -120,66 +120,66 @@ export class SCIMProviderViewPage extends AKElement {
if (!this.provider) { if (!this.provider) {
return html``; return html``;
} }
return html`<div slot="header" class="pf-c-banner pf-m-info"> return html`<div slot="header" class="pf-v5-c-banner pf-m-info">
${msg("SCIM provider is in preview.")} ${msg("SCIM provider is in preview.")}
</div> </div>
${!this.provider?.assignedBackchannelApplicationName ${!this.provider?.assignedBackchannelApplicationName
? html`<div slot="header" class="pf-c-banner pf-m-warning"> ? html`<div slot="header" class="pf-v5-c-banner pf-m-warning">
${msg( ${msg(
"Warning: Provider is not assigned to an application as backchannel provider.", "Warning: Provider is not assigned to an application as backchannel provider.",
)} )}
</div>` </div>`
: html``} : html``}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"> <div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
<div class="pf-l-grid__item pf-m-7-col pf-l-stack pf-m-gutter"> <div class="pf-v5-l-grid__item pf-m-7-col pf-v5-l-stack pf-m-gutter">
<div class="pf-c-card pf-m-12-col pf-l-stack__item"> <div class="pf-v5-c-card pf-m-12-col pf-v5-l-stack__item">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.name} ${this.provider.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("URL")}</span >${msg("URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.provider.url} ${this.provider.url}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update SCIM Provider")} </span> <span slot="header"> ${msg("Update SCIM Provider")} </span>
<ak-provider-scim-form slot="form" .instancePk=${this.provider.pk}> <ak-provider-scim-form slot="form" .instancePk=${this.provider.pk}>
</ak-provider-scim-form> </ak-provider-scim-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-l-stack__item"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-v5-l-stack__item">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
<p>${msg("Sync status")}</p> <p>${msg("Sync status")}</p>
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${this.syncState ${this.syncState
? html` <ul class="pf-c-list"> ? html` <ul class="pf-v5-c-list">
${this.syncState.messages.map((m) => { ${this.syncState.messages.map((m) => {
return html`<li>${m}</li>`; return html`<li>${m}</li>`;
})} })}
@ -187,7 +187,7 @@ export class SCIMProviderViewPage extends AKElement {
: html` ${msg("Sync not run yet.")} `} : html` ${msg("Sync not run yet.")} `}
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-action-button <ak-action-button
class="pf-m-secondary" class="pf-m-secondary"
.apiRequest=${() => { .apiRequest=${() => {
@ -211,8 +211,8 @@ export class SCIMProviderViewPage extends AKElement {
</div> </div>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-5-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-5-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-markdown .md=${MDSCIMProvider}></ak-markdown> <ak-markdown .md=${MDSCIMProvider}></ak-markdown>
</div> </div>
</div> </div>

12
web/src/admin/sources/SourceWizard.ts
View file

@ -43,11 +43,11 @@ export class InitialSourceWizardPage extends WizardPage {
}; };
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.sourceTypes.map((type) => { ${this.sourceTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${`${type.component}-${type.modelName}`} id=${`${type.component}-${type.modelName}`}
@ -59,10 +59,10 @@ export class InitialSourceWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`} <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
>${type.name}</label >${type.name}</label
> >
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -108,7 +108,7 @@ export class SourceWizard extends AKElement {
</ak-wizard-page-form> </ak-wizard-page-form>
`; `;
})} })}
<button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${msg("Create")}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

64
web/src/admin/sources/ldap/LDAPSourceViewPage.ts
View file

@ -63,7 +63,7 @@ export class LDAPSourceViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
@activate=${() => { @activate=${() => {
new SourcesApi(DEFAULT_CONFIG) new SourcesApi(DEFAULT_CONFIG)
.sourcesLdapSyncStatusList({ .sourcesLdapSyncStatusList({
@ -74,42 +74,42 @@ export class LDAPSourceViewPage extends AKElement {
}); });
}} }}
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.name} ${this.source.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Server URI")}</span >${msg("Server URI")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.serverUri} ${this.source.serverUri}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Base DN")}</span >${msg("Base DN")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<ul> <ul>
<li>${this.source.baseDn}</li> <li>${this.source.baseDn}</li>
</ul> </ul>
@ -118,27 +118,27 @@ export class LDAPSourceViewPage extends AKElement {
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update LDAP Source")} </span> <span slot="header"> ${msg("Update LDAP Source")} </span>
<ak-source-ldap-form slot="form" .instancePk=${this.source.slug}> <ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
</ak-source-ldap-form> </ak-source-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
<p>${msg("Sync status")}</p> <p>${msg("Sync status")}</p>
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${this.syncState.length < 1 ${this.syncState.length < 1
? html`<p>${msg("Not synced yet.")}</p>` ? html`<p>${msg("Not synced yet.")}</p>`
: html` : html`
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
${this.syncState.map((task) => { ${this.syncState.map((task) => {
let header = ""; let header = "";
if (task.status === TaskStatusEnum.Warning) { if (task.status === TaskStatusEnum.Warning) {
@ -152,7 +152,7 @@ export class LDAPSourceViewPage extends AKElement {
} }
return html`<li> return html`<li>
<p>${task.taskName}</p> <p>${task.taskName}</p>
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
<li>${header}</li> <li>${header}</li>
${task.messages.map((m) => { ${task.messages.map((m) => {
return html`<li>${m}</li>`; return html`<li>${m}</li>`;
@ -163,7 +163,7 @@ export class LDAPSourceViewPage extends AKElement {
</ul> </ul>
`} `}
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-action-button <ak-action-button
class="pf-m-secondary" class="pf-m-secondary"
.apiRequest=${() => { .apiRequest=${() => {
@ -191,11 +191,11 @@ export class LDAPSourceViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.source.pk || ""} targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_ldap" targetModelApp="authentik_sources_ldap"

100
web/src/admin/sources/oauth/OAuthSourceViewPage.ts
View file

@ -95,82 +95,82 @@ export class OAuthSourceViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Details")}</div> <div class="pf-v5-c-card__title">${msg("Details")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.name} ${this.source.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Provider Type")}</span >${msg("Provider Type")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${ProviderToLabel(this.source.providerType)} ${ProviderToLabel(this.source.providerType)}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Callback URL")}</span >${msg("Callback URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<code class="pf-c-description-list__text" <code class="pf-v5-c-description-list__text"
>${this.source.callbackUrl}</code >${this.source.callbackUrl}</code
> >
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Access Key")}</span >${msg("Access Key")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.consumerKey} ${this.source.consumerKey}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Authorization URL")}</span >${msg("Authorization URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.type?.authorizationUrl || ${this.source.type?.authorizationUrl ||
this.source.authorizationUrl} this.source.authorizationUrl}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Token URL")}</span >${msg("Token URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.type?.accessTokenUrl || ${this.source.type?.accessTokenUrl ||
this.source.accessTokenUrl} this.source.accessTokenUrl}
</div> </div>
@ -178,21 +178,21 @@ export class OAuthSourceViewPage extends AKElement {
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update OAuth Source")} </span> <span slot="header"> ${msg("Update OAuth Source")} </span>
<ak-source-oauth-form slot="form" .instancePk=${this.source.slug}> <ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
</ak-source-oauth-form> </ak-source-oauth-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
</div> </div>
</div> </div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${msg("Diagram")}</div> <div class="pf-v5-c-card__title">${msg("Diagram")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-source-oauth-diagram <ak-source-oauth-diagram
.source=${this.source} .source=${this.source}
></ak-source-oauth-diagram> ></ak-source-oauth-diagram>
@ -203,11 +203,11 @@ export class OAuthSourceViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.source.pk || ""} targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_oauth" targetModelApp="authentik_sources_oauth"
@ -221,17 +221,17 @@ export class OAuthSourceViewPage extends AKElement {
<div <div
slot="page-policy-binding" slot="page-policy-binding"
data-tab-title="${msg("Policy Bindings")}" data-tab-title="${msg("Policy Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg( ${msg(
`These bindings control which users can access this source. `These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`, You can only use policies here as access is checked before the user is authenticated.`,
)} )}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>

42
web/src/admin/sources/plex/PlexSourceViewPage.ts
View file

@ -59,33 +59,33 @@ export class PlexSourceViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.name} ${this.source.name}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Plex Source")} </span> <span slot="header"> ${msg("Update Plex Source")} </span>
<ak-source-plex-form slot="form" .instancePk=${this.source.slug}> <ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
</ak-source-plex-form> </ak-source-plex-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -96,11 +96,11 @@ export class PlexSourceViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.source.pk || ""} targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_plex" targetModelApp="authentik_sources_plex"
@ -114,17 +114,17 @@ export class PlexSourceViewPage extends AKElement {
<div <div
slot="page-policy-binding" slot="page-policy-binding"
data-tab-title="${msg("Policy Bindings")}" data-tab-title="${msg("Policy Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg( ${msg(
`These bindings control which users can access this source. `These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`, You can only use policies here as access is checked before the user is authenticated.`,
)} )}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>

84
web/src/admin/sources/saml/SAMLSourceViewPage.ts
View file

@ -63,69 +63,69 @@ export class SAMLSourceViewPage extends AKElement {
<section <section
slot="page-overview" slot="page-overview"
data-tab-title="${msg("Overview")}" data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg"> <dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Name")}</span >${msg("Name")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.name} ${this.source.name}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("SSO URL")}</span >${msg("SSO URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.ssoUrl} ${this.source.ssoUrl}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("SLO URL")}</span >${msg("SLO URL")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.sloUrl} ${this.source.sloUrl}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Issuer")}</span >${msg("Issuer")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${this.source.issuer} ${this.source.issuer}
</div> </div>
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<ak-forms-modal> <ak-forms-modal>
<span slot="submit"> ${msg("Update")} </span> <span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update SAML Source")} </span> <span slot="header"> ${msg("Update SAML Source")} </span>
<ak-source-saml-form slot="form" .instancePk=${this.source.slug}> <ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
</ak-source-saml-form> </ak-source-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-v5-c-button pf-m-primary">
${msg("Edit")} ${msg("Edit")}
</button> </button>
</ak-forms-modal> </ak-forms-modal>
@ -136,11 +136,11 @@ export class SAMLSourceViewPage extends AKElement {
<section <section
slot="page-changelog" slot="page-changelog"
data-tab-title="${msg("Changelog")}" data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-object-changelog <ak-object-changelog
targetModelPk=${this.source.pk || ""} targetModelPk=${this.source.pk || ""}
targetModelApp="authentik_sources_saml" targetModelApp="authentik_sources_saml"
@ -154,7 +154,7 @@ export class SAMLSourceViewPage extends AKElement {
<section <section
slot="page-metadata" slot="page-metadata"
data-tab-title="${msg("Metadata")}" data-tab-title="${msg("Metadata")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
@activate=${() => { @activate=${() => {
new SourcesApi(DEFAULT_CONFIG) new SourcesApi(DEFAULT_CONFIG)
.sourcesSamlMetadataRetrieve({ .sourcesSamlMetadataRetrieve({
@ -165,18 +165,18 @@ export class SAMLSourceViewPage extends AKElement {
}); });
}} }}
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-codemirror <ak-codemirror
mode="xml" mode="xml"
?readOnly=${true} ?readOnly=${true}
value="${ifDefined(this.metadata?.metadata)}" value="${ifDefined(this.metadata?.metadata)}"
></ak-codemirror> ></ak-codemirror>
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-v5-c-card__footer">
<a <a
class="pf-c-button pf-m-primary" class="pf-v5-c-button pf-m-primary"
target="_blank" target="_blank"
href=${ifDefined(this.metadata?.downloadUrl)} href=${ifDefined(this.metadata?.downloadUrl)}
> >
@ -189,17 +189,17 @@ export class SAMLSourceViewPage extends AKElement {
<div <div
slot="page-policy-bindings" slot="page-policy-bindings"
data-tab-title="${msg("Policy Bindings")}" data-tab-title="${msg("Policy Bindings")}"
class="pf-c-page__main-section pf-m-no-padding-mobile" class="pf-v5-c-page__main-section pf-m-no-padding-mobile"
> >
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
${msg( ${msg(
`These bindings control which users can access this source. `These bindings control which users can access this source.
You can only use policies here as access is checked before the user is authenticated.`, You can only use policies here as access is checked before the user is authenticated.`,
)} )}
</div> </div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}> <ak-bound-policies-list .target=${this.source.pk} ?policyOnly=${true}>
</ak-bound-policies-list> </ak-bound-policies-list>
</div> </div>

12
web/src/admin/stages/StageWizard.ts
View file

@ -60,11 +60,11 @@ export class InitialStageWizardPage extends WizardPage {
}; };
render(): TemplateResult { render(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
${this.stageTypes.map((type) => { ${this.stageTypes.map((type) => {
return html`<div class="pf-c-radio"> return html`<div class="pf-v5-c-radio">
<input <input
class="pf-c-radio__input" class="pf-v5-c-radio__input"
type="radio" type="radio"
name="type" name="type"
id=${`${type.component}-${type.modelName}`} id=${`${type.component}-${type.modelName}`}
@ -83,10 +83,10 @@ export class InitialStageWizardPage extends WizardPage {
this.host.isValid = true; this.host.isValid = true;
}} }}
/> />
<label class="pf-c-radio__label" for=${`${type.component}-${type.modelName}`} <label class="pf-v5-c-radio__label" for=${`${type.component}-${type.modelName}`}
>${type.name}</label >${type.name}</label
> >
<span class="pf-c-radio__description">${type.description}</span> <span class="pf-v5-c-radio__description">${type.description}</span>
</div>`; </div>`;
})} })}
</form>`; </form>`;
@ -155,7 +155,7 @@ export class StageWizard extends AKElement {
></ak-stage-binding-form> ></ak-stage-binding-form>
</ak-wizard-page-form>` </ak-wizard-page-form>`
: html``} : html``}
<button slot="trigger" class="pf-c-button pf-m-primary">${this.createText}</button> <button slot="trigger" class="pf-v5-c-button pf-m-primary">${this.createText}</button>
</ak-wizard> </ak-wizard>
`; `;
} }

8
web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
View file

@ -42,7 +42,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html` <form class="pf-c-form pf-m-horizontal"> return html` <form class="pf-v5-c-form pf-m-horizontal">
${this.instance?.adminIntegrationKey !== "" ? this.renderFormAutomatic() : html``} ${this.instance?.adminIntegrationKey !== "" ? this.renderFormAutomatic() : html``}
${this.renderFormManual()} ${this.renderFormManual()}
</form>`; </form>`;
@ -77,7 +77,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
> >
</ak-search-select> </ak-search-select>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("The user in authentik this device will be assigned to.")} ${msg("The user in authentik this device will be assigned to.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -86,8 +86,8 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
?required=${true} ?required=${true}
name="duoUserId" name="duoUserId"
> >
<input type="text" class="pf-c-form-control" required /> <input type="text" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("The user ID in Duo, can be found in the URL after clicking on a user.")} ${msg("The user ID in Duo, can be found in the URL after clicking on a user.")}
</p> </p>
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;

26
web/src/admin/stages/invitation/InvitationListLink.ts
View file

@ -34,14 +34,14 @@ export class InvitationListLink extends AKElement {
} }
renderFlowSelector(): TemplateResult { renderFlowSelector(): TemplateResult {
return html`<div class="pf-c-description-list__group"> return html`<div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Select an enrollment flow")}</span> <span class="pf-v5-c-description-list__text">${msg("Select an enrollment flow")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<select <select
class="pf-c-form-control" class="pf-v5-c-form-control"
@change=${(ev: Event) => { @change=${(ev: Event) => {
const current = (ev.target as HTMLInputElement).value; const current = (ev.target as HTMLInputElement).value;
this.selectedFlow = current; this.selectedFlow = current;
@ -86,18 +86,18 @@ export class InvitationListLink extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<dl class="pf-c-description-list pf-m-horizontal"> return html`<dl class="pf-v5-c-description-list pf-m-horizontal">
${this.invitation?.flow === undefined ? this.renderFlowSelector() : html``} ${this.invitation?.flow === undefined ? this.renderFlowSelector() : html``}
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text" <span class="pf-v5-c-description-list__text"
>${msg("Link to use the invitation.")}</span >${msg("Link to use the invitation.")}</span
> >
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
<input <input
class="pf-c-form-control" class="pf-v5-c-form-control"
readonly readonly
type="text" type="text"
value=${this.renderLink()} value=${this.renderLink()}

86
web/src/admin/stages/prompt/PromptForm.ts
View file

@ -239,18 +239,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<div class="pf-l-grid pf-m-gutter"> return html`<div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-l-grid__item pf-m-6-col">${this.renderEditForm()}</div> <div class="pf-v5-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
<div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div> <div class="pf-v5-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
</div> `; </div> `;
} }
renderPreview(): TemplateResult { renderPreview(): TemplateResult {
return html` return html`
<h3 class="pf-c-title pf-m-lg">${msg("Preview")}</h3> <h3 class="pf-v5-c-title pf-m-lg">${msg("Preview")}</h3>
<div class="pf-l-grid pf-m-gutter"> <div class="pf-v5-l-grid pf-m-gutter">
<div class="pf-c-card pf-m-selectable pf-m-selected pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-m-selectable pf-m-selected pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<ak-stage-prompt <ak-stage-prompt
.host=${new PreviewStageHost(this)} .host=${new PreviewStageHost(this)}
.challenge=${this.preview} .challenge=${this.preview}
@ -260,9 +260,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
</div> </div>
${this.previewError ${this.previewError
? html` ? html`
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">${msg("Preview errors")}</div> <div class="pf-v5-c-card__body">${msg("Preview errors")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
${this.previewError.map((err) => html`<pre>${err}</pre>`)} ${this.previewError.map((err) => html`<pre>${err}</pre>`)}
</div> </div>
</div> </div>
@ -270,9 +270,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
: html``} : html``}
${this.previewResult ${this.previewResult
? html` ? html`
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
<div class="pf-c-card__body">${msg("Data preview")}</div> <div class="pf-v5-c-card__body">${msg("Data preview")}</div>
<div class="pf-c-card__body"> <div class="pf-v5-c-card__body">
<pre>${JSON.stringify(this.previewResult, undefined, 4)}</pre> <pre>${JSON.stringify(this.previewResult, undefined, 4)}</pre>
</div> </div>
</div> </div>
@ -283,18 +283,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
} }
renderEditForm(): TemplateResult { renderEditForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<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"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
@input=${() => { @input=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Unique name of this field, used for selecting fields in prompt stages.")} ${msg("Unique name of this field, used for selecting fields in prompt stages.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -302,16 +302,16 @@ export class PromptForm extends ModelForm<Prompt, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.fieldKey)}" value="${ifDefined(this.instance?.fieldKey)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
@input=${() => { @input=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Name of the form field, also used to store the value.")} ${msg("Name of the form field, also used to store the value.")}
</p> </p>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"When used in conjunction with a User Write stage, use attributes.foo to write attributes.", "When used in conjunction with a User Write stage, use attributes.foo to write attributes.",
)} )}
@ -321,19 +321,19 @@ export class PromptForm extends ModelForm<Prompt, string> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.label)}" value="${ifDefined(this.instance?.label)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
@input=${() => { @input=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Label shown next to/above the prompt.")} ${msg("Label shown next to/above the prompt.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type"> <ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
<select <select
class="pf-c-form-control" class="pf-v5-c-form-control"
@change=${() => { @change=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
@ -342,43 +342,43 @@ export class PromptForm extends ModelForm<Prompt, string> {
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="required"> <ak-form-element-horizontal name="required">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.required, false)} ?checked=${first(this.instance?.required, false)}
@change=${() => { @change=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Required")}</span> <span class="pf-v5-c-switch__label">${msg("Required")}</span>
</label> </label>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="placeholderExpression"> <ak-form-element-horizontal name="placeholderExpression">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.placeholderExpression, false)} ?checked=${first(this.instance?.placeholderExpression, false)}
@change=${() => { @change=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
}} }}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label" <span class="pf-v5-c-switch__label"
>${msg("Interpret placeholder as expression")}</span >${msg("Interpret placeholder as expression")}</span
> >
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
`When checked, the placeholder will be evaluated in the same way a property mapping is. `When checked, the placeholder will be evaluated in the same way a property mapping is.
If the evaluation fails, the placeholder itself is returned.`, If the evaluation fails, the placeholder itself is returned.`,
@ -394,7 +394,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
}} }}
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
`Optionally provide a short hint that describes the expected input value. `Optionally provide a short hint that describes the expected input value.
When creating a fixed choice field, enable interpreting as expression and return a When creating a fixed choice field, enable interpreting as expression and return a
@ -403,22 +403,22 @@ export class PromptForm extends ModelForm<Prompt, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="initialValueExpression"> <ak-form-element-horizontal name="initialValueExpression">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.initialValueExpression, false)} ?checked=${first(this.instance?.initialValueExpression, false)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label" <span class="pf-v5-c-switch__label"
>${msg("Interpret initial value as expression")}</span >${msg("Interpret initial value as expression")}</span
> >
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
`When checked, the initial value will be evaluated in the same way a property mapping is. `When checked, the initial value will be evaluated in the same way a property mapping is.
If the evaluation fails, the initial value itself is returned.`, If the evaluation fails, the initial value itself is returned.`,
@ -428,7 +428,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
<ak-form-element-horizontal label=${msg("Initial value")} name="initialValue"> <ak-form-element-horizontal label=${msg("Initial value")} name="initialValue">
<ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}"> <ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}">
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
`Optionally pre-fill the input with an initial value. `Optionally pre-fill the input with an initial value.
When creating a fixed choice field, enable interpreting as expression and When creating a fixed choice field, enable interpreting as expression and
@ -445,13 +445,13 @@ export class PromptForm extends ModelForm<Prompt, string> {
}} }}
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text">${msg("Any HTML can be used.")}</p> <p class="pf-v5-c-form__helper-text">${msg("Any HTML can be used.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order"> <ak-form-element-horizontal label=${msg("Order")} ?required=${true} name="order">
<input <input
type="number" type="number"
value="${first(this.instance?.order, 0)}" value="${first(this.instance?.order, 0)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>

24
web/src/admin/system-tasks/SystemTaskListPage.ts
View file

@ -82,24 +82,24 @@ export class SystemTaskListPage extends TablePage<Task> {
renderExpanded(item: Task): TemplateResult { renderExpanded(item: Task): TemplateResult {
return html` <td role="cell" colspan="3"> return html` <td role="cell" colspan="3">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
<dl class="pf-c-description-list pf-m-horizontal"> <dl class="pf-v5-c-description-list pf-m-horizontal">
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Duration")}</span> <span class="pf-v5-c-description-list__text">${msg("Duration")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${msg(str`${item.taskDuration.toFixed(2)} seconds`)} ${msg(str`${item.taskDuration.toFixed(2)} seconds`)}
</div> </div>
</dd> </dd>
</div> </div>
<div class="pf-c-description-list__group"> <div class="pf-v5-c-description-list__group">
<dt class="pf-c-description-list__term"> <dt class="pf-v5-c-description-list__term">
<span class="pf-c-description-list__text">${msg("Messages")}</span> <span class="pf-v5-c-description-list__text">${msg("Messages")}</span>
</dt> </dt>
<dd class="pf-c-description-list__description"> <dd class="pf-v5-c-description-list__description">
<div class="pf-c-description-list__text"> <div class="pf-v5-c-description-list__text">
${item.messages.map((m) => { ${item.messages.map((m) => {
return html`<li>${m}</li>`; return html`<li>${m}</li>`;
})} })}

12
web/src/admin/users/GroupSelectModal.ts
View file

@ -67,22 +67,22 @@ export class GroupSelectModal extends TableModal<Group> {
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
const willSuperuser = this.selectedElements.filter((g) => g.isSuperuser).length > 0; const willSuperuser = this.selectedElements.filter((g) => g.isSuperuser).length > 0;
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1> <h1 class="pf-v5-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1>
</div> </div>
</section> </section>
${willSuperuser ${willSuperuser
? html` ? html`
<div class="pf-c-banner pf-m-warning"> <div class="pf-v5-c-banner pf-m-warning">
${msg( ${msg(
"Warning: Adding the user to the selected group(s) will give them superuser permissions.", "Warning: Adding the user to the selected group(s) will give them superuser permissions.",
)} )}
</div> </div>
` `
: html``} : html``}
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section> <section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(this.selectedElements).then(() => { return this.confirm(this.selectedElements).then(() => {

38
web/src/admin/users/ServiceAccountForm.ts
View file

@ -40,38 +40,38 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
?required=${true} ?required=${true}
name="name" name="name"
> >
<input type="text" value="" class="pf-c-form-control" required /> <input type="text" value="" class="pf-v5-c-form-control" required />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("User's primary identifier. 150 characters or fewer.")} ${msg("User's primary identifier. 150 characters or fewer.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="createGroup"> <ak-form-element-horizontal name="createGroup">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} /> <input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Create group")}</span> <span class="pf-v5-c-switch__label">${msg("Create group")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Enabling this toggle will create a group named after the user, with the user as member.", "Enabling this toggle will create a group named after the user, with the user as member.",
)} )}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="expiring"> <ak-form-element-horizontal name="expiring">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} /> <input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Expiring")}</span> <span class="pf-v5-c-switch__label">${msg("Expiring")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"If this is selected, the token will expire. Upon expiration, the token will be rotated.", "If this is selected, the token will expire. Upon expiration, the token will be rotated.",
)} )}
@ -82,7 +82,7 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
type="datetime-local" type="datetime-local"
data-type="datetime-local" data-type="datetime-local"
value="${dateTimeLocal(new Date(Date.now() + 1000 * 60 ** 2 * 24 * 360))}" value="${dateTimeLocal(new Date(Date.now() + 1000 * 60 ** 2 * 24 * 360))}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;
} }
@ -93,13 +93,13 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
"Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.", "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.",
)} )}
</p> </p>
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Username")}> <ak-form-element-horizontal label=${msg("Username")}>
<input <input
type="text" type="text"
readonly readonly
value=${ifDefined(this.result?.username)} value=${ifDefined(this.result?.username)}
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Password")}> <ak-form-element-horizontal label=${msg("Password")}>
@ -107,9 +107,9 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
type="text" type="text"
readonly readonly
value=${ifDefined(this.result?.token)} value=${ifDefined(this.result?.token)}
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.", "Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
)} )}

12
web/src/admin/users/UserActiveForm.ts
View file

@ -24,13 +24,13 @@ export class UserActiveForm extends DeleteForm {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1> <h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<p> <p>
${msg( ${msg(
str`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`, str`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`,
@ -38,7 +38,7 @@ export class UserActiveForm extends DeleteForm {
</p> </p>
</form> </form>
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(); return this.confirm();

32
web/src/admin/users/UserForm.ts
View file

@ -23,10 +23,10 @@ export class UserForm extends ModelForm<User, number> {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return super.styles.concat(css` return super.styles.concat(css`
.pf-c-button.pf-m-control { .pf-v5-c-button.pf-m-control {
height: 100%; height: 100%;
} }
.pf-c-form-control { .pf-v5-c-form-control {
height: auto !important; height: auto !important;
} }
`); `);
@ -64,15 +64,15 @@ export class UserForm extends ModelForm<User, number> {
} }
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-v5-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Username")} ?required=${true} name="username"> <ak-form-element-horizontal label=${msg("Username")} ?required=${true} name="username">
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.username)}" value="${ifDefined(this.instance?.username)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("User's primary identifier. 150 characters or fewer.")} ${msg("User's primary identifier. 150 characters or fewer.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -80,9 +80,9 @@ export class UserForm extends ModelForm<User, number> {
<input <input
type="text" type="text"
value="${ifDefined(this.instance?.name)}" value="${ifDefined(this.instance?.name)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
<p class="pf-c-form__helper-text">${msg("User's display name.")}</p> <p class="pf-v5-c-form__helper-text">${msg("User's display name.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("User type")} ?required=${true} name="type"> <ak-form-element-horizontal label=${msg("User type")} ?required=${true} name="type">
<ak-radio <ak-radio
@ -119,24 +119,24 @@ export class UserForm extends ModelForm<User, number> {
type="email" type="email"
autocomplete="off" autocomplete="off"
value="${ifDefined(this.instance?.email)}" value="${ifDefined(this.instance?.email)}"
class="pf-c-form-control" class="pf-v5-c-form-control"
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="isActive"> <ak-form-element-horizontal name="isActive">
<label class="pf-c-switch"> <label class="pf-v5-c-switch">
<input <input
class="pf-c-switch__input" class="pf-v5-c-switch__input"
type="checkbox" type="checkbox"
?checked=${first(this.instance?.isActive, true)} ?checked=${first(this.instance?.isActive, true)}
/> />
<span class="pf-c-switch__toggle"> <span class="pf-v5-c-switch__toggle">
<span class="pf-c-switch__toggle-icon"> <span class="pf-v5-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i> <i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</span> </span>
<span class="pf-c-switch__label">${msg("Is active")}</span> <span class="pf-v5-c-switch__label">${msg("Is active")}</span>
</label> </label>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg( ${msg(
"Designates whether this user should be treated as active. Unselect this instead of deleting accounts.", "Designates whether this user should be treated as active. Unselect this instead of deleting accounts.",
)} )}
@ -146,7 +146,7 @@ export class UserForm extends ModelForm<User, number> {
<input <input
type="text" type="text"
value="${first(this.instance?.path, "users")}" value="${first(this.instance?.path, "users")}"
class="pf-c-form-control" class="pf-v5-c-form-control"
required required
/> />
</ak-form-element-horizontal> </ak-form-element-horizontal>
@ -162,7 +162,7 @@ export class UserForm extends ModelForm<User, number> {
)}" )}"
> >
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-v5-c-form__helper-text">
${msg("Set custom attributes using YAML or JSON.")} ${msg("Set custom attributes using YAML or JSON.")}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

2
web/src/admin/users/UserPasswordForm.ts
View file

@ -31,7 +31,7 @@ export class UserPasswordForm extends Form<UserPasswordSetRequest> {
?required=${true} ?required=${true}
name="password" name="password"
> >
<input type="password" value="" class="pf-c-form-control" required /> <input type="password" value="" class="pf-v5-c-form-control" required />
</ak-form-element-horizontal>`; </ak-form-element-horizontal>`;
} }
} }

2
web/src/components/events/ObjectChangelog.ts
View file

@ -87,7 +87,7 @@ export class ObjectChangelog extends Table<Event> {
renderExpanded(item: Event): TemplateResult { renderExpanded(item: Event): TemplateResult {
return html` <td role="cell" colspan="4"> return html` <td role="cell" colspan="4">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
<ak-event-info .event=${item as EventWithContext}></ak-event-info> <ak-event-info .event=${item as EventWithContext}></ak-event-info>
</div> </div>
</td> </td>

2
web/src/components/events/UserEvents.ts
View file

@ -59,7 +59,7 @@ export class UserEvents extends Table<Event> {
renderExpanded(item: Event): TemplateResult { renderExpanded(item: Event): TemplateResult {
return html` <td role="cell" colspan="4"> return html` <td role="cell" colspan="4">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
<ak-event-info .event=${item as EventWithContext}></ak-event-info> <ak-event-info .event=${item as EventWithContext}></ak-event-info>
</div> </div>
</td> </td>

6
web/src/elements/Alert.ts
View file

@ -26,11 +26,11 @@ export class Alert extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}"> return html`<div class="pf-v5-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}">
<div class="pf-c-alert__icon"> <div class="pf-v5-c-alert__icon">
<i class="fas fa-exclamation-circle"></i> <i class="fas fa-exclamation-circle"></i>
</div> </div>
<h4 class="pf-c-alert__title"> <h4 class="pf-v5-c-alert__title">
<slot></slot> <slot></slot>
</h4> </h4>
</div>`; </div>`;

2
web/src/elements/CodeMirror.ts
View file

@ -98,7 +98,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
this.themeLight = EditorView.theme( this.themeLight = EditorView.theme(
{ {
"&": { "&": {
backgroundColor: "var(--pf-global--BackgroundColor--light-300)", backgroundColor: "var(--pf-v5-global--BackgroundColor--light-300)",
}, },
}, },
{ dark: false }, { dark: false },

2
web/src/elements/Divider.ts
View file

@ -21,7 +21,7 @@ export class Divider extends AKElement {
.separator::after { .separator::after {
content: ""; content: "";
flex: 1; flex: 1;
border-bottom: 1px solid var(--pf-global--Color--100); border-bottom: 1px solid var(--pf-v5-global--Color--100);
} }
.separator:not(:empty)::before { .separator:not(:empty)::before {

14
web/src/elements/EmptyState.ts
View file

@ -27,22 +27,22 @@ export class EmptyState extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}"> return html`<div class="pf-v5-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
<div class="pf-c-empty-state__content"> <div class="pf-v5-c-empty-state__content">
${this.loading ${this.loading
? html`<div class="pf-c-empty-state__icon"> ? html`<div class="pf-v5-c-empty-state__icon">
<ak-spinner size=${PFSize.XLarge}></ak-spinner> <ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>` </div>`
: html`<i : html`<i
class="pf-icon fa ${this.icon || class="pf-icon fa ${this.icon ||
"fa-question-circle"} pf-c-empty-state__icon" "fa-question-circle"} pf-v5-c-empty-state__icon"
aria-hidden="true" aria-hidden="true"
></i>`} ></i>`}
<h1 class="pf-c-title pf-m-lg">${this.header}</h1> <h1 class="pf-v5-c-title pf-m-lg">${this.header}</h1>
<div class="pf-c-empty-state__body"> <div class="pf-v5-c-empty-state__body">
<slot name="body"></slot> <slot name="body"></slot>
</div> </div>
<div class="pf-c-empty-state__primary"> <div class="pf-v5-c-empty-state__primary">
<slot name="primary"></slot> <slot name="primary"></slot>
</div> </div>
</div> </div>

10
web/src/elements/Expand.ts
View file

@ -32,26 +32,26 @@ export class Expand extends AKElement {
render(): TemplateResult { render(): TemplateResult {
return html`<div return html`<div
class="pf-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded class="pf-v5-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
? "pf-m-expanded" ? "pf-m-expanded"
: ""}" : ""}"
> >
<button <button
type="button" type="button"
class="pf-c-expandable-section__toggle" class="pf-v5-c-expandable-section__toggle"
aria-expanded="${this.expanded}" aria-expanded="${this.expanded}"
@click=${() => { @click=${() => {
this.expanded = !this.expanded; this.expanded = !this.expanded;
}} }}
> >
<span class="pf-c-expandable-section__toggle-icon"> <span class="pf-v5-c-expandable-section__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i> <i class="fas fa-angle-right" aria-hidden="true"></i>
</span> </span>
<span class="pf-c-expandable-section__toggle-text" <span class="pf-v5-c-expandable-section__toggle-text"
>${this.expanded ? this.textOpen : this.textClosed}</span >${this.expanded ? this.textOpen : this.textClosed}</span
> >
</button> </button>
<div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}> <div class="pf-v5-c-expandable-section__content" ?hidden=${!this.expanded}>
<slot></slot> <slot></slot>
</div> </div>
</div>`; </div>`;

6
web/src/elements/Label.ts
View file

@ -44,9 +44,9 @@ export class Label extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}"> return html`<span class="pf-v5-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
<span class="pf-c-label__content"> <span class="pf-v5-c-label__content">
<span class="pf-c-label__icon"> <span class="pf-v5-c-label__icon">
<i <i
class="fas fa-fw ${this.icon || this.getDefaultIcon()}" class="fas fa-fw ${this.icon || this.getDefaultIcon()}"
aria-hidden="true" aria-hidden="true"

2
web/src/elements/LoadingOverlay.ts
View file

@ -22,7 +22,7 @@ export class LoadingOverlay extends AKElement {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
background-color: var(--pf-global--BackgroundColor--dark-transparent-200); background-color: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
z-index: 1; z-index: 1;
} }
:host([topMost]) { :host([topMost]) {

2
web/src/elements/Markdown.ts
View file

@ -58,7 +58,7 @@ export class Markdown extends AKElement {
} }
replaceList(input: string): string { replaceList(input: string): string {
return input.replace("<ul>", "<ul class='pf-c-list'>"); return input.replace("<ul>", "<ul class='pf-v5-c-list'>");
} }
replaceRelativeLinks(input: string, md: MarkdownDocument): string { replaceRelativeLinks(input: string, md: MarkdownDocument): string {

18
web/src/elements/PageHeader.ts
View file

@ -69,14 +69,14 @@ export class PageHeader extends AKElement {
flex-direction: row; flex-direction: row;
min-height: 114px; min-height: 114px;
} }
.pf-c-button.pf-m-plain { .pf-v5-c-button.pf-m-plain {
background-color: transparent; background-color: transparent;
border-radius: 0px; border-radius: 0px;
} }
.pf-c-page__main-section.pf-m-light { .pf-v5-c-page__main-section.pf-m-light {
background-color: transparent; background-color: transparent;
} }
.pf-c-page__main-section { .pf-v5-c-page__main-section {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -90,7 +90,7 @@ export class PageHeader extends AKElement {
font-size: 24px; font-size: 24px;
} }
.notification-trigger.has-notifications { .notification-trigger.has-notifications {
color: var(--pf-global--active-color--100); color: var(--pf-v5-global--active-color--100);
} }
h1 { h1 {
display: flex; display: flex;
@ -138,7 +138,7 @@ export class PageHeader extends AKElement {
return html` <ak-enterprise-status interface="admin"></ak-enterprise-status> return html` <ak-enterprise-status interface="admin"></ak-enterprise-status>
<div class="bar"> <div class="bar">
<button <button
class="sidebar-trigger pf-c-button pf-m-plain" class="sidebar-trigger pf-v5-c-button pf-m-plain"
@click=${() => { @click=${() => {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent(EVENT_SIDEBAR_TOGGLE, { new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
@ -150,8 +150,8 @@ export class PageHeader extends AKElement {
> >
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
<section class="pf-c-page__main-section pf-m-light"> <section class="pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1> <h1>
<slot name="icon">${this.renderIcon()}</slot>&nbsp; <slot name="icon">${this.renderIcon()}</slot>&nbsp;
<slot name="header">${this.header}</slot> <slot name="header">${this.header}</slot>
@ -160,7 +160,7 @@ export class PageHeader extends AKElement {
</div> </div>
</section> </section>
<button <button
class="notification-trigger pf-c-button pf-m-plain" class="notification-trigger pf-v5-c-button pf-m-plain"
@click=${() => { @click=${() => {
this.dispatchEvent( this.dispatchEvent(
new CustomEvent(EVENT_API_DRAWER_TOGGLE, { new CustomEvent(EVENT_API_DRAWER_TOGGLE, {
@ -175,7 +175,7 @@ export class PageHeader extends AKElement {
</pf-tooltip> </pf-tooltip>
</button> </button>
<button <button
class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications class="notification-trigger pf-v5-c-button pf-m-plain ${this.hasNotifications
? "has-notifications" ? "has-notifications"
: ""}" : ""}"
@click=${() => { @click=${() => {

8
web/src/elements/Spinner.ts
View file

@ -24,13 +24,13 @@ export class Spinner extends AKElement {
render(): TemplateResult { render(): TemplateResult {
return html`<span return html`<span
class="pf-c-spinner ${this.size.toString()}" class="pf-v5-c-spinner ${this.size.toString()}"
role="progressbar" role="progressbar"
aria-valuetext="${msg("Loading...")}" aria-valuetext="${msg("Loading...")}"
> >
<span class="pf-c-spinner__clipper"></span> <span class="pf-v5-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span> <span class="pf-v5-c-spinner__lead-ball"></span>
<span class="pf-c-spinner__tail-ball"></span> <span class="pf-v5-c-spinner__tail-ball"></span>
</span>`; </span>`;
} }
} }

14
web/src/elements/Tabs.ts
View file

@ -32,10 +32,10 @@ export class Tabs extends AKElement {
:host([vertical]) { :host([vertical]) {
display: flex; display: flex;
} }
:host([vertical]) .pf-c-tabs { :host([vertical]) .pf-v5-c-tabs {
width: auto !important; width: auto !important;
} }
:host([vertical]) .pf-c-tabs__list { :host([vertical]) .pf-v5-c-tabs__list {
height: 100%; height: 100%;
} }
:host([vertical]) .pf-c-tabs .pf-c-tabs__list::before { :host([vertical]) .pf-c-tabs .pf-c-tabs__list::before {
@ -81,9 +81,9 @@ export class Tabs extends AKElement {
renderTab(page: Element): TemplateResult { renderTab(page: Element): TemplateResult {
const slot = page.attributes.getNamedItem("slot")?.value; const slot = page.attributes.getNamedItem("slot")?.value;
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}"> return html` <li class="pf-v5-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
<button class="pf-c-tabs__link" @click=${() => this.onClick(slot)}> <button class="pf-v5-c-tabs__link" @click=${() => this.onClick(slot)}>
<span class="pf-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span> <span class="pf-v5-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span>
</button> </button>
</li>`; </li>`;
} }
@ -106,8 +106,8 @@ export class Tabs extends AKElement {
const wantedPage = pages[0].attributes.getNamedItem("slot")?.value; const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
this.onClick(wantedPage); this.onClick(wantedPage);
} }
return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}"> return html`<div class="pf-v5-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
<ul class="pf-c-tabs__list"> <ul class="pf-v5-c-tabs__list">
${pages.map((page) => this.renderTab(page))} ${pages.map((page) => this.renderTab(page))}
</ul> </ul>
</div> </div>

22
web/src/elements/TreeView.ts
View file

@ -71,13 +71,13 @@ export class TreeViewNode extends AKElement {
const shouldRenderChildren = (this.item?.childItems || []).length > 0 && this.open; const shouldRenderChildren = (this.item?.childItems || []).length > 0 && this.open;
return html` return html`
<li <li
class="pf-c-tree-view__list-item ${this.open ? "pf-m-expanded" : ""}" class="pf-v5-c-tree-view__list-item ${this.open ? "pf-m-expanded" : ""}"
role="treeitem" role="treeitem"
tabindex="0" tabindex="0"
> >
<div class="pf-c-tree-view__content"> <div class="pf-v5-c-tree-view__content">
<button <button
class="pf-c-tree-view__node ${this.host?.activeNode === this class="pf-v5-c-tree-view__node ${this.host?.activeNode === this
? "pf-m-current" ? "pf-m-current"
: ""}" : ""}"
@click=${() => { @click=${() => {
@ -93,10 +93,10 @@ export class TreeViewNode extends AKElement {
); );
}} }}
> >
<div class="pf-c-tree-view__node-container"> <div class="pf-v5-c-tree-view__node-container">
${this.openable ${this.openable
? html` <button ? html` <button
class="pf-c-tree-view__node-toggle" class="pf-v5-c-tree-view__node-toggle"
@click=${(e: Event) => { @click=${(e: Event) => {
if (this.openable) { if (this.openable) {
this.open = !this.open; this.open = !this.open;
@ -104,22 +104,22 @@ export class TreeViewNode extends AKElement {
} }
}} }}
> >
<span class="pf-c-tree-view__node-toggle-icon"> <span class="pf-v5-c-tree-view__node-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i> <i class="fas fa-angle-right" aria-hidden="true"></i>
</span> </span>
</button>` </button>`
: html``} : html``}
<span class="pf-c-tree-view__node-icon"> <span class="pf-v5-c-tree-view__node-icon">
<i <i
class="fas ${this.open ? "fa-folder-open" : "fa-folder"}" class="fas ${this.open ? "fa-folder-open" : "fa-folder"}"
aria-hidden="true" aria-hidden="true"
></i> ></i>
</span> </span>
<span class="pf-c-tree-view__node-text">${this.item?.label}</span> <span class="pf-v5-c-tree-view__node-text">${this.item?.label}</span>
</div> </div>
</button> </button>
</div> </div>
<ul class="pf-c-tree-view__list" role="group" ?hidden=${!shouldRenderChildren}> <ul class="pf-v5-c-tree-view__list" role="group" ?hidden=${!shouldRenderChildren}>
${this.item?.childItems.map((item) => { ${this.item?.childItems.map((item) => {
return html`<ak-treeview-node return html`<ak-treeview-node
.item=${item} .item=${item}
@ -193,8 +193,8 @@ export class TreeView extends AKElement {
render(): TemplateResult { render(): TemplateResult {
const rootItem = this.parse(this.items); const rootItem = this.parse(this.items);
return html`<div class="pf-c-tree-view pf-m-guides"> return html`<div class="pf-v5-c-tree-view pf-m-guides">
<ul class="pf-c-tree-view__list" role="tree"> <ul class="pf-v5-c-tree-view__list" role="tree">
<ak-treeview-node <ak-treeview-node
.item=${rootItem} .item=${rootItem}
activePath=${this.activePath} activePath=${this.activePath}

4
web/src/elements/buttons/Dropdown.ts
View file

@ -10,8 +10,8 @@ export class DropdownButton extends AKElement {
constructor() { constructor() {
super(); super();
this.menu = this.querySelector<HTMLElement>(".pf-c-dropdown__menu"); this.menu = this.querySelector<HTMLElement>(".pf-v5-c-dropdown__menu");
this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => { this.querySelectorAll("button.pf-v5-c-dropdown__toggle").forEach((btn) => {
btn.addEventListener("click", () => { btn.addEventListener("click", () => {
if (!this.menu) return; if (!this.menu) return;
this.menu.hidden = !this.menu.hidden; this.menu.hidden = !this.menu.hidden;

12
web/src/elements/buttons/ModalButton.ts
View file

@ -19,9 +19,9 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
export const MODAL_BUTTON_STYLES = css` export const MODAL_BUTTON_STYLES = css`
:host { :host {
text-align: left; text-align: left;
font-size: var(--pf-global--FontSize--md); font-size: var(--pf-v5-global--FontSize--md);
} }
.pf-c-modal-box > .pf-c-button + * { .pf-v5-c-modal-box > .pf-v5-c-button + * {
margin-right: 0; margin-right: 0;
} }
/* fix multiple selects height */ /* fix multiple selects height */
@ -106,14 +106,14 @@ export class ModalButton extends AKElement {
renderModal(): TemplateResult { renderModal(): TemplateResult {
return html`<div return html`<div
class="pf-c-backdrop" class="pf-v5-c-backdrop"
@click=${(e: PointerEvent) => { @click=${(e: PointerEvent) => {
e.stopPropagation(); e.stopPropagation();
}} }}
> >
<div class="pf-l-bullseye"> <div class="pf-v5-l-bullseye">
<div <div
class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}" class="pf-v5-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >
@ -122,7 +122,7 @@ export class ModalButton extends AKElement {
this.resetForms(); this.resetForms();
this.open = false; this.open = false;
}} }}
class="pf-c-button pf-m-plain" class="pf-v5-c-button pf-m-plain"
type="button" type="button"
aria-label="Close dialog" aria-label="Close dialog"
> >

30
web/src/elements/cards/AggregateCard.ts
View file

@ -28,28 +28,28 @@ export class AggregateCard extends AKElement {
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [PFBase, PFCard, PFFlex].concat([ return [PFBase, PFCard, PFFlex].concat([
css` css`
.pf-c-card.pf-c-card-aggregate { .pf-v5-c-card.pf-v5-c-card-aggregate {
height: 100%; height: 100%;
} }
.pf-c-card__header { .pf-v5-c-card__header {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.center-value { .center-value {
font-size: var(--pf-global--icon--FontSize--lg); font-size: var(--pf-v5-global--icon--FontSize--lg);
text-align: center; text-align: center;
} }
.subtext { .subtext {
font-size: var(--pf-global--FontSize--sm); font-size: var(--pf-v5-global--FontSize--sm);
} }
.pf-c-card__body { .pf-v5-c-card__body {
overflow-x: scroll; overflow-x: scroll;
padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2); padding-left: calc(var(--pf-v5-c-card--child--PaddingLeft) / 2);
padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2); padding-right: calc(var(--pf-v5-c-card--child--PaddingRight) / 2);
} }
.pf-c-card__header, .pf-v5-c-card__header,
.pf-c-card__title, .pf-v5-c-card__title,
.pf-c-card__body, .pf-v5-c-card__body,
.pf-c-card__footer { .pf-v5-c-card__footer {
padding-bottom: 0; padding-bottom: 0;
} }
`, `,
@ -73,14 +73,14 @@ export class AggregateCard extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-card pf-c-card-aggregate"> return html`<div class="pf-v5-c-card pf-v5-c-card-aggregate">
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between"> <div class="pf-v5-c-card__header pf-v5-l-flex pf-m-justify-content-space-between">
<div class="pf-c-card__title"> <div class="pf-v5-c-card__title">
<i class="${ifDefined(this.icon)}"></i>&nbsp;${this.renderHeader()} <i class="${ifDefined(this.icon)}"></i>&nbsp;${this.renderHeader()}
</div> </div>
${this.renderHeaderLink()} ${this.renderHeaderLink()}
</div> </div>
<div class="pf-c-card__body ${this.isCenter ? "center-value" : ""}"> <div class="pf-v5-c-card__body ${this.isCenter ? "center-value" : ""}">
${this.renderInner()} ${this.renderInner()}
${this.subtext ? html`<p class="subtext">${this.subtext}</p>` : html``} ${this.subtext ? html`<p class="subtext">${this.subtext}</p>` : html``}
</div> </div>

8
web/src/elements/chips/Chip.ts
View file

@ -22,14 +22,14 @@ export class Chip extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<li class="pf-c-chip-group__list-item"> return html`<li class="pf-v5-c-chip-group__list-item">
<div class="pf-c-chip"> <div class="pf-v5-c-chip">
<span class="pf-c-chip__text"> <span class="pf-v5-c-chip__text">
<slot></slot> <slot></slot>
</span> </span>
${this.removable ${this.removable
? html`<button ? html`<button
class="pf-c-button pf-m-plain" class="pf-v5-c-button pf-m-plain"
type="button" type="button"
@click=${() => { @click=${() => {
this.dispatchEvent( this.dispatchEvent(

8
web/src/elements/chips/ChipGroup.ts
View file

@ -21,7 +21,7 @@ export class ChipGroup extends AKElement {
::slotted(*) { ::slotted(*) {
margin: 0 2px; margin: 0 2px;
} }
.pf-c-chip-group { .pf-v5-c-chip-group {
margin-bottom: 8px; margin-bottom: 8px;
} }
`, `,
@ -44,9 +44,9 @@ export class ChipGroup extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-chip-group"> return html`<div class="pf-v5-c-chip-group">
<div class="pf-c-chip-group__main"> <div class="pf-v5-c-chip-group__main">
<ul class="pf-c-chip-group__list" role="list"> <ul class="pf-v5-c-chip-group__list" role="list">
<slot></slot> <slot></slot>
</ul> </ul>
</div> </div>

2
web/src/elements/enterprise/EnterpriseStatusBanner.ts
View file

@ -28,7 +28,7 @@ export class EnterpriseStatusBanner extends AKElement {
} }
renderBanner(): TemplateResult { renderBanner(): TemplateResult {
return html`<div class="pf-c-banner ${this.summary?.readOnly ? "pf-m-red" : "pf-m-gold"}"> return html`<div class="pf-v5-c-banner ${this.summary?.readOnly ? "pf-m-red" : "pf-m-gold"}">
${msg("Warning: The current user count has exceeded the configured licenses.")} ${msg("Warning: The current user count has exceeded the configured licenses.")}
<a href="/if/admin/#/enterprise/licenses"> ${msg("Click here for more info.")} </a> <a href="/if/admin/#/enterprise/licenses"> ${msg("Click here for more info.")} </a>
</div>`; </div>`;

14
web/src/elements/forms/ConfirmationForm.ts
View file

@ -54,19 +54,19 @@ export class ConfirmationForm extends ModalButton {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-v5-c-title pf-m-2xl">
<slot name="header"></slot> <slot name="header"></slot>
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<slot class="pf-c-content" name="body"></slot> <slot class="pf-v5-c-content" name="body"></slot>
</form> </form>
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(); return this.confirm();

20
web/src/elements/forms/DeleteBulkForm.ts
View file

@ -78,7 +78,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
return this.renderUsedBy(this.usedByData.get(item) || []); return this.renderUsedBy(this.usedByData.get(item) || []);
}; };
return html`<td role="cell" colspan="2"> return html`<td role="cell" colspan="2">
<div class="pf-c-table__expandable-row-content"> <div class="pf-v5-c-table__expandable-row-content">
${this.usedBy ${this.usedBy
? until(handler(), html`<ak-spinner size=${PFSize.Large}></ak-spinner>`) ? until(handler(), html`<ak-spinner size=${PFSize.Large}></ak-spinner>`)
: html``} : html``}
@ -90,7 +90,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
if (usedBy.length < 1) { if (usedBy.length < 1) {
return html`<span>${msg("Not used by any other object.")}</span>`; return html`<span>${msg("Not used by any other object.")}</span>`;
} }
return html`<ul class="pf-c-list"> return html`<ul class="pf-v5-c-list">
${usedBy.map((ub) => { ${usedBy.map((ub) => {
let consequence = ""; let consequence = "";
switch (ub.action) { switch (ub.action) {
@ -182,18 +182,18 @@ export class DeleteBulkForm<T> extends ModalButton {
} }
renderModalInner(): TemplateResult { renderModalInner(): TemplateResult {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl"> <h1 class="pf-v5-c-title pf-m-2xl">
${this.actionLabel ${this.actionLabel
? this.actionLabel ? this.actionLabel
: msg(str`Delete ${this.objectLabel}`)} : msg(str`Delete ${this.objectLabel}`)}
</h1> </h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<p class="pf-c-title"> <p class="pf-v5-c-title">
${this.actionSubtext ${this.actionSubtext
? this.actionSubtext ? this.actionSubtext
: msg( : msg(
@ -203,7 +203,7 @@ export class DeleteBulkForm<T> extends ModalButton {
<slot name="notice"></slot> <slot name="notice"></slot>
</form> </form>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<ak-delete-objects-table <ak-delete-objects-table
.objects=${this.objects} .objects=${this.objects}
.usedBy=${this.usedBy} .usedBy=${this.usedBy}
@ -211,7 +211,7 @@ export class DeleteBulkForm<T> extends ModalButton {
> >
</ak-delete-objects-table> </ak-delete-objects-table>
</section> </section>
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(); return this.confirm();

18
web/src/elements/forms/DeleteForm.ts
View file

@ -70,13 +70,13 @@ export class DeleteForm extends ModalButton {
} else { } else {
objName = ""; objName = "";
} }
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light"> return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
<div class="pf-c-content"> <div class="pf-v5-c-content">
<h1 class="pf-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1> <h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
</div> </div>
</section> </section>
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<p> <p>
${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)} ${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)}
</p> </p>
@ -89,10 +89,10 @@ export class DeleteForm extends ModalButton {
return html``; return html``;
} }
return html` return html`
<section class="pf-c-modal-box__body pf-m-light"> <section class="pf-v5-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal"> <form class="pf-v5-c-form pf-m-horizontal">
<p>${msg(str`The following objects use ${objName}`)}</p> <p>${msg(str`The following objects use ${objName}`)}</p>
<ul class="pf-c-list"> <ul class="pf-v5-c-list">
${usedBy.map((ub) => { ${usedBy.map((ub) => {
let consequence = ""; let consequence = "";
switch (ub.action) { switch (ub.action) {
@ -126,7 +126,7 @@ export class DeleteForm extends ModalButton {
}), }),
) )
: html``} : html``}
<footer class="pf-c-modal-box__footer"> <footer class="pf-v5-c-modal-box__footer">
<ak-spinner-button <ak-spinner-button
.callAction=${() => { .callAction=${() => {
return this.confirm(); return this.confirm();

10
web/src/elements/forms/Form.ts
View file

@ -283,7 +283,7 @@ export abstract class Form<T> extends AKElement {
renderForm(): TemplateResult { renderForm(): TemplateResult {
const inline = this.renderInlineForm(); const inline = this.renderInlineForm();
if (inline) { if (inline) {
return html`<form class="pf-c-form pf-m-horizontal" @submit=${this.submit}> return html`<form class="pf-v5-c-form pf-m-horizontal" @submit=${this.submit}>
${inline} ${inline}
</form>`; </form>`;
} }
@ -302,13 +302,13 @@ export abstract class Form<T> extends AKElement {
if (!this.nonFieldErrors) { if (!this.nonFieldErrors) {
return html``; return html``;
} }
return html`<div class="pf-c-form__alert"> return html`<div class="pf-v5-c-form__alert">
${this.nonFieldErrors.map((err) => { ${this.nonFieldErrors.map((err) => {
return html`<div class="pf-c-alert pf-m-inline pf-m-danger"> return html`<div class="pf-v5-c-alert pf-m-inline pf-m-danger">
<div class="pf-c-alert__icon"> <div class="pf-v5-c-alert__icon">
<i class="fas fa-exclamation-circle"></i> <i class="fas fa-exclamation-circle"></i>
</div> </div>
<h4 class="pf-c-alert__title">${err}</h4> <h4 class="pf-v5-c-alert__title">${err}</h4>
</div>`; </div>`;
})} })}
</div>`; </div>`;

10
web/src/elements/forms/FormElement.ts
View file

@ -31,16 +31,16 @@ export class FormElement extends AKElement {
} }
render(): TemplateResult { render(): TemplateResult {
return html`<div class="pf-c-form__group"> return html`<div class="pf-v5-c-form__group">
<label class="pf-c-form__label"> <label class="pf-v5-c-form__label">
<span class="pf-c-form__label-text">${this.label}</span> <span class="pf-v5-c-form__label-text">${this.label}</span>
${this.required ${this.required
? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` ? html`<span class="pf-v5-c-form__label-required" aria-hidden="true">*</span>`
: html``} : html``}
</label> </label>
<slot></slot> <slot></slot>
${(this.errors || []).map((error) => { ${(this.errors || []).map((error) => {
return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`; return html`<p class="pf-v5-c-form__helper-text pf-m-error">${error.string}</p>`;
})} })}
</div>`; </div>`;
} }

Some files were not shown because too many files have changed in this diff Show more