habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into web/add-htmltagmaps-to-activate-lit-analyzer

Browse Source 
* main: (213 commits)
  website/docs: configuration: fix typo in kubectl command (#10492)
  website/integrations: fix typo in minio instructions (#10500)
  web: bump @typescript-eslint/eslint-plugin from 7.5.0 to 7.16.0 in /tests/wdio (#10496)
  website: bump prettier from 3.3.2 to 3.3.3 in /website (#10493)
  core: bump ruff from 0.5.1 to 0.5.2 (#10494)
  web: bump @typescript-eslint/parser from 7.5.0 to 7.16.0 in /tests/wdio (#10495)
  web: bump eslint-plugin-sonarjs from 0.25.1 to 1.0.3 in /tests/wdio (#10498)
  web: bump prettier from 3.3.2 to 3.3.3 in /tests/wdio (#10497)
  web: bump pseudolocale from 2.0.0 to 2.1.0 in /web (#10499)
  core: bump goauthentik.io/api/v3 from 3.2024061.1 to 3.2024061.2 (#10491)
  web: bump API Client version (#10488)
  flows: remove stage challenge type (#10476)
  core: bump github.com/redis/go-redis/v9 from 9.5.3 to 9.5.4 (#10469)
  core: bump goauthentik.io/api/v3 from 3.2024060.6 to 3.2024061.1 (#10470)
  web: bump the babel group across 1 directory with 2 updates (#10471)
  web: bump the storybook group across 1 directory with 7 updates (#10472)
  core: bump coverage from 7.5.4 to 7.6.0 (#10473)
  website/docs: air gapped: clarify .env usage at the top for Kubernetes installations (#10447)
  website/docs: air gapped: update "see configuration" wording (#10448)
  website/docs: Add Kubernetes Bootstrap Instructions (#9541)
  ...
This commit is contained in:
Ken Sternberg
2024-07-15 08:07:38 -07:00
parent 2226c8cdbb 7a74baaf8e
commit dd625d57df
328 changed files with 19166 additions and 14136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/elements/Base.ts
View File

@ -77,7 +77,8 @@ export class AKElement extends LitElement {
}
async getTheme(): Promise<UiThemeEnum> {
return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
// return rootInterface()?.getTheme() || UiThemeEnum.Automatic;
return rootInterface()?.getTheme() || UiThemeEnum.Light;
}
fixElementStyles() {
@ -90,12 +91,9 @@ export class AKElement extends LitElement {
async _initTheme(root: DocumentOrShadowRoot): Promise<void> {
// Early activate theme based on media query to prevent light flash
// when dark is preferred
this._activateTheme(
root,
window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches
? UiThemeEnum.Light
: UiThemeEnum.Dark,
);
// const pref = window.matchMedia(QUERY_MEDIA_COLOR_LIGHT).matches ? UiThemeEnum.Light : UiThemeEnum.Dark;
// this._activateTheme(root, pref);
this._activateTheme(root, UiThemeEnum.Light);
this._applyTheme(root, await this.getTheme());
}

63
web/src/elements/EmptyState.test.ts Normal file
View File

@ -0,0 +1,63 @@
import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
import { $, expect } from "@wdio/globals";
import { msg } from "@lit/localize";
import { TemplateResult, html, render as litRender } from "lit";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "./EmptyState.js";
const render = (body: TemplateResult) => {
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
ensureCSSStyleSheet(PFBase),
ensureCSSStyleSheet(AKGlobal),
];
return litRender(body, document.body);
};
describe("ak-empty-state", () => {
it("should render the default loader", async () => {
render(html`<ak-empty-state ?loading=${true} header=${msg("Loading")}> </ak-empty-state>`);
const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
await expect(empty).toExist();
const header = await $("ak-empty-state").$(">>>.pf-c-title");
await expect(header).toHaveText("Loading");
});
it("should handle standard boolean", async () => {
render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`);
const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
await expect(empty).toExist();
const header = await $("ak-empty-state").$(">>>.pf-c-title");
await expect(header).toHaveText("Loading");
});
it("should render a static empty state", async () => {
render(html`<ak-empty-state header=${msg("No messages found")}> </ak-empty-state>`);
const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
await expect(empty).toExist();
await expect(empty).toHaveClass("fa-question-circle");
const header = await $("ak-empty-state").$(">>>.pf-c-title");
await expect(header).toHaveText("No messages found");
});
it("should render a slotted message", async () => {
render(
html`<ak-empty-state header=${msg("No messages found")}>
<p slot="body">Try again with a different filter</p>
</ak-empty-state>`,
);
const message = await $("ak-empty-state").$(">>>.pf-c-empty-state__body").$(">>>p");
await expect(message).toHaveText("Try again with a different filter");
});
});

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

@ -78,7 +78,7 @@ export class Markdown extends AKElement {
const pathName = path.replace(".md", "");
const link = `docs/${baseName}${pathName}`;
const url = new URL(link, baseUrl).toString();
return `href="${url}" _target="blank"`;
return `href="${url}" _target="blank" rel="noopener noreferrer"`;
});
}

2
web/src/elements/ak-dual-select/components/ak-pagination.ts
View File

@ -59,7 +59,7 @@ export class AkPagination extends CustomEmitterElement(AKElement) {
</span>
</div>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<nav class="pf-c-pagination__nav" aria-label=${msg("Pagination")}>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"

3
web/src/elements/buttons/ModalButton.ts
View File

@ -5,6 +5,7 @@ import {
ModalShowEvent,
} from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -115,7 +116,7 @@ export class ModalButton extends AKElement {
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close dialog"
aria-label=${msg("Close dialog")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

2
web/src/elements/events/LogViewer.ts
View File

@ -23,7 +23,7 @@ export class LogViewer extends Table<LogEvent> {
return super.styles.concat(PFDescriptionList);
}
async apiEndpoint(_page: number): Promise<PaginatedResponse<LogEvent>> {
async apiEndpoint(): Promise<PaginatedResponse<LogEvent>> {
return {
pagination: {
next: 0,

3
web/src/elements/forms/FormGroup.ts
View File

@ -1,5 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -26,7 +27,7 @@ export class FormGroup extends AKElement {
expanded = false;
@property({ type: String, attribute: "aria-label", reflect: true })
ariaLabel = "Details";
ariaLabel = msg("Details");
static get styles(): CSSResult[] {
return [

2
web/src/elements/notifications/APIDrawer.ts
View File

@ -101,7 +101,7 @@ export class APIDrawer extends AKElement {
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close"
aria-label=${msg("Close")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

15
web/src/elements/oauth/UserAccessTokenList.ts
View File

@ -1,5 +1,4 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-status-label";
import "@goauthentik/elements/chips/Chip";
@ -27,17 +26,15 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
return super.styles.concat(PFFlex);
}
async apiEndpoint(page: number): Promise<PaginatedResponse<TokenModel>> {
async apiEndpoint(): Promise<PaginatedResponse<TokenModel>> {
return new Oauth2Api(DEFAULT_CONFIG).oauth2AccessTokensList({
...(await this.defaultEndpointConfig()),
user: this.userId,
ordering: "expires",
page: page,
pageSize: (await uiConfig()).pagination.perPage,
});
}
checkbox = true;
order = "-expires";
order = "expires";
columns(): TableColumn[] {
return [
@ -66,15 +63,15 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${msg("Refresh Tokens(s)")}
objectLabel=${msg("Access Tokens(s)")}
.objects=${this.selectedElements}
.usedBy=${(item: ExpiringBaseGrantModel) => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
return new Oauth2Api(DEFAULT_CONFIG).oauth2AccessTokensUsedByList({
id: item.pk,
});
}}
.delete=${(item: ExpiringBaseGrantModel) => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDestroy({
return new Oauth2Api(DEFAULT_CONFIG).oauth2AccessTokensDestroy({
id: item.pk,
});
}}

9
web/src/elements/oauth/UserRefreshTokenList.ts
View File

@ -1,5 +1,4 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-status-label";
import "@goauthentik/elements/chips/Chip";
@ -27,18 +26,16 @@ export class UserOAuthRefreshTokenList extends Table<TokenModel> {
return super.styles.concat(PFFlex);
}
async apiEndpoint(page: number): Promise<PaginatedResponse<TokenModel>> {
async apiEndpoint(): Promise<PaginatedResponse<TokenModel>> {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensList({
...(await this.defaultEndpointConfig()),
user: this.userId,
ordering: "expires",
page: page,
pageSize: (await uiConfig()).pagination.perPage,
});
}
checkbox = true;
clearOnRefresh = true;
order = "-expires";
order = "expires";
columns(): TableColumn[] {
return [

87
web/src/elements/rbac/ObjectPermissionModal.ts
View File

@ -1,87 +0,0 @@
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/forms/ModalForm";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/rbac/ObjectPermissionsPage";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { RbacPermissionsAssignedByUsersListModelEnum } from "@goauthentik/api";
/**
* This is a bit of a hack to get the viewport checking from ModelForm,
* even though we actually don't need a form here.
* #TODO: Rework this in the future
*/
@customElement("ak-rbac-object-permission-modal-form")
export class ObjectPermissionsPageForm extends ModelForm<unknown, string> {
@property()
model?: RbacPermissionsAssignedByUsersListModelEnum;
@property()
objectPk?: string | number;
loadInstance(): Promise<unknown> {
return Promise.resolve();
}
send(): Promise<unknown> {
return Promise.resolve();
}
renderForm(): TemplateResult {
return html`<ak-rbac-object-permission-page
.model=${this.model}
.objectPk=${this.objectPk}
slot="form"
.embedded=${true}
>
</ak-rbac-object-permission-page>`;
}
}
@customElement("ak-rbac-object-permission-modal")
export class ObjectPermissionModal extends AKElement {
@property()
model?: RbacPermissionsAssignedByUsersListModelEnum;
@property()
objectPk?: string | number;
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFBanner];
}
render(): TemplateResult {
return html`
<ak-forms-modal .showSubmitButton=${false} cancelText=${msg("Close")}>
<span slot="header"> ${msg("Update Permissions")} </span>
<div class="pf-c-banner pf-m-info" slot="above-form">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>
<ak-rbac-object-permission-modal-form
slot="form"
.model=${this.model}
.objectPk=${this.objectPk}
></ak-rbac-object-permission-modal-form>
<button slot="trigger" class="pf-c-button pf-m-plain">
<pf-tooltip position="top" content=${msg("Permissions")}>
<i class="fas fa-lock"></i>
</pf-tooltip>
</button>
</ak-forms-modal>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-object-permission-modal-form": ObjectPermissionsPageForm;
"ak-rbac-object-permission-modal": ObjectPermissionModal;
}
}

195
web/src/elements/rbac/ObjectPermissionsPage.ts
View File

@ -1,195 +0,0 @@
import "@goauthentik/admin/roles/RoleAssignedGlobalPermissionsTable";
import "@goauthentik/admin/roles/RoleAssignedObjectPermissionTable";
import "@goauthentik/admin/users/UserAssignedGlobalPermissionsTable";
import "@goauthentik/admin/users/UserAssignedObjectPermissionsTable";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/rbac/RoleObjectPermissionTable";
import "@goauthentik/elements/rbac/UserObjectPermissionTable";
import { msg } from "@lit/localize";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { RbacPermissionsAssignedByUsersListModelEnum } from "@goauthentik/api";
@customElement("ak-rbac-object-permission-page")
export class ObjectPermissionPage extends AKElement {
@property()
model?: RbacPermissionsAssignedByUsersListModelEnum;
@property()
objectPk?: string | number;
@property({ type: Boolean })
embedded = false;
static get styles() {
return [PFBase, PFGrid, PFPage, PFCard, PFBanner];
}
render() {
return html`${!this.embedded
? html`<div class="pf-c-banner pf-m-info">
${msg("RBAC is in preview.")}
<a href="mailto:hello@goauthentik.io">${msg("Send us feedback!")}</a>
</div>`
: nothing}
<ak-tabs pageIdentifier="permissionPage" ?vertical=${!this.embedded}>
${this.model === RbacPermissionsAssignedByUsersListModelEnum.CoreUser
? this.renderCoreUser()
: nothing}
${this.model === RbacPermissionsAssignedByUsersListModelEnum.RbacRole
? this.renderRbacRole()
: nothing}
<section
slot="page-object-user"
data-tab-title="${msg("User Object Permissions")}"
class="pf-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("User Object Permissions")}</div>
<div class="pf-c-card__body">
${msg("Permissions set on users which affect this object.")}
</div>
<div class="pf-c-card__body">
<ak-rbac-user-object-permission-table
.model=${this.model}
.objectPk=${this.objectPk}
>
</ak-rbac-user-object-permission-table>
</div>
</div>
</div>
</section>
<section
slot="page-object-role"
data-tab-title="${msg("Role Object Permissions")}"
class="pf-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("Role Object Permissions")}</div>
<div class="pf-c-card__body">
${msg("Permissions set on roles which affect this object.")}
</div>
<div class="pf-c-card__body">
<ak-rbac-role-object-permission-table
.model=${this.model}
.objectPk=${this.objectPk}
>
</ak-rbac-role-object-permission-table>
</div>
</div>
</div>
</section>
</ak-tabs>`;
}
renderCoreUser() {
return html`
<div
slot="page-assigned-global-permissions"
data-tab-title="${msg("Assigned global permissions")}"
>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div>
<div class="pf-c-card__body">
${msg(
"Permissions assigned to this user which affect all object instances of a given type.",
)}
</div>
<div class="pf-c-card__body">
<ak-user-assigned-global-permissions-table
userId=${this.objectPk as number}
>
</ak-user-assigned-global-permissions-table>
</div>
</div>
</section>
</div>
<div
slot="page-assigned-object-permissions"
data-tab-title="${msg("Assigned object permissions")}"
>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<div class="pf-c-card__title">${msg("Assigned object permissions")}</div>
<div class="pf-c-card__body">
${msg(
"Permissions assigned to this user affecting specific object instances.",
)}
</div>
<div class="pf-c-card__body">
<ak-user-assigned-object-permissions-table
userId=${this.objectPk as number}
>
</ak-user-assigned-object-permissions-table>
</div>
</div>
</section>
</div>
`;
}
renderRbacRole() {
return html`
<div
slot="page-assigned-global-permissions"
data-tab-title="${msg("Assigned global permissions")}"
>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<div class="pf-c-card__title">${msg("Assigned global permissions")}</div>
<div class="pf-c-card__body">
${msg(
"Permissions assigned to this role which affect all object instances of a given type.",
)}
</div>
<div class="pf-c-card__body">
<ak-role-assigned-global-permissions-table
roleUuid=${this.objectPk as string}
>
</ak-role-assigned-global-permissions-table>
</div>
</div>
</section>
</div>
<div
slot="page-assigned-object-permissions"
data-tab-title="${msg("Assigned object permissions")}"
>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<div class="pf-c-card__title">${msg("Assigned object permissions")}</div>
<div class="pf-c-card__body">
${msg(
"Permissions assigned to this user affecting specific object instances.",
)}
</div>
<div class="pf-c-card__body">
<ak-role-assigned-object-permissions-table
roleUuid=${this.objectPk as string}
>
</ak-role-assigned-object-permissions-table>
</div>
</div>
</section>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-object-permission-page": ObjectPermissionPage;
}
}

101
web/src/elements/rbac/PermissionSelectModal.ts
View File

@ -1,101 +0,0 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/buttons/SpinnerButton";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { TableColumn } from "@goauthentik/elements/table/Table";
import { TableModal } from "@goauthentik/elements/table/TableModal";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
import { Permission, RbacApi } from "@goauthentik/api";
@customElement("ak-rbac-permission-select-table")
export class PermissionSelectModal extends TableModal<Permission> {
checkbox = true;
checkboxChip = true;
searchEnabled(): boolean {
return true;
}
@property()
confirm!: (selectedItems: Permission[]) => Promise<unknown>;
order = "content_type__app_label,content_type__model";
static get styles(): CSSResult[] {
return super.styles.concat(PFBanner);
}
async apiEndpoint(page: number): Promise<PaginatedResponse<Permission>> {
return new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
ordering: this.order,
page: page,
pageSize: (await uiConfig()).pagination.perPage,
search: this.search || "",
});
}
groupBy(items: Permission[]): [string, Permission[]][] {
return groupBy(items, (perm) => {
return perm.appLabelVerbose;
});
}
columns(): TableColumn[] {
return [new TableColumn(msg("Name"), "codename"), new TableColumn(msg("Model"), "")];
}
row(item: Permission): TemplateResult[] {
return [
html`<div>
<div>${item.name}</div>
</div>`,
html`${item.modelVerbose}`,
];
}
renderSelectedChip(item: Permission): TemplateResult {
return html`${item.name}`;
}
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 permissions to assign")}</h1>
</div>
</section>
<section class="pf-c-modal-box__body pf-m-light">${this.renderTable()}</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
return this.confirm(this.selectedElements).then(() => {
this.open = false;
});
}}
class="pf-m-primary"
>
${msg("Add")} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary"
>
${msg("Cancel")}
</ak-spinner-button>
</footer>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-permission-select-table": PermissionSelectModal;
}
}

113
web/src/elements/rbac/RoleObjectPermissionForm.ts
View File

@ -1,113 +0,0 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/components/ak-toggle-group";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import {
ModelEnum,
PaginatedPermissionList,
RbacApi,
RbacRolesListRequest,
Role,
} from "@goauthentik/api";
interface RoleAssignData {
role: string;
permissions: {
[key: string]: boolean;
};
}
@customElement("ak-rbac-role-object-permission-form")
export class RoleObjectPermissionForm extends ModelForm<RoleAssignData, number> {
@property()
model?: ModelEnum;
@property()
objectPk?: string;
@state()
modelPermissions?: PaginatedPermissionList;
async load(): Promise<void> {
const [appLabel, modelName] = (this.model || "").split(".");
this.modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
contentTypeModel: modelName,
contentTypeAppLabel: appLabel,
ordering: "codename",
});
}
loadInstance(): Promise<RoleAssignData> {
throw new Error("Method not implemented.");
}
getSuccessMessage(): string {
return msg("Successfully assigned permission.");
}
send(data: RoleAssignData): Promise<unknown> {
return new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesAssignCreate({
uuid: data.role,
permissionAssignRequest: {
permissions: Object.keys(data.permissions).filter((key) => data.permissions[key]),
model: this.model!,
objectPk: this.objectPk,
},
});
}
renderForm(): TemplateResult {
if (!this.modelPermissions) {
return html``;
}
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("Role")} name="role">
<ak-search-select
.fetchObjects=${async (query?: string): Promise<Role[]> => {
const args: RbacRolesListRequest = {
ordering: "name",
};
if (query !== undefined) {
args.search = query;
}
const roles = await new RbacApi(DEFAULT_CONFIG).rbacRolesList(args);
return roles.results;
}}
.renderElement=${(role: Role): string => {
return role.name;
}}
.value=${(role: Role | undefined): string | undefined => {
return role?.pk;
}}
>
</ak-search-select>
</ak-form-element-horizontal>
${this.modelPermissions?.results.map((perm) => {
return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
<label class="pf-c-switch">
<input class="pf-c-switch__input" type="checkbox" />
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${perm.name}</span>
</label>
</ak-form-element-horizontal>`;
})}
</form>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-role-object-permission-form": RoleObjectPermissionForm;
}
}

129
web/src/elements/rbac/RoleObjectPermissionTable.ts
View File

@ -1,129 +0,0 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm";
import "@goauthentik/elements/rbac/RoleObjectPermissionForm";
import { PaginatedResponse, Table, TableColumn } from "@goauthentik/elements/table/Table";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
PaginatedPermissionList,
RbacApi,
RbacPermissionsAssignedByRolesListModelEnum,
RoleAssignedObjectPermission,
} from "@goauthentik/api";
@customElement("ak-rbac-role-object-permission-table")
export class RoleAssignedObjectPermissionTable extends Table<RoleAssignedObjectPermission> {
@property()
model?: RbacPermissionsAssignedByRolesListModelEnum;
@property()
objectPk?: string | number;
@state()
modelPermissions?: PaginatedPermissionList;
checkbox = true;
clearOnRefresh = true;
async apiEndpoint(page: number): Promise<PaginatedResponse<RoleAssignedObjectPermission>> {
const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByRolesList({
page: page,
// TODO: better default
model: this.model || RbacPermissionsAssignedByRolesListModelEnum.CoreUser,
objectPk: this.objectPk?.toString(),
});
const [appLabel, modelName] = (this.model || "").split(".");
const modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
contentTypeModel: modelName,
contentTypeAppLabel: appLabel,
ordering: "codename",
});
modelPermissions.results = modelPermissions.results.filter((value) => {
return !value.codename.startsWith("add_");
});
this.modelPermissions = modelPermissions;
return perms;
}
columns(): TableColumn[] {
const baseColumns = [new TableColumn("User", "user")];
// We don't check pagination since models shouldn't need to have that many permissions?
this.modelPermissions?.results.forEach((perm) => {
baseColumns.push(new TableColumn(perm.name, perm.codename));
});
return baseColumns;
}
renderObjectCreate(): TemplateResult {
return html`<ak-forms-modal>
<span slot="submit"> ${msg("Assign")} </span>
<span slot="header"> ${msg("Assign permission to role")} </span>
<ak-rbac-role-object-permission-form
model=${ifDefined(this.model)}
objectPk=${ifDefined(this.objectPk)}
slot="form"
>
</ak-rbac-role-object-permission-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${msg("Assign to new role")}
</button>
</ak-forms-modal>`;
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${msg("Permission(s)")}
.objects=${this.selectedElements}
.metadata=${(item: RoleAssignedObjectPermission) => {
return [{ key: msg("Permission"), value: item.name }];
}}
.delete=${(item: RoleAssignedObjectPermission) => {
return new RbacApi(
DEFAULT_CONFIG,
).rbacPermissionsAssignedByRolesUnassignPartialUpdate({
uuid: item.rolePk,
patchedPermissionAssignRequest: {
objectPk: this.objectPk?.toString(),
model: this.model,
permissions: item.permissions.map((perm) => {
return `${perm.appLabel}.${perm.codename}`;
}),
},
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
row(item: RoleAssignedObjectPermission): TemplateResult[] {
const baseRow = [html` <a href="#/identity/roles/${item.rolePk}">${item.name}</a>`];
this.modelPermissions?.results.forEach((perm) => {
const granted =
item.permissions.filter((uperm) => uperm.codename === perm.codename).length > 0;
baseRow.push(
html`${granted
? html`<pf-tooltip position="top" content=${msg("Directly assigned")}
><i class="fas fa-check pf-m-success"></i
></pf-tooltip>`
: html`<i class="fas fa-times pf-m-danger"></i>`} `,
);
});
return baseRow;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-role-object-permission-table": RoleAssignedObjectPermissionTable;
}
}

122
web/src/elements/rbac/UserObjectPermissionForm.ts
View File

@ -1,122 +0,0 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/components/ak-toggle-group";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import {
CoreApi,
CoreUsersListRequest,
ModelEnum,
PaginatedPermissionList,
RbacApi,
User,
} from "@goauthentik/api";
interface UserAssignData {
user: number;
permissions: {
[key: string]: boolean;
};
}
@customElement("ak-rbac-user-object-permission-form")
export class UserObjectPermissionForm extends ModelForm<UserAssignData, number> {
@property()
model?: ModelEnum;
@property()
objectPk?: string;
@state()
modelPermissions?: PaginatedPermissionList;
async load(): Promise<void> {
const [appLabel, modelName] = (this.model || "").split(".");
this.modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
contentTypeModel: modelName,
contentTypeAppLabel: appLabel,
ordering: "codename",
});
}
loadInstance(): Promise<UserAssignData> {
throw new Error("Method not implemented.");
}
getSuccessMessage(): string {
return msg("Successfully assigned permission.");
}
send(data: UserAssignData): Promise<unknown> {
return new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByUsersAssignCreate({
id: data.user,
permissionAssignRequest: {
permissions: Object.keys(data.permissions).filter((key) => data.permissions[key]),
model: this.model!,
objectPk: this.objectPk!,
},
});
}
renderForm(): TemplateResult {
if (!this.modelPermissions) {
return html``;
}
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${msg("User")} name="user">
<ak-search-select
.fetchObjects=${async (query?: string): Promise<User[]> => {
const args: CoreUsersListRequest = {
ordering: "username",
};
if (query !== undefined) {
args.search = query;
}
const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
return users.results;
}}
.renderElement=${(user: User): string => {
return user.username;
}}
.renderDescription=${(user: User): TemplateResult => {
return html`${user.name}`;
}}
.value=${(user: User | undefined): number | undefined => {
return user?.pk;
}}
>
</ak-search-select>
</ak-form-element-horizontal>
${this.modelPermissions?.results
.filter((perm) => {
const [_app, model] = this.model?.split(".") || "";
return perm.codename !== `add_${model}`;
})
.map((perm) => {
return html` <ak-form-element-horizontal name="permissions.${perm.codename}">
<label class="pf-c-switch">
<input class="pf-c-switch__input" type="checkbox" />
<span class="pf-c-switch__toggle">
<span class="pf-c-switch__toggle-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${perm.name}</span>
</label>
</ak-form-element-horizontal>`;
})}
</form>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-user-object-permission-form": UserObjectPermissionForm;
}
}

136
web/src/elements/rbac/UserObjectPermissionTable.ts
View File

@ -1,136 +0,0 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm";
import "@goauthentik/elements/rbac/UserObjectPermissionForm";
import { PaginatedResponse, Table, TableColumn } from "@goauthentik/elements/table/Table";
import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
PaginatedPermissionList,
RbacApi,
RbacPermissionsAssignedByUsersListModelEnum,
UserAssignedObjectPermission,
} from "@goauthentik/api";
@customElement("ak-rbac-user-object-permission-table")
export class UserAssignedObjectPermissionTable extends Table<UserAssignedObjectPermission> {
@property()
model?: RbacPermissionsAssignedByUsersListModelEnum;
@property()
objectPk?: string | number;
@state()
modelPermissions?: PaginatedPermissionList;
checkbox = true;
clearOnRefresh = true;
async apiEndpoint(page: number): Promise<PaginatedResponse<UserAssignedObjectPermission>> {
const perms = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsAssignedByUsersList({
page: page,
// TODO: better default
model: this.model || RbacPermissionsAssignedByUsersListModelEnum.CoreUser,
objectPk: this.objectPk?.toString(),
});
const [appLabel, modelName] = (this.model || "").split(".");
const modelPermissions = await new RbacApi(DEFAULT_CONFIG).rbacPermissionsList({
contentTypeModel: modelName,
contentTypeAppLabel: appLabel,
ordering: "codename",
});
modelPermissions.results = modelPermissions.results.filter((value) => {
return value.codename !== `add_${this.model?.split(".")[1]}`;
});
this.modelPermissions = modelPermissions;
return perms;
}
columns(): TableColumn[] {
const baseColumns = [new TableColumn("User", "user")];
// We don't check pagination since models shouldn't need to have that many permissions?
this.modelPermissions?.results.forEach((perm) => {
baseColumns.push(new TableColumn(perm.name, perm.codename));
});
return baseColumns;
}
renderObjectCreate(): TemplateResult {
return html`<ak-forms-modal>
<span slot="submit"> ${msg("Assign")} </span>
<span slot="header"> ${msg("Assign permission to user")} </span>
<ak-rbac-user-object-permission-form
model=${ifDefined(this.model)}
objectPk=${ifDefined(this.objectPk)}
slot="form"
>
</ak-rbac-user-object-permission-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${msg("Assign to new user")}
</button>
</ak-forms-modal>`;
}
renderToolbarSelected(): TemplateResult {
const disabled =
this.selectedElements.length < 1 ||
this.selectedElements.filter((item) => item.isSuperuser).length > 0;
return html`<ak-forms-delete-bulk
objectLabel=${msg("Permission(s)")}
.objects=${this.selectedElements.filter((item) => !item.isSuperuser)}
.metadata=${(item: UserAssignedObjectPermission) => {
return [{ key: msg("Permission"), value: item.name }];
}}
.delete=${(item: UserAssignedObjectPermission) => {
if (item.isSuperuser) {
return Promise.resolve();
}
return new RbacApi(
DEFAULT_CONFIG,
).rbacPermissionsAssignedByUsersUnassignPartialUpdate({
id: item.pk,
patchedPermissionAssignRequest: {
objectPk: this.objectPk?.toString(),
model: this.model,
permissions: item.permissions.map((perm) => {
return `${perm.appLabel}.${perm.codename}`;
}),
},
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
row(item: UserAssignedObjectPermission): TemplateResult[] {
const baseRow = [html` <a href="#/identity/users/${item.pk}"> ${item.username} </a> `];
this.modelPermissions?.results.forEach((perm) => {
let cell = html`<i class="fas fa-times pf-m-danger"></i>`;
if (item.permissions.filter((uperm) => uperm.codename === perm.codename).length > 0) {
cell = html`<pf-tooltip position="top" content=${msg("Directly assigned")}
><i class="fas fa-check pf-m-success"></i
></pf-tooltip>`;
} else if (item.isSuperuser) {
cell = html`<pf-tooltip position="top" content=${msg("Superuser")}
><i class="fas fa-check pf-m-success"></i
></pf-tooltip>`;
}
baseRow.push(cell);
});
return baseRow;
}
}
declare global {
interface HTMLElementTagNameMap {
"ak-rbac-user-object-permission-table": UserAssignedObjectPermissionTable;
}
}

3
web/src/elements/sidebar/Sidebar.ts
View File

@ -2,6 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/sidebar/SidebarBrand";
import "@goauthentik/elements/sidebar/SidebarUser";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js";
@ -68,7 +69,7 @@ export class Sidebar extends AKElement {
render(): TemplateResult {
return html`<nav
class="pf-c-nav ${this.activeTheme === UiThemeEnum.Light ? "pf-m-light" : ""}"
aria-label="Global"
aria-label=${msg("Global")}
>
<ak-sidebar-brand></ak-sidebar-brand>
<ul class="pf-c-nav__list">

14
web/src/elements/table/Table.ts
View File

@ -1,5 +1,6 @@
import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { APIErrorTypes, parseAPIError } from "@goauthentik/common/errors";
import { uiConfig } from "@goauthentik/common/ui/config";
import { groupBy } from "@goauthentik/common/utils";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
@ -95,7 +96,7 @@ export interface PaginatedResponse<T> {
}
export abstract class Table<T> extends AKElement implements TableLike {
abstract apiEndpoint(page: number): Promise<PaginatedResponse<T>>;
abstract apiEndpoint(): Promise<PaginatedResponse<T>>;
abstract columns(): TableColumn[];
abstract row(item: T): TemplateResult[];
@ -203,6 +204,15 @@ export abstract class Table<T> extends AKElement implements TableLike {
}
}
async defaultEndpointConfig() {
return {
ordering: this.order,
page: this.page,
pageSize: (await uiConfig()).pagination.perPage,
search: this.searchEnabled() ? this.search || "" : undefined,
};
}
public groupBy(items: T[]): [string, T[]][] {
return groupBy(items, () => {
return "";
@ -215,7 +225,7 @@ export abstract class Table<T> extends AKElement implements TableLike {
}
this.isLoading = true;
try {
this.data = await this.apiEndpoint(this.page);
this.data = await this.apiEndpoint();
this.error = undefined;
this.page = this.data.pagination.current;
const newExpanded: T[] = [];

3
web/src/elements/table/TableModal.ts
View File

@ -4,6 +4,7 @@ import { MODAL_BUTTON_STYLES } from "@goauthentik/elements/buttons/ModalButton";
import { ModalShowEvent } from "@goauthentik/elements/controllers/ModalOrchestrationController.js";
import { Table } from "@goauthentik/elements/table/Table";
import { msg } from "@lit/localize";
import { CSSResult } from "lit";
import { TemplateResult, html } from "lit";
import { property } from "lit/decorators.js";
@ -92,7 +93,7 @@ export abstract class TableModal<T> extends Table<T> {
@click=${() => (this.open = false)}
class="pf-c-button pf-m-plain"
type="button"
aria-label="Close dialog"
aria-label=${msg("Close dialog")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>

2
web/src/elements/table/TablePagination.ts
View File

@ -52,7 +52,7 @@ export class TablePagination extends AKElement {
</span>
</div>
</div>
<nav class="pf-c-pagination__nav" aria-label="Pagination">
<nav class="pf-c-pagination__nav" aria-label=${msg("Pagination")}>
<div class="pf-c-pagination__nav-control pf-m-prev">
<button
class="pf-c-button pf-m-plain"

7
web/src/elements/user/SessionList.ts
View File

@ -1,5 +1,4 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
@ -17,12 +16,10 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
@property()
targetUser!: string;
async apiEndpoint(page: number): Promise<PaginatedResponse<AuthenticatedSession>> {
async apiEndpoint(): Promise<PaginatedResponse<AuthenticatedSession>> {
return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsList({
...(await this.defaultEndpointConfig()),
userUsername: this.targetUser,
ordering: this.order,
page: page,
pageSize: (await uiConfig()).pagination.perPage,
});
}

7
web/src/elements/user/UserConsentList.ts
View File

@ -1,5 +1,4 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { uiConfig } from "@goauthentik/common/ui/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup";
@ -18,12 +17,10 @@ export class UserConsentList extends Table<UserConsent> {
@property({ type: Number })
userId?: number;
async apiEndpoint(page: number): Promise<PaginatedResponse<UserConsent>> {
async apiEndpoint(): Promise<PaginatedResponse<UserConsent>> {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentList({
...(await this.defaultEndpointConfig()),
user: this.userId,
ordering: this.order,
page: page,
pageSize: (await uiConfig()).pagination.perPage,
});
}

80
web/src/elements/user/UserReputationList.ts Normal file
View File

@ -0,0 +1,80 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { getRelativeTime } from "@goauthentik/common/utils";
import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import getUnicodeFlagIcon from "country-flag-icons/unicode";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { PoliciesApi, Reputation } from "@goauthentik/api";
@customElement("ak-user-reputation-list")
export class UserReputationList extends Table<Reputation> {
@property()
targetUsername!: string;
@property()
targetEmail!: string | undefined;
async apiEndpoint(): Promise<PaginatedResponse<Reputation>> {
const identifiers = [this.targetUsername];
if (this.targetEmail !== undefined) {
identifiers.push(this.targetEmail);
}
return new PoliciesApi(DEFAULT_CONFIG).policiesReputationScoresList({
...(await this.defaultEndpointConfig()),
identifierIn: identifiers,
});
}
checkbox = true;
clearOnRefresh = true;
order = "identifier";
columns(): TableColumn[] {
return [
new TableColumn(msg("Identifier"), "identifier"),
new TableColumn(msg("IP"), "ip"),
new TableColumn(msg("Score"), "score"),
new TableColumn(msg("Updated"), "updated"),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${msg("Reputation score(s)")}
.objects=${this.selectedElements}
.usedBy=${(item: Reputation) => {
return new PoliciesApi(DEFAULT_CONFIG).policiesReputationScoresUsedByList({
reputationUuid: item.pk || "",
});
}}
.delete=${(item: Reputation) => {
return new PoliciesApi(DEFAULT_CONFIG).policiesReputationScoresDestroy({
reputationUuid: item.pk || "",
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
row(item: Reputation): TemplateResult[] {
return [
html`${item.identifier}`,
html`${item.ipGeoData?.country
? html` ${getUnicodeFlagIcon(item.ipGeoData.country)} `
: html``}
${item.ip}`,
html`${item.score}`,
html`<div>${getRelativeTime(item.updated)}</div>
<small>${item.updated.toLocaleString()}</small>`,
];
}
}