Compare commits
2 Commits
trustchain
...
dependabot
| Author | SHA1 | Date |
|---|---|---|
Jens Langhammer
|
310801dd2f | |
|
Jens Langhammer
|
e1fddedfb4 |
|
|
@ -68,21 +68,21 @@ export class AdminInterface extends Interface {
|
|||
PFButton,
|
||||
PFDrawer,
|
||||
css`
|
||||
.pf-c-page__main,
|
||||
.pf-c-drawer__content,
|
||||
.pf-c-page__drawer {
|
||||
.pf-v5-c-page__main,
|
||||
.pf-v5-c-drawer__content,
|
||||
.pf-v5-c-page__drawer {
|
||||
z-index: auto !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
.display-none {
|
||||
display: none;
|
||||
}
|
||||
.pf-c-page {
|
||||
background-color: var(--pf-c-page--BackgroundColor) !important;
|
||||
.pf-v5-c-page {
|
||||
background-color: var(--pf-v5-c-page--BackgroundColor) !important;
|
||||
}
|
||||
/* Global page background colour */
|
||||
:host([theme="dark"]) .pf-c-page {
|
||||
--pf-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
:host([theme="dark"]) .pf-v5-c-page {
|
||||
--pf-v5-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -123,9 +123,9 @@ export class AdminInterface extends Interface {
|
|||
|
||||
render(): TemplateResult {
|
||||
return html` <ak-locale-context>
|
||||
<div class="pf-c-page">
|
||||
<div class="pf-v5-c-page">
|
||||
<ak-sidebar
|
||||
class="pf-c-page__sidebar ${this.sidebarOpen
|
||||
class="pf-v5-c-page__sidebar ${this.sidebarOpen
|
||||
? "pf-m-expanded"
|
||||
: "pf-m-collapsed"} ${this.activeTheme === UiThemeEnum.Light
|
||||
? "pf-m-light"
|
||||
|
|
@ -133,19 +133,19 @@ export class AdminInterface extends Interface {
|
|||
>
|
||||
${this.renderSidebarItems()}
|
||||
</ak-sidebar>
|
||||
<div class="pf-c-page__drawer">
|
||||
<div class="pf-v5-c-page__drawer">
|
||||
<div
|
||||
class="pf-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
|
||||
class="pf-v5-c-drawer ${this.notificationDrawerOpen || this.apiDrawerOpen
|
||||
? "pf-m-expanded"
|
||||
: "pf-m-collapsed"}"
|
||||
>
|
||||
<div class="pf-c-drawer__main">
|
||||
<div class="pf-c-drawer__content">
|
||||
<div class="pf-c-drawer__body">
|
||||
<main class="pf-c-page__main">
|
||||
<div class="pf-v5-c-drawer__main">
|
||||
<div class="pf-v5-c-drawer__content">
|
||||
<div class="pf-v5-c-drawer__body">
|
||||
<main class="pf-v5-c-page__main">
|
||||
<ak-router-outlet
|
||||
role="main"
|
||||
class="pf-c-page__main"
|
||||
class="pf-v5-c-page__main"
|
||||
tabindex="-1"
|
||||
id="main-content"
|
||||
defaultUrl="/administration/overview"
|
||||
|
|
@ -156,14 +156,14 @@ export class AdminInterface extends Interface {
|
|||
</div>
|
||||
</div>
|
||||
<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
|
||||
? ""
|
||||
: "display-none"}"
|
||||
?hidden=${!this.notificationDrawerOpen}
|
||||
></ak-notification-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"}"
|
||||
?hidden=${!this.apiDrawerOpen}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@ export class DebugPage extends AKElement {
|
|||
render(): TemplateResult {
|
||||
return html`
|
||||
<ak-page-header icon="pf-icon pf-icon-user" header="Debug"> </ak-page-header>
|
||||
<section class="pf-c-page__main-section">
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<div class="pf-l-grid__item pf-m-3-col pf-c-card">
|
||||
<div class="pf-c-card__title">Sentry</div>
|
||||
<div class="pf-c-card__body">
|
||||
<section class="pf-v5-c-page__main-section">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">Sentry</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<button
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
@click=${() => {
|
||||
Sentry.captureException(new Error("test error"));
|
||||
}}
|
||||
|
|
@ -40,11 +40,11 @@ export class DebugPage extends AKElement {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-l-grid__item pf-m-3-col pf-c-card">
|
||||
<div class="pf-c-card__title">Misc</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid__item pf-m-3-col pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">Misc</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<button
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
@click=${() => {
|
||||
new AdminApi(DEFAULT_CONFIG)
|
||||
.adminSystemCreate()
|
||||
|
|
|
|||
|
|
@ -72,22 +72,22 @@ export class AdminOverviewPage extends AKElement {
|
|||
return html`<ak-page-header icon="" header="" description=${msg("General system status")}>
|
||||
<span slot="header"> ${msg(str`Welcome, ${name}.`)} </span>
|
||||
</ak-page-header>
|
||||
<section class="pf-c-page__main-section">
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<section class="pf-v5-c-page__main-section">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<!-- 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
|
||||
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
|
||||
icon="fa fa-share"
|
||||
header=${msg("Quick actions")}
|
||||
.isCenter=${false}
|
||||
>
|
||||
<ul class="pf-c-list">
|
||||
<ul class="pf-v5-c-list">
|
||||
<li>
|
||||
<a
|
||||
class="pf-u-mb-xl"
|
||||
class="pf-v5-u-mb-xl"
|
||||
href=${paramURL("/core/applications", {
|
||||
createForm: true,
|
||||
})}
|
||||
|
|
@ -95,26 +95,26 @@ export class AdminOverviewPage extends AKElement {
|
|||
>
|
||||
</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
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="pf-u-mb-xl"
|
||||
class="pf-v5-u-mb-xl"
|
||||
target="_blank"
|
||||
href="https://goauthentik.io/integrations/"
|
||||
>${msg("Explore integrations")}</a
|
||||
>
|
||||
</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
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="pf-u-mb-xl"
|
||||
class="pf-v5-u-mb-xl"
|
||||
target="_blank"
|
||||
href="https://goauthentik.io/docs/releases/${versionFamily()}#fixed-in-${VERSION.replaceAll(
|
||||
".",
|
||||
|
|
@ -127,7 +127,7 @@ export class AdminOverviewPage extends AKElement {
|
|||
</ak-aggregate-card>
|
||||
</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
|
||||
icon="pf-icon pf-icon-zone"
|
||||
|
|
@ -138,40 +138,40 @@ export class AdminOverviewPage extends AKElement {
|
|||
</ak-aggregate-card>
|
||||
</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-admin-status-chart-sync></ak-admin-status-chart-sync>
|
||||
</ak-aggregate-card>
|
||||
</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 />
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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 />
|
||||
</div>
|
||||
<!-- row 3 -->
|
||||
<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
|
||||
icon="pf-icon pf-icon-server"
|
||||
|
|
@ -183,7 +183,7 @@ export class AdminOverviewPage extends AKElement {
|
|||
</ak-aggregate-card>
|
||||
</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
|
||||
icon="pf-icon pf-icon-server"
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@ export class DashboardUserPage extends AKElement {
|
|||
render(): TemplateResult {
|
||||
return html`<ak-page-header icon="pf-icon pf-icon-user" header=${msg("User statistics")}>
|
||||
</ak-page-header>
|
||||
<section class="pf-c-page__main-section">
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<section class="pf-v5-c-page__main-section">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<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-charts-admin-model-per-day
|
||||
|
|
@ -58,12 +58,12 @@ export class DashboardUserPage extends AKElement {
|
|||
</ak-charts-admin-model-per-day>
|
||||
</ak-aggregate-card>
|
||||
</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 />
|
||||
</div>
|
||||
<!-- row 2 -->
|
||||
<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-charts-admin-model-per-day action=${EventActions.Login}>
|
||||
|
|
@ -71,7 +71,7 @@ export class DashboardUserPage extends AKElement {
|
|||
</ak-aggregate-card>
|
||||
</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-charts-admin-model-per-day action=${EventActions.LoginFailed}>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export class TopApplicationsTable extends AKElement {
|
|||
}
|
||||
|
||||
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>
|
||||
<tr role="row">
|
||||
<th role="columnheader" scope="col">${msg("Application")}</th>
|
||||
|
|
|
|||
|
|
@ -40,12 +40,12 @@ export class RecentEventsCard extends Table<Event> {
|
|||
return super.styles.concat(
|
||||
PFCard,
|
||||
css`
|
||||
.pf-c-card__title {
|
||||
--pf-c-card__title--FontFamily: var(
|
||||
--pf-global--FontFamily--heading--sans-serif
|
||||
.pf-v5-c-card__title {
|
||||
--pf-v5-c-card__title--FontFamily: var(
|
||||
--pf-v5-global--FontFamily--heading--sans-serif
|
||||
);
|
||||
--pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
|
||||
--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
|
||||
--pf-v5-c-card__title--FontSize: var(--pf-v5-global--FontSize--md);
|
||||
--pf-v5-c-card__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
|
||||
}
|
||||
`,
|
||||
);
|
||||
|
|
@ -62,7 +62,7 @@ export class RecentEventsCard extends Table<Event> {
|
|||
}
|
||||
|
||||
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> ${msg("Recent events")}
|
||||
</div>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
|
|||
renderResult(): TemplateResult {
|
||||
return html`
|
||||
<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">
|
||||
<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}>
|
||||
${this.result?.passing ? msg("Yes") : msg("No")}
|
||||
</ak-label>
|
||||
|
|
@ -65,44 +65,44 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
|
|||
</div>
|
||||
</ak-form-element-horizontal>
|
||||
<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">
|
||||
<ul>
|
||||
${(this.result?.messages || []).length > 0
|
||||
? this.result?.messages?.map((m) => {
|
||||
return html`<li>
|
||||
<span class="pf-c-form__label-text">${m}</span>
|
||||
<span class="pf-v5-c-form__label-text">${m}</span>
|
||||
</li>`;
|
||||
})
|
||||
: html`<li>
|
||||
<span class="pf-c-form__label-text">-</span>
|
||||
<span class="pf-v5-c-form__label-text">-</span>
|
||||
</li>`}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</ak-form-element-horizontal>
|
||||
<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">
|
||||
<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?.map((m) => {
|
||||
return html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
return html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${m.log_level}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${m.event}
|
||||
</div>
|
||||
</dd>
|
||||
</div>`;
|
||||
})
|
||||
: html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
: html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("No log messages.")}</span
|
||||
>
|
||||
</dt>
|
||||
|
|
|
|||
|
|
@ -102,31 +102,31 @@ export class ApplicationViewPage extends AKElement {
|
|||
}
|
||||
return html`<ak-tabs>
|
||||
${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.")}
|
||||
</div>`
|
||||
: html``}
|
||||
<section
|
||||
slot="page-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 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-c-card__body">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-v5-c-card__title">${msg("Related")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list">
|
||||
${this.application.providerObj
|
||||
? html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
? html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Provider")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<a
|
||||
href="#/core/providers/${this.application
|
||||
.providerObj?.pk}"
|
||||
|
|
@ -139,15 +139,15 @@ export class ApplicationViewPage extends AKElement {
|
|||
</div>`
|
||||
: html``}
|
||||
${(this.application.backchannelProvidersObj || []).length > 0
|
||||
? html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
? html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Backchannel Providers")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<ul class="pf-c-list">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ul class="pf-v5-c-list">
|
||||
${this.application.backchannelProvidersObj.map(
|
||||
(provider) => {
|
||||
return html`
|
||||
|
|
@ -167,26 +167,26 @@ export class ApplicationViewPage extends AKElement {
|
|||
</dd>
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Policy engine mode")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.application.policyEngineMode?.toUpperCase()}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Edit")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header">
|
||||
|
|
@ -199,7 +199,7 @@ export class ApplicationViewPage extends AKElement {
|
|||
</ak-application-form>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-secondary"
|
||||
>
|
||||
${msg("Edit")}
|
||||
</button>
|
||||
|
|
@ -207,14 +207,14 @@ export class ApplicationViewPage extends AKElement {
|
|||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Check access")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
|
||||
<span slot="submit"> ${msg("Check")} </span>
|
||||
<span slot="header">
|
||||
|
|
@ -227,7 +227,7 @@ export class ApplicationViewPage extends AKElement {
|
|||
</ak-application-check-access-form>
|
||||
<button
|
||||
slot="trigger"
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-secondary"
|
||||
>
|
||||
${msg("Test")}
|
||||
</button>
|
||||
|
|
@ -236,19 +236,19 @@ export class ApplicationViewPage extends AKElement {
|
|||
</dd>
|
||||
</div>
|
||||
${this.application.launchUrl
|
||||
? html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
? html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Launch")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<a
|
||||
target="_blank"
|
||||
href=${this.application.launchUrl}
|
||||
slot="trigger"
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-secondary"
|
||||
>
|
||||
${msg("Launch")}
|
||||
</a>
|
||||
|
|
@ -260,12 +260,12 @@ export class ApplicationViewPage extends AKElement {
|
|||
</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)")}
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card__body">
|
||||
${this.application &&
|
||||
html` <ak-charts-application-authorize
|
||||
applicationSlug=${this.application.slug}
|
||||
|
|
@ -273,9 +273,9 @@ export class ApplicationViewPage extends AKElement {
|
|||
</ak-charts-application-authorize>`}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Changelog")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Changelog")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.application.pk || ""}
|
||||
targetModelApp="authentik_core"
|
||||
|
|
@ -289,10 +289,10 @@ export class ApplicationViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-policy-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-c-card__title">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg("These policies control which users can access this application.")}
|
||||
</div>
|
||||
<ak-bound-policies-list .target=${this.application.pk}>
|
||||
|
|
|
|||
|
|
@ -56,15 +56,15 @@ export class ProviderSelectModal extends TableModal<Provider> {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">
|
||||
${msg("Select providers to add to application")}
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${async () => {
|
||||
await this.confirm(this.selectedElements);
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export class ApplicationWizard extends AKElement {
|
|||
}}
|
||||
>
|
||||
${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}
|
||||
</button>`
|
||||
: html``}
|
||||
|
|
|
|||
|
|
@ -50,22 +50,22 @@ export class InitialApplicationWizardPage extends WizardFormPage {
|
|||
|
||||
renderForm(): TemplateResult {
|
||||
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">
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">${msg("Application's display Name.")}</p>
|
||||
<input type="text" value="" class="pf-v5-c-form-control" required />
|
||||
<p class="pf-v5-c-form__helper-text">${msg("Application's display Name.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group ?expanded=${true}>
|
||||
<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
|
||||
label=${msg("Description")}
|
||||
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 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>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
|
|
|
|||
|
|
@ -59,11 +59,11 @@ export class TypeApplicationWizardPage extends WizardPage {
|
|||
}
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${type.component}
|
||||
|
|
@ -76,8 +76,8 @@ export class TypeApplicationWizardPage extends WizardPage {
|
|||
this.host.isValid = true;
|
||||
}}
|
||||
/>
|
||||
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@ export class TypeLDAPApplicationWizardPage extends WizardFormPage {
|
|||
renderForm(): TemplateResult {
|
||||
const domainParts = window.location.hostname.split(".");
|
||||
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}>
|
||||
<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>
|
||||
</form> `;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ export class TypeLinkApplicationWizardPage extends WizardFormPage {
|
|||
|
||||
renderForm(): TemplateResult {
|
||||
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">
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="text" value="" class="pf-v5-c-form-control" required />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("URL which will be opened when a user clicks on the application.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class TypeOAuthAPIApplicationWizardPage extends WizardPage {
|
|||
sidebarLabel = () => msg("Method details");
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
return html`<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<p>
|
||||
${msg(
|
||||
"This configuration can be used to authenticate to authentik with other APIs other otherwise programmatically.",
|
||||
|
|
|
|||
|
|
@ -56,11 +56,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
|
|||
sidebarLabel = () => msg("Application type");
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${type.component}
|
||||
|
|
@ -75,8 +75,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
|
|||
this.host.isValid = true;
|
||||
}}
|
||||
/>
|
||||
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form> `;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ export class TypeOAuthImplicitApplicationWizardPage extends WizardFormPage {
|
|||
sidebarLabel = () => msg("Method details");
|
||||
|
||||
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> `;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,14 +48,14 @@ export class TypeProxyApplicationWizardPage extends WizardFormPage {
|
|||
};
|
||||
|
||||
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("External domain")}
|
||||
name="externalHost"
|
||||
?required=${true}
|
||||
>
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="text" value="" class="pf-v5-c-form-control" required />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("External domain you will be accessing the domain from.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
|
|||
sidebarLabel = () => msg("Application type");
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${type.component}
|
||||
|
|
@ -57,8 +57,8 @@ export class TypeOAuthApplicationWizardPage extends WizardPage {
|
|||
this.host.isValid = true;
|
||||
}}
|
||||
/>
|
||||
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form> `;
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@ export class TypeSAMLApplicationWizardPage extends WizardFormPage {
|
|||
};
|
||||
|
||||
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}>
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="text" value="" class="pf-v5-c-form-control" required />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"URL that authentik will redirect back to after successful authentication.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -48,9 +48,9 @@ export class TypeSAMLImportApplicationWizardPage extends WizardFormPage {
|
|||
};
|
||||
|
||||
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">
|
||||
<input type="file" value="" class="pf-c-form-control" />
|
||||
<input type="file" value="" class="pf-v5-c-form-control" />
|
||||
</ak-form-element-horizontal>
|
||||
</form> `;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
|
|||
name="commonName"
|
||||
?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 label=${msg("Subject-alt name")} name="subjectAltName">
|
||||
<input class="pf-c-form-control" type="text" />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input class="pf-v5-c-form-control" type="text" />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Optional, comma-separated SubjectAlt Names.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -39,7 +39,7 @@ export class CertificateKeyPairForm extends Form<CertificateGenerationRequest> {
|
|||
name="validityDays"
|
||||
?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>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,12 +40,12 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
|
|||
}
|
||||
|
||||
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}>
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -55,16 +55,16 @@ export class CertificateKeyPairForm extends ModelForm<CertificateKeyPair, string
|
|||
?writeOnly=${this.instance !== undefined}
|
||||
?required=${true}
|
||||
>
|
||||
<textarea class="pf-c-form-control" required></textarea>
|
||||
<p class="pf-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
|
||||
<textarea class="pf-v5-c-form-control" required></textarea>
|
||||
<p class="pf-v5-c-form__helper-text">${msg("PEM-encoded Certificate data.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
name="keyData"
|
||||
?writeOnly=${this.instance !== undefined}
|
||||
label=${msg("Private Key")}
|
||||
>
|
||||
<textarea class="pf-c-form-control"></textarea>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<textarea class="pf-v5-c-form-control"></textarea>
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Optional Private Key. If this is set, you can use this keypair for encryption.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@ export class EnterpriseLicenseForm extends ModelForm<License, string> {
|
|||
|
||||
renderForm(): TemplateResult {
|
||||
// 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")}>
|
||||
<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 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>
|
||||
</form>`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export class EventListPage extends TablePage<Event> {
|
|||
|
||||
renderExpanded(item: Event): TemplateResult {
|
||||
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>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -58,12 +58,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -91,7 +91,7 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
|
|||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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}
|
||||
name="transports"
|
||||
>
|
||||
<select class="pf-c-form-control" multiple>
|
||||
<select class="pf-v5-c-form-control" multiple>
|
||||
${this.eventTransports?.results.map((transport) => {
|
||||
const selected = Array.from(this.instance?.transports || []).some((su) => {
|
||||
return su == transport.pk;
|
||||
|
|
@ -112,12 +112,12 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
|
|||
</option>`;
|
||||
})}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${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.",
|
||||
)}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Hold control/command to select multiple items.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -68,12 +68,12 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -114,7 +114,7 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.webhookUrl)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
|
|
@ -151,20 +151,20 @@ export class TransportForm extends ModelForm<NotificationTransport, string> {
|
|||
</ak-search-select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="sendOnce">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.sendOnce, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Send once")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Send once")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Only send notification once, for example when sending a webhook into a chat channel.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
</button>
|
||||
</ak-forms-delete-bulk>`;
|
||||
|
|
@ -87,7 +87,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
|
|||
type=${ifDefined(item.stageObj?.component)}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -96,7 +96,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
|
|||
<span slot="header"> ${msg("Update Stage binding")} </span>
|
||||
<ak-stage-binding-form slot="form" .instancePk=${item.pk}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>`,
|
||||
|
|
@ -106,8 +106,8 @@ export class BoundStagesList extends Table<FlowStageBinding> {
|
|||
renderExpanded(item: FlowStageBinding): TemplateResult {
|
||||
return html` <td></td>
|
||||
<td role="cell" colspan="4">
|
||||
<div class="pf-c-table__expandable-row-content">
|
||||
<div class="pf-c-content">
|
||||
<div class="pf-v5-c-table__expandable-row-content">
|
||||
<div class="pf-v5-c-content">
|
||||
<p>
|
||||
${msg(
|
||||
"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>
|
||||
<ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -151,7 +151,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
|
|||
<span slot="header"> ${msg("Create Stage binding")} </span>
|
||||
<ak-stage-binding-form slot="form" targetPk=${ifDefined(this.target)}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
|
|||
|
|
@ -78,12 +78,12 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -91,26 +91,26 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.title)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
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 label=${msg("Slug")} ?required=${true} name="slug">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.slug)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
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
|
||||
label=${msg("Designation")}
|
||||
?required=${true}
|
||||
name="designation"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<select class="pf-v5-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.designation === undefined}>
|
||||
---------
|
||||
</option>
|
||||
|
|
@ -160,7 +160,7 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
${DesignationToLabel(FlowDesignationEnum.Unenrollment)}
|
||||
</option>
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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}
|
||||
name="authentication"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<select class="pf-v5-c-form-control">
|
||||
<option
|
||||
value=${AuthenticationEnum.None}
|
||||
?selected=${this.instance?.authentication === AuthenticationEnum.None}
|
||||
|
|
@ -200,28 +200,28 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
${msg("Require superuser.")}
|
||||
</option>
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Required authentication level for this flow.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group>
|
||||
<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">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.compatibilityMode, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Compatibility mode")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Compatibility mode")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Increases compatibility with password managers and mobile devices.",
|
||||
)}
|
||||
|
|
@ -260,7 +260,7 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
.value=${this.instance?.deniedAction}
|
||||
>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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>
|
||||
<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
|
||||
label=${msg("Layout")}
|
||||
?required=${true}
|
||||
name="layout"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<select class="pf-v5-c-form-control">
|
||||
<option
|
||||
value=${LayoutEnum.Stacked}
|
||||
?selected=${this.instance?.layout === LayoutEnum.Stacked}
|
||||
|
|
@ -341,26 +341,26 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
label=${msg("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
|
||||
? html`
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Currently set to:")}
|
||||
${this.instance?.background}
|
||||
</p>
|
||||
`
|
||||
: html``}
|
||||
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Background shown during execution.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
${this.instance?.background
|
||||
? html`
|
||||
<ak-form-element-horizontal>
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
@change=${(ev: Event) => {
|
||||
const target =
|
||||
|
|
@ -368,19 +368,19 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
this.clearBackground = target.checked;
|
||||
}}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i
|
||||
class="fas fa-check"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">
|
||||
<span class="pf-v5-c-switch__label">
|
||||
${msg("Clear background")}
|
||||
</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Delete currently set background image.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -393,9 +393,9 @@ export class FlowForm extends ModelForm<Flow, string> {
|
|||
<input
|
||||
type="text"
|
||||
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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>`}
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ export class FlowImportForm extends Form<Flow> {
|
|||
renderResult(): TemplateResult {
|
||||
return html`
|
||||
<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">
|
||||
<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}>
|
||||
${this.result?.success ? msg("Yes") : msg("No")}
|
||||
</ak-label>
|
||||
|
|
@ -54,27 +54,27 @@ export class FlowImportForm extends Form<Flow> {
|
|||
</div>
|
||||
</ak-form-element-horizontal>
|
||||
<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">
|
||||
<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?.map((m) => {
|
||||
return html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
return html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${m.log_level}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${m.event}
|
||||
</div>
|
||||
</dd>
|
||||
</div>`;
|
||||
})
|
||||
: html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
: html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("No log messages.")}</span
|
||||
>
|
||||
</dt>
|
||||
|
|
@ -88,8 +88,8 @@ export class FlowImportForm extends Form<Flow> {
|
|||
|
||||
renderInlineForm(): TemplateResult {
|
||||
return html`<ak-form-element-horizontal label=${msg("Flow")} name="flow">
|
||||
<input type="file" value="" class="pf-c-form-control" />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="file" value="" class="pf-v5-c-form-control" />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
".yaml files, which can be found on goauthentik.io and can be exported by authentik.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -64,23 +64,23 @@ export class FlowViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-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
|
||||
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-c-card__body">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-card__title">${msg("Related actions")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Edit")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header">
|
||||
|
|
@ -93,22 +93,22 @@ export class FlowViewPage extends AKElement {
|
|||
</ak-flow-form>
|
||||
<button
|
||||
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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Execute flow")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<button
|
||||
class="pf-c-button pf-m-block pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-block pf-m-primary"
|
||||
@click=${() => {
|
||||
const finalURL = `${
|
||||
window.location.origin
|
||||
|
|
@ -121,7 +121,7 @@ export class FlowViewPage extends AKElement {
|
|||
${msg("Normal")}
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-block pf-m-secondary"
|
||||
@click=${() => {
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesExecuteRetrieve({
|
||||
|
|
@ -140,7 +140,7 @@ export class FlowViewPage extends AKElement {
|
|||
${msg("with current user")}
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-block pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-block pf-m-secondary"
|
||||
@click=${() => {
|
||||
new FlowsApi(DEFAULT_CONFIG)
|
||||
.flowsInstancesExecuteRetrieve({
|
||||
|
|
@ -168,15 +168,15 @@ export class FlowViewPage extends AKElement {
|
|||
</button>
|
||||
</div>
|
||||
</dd>
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Export flow")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<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}
|
||||
>
|
||||
${msg("Export")}
|
||||
|
|
@ -188,18 +188,18 @@ export class FlowViewPage extends AKElement {
|
|||
</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-c-card__body">
|
||||
<div class="pf-v5-c-card__title">${msg("Diagram")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-flow-diagram flowSlug=${this.flow.slug}> </ak-flow-diagram>
|
||||
</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-c-card__body">
|
||||
<div class="pf-v5-c-card__title">${msg("Changelog")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.flow.pk || ""}
|
||||
targetModelApp="authentik_flows"
|
||||
|
|
@ -213,10 +213,10 @@ export class FlowViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-bound-stages-list .target=${this.flow.pk}> </ak-bound-stages-list>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,13 +224,13 @@ export class FlowViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-policy-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-c-card__title">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg("These bindings control which users can access this flow.")}
|
||||
</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
|
|||
}
|
||||
|
||||
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()}
|
||||
<ak-form-element-horizontal label=${msg("Stage")} ?required=${true} name="stage">
|
||||
<ak-search-select
|
||||
|
|
@ -125,43 +125,43 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
|
|||
<input
|
||||
type="number"
|
||||
value="${first(this.instance?.order, this.defaultOrder)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="evaluateOnPlan">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.evaluateOnPlan, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Evaluate policies during the Flow planning process.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="reEvaluatePolicies">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.reEvaluatePolicies, true)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</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>
|
||||
<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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -196,7 +196,7 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
|
|||
.value=${this.instance?.invalidResponseAction}
|
||||
>
|
||||
</ak-radio>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Configure how the flow executor should handle an invalid response to a challenge given by this bound stage.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ import { CoreApi, CoreGroupsListRequest, Group } from "@goauthentik/api";
|
|||
export class GroupForm extends ModelForm<Group, string> {
|
||||
static get styles(): CSSResult[] {
|
||||
return super.styles.concat(css`
|
||||
.pf-c-button.pf-m-control {
|
||||
.pf-v5-c-button.pf-m-control {
|
||||
height: 100%;
|
||||
}
|
||||
.pf-c-form-control {
|
||||
.pf-v5-c-form-control {
|
||||
height: auto !important;
|
||||
}
|
||||
`);
|
||||
|
|
@ -58,30 +58,30 @@ export class GroupForm extends ModelForm<Group, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="isSuperuser">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.isSuperuser, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Is superuser")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Is superuser")}</span>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -123,7 +123,7 @@ export class GroupForm extends ModelForm<Group, string> {
|
|||
value="${YAML.stringify(first(this.instance?.attributes, {}))}"
|
||||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -84,35 +84,35 @@ export class GroupViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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 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-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-card__title">${msg("Group Info")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.group.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Superuser")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-label
|
||||
color=${this.group.isSuperuser
|
||||
? PFColor.Green
|
||||
|
|
@ -123,23 +123,23 @@ export class GroupViewPage extends AKElement {
|
|||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Group")} </span>
|
||||
<ak-group-form slot="form" .instancePk=${this.group.pk}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</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-c-card__body">
|
||||
<div class="pf-v5-c-card__title">${msg("Notes")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
${Object.hasOwn(this.group?.attributes || {}, "notes")
|
||||
? html`${this.group.attributes?.notes}`
|
||||
: html`
|
||||
|
|
@ -152,10 +152,10 @@ export class GroupViewPage extends AKElement {
|
|||
</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-c-card__body">
|
||||
<div class="pf-v5-c-card__title">${msg("Changelog")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.group.pk}
|
||||
targetModelApp="authentik_core"
|
||||
|
|
@ -169,10 +169,10 @@ export class GroupViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-user-related-list .targetGroup=${this.group}> </ak-user-related-list>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,13 +60,13 @@ export class MemberSelectTable extends TableModal<User> {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg("Select users to add")}</h1>
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">${msg("Select users to add")}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm(this.selectedElements).then(() => {
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ export class OutpostDeploymentModal extends ModalButton {
|
|||
outpost?: Outpost;
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<div class="pf-c-modal-box__header">
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
|
||||
return html`<div class="pf-v5-c-modal-box__header">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
|
||||
</div>
|
||||
<div class="pf-c-modal-box__body">
|
||||
<div class="pf-v5-c-modal-box__body">
|
||||
<p>
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
@ -26,21 +26,21 @@ export class OutpostDeploymentModal extends ModalButton {
|
|||
>${msg("View deployment documentation")}</a
|
||||
>
|
||||
</p>
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_HOST</span>
|
||||
<form class="pf-v5-c-form">
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">AUTHENTIK_HOST</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${document.location.origin}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_TOKEN</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">AUTHENTIK_TOKEN</span>
|
||||
</label>
|
||||
<div>
|
||||
<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.",
|
||||
)}
|
||||
</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">AUTHENTIK_INSECURE</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">AUTHENTIK_INSECURE</span>
|
||||
</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>
|
||||
${this.outpost?.type == OutpostTypeEnum.Proxy
|
||||
? 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.",
|
||||
)}
|
||||
</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>AUTHENTIK_HOST_BROWSER</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${document.location.origin}"
|
||||
|
|
@ -86,9 +86,9 @@ export class OutpostDeploymentModal extends ModalButton {
|
|||
: html``}
|
||||
</form>
|
||||
</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
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
@click=${() => {
|
||||
this.open = false;
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -99,18 +99,18 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
|
||||
<select
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
@change=${(ev: Event) => {
|
||||
const target = ev.target as HTMLSelectElement;
|
||||
this.type = target.selectedOptions[0].value as OutpostTypeEnum;
|
||||
|
|
@ -170,12 +170,12 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
?blankable=${true}
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Selecting an integration enables the management of the outpost by authentik.",
|
||||
)}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
See
|
||||
<a target="_blank" href="${docLink("/docs/outposts?utm_source=authentik")}"
|
||||
>documentation</a
|
||||
|
|
@ -187,7 +187,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
?required=${!this.embedded}
|
||||
name="providers"
|
||||
>
|
||||
<select class="pf-c-form-control" multiple>
|
||||
<select class="pf-v5-c-form-control" multiple>
|
||||
${this.providers?.results.map((provider) => {
|
||||
const selected = Array.from(this.instance?.providers || []).some((sp) => {
|
||||
return sp == provider.pk;
|
||||
|
|
@ -201,10 +201,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
</option>`;
|
||||
})}
|
||||
</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.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Hold control/command to select multiple items.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -215,10 +215,10 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
|||
this.instance ? this.instance.config : this.defaultConfig?.config,
|
||||
)}"
|
||||
></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.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("See more here:")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -39,25 +39,25 @@ export class OutpostHealthElement extends AKElement {
|
|||
8,
|
||||
)})`;
|
||||
}
|
||||
return html`<dl class="pf-c-description-list pf-m-compact">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Last seen")}</span>
|
||||
return html`<dl class="pf-v5-c-description-list pf-m-compact">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Last seen")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-label color=${PFColor.Green} ?compact=${true}>
|
||||
${this.outpostHealth.lastSeen?.toLocaleTimeString()}
|
||||
</ak-label>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Version")}</span>
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Version")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.outpostHealth.versionOutdated
|
||||
? html`<ak-label color=${PFColor.Red} ?compact=${true}
|
||||
>${msg(
|
||||
|
|
@ -70,12 +70,12 @@ export class OutpostHealthElement extends AKElement {
|
|||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Hostname")}</span>
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Hostname")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">${this.outpostHealth.hostname}</div>
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">${this.outpostHealth.hostname}</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl> `;
|
||||
|
|
|
|||
|
|
@ -45,30 +45,30 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="local">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.local, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Local")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Local")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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, {}))}"
|
||||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="verifySsl">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.verifySsl, true)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label"
|
||||
<span class="pf-v5-c-switch__label"
|
||||
>${msg("Verify Kubernetes API SSL Certificate")}</span
|
||||
>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -41,11 +41,11 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${`${type.component}-${type.modelName}`}
|
||||
|
|
@ -57,10 +57,10 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
|
|||
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
|
||||
>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -107,7 +107,7 @@ export class ServiceConnectionWizard extends AKElement {
|
|||
</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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
type=${ifDefined(item.policyObj?.component)}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>`;
|
||||
|
|
@ -94,7 +94,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Group")} </span>
|
||||
<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")}
|
||||
</button>
|
||||
</ak-forms-modal>`;
|
||||
|
|
@ -103,7 +103,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update User")} </span>
|
||||
<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")}
|
||||
</button>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-delete-bulk>`;
|
||||
|
|
@ -162,7 +162,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
?policyOnly=${this.policyOnly}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>`,
|
||||
|
|
@ -183,7 +183,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
?policyOnly=${this.policyOnly}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -207,7 +207,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
|
|||
?policyOnly=${this.policyOnly}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal> `;
|
||||
|
|
|
|||
|
|
@ -54,9 +54,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
renderResult(): TemplateResult {
|
||||
return html`
|
||||
<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">
|
||||
<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}>
|
||||
${this.result?.passing ? msg("Yes") : msg("No")}
|
||||
</ak-label>
|
||||
|
|
@ -65,17 +65,17 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
</div>
|
||||
</ak-form-element-horizontal>
|
||||
<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">
|
||||
<ul>
|
||||
${(this.result?.messages || []).length > 0
|
||||
? this.result?.messages?.map((m) => {
|
||||
return html`<li>
|
||||
<span class="pf-c-form__label-text">${m}</span>
|
||||
<span class="pf-v5-c-form__label-text">${m}</span>
|
||||
</li>`;
|
||||
})
|
||||
: html`<li>
|
||||
<span class="pf-c-form__label-text">-</span>
|
||||
<span class="pf-v5-c-form__label-text">-</span>
|
||||
</li>`}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -83,27 +83,27 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
</ak-form-element-horizontal>
|
||||
|
||||
<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">
|
||||
<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?.map((m) => {
|
||||
return html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
return html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${m.log_level}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${m.event}
|
||||
</div>
|
||||
</dd>
|
||||
</div>`;
|
||||
})
|
||||
: html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
: html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("No log messages.")}</span
|
||||
>
|
||||
</dt>
|
||||
|
|
@ -149,7 +149,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
value=${YAML.stringify(first(this.request?.context, {}))}
|
||||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -47,11 +47,11 @@ export class InitialPolicyWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${`${type.component}-${type.modelName}`}
|
||||
|
|
@ -70,10 +70,10 @@ export class InitialPolicyWizardPage extends WizardPage {
|
|||
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
|
||||
>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -144,7 +144,7 @@ export class PolicyWizard extends AKElement {
|
|||
></ak-policy-binding-form>
|
||||
</ak-wizard-page-form>`
|
||||
: 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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
</button>
|
||||
</ak-forms-delete-bulk>`;
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -58,10 +58,10 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.objectField)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
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.")}
|
||||
</p>
|
||||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Expression using Python.")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Expression using Python.")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -58,10 +58,10 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.samlName)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${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.",
|
||||
)}
|
||||
|
|
@ -71,9 +71,9 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
|
|||
<input
|
||||
type="text"
|
||||
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.")}
|
||||
</p>
|
||||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Expression using Python.")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Expression using Python.")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -58,10 +58,10 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.scopeName)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -69,9 +69,9 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
|
|||
<input
|
||||
type="text"
|
||||
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(
|
||||
"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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Expression using Python.")}
|
||||
<a
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -55,9 +55,9 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
value="${ifDefined(this.result?.result)}"
|
||||
>
|
||||
</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">
|
||||
<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>`}
|
||||
</ak-form-element-horizontal>`;
|
||||
|
|
@ -76,7 +76,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
renderExampleLDAP(): TemplateResult {
|
||||
return html`
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-secondary"
|
||||
role="button"
|
||||
@click=${() => {
|
||||
this.request = {
|
||||
|
|
@ -97,7 +97,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
${msg("Active Directory User")}
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
class="pf-v5-c-button pf-m-secondary"
|
||||
role="button"
|
||||
@click=${() => {
|
||||
this.request = {
|
||||
|
|
@ -152,7 +152,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
|
|||
value=${YAML.stringify(first(this.request?.context, {}))}
|
||||
>
|
||||
</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>
|
||||
${this.result ? this.renderResult() : html``}`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${`${type.component}-${type.modelName}`}
|
||||
|
|
@ -60,10 +60,10 @@ export class InitialPropertyMappingWizardPage extends WizardPage {
|
|||
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
|
||||
>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -107,7 +107,7 @@ export class PropertyMappingWizard extends AKElement {
|
|||
</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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,16 +46,16 @@ export class InitialProviderWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
renderHint(): TemplateResult {
|
||||
return html`<div class="pf-c-hint">
|
||||
<div class="pf-c-hint__title">${msg("Try the new application wizard")}</div>
|
||||
<div class="pf-c-hint__body">
|
||||
return html`<div class="pf-v5-c-hint">
|
||||
<div class="pf-v5-c-hint__title">${msg("Try the new application wizard")}</div>
|
||||
<div class="pf-v5-c-hint__body">
|
||||
${msg(
|
||||
"The new application wizard greatly simplifies the steps required to create applications and providers.",
|
||||
)}
|
||||
</div>
|
||||
<div class="pf-c-hint__footer">
|
||||
<div class="pf-v5-c-hint__footer">
|
||||
<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", {
|
||||
createForm: true,
|
||||
})}
|
||||
|
|
@ -67,11 +67,11 @@ export class InitialProviderWizardPage extends WizardPage {
|
|||
}
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${type.component}
|
||||
|
|
@ -80,8 +80,8 @@ export class InitialProviderWizardPage extends WizardPage {
|
|||
this.host.isValid = true;
|
||||
}}
|
||||
/>
|
||||
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<label class="pf-v5-c-radio__label" for=${type.component}>${type.name}</label>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -133,7 +133,7 @@ export class ProviderWizard extends AKElement {
|
|||
</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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class RelatedApplicationButton extends AKElement {
|
|||
<span slot="submit"> ${msg("Create")} </span>
|
||||
<span slot="header"> ${msg("Create Application")} </span>
|
||||
<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>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,10 +89,10 @@ export class LDAPProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider?.pk || ""}
|
||||
targetModelName=${this.provider?.metaModelName || ""}
|
||||
|
|
@ -111,109 +111,109 @@ export class LDAPProviderViewPage extends AKElement {
|
|||
return html`
|
||||
${
|
||||
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.")}
|
||||
</div>`
|
||||
: html``
|
||||
}
|
||||
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Name")}</span>
|
||||
<div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Name")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Assigned to application")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-provider-related-application
|
||||
.provider=${this.provider}
|
||||
></ak-provider-related-application>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Base DN")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.baseDn}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update LDAP Provider")} </span>
|
||||
<ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg("How to connect")}
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<p>
|
||||
${msg("Connect to the LDAP Server on port 389:")}
|
||||
</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("The Host IP of the docker host")}</li>
|
||||
</ul>
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg("Bind DN")}</span>
|
||||
<form class="pf-v5-c-form">
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg("Bind DN")}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value=${`cn=${this.me?.user
|
||||
.username},ou=users,${this.provider?.baseDn?.toLowerCase()}`}
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg(
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg(
|
||||
"Bind Password",
|
||||
)}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="Your authentik password"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg("Search base")}</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg("Search base")}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value=${ifDefined(this.provider?.baseDn?.toLowerCase())}
|
||||
|
|
|
|||
|
|
@ -116,10 +116,10 @@ export class OAuth2ProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider?.pk || ""}
|
||||
targetModelName=${this.provider?.metaModelName || ""}
|
||||
|
|
@ -137,77 +137,77 @@ export class OAuth2ProviderViewPage extends AKElement {
|
|||
}
|
||||
return html` ${this.provider?.assignedApplicationName
|
||||
? 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.")}
|
||||
</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-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">
|
||||
<dl class="pf-c-description-list">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Name")}</span>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Name")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Assigned to application")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-provider-related-application .provider=${this.provider}>
|
||||
</ak-provider-related-application>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Client type")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${convertToTitle(this.provider.clientType || "")}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Client ID")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.clientId}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Redirect URIs")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.redirectUris}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update OAuth2 Provider")} </span>
|
||||
|
|
@ -216,96 +216,96 @@ export class OAuth2ProviderViewPage extends AKElement {
|
|||
.instancePk=${this.provider.pk || 0}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-7-col">
|
||||
<div class="pf-c-card__body">
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-7-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<form class="pf-v5-c-form">
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("OpenID Configuration URL")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.providerInfo || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("OpenID Configuration Issuer")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.issuer || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("Authorize URL")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.authorize || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg("Token URL")}</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg("Token URL")}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.token || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("Userinfo URL")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.userInfo || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg("Logout URL")}</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg("Logout URL")}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.logout || msg("-")}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${msg("JWKS URL")}</span>
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${msg("JWKS URL")}</span>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${this.providerUrls?.jwks || msg("-")}"
|
||||
|
|
@ -315,9 +315,9 @@ export class OAuth2ProviderViewPage extends AKElement {
|
|||
</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
|
||||
.replacers=${[
|
||||
(input: string) => {
|
||||
|
|
@ -342,13 +342,13 @@ export class OAuth2ProviderViewPage extends AKElement {
|
|||
return html``;
|
||||
}
|
||||
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-c-card__title">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg("Example JWT payload (for currently authenticated user)")}
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card__body">
|
||||
${this.preview
|
||||
? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>`
|
||||
: html` <ak-empty-state ?loading=${true}></ak-empty-state> `}
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
return html`<section
|
||||
slot="page-${convertToSlug(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>
|
||||
</section>`;
|
||||
|
|
@ -196,10 +196,10 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider?.pk || ""}
|
||||
targetModelName=${this.provider?.metaModelName || ""}
|
||||
|
|
@ -216,17 +216,17 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
return html``;
|
||||
}
|
||||
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-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Client ID")}</span>
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Client ID")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<pre>${this.provider.clientId}</pre>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -234,8 +234,8 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-markdown .md=${MDHeaderAuthentication}></ak-markdown>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -248,76 +248,76 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
}
|
||||
return html`${this.provider?.assignedApplicationName
|
||||
? 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.")}
|
||||
</div>`}
|
||||
${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.")}
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Name")}</span>
|
||||
<div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Name")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Assigned to application")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-provider-related-application
|
||||
.provider=${this.provider}
|
||||
></ak-provider-related-application>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Internal Host")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.internalHost}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("External Host")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<a target="_blank" href="${this.provider.externalHost}"
|
||||
>${this.provider.externalHost}</a
|
||||
>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Basic-Auth")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-label
|
||||
color=${this.provider.basicAuthEnabled
|
||||
? PFColor.Green
|
||||
|
|
@ -330,19 +330,19 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Mode")}</span>
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Mode")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${ModeToLabel(this.provider.mode || ProxyMode.Proxy)}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Proxy Provider")} </span>
|
||||
|
|
@ -351,25 +351,25 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
.instancePk=${this.provider.pk || 0}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Protocol Settings")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Protocol Settings")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Allowed Redirect URIs")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<ul class="pf-c-list">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ul class="pf-v5-c-list">
|
||||
${this.provider.redirectUris.split("\n").map((url) => {
|
||||
return html`<li><pre>${url}</pre></li>`;
|
||||
})}
|
||||
|
|
@ -380,9 +380,9 @@ export class ProxyProviderViewPage extends AKElement {
|
|||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Setup")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Setup")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
${isForward(this.provider?.mode || ProxyMode.Proxy)
|
||||
? html` ${this.renderConfig()} `
|
||||
: html` <p>${msg("No additional setup is required.")}</p> `}
|
||||
|
|
|
|||
|
|
@ -76,59 +76,59 @@ export class RadiusProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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
|
||||
? 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.")}
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-u-display-flex pf-u-justify-content-center">
|
||||
<div class="pf-u-w-75">
|
||||
<div class="pf-c-card">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-u-display-flex pf-v5-u-justify-content-center">
|
||||
<div class="pf-v5-u-w-75">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Assigned to application")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-provider-related-application
|
||||
.provider=${this.provider}
|
||||
></ak-provider-related-application>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Client Networks")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.clientNetworks}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Radius Provider")} </span>
|
||||
|
|
@ -137,7 +137,7 @@ export class RadiusProviderViewPage extends AKElement {
|
|||
.instancePk=${this.provider.pk}
|
||||
>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -149,10 +149,10 @@ export class RadiusProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider.pk || ""}
|
||||
targetModelApp="authentik_providers_radius"
|
||||
|
|
|
|||
|
|
@ -121,14 +121,14 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
const relatedObjects = [];
|
||||
if (this.provider?.assignedApplicationName) {
|
||||
relatedObjects.push(
|
||||
html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Metadata")}</span>
|
||||
html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Metadata")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<a
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
target="_blank"
|
||||
href=${ifDefined(this.provider?.urlDownloadMetadata)}
|
||||
>
|
||||
|
|
@ -159,16 +159,16 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
}
|
||||
if (this.signer) {
|
||||
relatedObjects.push(
|
||||
html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Download signing certificate")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<a
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
href=${this.signer.certificateDownloadUrl}
|
||||
>${msg("Download")}</a
|
||||
>
|
||||
|
|
@ -177,10 +177,10 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
</div>`,
|
||||
);
|
||||
}
|
||||
return html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Related objects")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col">
|
||||
return html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Related objects")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col">
|
||||
${relatedObjects.length > 0 ? relatedObjects : html`-`}
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -214,10 +214,10 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider?.pk || ""}
|
||||
targetModelName=${this.provider?.metaModelName || ""}
|
||||
|
|
@ -236,83 +236,83 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
return html`${
|
||||
this.provider?.assignedApplicationName
|
||||
? 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.")}
|
||||
</div>`
|
||||
}
|
||||
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Name")}</span>
|
||||
<div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Name")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Assigned to application")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ak-provider-related-application
|
||||
.provider=${this.provider}
|
||||
></ak-provider-related-application>
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg(
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg(
|
||||
"ACS URL",
|
||||
)}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.acsUrl}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg(
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg(
|
||||
"Audience",
|
||||
)}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.audience || "-"}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg(
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg(
|
||||
"Issuer",
|
||||
)}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.issuer}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update SAML Provider")} </span>
|
||||
<ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -321,83 +321,83 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
${this.renderRelatedObjects()}
|
||||
${
|
||||
this.provider.assignedApplicationName
|
||||
? html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("SAML Configuration")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<form class="pf-c-form">
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
? html` <div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("SAML Configuration")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<form class="pf-v5-c-form">
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("EntityID/Issuer")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider?.issuer)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("SSO URL (Post)")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider.urlSsoPost)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("SSO URL (Redirect)")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider.urlSsoRedirect)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("SSO URL (IdP-initiated Login)")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider.urlSsoInit)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("SLO URL (Post)")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider.urlSloPost)}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text"
|
||||
<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text"
|
||||
>${msg("SLO URL (Redirect)")}</span
|
||||
>
|
||||
</label>
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value="${ifDefined(this.provider.urlSloRedirect)}"
|
||||
|
|
@ -430,13 +430,13 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
}}
|
||||
>
|
||||
<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-c-card__title">${msg("SAML Metadata")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("SAML Metadata")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<a
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
target="_blank"
|
||||
href=${this.provider.urlDownloadMetadata}
|
||||
>
|
||||
|
|
@ -462,7 +462,7 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
${msg("Copy download URL")}
|
||||
</ak-action-button>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-codemirror
|
||||
mode="xml"
|
||||
?readOnly=${true}
|
||||
|
|
@ -481,36 +481,36 @@ export class SAMLProviderViewPage extends AKElement {
|
|||
return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
|
||||
}
|
||||
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-c-card__title">${msg("Example SAML attributes")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__title">${msg("Example SAML attributes")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("NameID attribute")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.preview?.nameID}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
|
||||
${this.preview?.attributes.map((attr) => {
|
||||
return html` <div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${attr.Name}</span>
|
||||
return html` <div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${attr.Name}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<ul class="pf-c-list">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ul class="pf-v5-c-list">
|
||||
${attr.Value.map((value) => {
|
||||
return html` <li><pre>${value}</pre></li> `;
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -61,26 +61,26 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group .expanded=${true}>
|
||||
<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">
|
||||
<input
|
||||
type="text"
|
||||
value="${first(this.instance?.url, "")}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("SCIM base url, usually ends in /v2.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -92,10 +92,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
<input
|
||||
type="text"
|
||||
value="${first(this.instance?.token, "")}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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 ?expanded=${true}>
|
||||
<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">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.excludeUsersServiceAccount, true)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label"
|
||||
<span class="pf-v5-c-switch__label"
|
||||
>${msg("Exclude service accounts")}</span
|
||||
>
|
||||
</label>
|
||||
|
|
@ -149,7 +149,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
?blankable=${true}
|
||||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -157,13 +157,13 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
</ak-form-group>
|
||||
<ak-form-group ?expanded=${true}>
|
||||
<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
|
||||
label=${msg("User Property Mappings")}
|
||||
?required=${true}
|
||||
name="propertyMappings"
|
||||
>
|
||||
<select class="pf-c-form-control" multiple>
|
||||
<select class="pf-v5-c-form-control" multiple>
|
||||
${this.propertyMappings?.results.map((mapping) => {
|
||||
let selected = false;
|
||||
if (!this.instance?.propertyMappings) {
|
||||
|
|
@ -185,10 +185,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
</option>`;
|
||||
})}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Property mappings used to user mapping.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Hold control/command to select multiple items.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -197,7 +197,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
?required=${true}
|
||||
name="propertyMappingsGroup"
|
||||
>
|
||||
<select class="pf-c-form-control" multiple>
|
||||
<select class="pf-v5-c-form-control" multiple>
|
||||
${this.propertyMappings?.results.map((mapping) => {
|
||||
let selected = false;
|
||||
if (!this.instance?.propertyMappingsGroup) {
|
||||
|
|
@ -218,10 +218,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
|
|||
</option>`;
|
||||
})}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Property mappings used to group creation.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("Hold control/command to select multiple items.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -101,10 +101,10 @@ export class SCIMProviderViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card__body">
|
||||
<div class="pf-v5-c-card">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.provider?.pk || ""}
|
||||
targetModelName=${this.provider?.metaModelName || ""}
|
||||
|
|
@ -120,66 +120,66 @@ export class SCIMProviderViewPage extends AKElement {
|
|||
if (!this.provider) {
|
||||
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.")}
|
||||
</div>
|
||||
${!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(
|
||||
"Warning: Provider is not assigned to an application as backchannel provider.",
|
||||
)}
|
||||
</div>`
|
||||
: html``}
|
||||
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
|
||||
<div class="pf-l-grid__item pf-m-7-col pf-l-stack pf-m-gutter">
|
||||
<div class="pf-c-card pf-m-12-col pf-l-stack__item">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-page__main-section pf-m-no-padding-mobile pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-l-grid__item pf-m-7-col pf-v5-l-stack pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-m-12-col pf-v5-l-stack__item">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.provider.url}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update SCIM Provider")} </span>
|
||||
<ak-provider-scim-form slot="form" .instancePk=${this.provider.pk}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-l-stack__item">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col pf-v5-l-stack__item">
|
||||
<div class="pf-v5-c-card__title">
|
||||
<p>${msg("Sync status")}</p>
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card__body">
|
||||
${this.syncState
|
||||
? html` <ul class="pf-c-list">
|
||||
? html` <ul class="pf-v5-c-list">
|
||||
${this.syncState.messages.map((m) => {
|
||||
return html`<li>${m}</li>`;
|
||||
})}
|
||||
|
|
@ -187,7 +187,7 @@ export class SCIMProviderViewPage extends AKElement {
|
|||
: html` ${msg("Sync not run yet.")} `}
|
||||
</div>
|
||||
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-action-button
|
||||
class="pf-m-secondary"
|
||||
.apiRequest=${() => {
|
||||
|
|
@ -211,8 +211,8 @@ export class SCIMProviderViewPage extends AKElement {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-5-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-5-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-markdown .md=${MDSCIMProvider}></ak-markdown>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ export class InitialSourceWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${`${type.component}-${type.modelName}`}
|
||||
|
|
@ -59,10 +59,10 @@ export class InitialSourceWizardPage extends WizardPage {
|
|||
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
|
||||
>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -108,7 +108,7 @@ export class SourceWizard extends AKElement {
|
|||
</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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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=${() => {
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesLdapSyncStatusList({
|
||||
|
|
@ -74,42 +74,42 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Server URI")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.serverUri}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Base DN")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<ul>
|
||||
<li>${this.source.baseDn}</li>
|
||||
</ul>
|
||||
|
|
@ -118,27 +118,27 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update LDAP Source")} </span>
|
||||
<ak-source-ldap-form slot="form" .instancePk=${this.source.slug}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">
|
||||
<p>${msg("Sync status")}</p>
|
||||
</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card__body">
|
||||
${this.syncState.length < 1
|
||||
? html`<p>${msg("Not synced yet.")}</p>`
|
||||
: html`
|
||||
<ul class="pf-c-list">
|
||||
<ul class="pf-v5-c-list">
|
||||
${this.syncState.map((task) => {
|
||||
let header = "";
|
||||
if (task.status === TaskStatusEnum.Warning) {
|
||||
|
|
@ -152,7 +152,7 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
}
|
||||
return html`<li>
|
||||
<p>${task.taskName}</p>
|
||||
<ul class="pf-c-list">
|
||||
<ul class="pf-v5-c-list">
|
||||
<li>${header}</li>
|
||||
${task.messages.map((m) => {
|
||||
return html`<li>${m}</li>`;
|
||||
|
|
@ -163,7 +163,7 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
</ul>
|
||||
`}
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-action-button
|
||||
class="pf-m-secondary"
|
||||
.apiRequest=${() => {
|
||||
|
|
@ -191,11 +191,11 @@ export class LDAPSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.source.pk || ""}
|
||||
targetModelApp="authentik_sources_ldap"
|
||||
|
|
|
|||
|
|
@ -95,82 +95,82 @@ export class OAuthSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Details")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Details")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Provider Type")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${ProviderToLabel(this.source.providerType)}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Callback URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<code class="pf-c-description-list__text"
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<code class="pf-v5-c-description-list__text"
|
||||
>${this.source.callbackUrl}</code
|
||||
>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Access Key")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.consumerKey}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Authorization URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.type?.authorizationUrl ||
|
||||
this.source.authorizationUrl}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Token URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.type?.accessTokenUrl ||
|
||||
this.source.accessTokenUrl}
|
||||
</div>
|
||||
|
|
@ -178,21 +178,21 @@ export class OAuthSourceViewPage extends AKElement {
|
|||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update OAuth Source")} </span>
|
||||
<ak-source-oauth-form slot="form" .instancePk=${this.source.slug}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">${msg("Diagram")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">${msg("Diagram")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-source-oauth-diagram
|
||||
.source=${this.source}
|
||||
></ak-source-oauth-diagram>
|
||||
|
|
@ -203,11 +203,11 @@ export class OAuthSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.source.pk || ""}
|
||||
targetModelApp="authentik_sources_oauth"
|
||||
|
|
@ -221,17 +221,17 @@ export class OAuthSourceViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-policy-binding"
|
||||
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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg(
|
||||
`These bindings control which users can access this source.
|
||||
You can only use policies here as access is checked before the user is authenticated.`,
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -59,33 +59,33 @@ export class PlexSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-2-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Plex Source")} </span>
|
||||
<ak-source-plex-form slot="form" .instancePk=${this.source.slug}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -96,11 +96,11 @@ export class PlexSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.source.pk || ""}
|
||||
targetModelApp="authentik_sources_plex"
|
||||
|
|
@ -114,17 +114,17 @@ export class PlexSourceViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-policy-binding"
|
||||
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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg(
|
||||
`These bindings control which users can access this source.
|
||||
You can only use policies here as access is checked before the user is authenticated.`,
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,69 +63,69 @@ export class SAMLSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<dl class="pf-v5-c-description-list pf-m-3-col-on-lg">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Name")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.name}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("SSO URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.ssoUrl}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("SLO URL")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.sloUrl}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Issuer")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${this.source.issuer}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update SAML Source")} </span>
|
||||
<ak-source-saml-form slot="form" .instancePk=${this.source.slug}>
|
||||
</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")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
|
|
@ -136,11 +136,11 @@ export class SAMLSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-object-changelog
|
||||
targetModelPk=${this.source.pk || ""}
|
||||
targetModelApp="authentik_sources_saml"
|
||||
|
|
@ -154,7 +154,7 @@ export class SAMLSourceViewPage extends AKElement {
|
|||
<section
|
||||
slot="page-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=${() => {
|
||||
new SourcesApi(DEFAULT_CONFIG)
|
||||
.sourcesSamlMetadataRetrieve({
|
||||
|
|
@ -165,18 +165,18 @@ export class SAMLSourceViewPage extends AKElement {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<div class="pf-l-grid pf-m-gutter">
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-codemirror
|
||||
mode="xml"
|
||||
?readOnly=${true}
|
||||
value="${ifDefined(this.metadata?.metadata)}"
|
||||
></ak-codemirror>
|
||||
</div>
|
||||
<div class="pf-c-card__footer">
|
||||
<div class="pf-v5-c-card__footer">
|
||||
<a
|
||||
class="pf-c-button pf-m-primary"
|
||||
class="pf-v5-c-button pf-m-primary"
|
||||
target="_blank"
|
||||
href=${ifDefined(this.metadata?.downloadUrl)}
|
||||
>
|
||||
|
|
@ -189,17 +189,17 @@ export class SAMLSourceViewPage extends AKElement {
|
|||
<div
|
||||
slot="page-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-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__title">
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__title">
|
||||
${msg(
|
||||
`These bindings control which users can access this source.
|
||||
You can only use policies here as access is checked before the user is authenticated.`,
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,11 +60,11 @@ export class InitialStageWizardPage extends WizardPage {
|
|||
};
|
||||
|
||||
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) => {
|
||||
return html`<div class="pf-c-radio">
|
||||
return html`<div class="pf-v5-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
class="pf-v5-c-radio__input"
|
||||
type="radio"
|
||||
name="type"
|
||||
id=${`${type.component}-${type.modelName}`}
|
||||
|
|
@ -83,10 +83,10 @@ export class InitialStageWizardPage extends WizardPage {
|
|||
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
|
||||
>
|
||||
<span class="pf-c-radio__description">${type.description}</span>
|
||||
<span class="pf-v5-c-radio__description">${type.description}</span>
|
||||
</div>`;
|
||||
})}
|
||||
</form>`;
|
||||
|
|
@ -155,7 +155,7 @@ export class StageWizard extends AKElement {
|
|||
></ak-stage-binding-form>
|
||||
</ak-wizard-page-form>`
|
||||
: 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>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
|
|||
}
|
||||
|
||||
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.renderFormManual()}
|
||||
</form>`;
|
||||
|
|
@ -77,7 +77,7 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
|
|||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -86,8 +86,8 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
|
|||
?required=${true}
|
||||
name="duoUserId"
|
||||
>
|
||||
<input type="text" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="text" class="pf-v5-c-form-control" required />
|
||||
<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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>`;
|
||||
|
|
|
|||
|
|
@ -34,14 +34,14 @@ export class InvitationListLink extends AKElement {
|
|||
}
|
||||
|
||||
renderFlowSelector(): TemplateResult {
|
||||
return html`<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Select an enrollment flow")}</span>
|
||||
return html`<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Select an enrollment flow")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<select
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
@change=${(ev: Event) => {
|
||||
const current = (ev.target as HTMLInputElement).value;
|
||||
this.selectedFlow = current;
|
||||
|
|
@ -86,18 +86,18 @@ export class InvitationListLink extends AKElement {
|
|||
}
|
||||
|
||||
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``}
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text"
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text"
|
||||
>${msg("Link to use the invitation.")}</span
|
||||
>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
<input
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
readonly
|
||||
type="text"
|
||||
value=${this.renderLink()}
|
||||
|
|
|
|||
|
|
@ -239,18 +239,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<div class="pf-l-grid pf-m-gutter">
|
||||
<div class="pf-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
|
||||
<div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
|
||||
return html`<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
|
||||
<div class="pf-v5-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
renderPreview(): TemplateResult {
|
||||
return html`
|
||||
<h3 class="pf-c-title pf-m-lg">${msg("Preview")}</h3>
|
||||
<div class="pf-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-c-card__body">
|
||||
<h3 class="pf-v5-c-title pf-m-lg">${msg("Preview")}</h3>
|
||||
<div class="pf-v5-l-grid pf-m-gutter">
|
||||
<div class="pf-v5-c-card pf-m-selectable pf-m-selected pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">
|
||||
<ak-stage-prompt
|
||||
.host=${new PreviewStageHost(this)}
|
||||
.challenge=${this.preview}
|
||||
|
|
@ -260,9 +260,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
</div>
|
||||
${this.previewError
|
||||
? html`
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">${msg("Preview errors")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">${msg("Preview errors")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
${this.previewError.map((err) => html`<pre>${err}</pre>`)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -270,9 +270,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
: html``}
|
||||
${this.previewResult
|
||||
? html`
|
||||
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
|
||||
<div class="pf-c-card__body">${msg("Data preview")}</div>
|
||||
<div class="pf-c-card__body">
|
||||
<div class="pf-v5-c-card pf-v5-l-grid__item pf-m-12-col">
|
||||
<div class="pf-v5-c-card__body">${msg("Data preview")}</div>
|
||||
<div class="pf-v5-c-card__body">
|
||||
<pre>${JSON.stringify(this.previewResult, undefined, 4)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -283,18 +283,18 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
@input=${() => {
|
||||
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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -302,16 +302,16 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.fieldKey)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
@input=${() => {
|
||||
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.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.label)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
@input=${() => {
|
||||
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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
|
||||
<select
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
@change=${() => {
|
||||
this._shouldRefresh = true;
|
||||
}}
|
||||
|
|
@ -342,43 +342,43 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="required">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.required, false)}
|
||||
@change=${() => {
|
||||
this._shouldRefresh = true;
|
||||
}}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Required")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Required")}</span>
|
||||
</label>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="placeholderExpression">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.placeholderExpression, false)}
|
||||
@change=${() => {
|
||||
this._shouldRefresh = true;
|
||||
}}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label"
|
||||
<span class="pf-v5-c-switch__label"
|
||||
>${msg("Interpret placeholder as expression")}</span
|
||||
>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
`When checked, the placeholder will be evaluated in the same way a property mapping is.
|
||||
If the evaluation fails, the placeholder itself is returned.`,
|
||||
|
|
@ -394,7 +394,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
}}
|
||||
>
|
||||
</ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
`Optionally provide a short hint that describes the expected input value.
|
||||
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>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="initialValueExpression">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.initialValueExpression, false)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label"
|
||||
<span class="pf-v5-c-switch__label"
|
||||
>${msg("Interpret initial value as expression")}</span
|
||||
>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
`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.`,
|
||||
|
|
@ -428,7 +428,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
<ak-form-element-horizontal label=${msg("Initial value")} name="initialValue">
|
||||
<ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}">
|
||||
</ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
`Optionally pre-fill the input with an initial value.
|
||||
When creating a fixed choice field, enable interpreting as expression and
|
||||
|
|
@ -445,13 +445,13 @@ export class PromptForm extends ModelForm<Prompt, string> {
|
|||
}}
|
||||
>
|
||||
</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 label=${msg("Order")} ?required=${true} name="order">
|
||||
<input
|
||||
type="number"
|
||||
value="${first(this.instance?.order, 0)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -82,24 +82,24 @@ export class SystemTaskListPage extends TablePage<Task> {
|
|||
|
||||
renderExpanded(item: Task): TemplateResult {
|
||||
return html` <td role="cell" colspan="3">
|
||||
<div class="pf-c-table__expandable-row-content">
|
||||
<dl class="pf-c-description-list pf-m-horizontal">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Duration")}</span>
|
||||
<div class="pf-v5-c-table__expandable-row-content">
|
||||
<dl class="pf-v5-c-description-list pf-m-horizontal">
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Duration")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${msg(str`${item.taskDuration.toFixed(2)} seconds`)}
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${msg("Messages")}</span>
|
||||
<div class="pf-v5-c-description-list__group">
|
||||
<dt class="pf-v5-c-description-list__term">
|
||||
<span class="pf-v5-c-description-list__text">${msg("Messages")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
<dd class="pf-v5-c-description-list__description">
|
||||
<div class="pf-v5-c-description-list__text">
|
||||
${item.messages.map((m) => {
|
||||
return html`<li>${m}</li>`;
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -67,22 +67,22 @@ export class GroupSelectModal extends TableModal<Group> {
|
|||
|
||||
renderModalInner(): TemplateResult {
|
||||
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">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1>
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">${msg("Select groups to add user to")}</h1>
|
||||
</div>
|
||||
</section>
|
||||
${willSuperuser
|
||||
? html`
|
||||
<div class="pf-c-banner pf-m-warning">
|
||||
<div class="pf-v5-c-banner pf-m-warning">
|
||||
${msg(
|
||||
"Warning: Adding the user to the selected group(s) will give them superuser permissions.",
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: html``}
|
||||
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">${this.renderTable()}</section>
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm(this.selectedElements).then(() => {
|
||||
|
|
|
|||
|
|
@ -40,38 +40,38 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
|
|||
?required=${true}
|
||||
name="name"
|
||||
>
|
||||
<input type="text" value="" class="pf-c-form-control" required />
|
||||
<p class="pf-c-form__helper-text">
|
||||
<input type="text" value="" class="pf-v5-c-form-control" required />
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg("User's primary identifier. 150 characters or fewer.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="createGroup">
|
||||
<label class="pf-c-switch">
|
||||
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Create group")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Create group")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"Enabling this toggle will create a group named after the user, with the user as member.",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="expiring">
|
||||
<label class="pf-c-switch">
|
||||
<input class="pf-c-switch__input" type="checkbox" ?checked=${true} />
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input class="pf-v5-c-switch__input" type="checkbox" ?checked=${true} />
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Expiring")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Expiring")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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"
|
||||
data-type="datetime-local"
|
||||
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>`;
|
||||
}
|
||||
|
|
@ -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.",
|
||||
)}
|
||||
</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")}>
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
value=${ifDefined(this.result?.username)}
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${msg("Password")}>
|
||||
|
|
@ -107,9 +107,9 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
|
|||
type="text"
|
||||
readonly
|
||||
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(
|
||||
"Valid for 360 days, after which the password will automatically rotate. You can copy the password from the Token List.",
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ export class UserActiveForm extends DeleteForm {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1>
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Update ${this.objectLabel}`)}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">
|
||||
<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<p>
|
||||
${msg(
|
||||
str`Are you sure you want to update ${this.objectLabel} "${this.obj?.name}"?`,
|
||||
|
|
@ -38,7 +38,7 @@ export class UserActiveForm extends DeleteForm {
|
|||
</p>
|
||||
</form>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm();
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@ export class UserForm extends ModelForm<User, number> {
|
|||
|
||||
static get styles(): CSSResult[] {
|
||||
return super.styles.concat(css`
|
||||
.pf-c-button.pf-m-control {
|
||||
.pf-v5-c-button.pf-m-control {
|
||||
height: 100%;
|
||||
}
|
||||
.pf-c-form-control {
|
||||
.pf-v5-c-form-control {
|
||||
height: auto !important;
|
||||
}
|
||||
`);
|
||||
|
|
@ -64,15 +64,15 @@ export class UserForm extends ModelForm<User, number> {
|
|||
}
|
||||
|
||||
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">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.username)}"
|
||||
class="pf-c-form-control"
|
||||
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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -80,9 +80,9 @@ export class UserForm extends ModelForm<User, number> {
|
|||
<input
|
||||
type="text"
|
||||
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 label=${msg("User type")} ?required=${true} name="type">
|
||||
<ak-radio
|
||||
|
|
@ -119,24 +119,24 @@ export class UserForm extends ModelForm<User, number> {
|
|||
type="email"
|
||||
autocomplete="off"
|
||||
value="${ifDefined(this.instance?.email)}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="isActive">
|
||||
<label class="pf-c-switch">
|
||||
<label class="pf-v5-c-switch">
|
||||
<input
|
||||
class="pf-c-switch__input"
|
||||
class="pf-v5-c-switch__input"
|
||||
type="checkbox"
|
||||
?checked=${first(this.instance?.isActive, true)}
|
||||
/>
|
||||
<span class="pf-c-switch__toggle">
|
||||
<span class="pf-c-switch__toggle-icon">
|
||||
<span class="pf-v5-c-switch__toggle">
|
||||
<span class="pf-v5-c-switch__toggle-icon">
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${msg("Is active")}</span>
|
||||
<span class="pf-v5-c-switch__label">${msg("Is active")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
<p class="pf-v5-c-form__helper-text">
|
||||
${msg(
|
||||
"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
|
||||
type="text"
|
||||
value="${first(this.instance?.path, "users")}"
|
||||
class="pf-c-form-control"
|
||||
class="pf-v5-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
@ -162,7 +162,7 @@ export class UserForm extends ModelForm<User, number> {
|
|||
)}"
|
||||
>
|
||||
</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.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export class UserPasswordForm extends Form<UserPasswordSetRequest> {
|
|||
?required=${true}
|
||||
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>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export class ObjectChangelog extends Table<Event> {
|
|||
|
||||
renderExpanded(item: Event): TemplateResult {
|
||||
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>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export class UserEvents extends Table<Event> {
|
|||
|
||||
renderExpanded(item: Event): TemplateResult {
|
||||
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>
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ export class Alert extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}">
|
||||
<div class="pf-c-alert__icon">
|
||||
return html`<div class="pf-v5-c-alert ${this.inline ? "pf-m-inline" : ""} ${this.level}">
|
||||
<div class="pf-v5-c-alert__icon">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
</div>
|
||||
<h4 class="pf-c-alert__title">
|
||||
<h4 class="pf-v5-c-alert__title">
|
||||
<slot></slot>
|
||||
</h4>
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ export class CodeMirrorTextarea<T> extends AKElement {
|
|||
this.themeLight = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
backgroundColor: "var(--pf-global--BackgroundColor--light-300)",
|
||||
backgroundColor: "var(--pf-v5-global--BackgroundColor--light-300)",
|
||||
},
|
||||
},
|
||||
{ dark: false },
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class Divider extends AKElement {
|
|||
.separator::after {
|
||||
content: "";
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -27,22 +27,22 @@ export class EmptyState extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
|
||||
<div class="pf-c-empty-state__content">
|
||||
return html`<div class="pf-v5-c-empty-state ${this.fullHeight && "pf-m-full-height"}">
|
||||
<div class="pf-v5-c-empty-state__content">
|
||||
${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>
|
||||
</div>`
|
||||
: html`<i
|
||||
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"
|
||||
></i>`}
|
||||
<h1 class="pf-c-title pf-m-lg">${this.header}</h1>
|
||||
<div class="pf-c-empty-state__body">
|
||||
<h1 class="pf-v5-c-title pf-m-lg">${this.header}</h1>
|
||||
<div class="pf-v5-c-empty-state__body">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
<div class="pf-c-empty-state__primary">
|
||||
<div class="pf-v5-c-empty-state__primary">
|
||||
<slot name="primary"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,26 +32,26 @@ export class Expand extends AKElement {
|
|||
|
||||
render(): TemplateResult {
|
||||
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"
|
||||
: ""}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="pf-c-expandable-section__toggle"
|
||||
class="pf-v5-c-expandable-section__toggle"
|
||||
aria-expanded="${this.expanded}"
|
||||
@click=${() => {
|
||||
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>
|
||||
</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
|
||||
>
|
||||
</button>
|
||||
<div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}>
|
||||
<div class="pf-v5-c-expandable-section__content" ?hidden=${!this.expanded}>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ export class Label extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<span class="pf-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
|
||||
<span class="pf-c-label__content">
|
||||
<span class="pf-c-label__icon">
|
||||
return html`<span class="pf-v5-c-label ${this.color} ${this.compact ? "pf-m-compact" : ""}">
|
||||
<span class="pf-v5-c-label__content">
|
||||
<span class="pf-v5-c-label__icon">
|
||||
<i
|
||||
class="fas fa-fw ${this.icon || this.getDefaultIcon()}"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export class LoadingOverlay extends AKElement {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
background-color: var(--pf-global--BackgroundColor--dark-transparent-200);
|
||||
background-color: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
|
||||
z-index: 1;
|
||||
}
|
||||
:host([topMost]) {
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export class Markdown extends AKElement {
|
|||
}
|
||||
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -69,14 +69,14 @@ export class PageHeader extends AKElement {
|
|||
flex-direction: row;
|
||||
min-height: 114px;
|
||||
}
|
||||
.pf-c-button.pf-m-plain {
|
||||
.pf-v5-c-button.pf-m-plain {
|
||||
background-color: transparent;
|
||||
border-radius: 0px;
|
||||
}
|
||||
.pf-c-page__main-section.pf-m-light {
|
||||
.pf-v5-c-page__main-section.pf-m-light {
|
||||
background-color: transparent;
|
||||
}
|
||||
.pf-c-page__main-section {
|
||||
.pf-v5-c-page__main-section {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -90,7 +90,7 @@ export class PageHeader extends AKElement {
|
|||
font-size: 24px;
|
||||
}
|
||||
.notification-trigger.has-notifications {
|
||||
color: var(--pf-global--active-color--100);
|
||||
color: var(--pf-v5-global--active-color--100);
|
||||
}
|
||||
h1 {
|
||||
display: flex;
|
||||
|
|
@ -138,7 +138,7 @@ export class PageHeader extends AKElement {
|
|||
return html` <ak-enterprise-status interface="admin"></ak-enterprise-status>
|
||||
<div class="bar">
|
||||
<button
|
||||
class="sidebar-trigger pf-c-button pf-m-plain"
|
||||
class="sidebar-trigger pf-v5-c-button pf-m-plain"
|
||||
@click=${() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(EVENT_SIDEBAR_TOGGLE, {
|
||||
|
|
@ -150,8 +150,8 @@ export class PageHeader extends AKElement {
|
|||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<section class="pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1>
|
||||
<slot name="icon">${this.renderIcon()}</slot>
|
||||
<slot name="header">${this.header}</slot>
|
||||
|
|
@ -160,7 +160,7 @@ export class PageHeader extends AKElement {
|
|||
</div>
|
||||
</section>
|
||||
<button
|
||||
class="notification-trigger pf-c-button pf-m-plain"
|
||||
class="notification-trigger pf-v5-c-button pf-m-plain"
|
||||
@click=${() => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(EVENT_API_DRAWER_TOGGLE, {
|
||||
|
|
@ -175,7 +175,7 @@ export class PageHeader extends AKElement {
|
|||
</pf-tooltip>
|
||||
</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"
|
||||
: ""}"
|
||||
@click=${() => {
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ export class Spinner extends AKElement {
|
|||
|
||||
render(): TemplateResult {
|
||||
return html`<span
|
||||
class="pf-c-spinner ${this.size.toString()}"
|
||||
class="pf-v5-c-spinner ${this.size.toString()}"
|
||||
role="progressbar"
|
||||
aria-valuetext="${msg("Loading...")}"
|
||||
>
|
||||
<span class="pf-c-spinner__clipper"></span>
|
||||
<span class="pf-c-spinner__lead-ball"></span>
|
||||
<span class="pf-c-spinner__tail-ball"></span>
|
||||
<span class="pf-v5-c-spinner__clipper"></span>
|
||||
<span class="pf-v5-c-spinner__lead-ball"></span>
|
||||
<span class="pf-v5-c-spinner__tail-ball"></span>
|
||||
</span>`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ export class Tabs extends AKElement {
|
|||
:host([vertical]) {
|
||||
display: flex;
|
||||
}
|
||||
:host([vertical]) .pf-c-tabs {
|
||||
:host([vertical]) .pf-v5-c-tabs {
|
||||
width: auto !important;
|
||||
}
|
||||
:host([vertical]) .pf-c-tabs__list {
|
||||
:host([vertical]) .pf-v5-c-tabs__list {
|
||||
height: 100%;
|
||||
}
|
||||
:host([vertical]) .pf-c-tabs .pf-c-tabs__list::before {
|
||||
|
|
@ -81,9 +81,9 @@ export class Tabs extends AKElement {
|
|||
|
||||
renderTab(page: Element): TemplateResult {
|
||||
const slot = page.attributes.getNamedItem("slot")?.value;
|
||||
return html` <li class="pf-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
|
||||
<button class="pf-c-tabs__link" @click=${() => this.onClick(slot)}>
|
||||
<span class="pf-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span>
|
||||
return html` <li class="pf-v5-c-tabs__item ${slot === this.currentPage ? CURRENT_CLASS : ""}">
|
||||
<button class="pf-v5-c-tabs__link" @click=${() => this.onClick(slot)}>
|
||||
<span class="pf-v5-c-tabs__item-text"> ${page.getAttribute("data-tab-title")} </span>
|
||||
</button>
|
||||
</li>`;
|
||||
}
|
||||
|
|
@ -106,8 +106,8 @@ export class Tabs extends AKElement {
|
|||
const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
|
||||
this.onClick(wantedPage);
|
||||
}
|
||||
return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
|
||||
<ul class="pf-c-tabs__list">
|
||||
return html`<div class="pf-v5-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
|
||||
<ul class="pf-v5-c-tabs__list">
|
||||
${pages.map((page) => this.renderTab(page))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,13 +71,13 @@ export class TreeViewNode extends AKElement {
|
|||
const shouldRenderChildren = (this.item?.childItems || []).length > 0 && this.open;
|
||||
return html`
|
||||
<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"
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="pf-c-tree-view__content">
|
||||
<div class="pf-v5-c-tree-view__content">
|
||||
<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"
|
||||
: ""}"
|
||||
@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
|
||||
? html` <button
|
||||
class="pf-c-tree-view__node-toggle"
|
||||
class="pf-v5-c-tree-view__node-toggle"
|
||||
@click=${(e: Event) => {
|
||||
if (this.openable) {
|
||||
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>
|
||||
</span>
|
||||
</button>`
|
||||
: html``}
|
||||
<span class="pf-c-tree-view__node-icon">
|
||||
<span class="pf-v5-c-tree-view__node-icon">
|
||||
<i
|
||||
class="fas ${this.open ? "fa-folder-open" : "fa-folder"}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</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>
|
||||
</button>
|
||||
</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) => {
|
||||
return html`<ak-treeview-node
|
||||
.item=${item}
|
||||
|
|
@ -193,8 +193,8 @@ export class TreeView extends AKElement {
|
|||
|
||||
render(): TemplateResult {
|
||||
const rootItem = this.parse(this.items);
|
||||
return html`<div class="pf-c-tree-view pf-m-guides">
|
||||
<ul class="pf-c-tree-view__list" role="tree">
|
||||
return html`<div class="pf-v5-c-tree-view pf-m-guides">
|
||||
<ul class="pf-v5-c-tree-view__list" role="tree">
|
||||
<ak-treeview-node
|
||||
.item=${rootItem}
|
||||
activePath=${this.activePath}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export class DropdownButton extends AKElement {
|
|||
|
||||
constructor() {
|
||||
super();
|
||||
this.menu = this.querySelector<HTMLElement>(".pf-c-dropdown__menu");
|
||||
this.querySelectorAll("button.pf-c-dropdown__toggle").forEach((btn) => {
|
||||
this.menu = this.querySelector<HTMLElement>(".pf-v5-c-dropdown__menu");
|
||||
this.querySelectorAll("button.pf-v5-c-dropdown__toggle").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
if (!this.menu) return;
|
||||
this.menu.hidden = !this.menu.hidden;
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
|||
export const MODAL_BUTTON_STYLES = css`
|
||||
:host {
|
||||
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;
|
||||
}
|
||||
/* fix multiple selects height */
|
||||
|
|
@ -106,14 +106,14 @@ export class ModalButton extends AKElement {
|
|||
|
||||
renderModal(): TemplateResult {
|
||||
return html`<div
|
||||
class="pf-c-backdrop"
|
||||
class="pf-v5-c-backdrop"
|
||||
@click=${(e: PointerEvent) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div class="pf-l-bullseye">
|
||||
<div class="pf-v5-l-bullseye">
|
||||
<div
|
||||
class="pf-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
|
||||
class="pf-v5-c-modal-box ${this.size} ${this.locked ? "locked" : ""}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
|
|
@ -122,7 +122,7 @@ export class ModalButton extends AKElement {
|
|||
this.resetForms();
|
||||
this.open = false;
|
||||
}}
|
||||
class="pf-c-button pf-m-plain"
|
||||
class="pf-v5-c-button pf-m-plain"
|
||||
type="button"
|
||||
aria-label="Close dialog"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -28,28 +28,28 @@ export class AggregateCard extends AKElement {
|
|||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFCard, PFFlex].concat([
|
||||
css`
|
||||
.pf-c-card.pf-c-card-aggregate {
|
||||
.pf-v5-c-card.pf-v5-c-card-aggregate {
|
||||
height: 100%;
|
||||
}
|
||||
.pf-c-card__header {
|
||||
.pf-v5-c-card__header {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.center-value {
|
||||
font-size: var(--pf-global--icon--FontSize--lg);
|
||||
font-size: var(--pf-v5-global--icon--FontSize--lg);
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2);
|
||||
padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2);
|
||||
padding-left: calc(var(--pf-v5-c-card--child--PaddingLeft) / 2);
|
||||
padding-right: calc(var(--pf-v5-c-card--child--PaddingRight) / 2);
|
||||
}
|
||||
.pf-c-card__header,
|
||||
.pf-c-card__title,
|
||||
.pf-c-card__body,
|
||||
.pf-c-card__footer {
|
||||
.pf-v5-c-card__header,
|
||||
.pf-v5-c-card__title,
|
||||
.pf-v5-c-card__body,
|
||||
.pf-v5-c-card__footer {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`,
|
||||
|
|
@ -73,14 +73,14 @@ export class AggregateCard extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-card pf-c-card-aggregate">
|
||||
<div class="pf-c-card__header pf-l-flex pf-m-justify-content-space-between">
|
||||
<div class="pf-c-card__title">
|
||||
return html`<div class="pf-v5-c-card pf-v5-c-card-aggregate">
|
||||
<div class="pf-v5-c-card__header pf-v5-l-flex pf-m-justify-content-space-between">
|
||||
<div class="pf-v5-c-card__title">
|
||||
<i class="${ifDefined(this.icon)}"></i> ${this.renderHeader()}
|
||||
</div>
|
||||
${this.renderHeaderLink()}
|
||||
</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.subtext ? html`<p class="subtext">${this.subtext}</p>` : html``}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ export class Chip extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<li class="pf-c-chip-group__list-item">
|
||||
<div class="pf-c-chip">
|
||||
<span class="pf-c-chip__text">
|
||||
return html`<li class="pf-v5-c-chip-group__list-item">
|
||||
<div class="pf-v5-c-chip">
|
||||
<span class="pf-v5-c-chip__text">
|
||||
<slot></slot>
|
||||
</span>
|
||||
${this.removable
|
||||
? html`<button
|
||||
class="pf-c-button pf-m-plain"
|
||||
class="pf-v5-c-button pf-m-plain"
|
||||
type="button"
|
||||
@click=${() => {
|
||||
this.dispatchEvent(
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ import { CSSResult, TemplateResult, css, html } from "lit";
|
|||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
import PFChipGroup from "@patternfly/patternfly/components/Chip/chip-group.css";
|
||||
import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
|
||||
import PFChipGroup from "@patternfly/patternfly/components/ChipGroup/chip-group.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
@customElement("ak-chip-group")
|
||||
|
|
@ -21,7 +21,7 @@ export class ChipGroup extends AKElement {
|
|||
::slotted(*) {
|
||||
margin: 0 2px;
|
||||
}
|
||||
.pf-c-chip-group {
|
||||
.pf-v5-c-chip-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
`,
|
||||
|
|
@ -44,9 +44,9 @@ export class ChipGroup extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-chip-group">
|
||||
<div class="pf-c-chip-group__main">
|
||||
<ul class="pf-c-chip-group__list" role="list">
|
||||
return html`<div class="pf-v5-c-chip-group">
|
||||
<div class="pf-v5-c-chip-group__main">
|
||||
<ul class="pf-v5-c-chip-group__list" role="list">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export class EnterpriseStatusBanner extends AKElement {
|
|||
}
|
||||
|
||||
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.")}
|
||||
<a href="/if/admin/#/enterprise/licenses"> ${msg("Click here for more info.")} </a>
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -54,19 +54,19 @@ export class ConfirmationForm extends ModalButton {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">
|
||||
<slot name="header"></slot>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<slot class="pf-c-content" name="body"></slot>
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">
|
||||
<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<slot class="pf-v5-c-content" name="body"></slot>
|
||||
</form>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm();
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
|
|||
return this.renderUsedBy(this.usedByData.get(item) || []);
|
||||
};
|
||||
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
|
||||
? until(handler(), html`<ak-spinner size=${PFSize.Large}></ak-spinner>`)
|
||||
: html``}
|
||||
|
|
@ -90,7 +90,7 @@ export class DeleteObjectsTable<T> extends Table<T> {
|
|||
if (usedBy.length < 1) {
|
||||
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) => {
|
||||
let consequence = "";
|
||||
switch (ub.action) {
|
||||
|
|
@ -182,18 +182,18 @@ export class DeleteBulkForm<T> extends ModalButton {
|
|||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">
|
||||
${this.actionLabel
|
||||
? this.actionLabel
|
||||
: msg(str`Delete ${this.objectLabel}`)}
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<p class="pf-c-title">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">
|
||||
<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<p class="pf-v5-c-title">
|
||||
${this.actionSubtext
|
||||
? this.actionSubtext
|
||||
: msg(
|
||||
|
|
@ -203,7 +203,7 @@ export class DeleteBulkForm<T> extends ModalButton {
|
|||
<slot name="notice"></slot>
|
||||
</form>
|
||||
</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
|
||||
.objects=${this.objects}
|
||||
.usedBy=${this.usedBy}
|
||||
|
|
@ -211,7 +211,7 @@ export class DeleteBulkForm<T> extends ModalButton {
|
|||
>
|
||||
</ak-delete-objects-table>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm();
|
||||
|
|
|
|||
|
|
@ -70,13 +70,13 @@ export class DeleteForm extends ModalButton {
|
|||
} else {
|
||||
objName = "";
|
||||
}
|
||||
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
|
||||
return html`<section class="pf-v5-c-modal-box__header pf-v5-c-page__main-section pf-m-light">
|
||||
<div class="pf-v5-c-content">
|
||||
<h1 class="pf-v5-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body pf-m-light">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">
|
||||
<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<p>
|
||||
${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)}
|
||||
</p>
|
||||
|
|
@ -89,10 +89,10 @@ export class DeleteForm extends ModalButton {
|
|||
return html``;
|
||||
}
|
||||
return html`
|
||||
<section class="pf-c-modal-box__body pf-m-light">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<section class="pf-v5-c-modal-box__body pf-m-light">
|
||||
<form class="pf-v5-c-form pf-m-horizontal">
|
||||
<p>${msg(str`The following objects use ${objName}`)}</p>
|
||||
<ul class="pf-c-list">
|
||||
<ul class="pf-v5-c-list">
|
||||
${usedBy.map((ub) => {
|
||||
let consequence = "";
|
||||
switch (ub.action) {
|
||||
|
|
@ -126,7 +126,7 @@ export class DeleteForm extends ModalButton {
|
|||
}),
|
||||
)
|
||||
: html``}
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<footer class="pf-v5-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm();
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ export abstract class Form<T> extends AKElement {
|
|||
renderForm(): TemplateResult {
|
||||
const inline = this.renderInlineForm();
|
||||
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}
|
||||
</form>`;
|
||||
}
|
||||
|
|
@ -302,13 +302,13 @@ export abstract class Form<T> extends AKElement {
|
|||
if (!this.nonFieldErrors) {
|
||||
return html``;
|
||||
}
|
||||
return html`<div class="pf-c-form__alert">
|
||||
return html`<div class="pf-v5-c-form__alert">
|
||||
${this.nonFieldErrors.map((err) => {
|
||||
return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
|
||||
<div class="pf-c-alert__icon">
|
||||
return html`<div class="pf-v5-c-alert pf-m-inline pf-m-danger">
|
||||
<div class="pf-v5-c-alert__icon">
|
||||
<i class="fas fa-exclamation-circle"></i>
|
||||
</div>
|
||||
<h4 class="pf-c-alert__title">${err}</h4>
|
||||
<h4 class="pf-v5-c-alert__title">${err}</h4>
|
||||
</div>`;
|
||||
})}
|
||||
</div>`;
|
||||
|
|
|
|||
|
|
@ -31,16 +31,16 @@ export class FormElement extends AKElement {
|
|||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${this.label}</span>
|
||||
return html`<div class="pf-v5-c-form__group">
|
||||
<label class="pf-v5-c-form__label">
|
||||
<span class="pf-v5-c-form__label-text">${this.label}</span>
|
||||
${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``}
|
||||
</label>
|
||||
<slot></slot>
|
||||
${(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>`;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue