web: add user authorization codes and refresh codes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/oauth/UserCodeList.ts

@@ -0,0 +1,57 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { Table, TableColumn } from "../table/Table";
+
+import "../forms/DeleteForm";
+import { PAGE_SIZE } from "../../constants";
+import { ExpiringBaseGrantModel, Oauth2Api } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+
+@customElement("ak-user-oauth-code-list")
+export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
+    @property()
+    userId?: string;
+
+    apiEndpoint(page: number): Promise<AKResponse<ExpiringBaseGrantModel>> {
+        return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesList({
+            user: this.userId,
+            ordering: "expires",
+            page: page,
+            pageSize: PAGE_SIZE,
+        });
+    }
+
+    order = "-expires";
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Provider", "provider"),
+            new TableColumn("Expires", "expires"),
+            new TableColumn("Scopes", "scope"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: ExpiringBaseGrantModel): TemplateResult[] {
+        return [
+            html`${item.provider}`,
+            html`${item.expires?.toLocaleString()}`,
+            html`${item.scope}`,
+            html`
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Authorization Code")}
+                .delete=${() => {
+                    return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDelete({
+                        id: item.pk || 0,
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
+                    ${gettext("Delete Authorization Code")}
+                </button>
+            </ak-forms-delete>`,
+        ];
+    }
+
+}

web/src/elements/oauth/UserRefreshList.ts

@@ -0,0 +1,57 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { Table, TableColumn } from "../table/Table";
+
+import "../forms/DeleteForm";
+import { PAGE_SIZE } from "../../constants";
+import { ExpiringBaseGrantModel, Oauth2Api } from "authentik-api";
+import { DEFAULT_CONFIG } from "../../api/Config";
+
+@customElement("ak-user-oauth-refresh-list")
+export class UserOAuthRefreshList extends Table<ExpiringBaseGrantModel> {
+    @property()
+    userId?: string;
+
+    apiEndpoint(page: number): Promise<AKResponse<ExpiringBaseGrantModel>> {
+        return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensList({
+            user: this.userId,
+            ordering: "expires",
+            page: page,
+            pageSize: PAGE_SIZE,
+        });
+    }
+
+    order = "-expires";
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Provider", "provider"),
+            new TableColumn("Expires", "expires"),
+            new TableColumn("Scopes", "scope"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: ExpiringBaseGrantModel): TemplateResult[] {
+        return [
+            html`${item.provider}`,
+            html`${item.expires?.toLocaleString()}`,
+            html`${item.scope}`,
+            html`
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Refresh Code")}
+                .delete=${() => {
+                    return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDelete({
+                        id: item.pk || 0,
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
+                    ${gettext("Delete Refresh Code")}
+                </button>
+            </ak-forms-delete>`,
+        ];
+    }
+
+}

web/src/pages/users/UserViewPage.ts

@@ -18,6 +18,8 @@ import "../../elements/CodeMirror";
 import "../../elements/Tabs";
 import "../../elements/events/ObjectChangelog";
 import "../../elements/user/UserConsentList";
+import "../../elements/oauth/UserCodeList";
+import "../../elements/oauth/UserRefreshList";
 import { Page } from "../../elements/Page";
 import { CoreApi, User } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -91,6 +93,22 @@ export class UserViewPage extends Page {
                         </div>
                     </div>
                 </section>
+                <section slot="page-4" data-tab-title="${gettext("OAuth Authorization Codes")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-user-oauth-code-list .userId="${(this.user.pk || 0).toString()}">
+                            </ak-user-oauth-code-list>
+                        </div>
+                    </div>
+                </section>
+                <section slot="page-5" data-tab-title="${gettext("OAuth Refresh Codes")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <ak-user-oauth-refresh-list .userId="${(this.user.pk || 0).toString()}">
+                            </ak-user-oauth-refresh-list>
+                        </div>
+                    </div>
+                </section>
             </ak-tabs>`;
     }
 }