core: show all applications a user can access in admin interface (#8343)

* core: show all applications a user can access in admin interface Signed-off-by: Jens Langhammer <jens@goauthentik.io> * minor adjustments Signed-off-by: Jens Langhammer <jens@goauthentik.io> * add relative time Signed-off-by: Jens Langhammer <jens@goauthentik.io> * use relative time in most places Signed-off-by: Jens Langhammer <jens@goauthentik.io> * improve admin dashboard scaling Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2024-01-30 01:56:33 +01:00
parent 0052e60643
commit 07ed5e1cd9
22 changed files with 245 additions and 49 deletions
--- a/web/src/admin/admin-overview/AdminOverviewPage.ts
+++ b/web/src/admin/admin-overview/AdminOverviewPage.ts
@ -79,7 +79,9 @@ export class AdminOverviewPage extends AKElement {
            <section class="pf-c-page__main-section">
                <div class="pf-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-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl pf-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">
                            <ak-aggregate-card
                                icon="fa fa-share"
@ -167,7 +169,7 @@ export class AdminOverviewPage extends AKElement {
                            <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-l-grid__item pf-m-12-col pf-m-6-col-on-xl">
                        <ak-recent-events pageSize="6"></ak-recent-events>
                    </div>
                    <div class="pf-l-grid__item pf-m-12-col">
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@ -47,6 +47,9 @@ export class RecentEventsCard extends Table<Event> {
                    --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
                    --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
                }
+                * {
+                    word-break: break-all;
+                }
            `,
        );
    }
--- a/web/src/admin/applications/ApplicationListPage.ts
+++ b/web/src/admin/applications/ApplicationListPage.ts
@ -9,7 +9,6 @@ import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import "@goauthentik/elements/forms/ModalForm";
 import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
-// import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
 import { TablePage } from "@goauthentik/elements/table/TablePage";
@ -25,6 +24,22 @@ import { Application, CoreApi } from "@goauthentik/api";

 import "./ApplicationWizardHint";

+export const applicationListStyle = css`
+    /* Fix alignment issues with images in tables */
+    .pf-c-table tbody > tr > * {
+        vertical-align: middle;
+    }
+    tr td:first-child {
+        width: auto;
+        min-width: 0px;
+        text-align: center;
+        vertical-align: middle;
+    }
+    .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
+        margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
+    }
+`;
+
@customElement("ak-application-list")
 export class ApplicationListPage extends TablePage<Application> {
    searchEnabled(): boolean {
@ -59,24 +74,7 @@ export class ApplicationListPage extends TablePage<Application> {
    }

    static get styles(): CSSResult[] {
-        return super.styles.concat(
-            PFCard,
-            css`
-                /* Fix alignment issues with images in tables */
-                .pf-c-table tbody > tr > * {
-                    vertical-align: middle;
-                }
-                tr td:first-child {
-                    width: auto;
-                    min-width: 0px;
-                    text-align: center;
-                    vertical-align: middle;
-                }
-                .pf-c-sidebar.pf-m-gutter > .pf-c-sidebar__main > * + * {
-                    margin-left: calc(var(--pf-c-sidebar__main--child--MarginLeft) / 2);
-                }
-            `,
-        );
+        return super.styles.concat(PFCard, applicationListStyle);
    }

    columns(): TableColumn[] {
@ -97,7 +95,6 @@ export class ApplicationListPage extends TablePage<Application> {
    renderSidebarAfter(): TemplateResult {
        // Rendering the wizard with .open here, as if we set the attribute in
        // renderObjectCreate() it'll open two wizards, since that function gets called twice
-
        return html`<div class="pf-c-sidebar__panel pf-m-width-25">
            <div class="pf-c-card">
                <div class="pf-c-card__body">
--- a/web/src/admin/blueprints/BlueprintListPage.ts
+++ b/web/src/admin/blueprints/BlueprintListPage.ts
@ -1,4 +1,5 @@
 import "@goauthentik/admin/blueprints/BlueprintForm";
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { uiConfig } from "@goauthentik/common/ui/config";
@ -144,7 +145,8 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
            html`<div>${item.name}</div>
                ${description ? html`<small>${description}</small>` : html``}`,
            html`${BlueprintStatus(item)}`,
-            html`${item.lastApplied.toLocaleString()}`,
+            html`<div>${getRelativeTime(item.lastApplied)}</div>
+                <small>${item.lastApplied.toLocaleString()}</small>`,
            html`<ak-status-label ?good=${item.enabled}></ak-status-label>`,
            html`<ak-forms-modal>
                    <span slot="submit"> ${msg("Update")} </span>
--- a/web/src/admin/brands/BrandListPage.ts
+++ b/web/src/admin/brands/BrandListPage.ts
@ -30,7 +30,7 @@ export class BrandListPage extends TablePage<Brand> {
        return msg("Configure visual settings and defaults for different domains.");
    }
    pageIcon(): string {
-        return "pf-icon pf-icon-brand";
+        return "pf-icon pf-icon-tenant";
    }

    checkbox = true;
@ -51,6 +51,7 @@ export class BrandListPage extends TablePage<Brand> {
    columns(): TableColumn[] {
        return [
            new TableColumn(msg("Domain"), "domain"),
+            new TableColumn(msg("Brand name"), "branding_title"),
            new TableColumn(msg("Default?"), "default"),
            new TableColumn(msg("Actions")),
        ];
@ -84,6 +85,7 @@ export class BrandListPage extends TablePage<Brand> {
    row(item: Brand): TemplateResult[] {
        return [
            html`${item.domain}`,
+            html`${item.brandingTitle}`,
            html`<ak-status-label ?good=${item._default}></ak-status-label>`,
            html`<ak-forms-modal>
                    <span slot="submit"> ${msg("Update")} </span>
--- a/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
+++ b/web/src/admin/enterprise/EnterpriseLicenseListPage.ts
@ -1,4 +1,5 @@
 import "@goauthentik/admin/enterprise/EnterpriseLicenseForm";
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import { PFColor } from "@goauthentik/elements/Label";
@ -202,7 +203,8 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
                        subtext=${msg("Cumulative license expiry")}
                    >
                        ${this.summary?.hasLicense
-                            ? this.summary.latestValid.toLocaleString()
+                            ? html`<div>${getRelativeTime(this.summary.latestValid)}</div>
+                                  <small>${this.summary.latestValid.toLocaleString()}</small>`
                            : "-"}
                    </ak-aggregate-card>
                </div>
--- a/web/src/admin/groups/MemberSelectModal.ts
+++ b/web/src/admin/groups/MemberSelectModal.ts
@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
-import { first } from "@goauthentik/common/utils";
+import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
@ -49,7 +49,10 @@ export class MemberSelectTable extends TableModal<User> {
            html`<div>${item.username}</div>
                <small>${item.name}</small>`,
            html` <ak-status-label type="warning" ?good=${item.isActive}></ak-status-label>`,
-            html`${first(item.lastLogin?.toLocaleString(), msg("-"))}`,
+            html`${item.lastLogin
+                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                      <small>${item.lastLogin.toLocaleString()}</small>`
+                : msg("-")}`,
        ];
    }

--- a/web/src/admin/groups/RelatedUserList.ts
+++ b/web/src/admin/groups/RelatedUserList.ts
@ -7,7 +7,7 @@ import { me } from "@goauthentik/app/common/users";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { uiConfig } from "@goauthentik/common/ui/config";
-import { first } from "@goauthentik/common/utils";
+import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
 import {
@ -199,7 +199,10 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
                <small>${item.name}</small>
            </a>`,
            html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
-            html`${first(item.lastLogin?.toLocaleString(), msg("-"))}`,
+            html`${item.lastLogin
+                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                      <small>${item.lastLogin.toLocaleString()}</small>`
+                : msg("-")}`,
            html`<ak-forms-modal>
                    <span slot="submit"> ${msg("Update")} </span>
                    <span slot="header"> ${msg("Update User")} </span>
--- a/web/src/admin/policies/reputation/ReputationListPage.ts
+++ b/web/src/admin/policies/reputation/ReputationListPage.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/buttons/ModalButton";
@ -92,7 +93,8 @@ export class ReputationListPage extends TablePage<Reputation> {
                : html``}
            ${item.ip}`,
            html`${item.score}`,
-            html`${item.updated.toLocaleString()}`,
+            html`<div>${getRelativeTime(item.updated)}</div>
+                <small>${item.updated.toLocaleString()}</small>`,
            html`
                <ak-rbac-object-permission-modal
                    model=${RbacPermissionsAssignedByUsersListModelEnum.PoliciesReputationReputationpolicy}
--- a/web/src/admin/system-tasks/SystemTaskListPage.ts
+++ b/web/src/admin/system-tasks/SystemTaskListPage.ts
@ -1,4 +1,5 @@
 import { uiConfig } from "@goauthentik/app/common/ui/config";
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { PFColor } from "@goauthentik/elements/Label";
@ -111,7 +112,8 @@ export class SystemTaskListPage extends TablePage<SystemTask> {
        return [
            html`${item.name}${item.uid ? `:${item.uid}` : ""}`,
            html`${item.description}`,
-            html`${item.finishTimestamp.toLocaleString()}`,
+            html`<div>${getRelativeTime(item.finishTimestamp)}</div>
+                <small>${item.finishTimestamp.toLocaleString()}</small>`,
            this.taskStatus(item),
            html`<ak-action-button
                class="pf-m-plain"
--- a/web/src/admin/tokens/TokenListPage.ts
+++ b/web/src/admin/tokens/TokenListPage.ts
@ -1,4 +1,5 @@
 import "@goauthentik/admin/tokens/TokenForm";
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { intentToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
@ -111,7 +112,10 @@ export class TokenListPage extends TablePage<Token> {
                    : html``}`,
            html`<a href="#/identity/users/${item.userObj?.pk}">${item.userObj?.username}</a>`,
            html`<ak-status-label type="warning" ?good=${item.expiring}></ak-status-label>`,
-            html`${item.expiring ? item.expires?.toLocaleString() : msg("-")}`,
+            html`${item.expires
+                ? html`<div>${getRelativeTime(item.expires)}</div>
+                      <small>${item.expires.toLocaleString()}</small>`
+                : msg("-")}`,
            html`${intentToLabel(item.intent ?? IntentEnum.Api)}`,
            html`
                ${!item.managed
--- a/web/src/admin/users/UserApplicationTable.ts
+++ b/web/src/admin/users/UserApplicationTable.ts
@ -0,0 +1,79 @@
+import { applicationListStyle } from "@goauthentik/app/admin/applications/ApplicationListPage";
+import { DEFAULT_CONFIG } from "@goauthentik/app/common/api/config";
+import { uiConfig } from "@goauthentik/app/common/ui/config";
+import { PFSize } from "@goauthentik/app/elements/Spinner";
+import { PaginatedResponse, Table, TableColumn } from "@goauthentik/app/elements/table/Table";
+import "@goauthentik/components/ak-app-icon";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { Application, CoreApi, User } from "@goauthentik/api";
+
+@customElement("ak-user-application-table")
+export class UserApplicationTable extends Table<Application> {
+    @property({ attribute: false })
+    user?: User;
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(applicationListStyle);
+    }
+
+    async apiEndpoint(page: number): Promise<PaginatedResponse<Application>> {
+        return new CoreApi(DEFAULT_CONFIG).coreApplicationsList({
+            forUser: this.user?.pk,
+            page: page,
+            pageSize: (await uiConfig()).pagination.perPage,
+            ordering: this.order,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn(""),
+            new TableColumn(msg("Name"), "name"),
+            new TableColumn(msg("Group"), "group"),
+            new TableColumn(msg("Provider")),
+            new TableColumn(msg("Provider Type")),
+            new TableColumn(msg("Actions")),
+        ];
+    }
+
+    row(item: Application): TemplateResult[] {
+        return [
+            html`<ak-app-icon size=${PFSize.Medium} .app=${item}></ak-app-icon>`,
+            html`<a href="#/core/applications/${item.slug}">
+                <div>${item.name}</div>
+                ${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}
+            </a>`,
+            html`${item.group || msg("-")}`,
+            item.provider
+                ? html`<a href="#/core/providers/${item.providerObj?.pk}">
+                      ${item.providerObj?.name}
+                  </a>`
+                : html`-`,
+            html`${item.providerObj?.verboseName || msg("-")}`,
+            html`<ak-forms-modal>
+                    <span slot="submit"> ${msg("Update")} </span>
+                    <span slot="header"> ${msg("Update Application")} </span>
+                    <ak-application-form slot="form" .instancePk=${item.slug}>
+                    </ak-application-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <pf-tooltip position="top" content=${msg("Edit")}>
+                            <i class="fas fa-edit"></i>
+                        </pf-tooltip>
+                    </button>
+                </ak-forms-modal>
+                ${item.launchUrl
+                    ? html`<a href=${item.launchUrl} target="_blank" class="pf-c-button pf-m-plain">
+                          <pf-tooltip position="top" content=${msg("Open")}>
+                              <i class="fas fa-share-square"></i>
+                          </pf-tooltip>
+                      </a>`
+                    : html``}`,
+        ];
+    }
+}
--- a/web/src/admin/users/UserListPage.ts
+++ b/web/src/admin/users/UserListPage.ts
@ -9,7 +9,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { userTypeToLabel } from "@goauthentik/common/labels";
 import { MessageLevel } from "@goauthentik/common/messages";
 import { DefaultUIConfig, uiConfig } from "@goauthentik/common/ui/config";
-import { first } from "@goauthentik/common/utils";
+import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import { rootInterface } from "@goauthentik/elements/Base";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
@ -159,6 +159,7 @@ export class UserListPage extends WithBrandConfig(WithCapabilitiesConfig(TablePa
            new TableColumn(msg("Name"), "username"),
            new TableColumn(msg("Active"), "is_active"),
            new TableColumn(msg("Last login"), "last_login"),
+            new TableColumn(msg("Type"), "type"),
            new TableColumn(msg("Actions")),
        ];
    }
@ -246,11 +247,15 @@ export class UserListPage extends WithBrandConfig(WithCapabilitiesConfig(TablePa
            this.can(CapabilitiesEnum.CanImpersonate) && item.pk !== this.me?.user.pk;
        return [
            html`<a href="#/identity/users/${item.pk}">
-                    <div>${item.username}</div>
-                    <small>${item.name === "" ? msg("<No name set>") : item.name}</small> </a
-                >&nbsp;<small>${userTypeToLabel(item.type)}</small>`,
+                <div>${item.username}</div>
+                <small>${item.name === "" ? msg("<No name set>") : item.name}</small>
+            </a>`,
            html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
-            html`${first(item.lastLogin?.toLocaleString(), msg("-"))}`,
+            html`${item.lastLogin
+                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                      <small>${item.lastLogin.toLocaleString()}</small>`
+                : msg("-")}`,
+            html`${userTypeToLabel(item.type)}`,
            html`<ak-forms-modal>
                    <span slot="submit"> ${msg("Update")} </span>
                    <span slot="header"> ${msg("Update User")} </span>
--- a/web/src/admin/users/UserViewPage.ts
+++ b/web/src/admin/users/UserViewPage.ts
@ -1,5 +1,6 @@
 import "@goauthentik/admin/groups/RelatedGroupList";
 import "@goauthentik/admin/users/UserActiveForm";
+import "@goauthentik/admin/users/UserApplicationTable";
 import "@goauthentik/admin/users/UserChart";
 import "@goauthentik/admin/users/UserForm";
 import "@goauthentik/admin/users/UserPasswordForm";
@ -8,6 +9,7 @@ import {
    requestRecoveryLink,
 } from "@goauthentik/app/admin/users/UserListPage";
 import { me } from "@goauthentik/app/common/users";
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import "@goauthentik/app/elements/oauth/UserAccessTokenList";
 import "@goauthentik/app/elements/oauth/UserRefreshTokenList";
 import "@goauthentik/app/elements/rbac/ObjectPermissionsPage";
@ -147,7 +149,10 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
            [msg("Username"), user.username],
            [msg("Name"), user.name],
            [msg("Email"), user.email || "-"],
-            [msg("Last login"), user.lastLogin?.toLocaleString()],
+            [msg("Last login"), user.lastLogin
+                ? html`<div>${getRelativeTime(user.lastLogin)}</div>
+                      <small>${user.lastLogin.toLocaleString()}</small>`
+                : html`${msg("-")}`],
            [msg("Active"), html`<ak-status-label type="warning" ?good=${user.isActive}></ak-status-label>`],
            [msg("Type"), userTypeToLabel(user.type)],
            [msg("Superuser"), html`<ak-status-label type="warning" ?good=${user.isSuperuser}></ak-status-label>`],
@ -317,6 +322,14 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
        `;
    }

+    renderTabApplications(user: User): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__body">
+                <ak-user-application-table .user=${user}></ak-user-application-table>
+            </div>
+        </div>`;
+    }
+
    renderBody() {
        if (!this.user) {
            return nothing;
@ -399,6 +412,13 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
            <section slot="page-credentials" data-tab-title="${msg("Credentials / Tokens")}">
                ${this.renderTabCredentialsToken(this.user)}
            </section>
+            <section
+                slot="page-applications"
+                data-tab-title="${msg("Applications")}"
+                class="pf-c-page__main-section pf-m-no-padding-mobile"
+            >
+                ${this.renderTabApplications(this.user)}
+            </section>
            <ak-rbac-object-permission-page
                slot="page-permissions"
                data-tab-title="${msg("Permissions")}"
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/common/constants";
 import { actionToLabel } from "@goauthentik/common/labels";
@ -6,6 +7,7 @@ import { me } from "@goauthentik/common/users";
 import { AKElement } from "@goauthentik/elements/Base";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
+import "@patternfly/elements/pf-tooltip/pf-tooltip.js";

 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
@ -132,7 +134,9 @@ export class NotificationDrawer extends AKElement {
            </div>
            <p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
            <small class="pf-c-notification-drawer__list-item-timestamp"
-                >${item.created?.toLocaleString()}</small
+                ><pf-tooltip position="top" .content=${item.created?.toLocaleString()}>
+                    ${getRelativeTime(item.created!)}
+                </pf-tooltip></small
            >
        </li>`;
    }
--- a/web/src/elements/oauth/UserAccessTokenList.ts
+++ b/web/src/elements/oauth/UserAccessTokenList.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/components/ak-status-label";
@ -86,7 +87,10 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
        return [
            html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
            html`<ak-status-label type="warning" ?good=${item.revoked}></ak-status-label>`,
-            html`${item.expires?.toLocaleString()}`,
+            html`${item.expires
+                ? html`<div>${getRelativeTime(item.expires)}</div>
+                      <small>${item.expires.toLocaleString()}</small>`
+                : msg("-")}`,
            html`${item.scope.join(", ")}`,
        ];
    }
--- a/web/src/elements/oauth/UserRefreshTokenList.ts
+++ b/web/src/elements/oauth/UserRefreshTokenList.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/components/ak-status-label";
@ -87,7 +88,10 @@ export class UserOAuthRefreshTokenList extends Table<TokenModel> {
        return [
            html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
            html`<ak-status-label type="warning" ?good=${item.revoked}></ak-status-label>`,
-            html`${item.expires?.toLocaleString()}`,
+            html`${item.expires
+                ? html`<div>${getRelativeTime(item.expires)}</div>
+                      <small>${item.expires.toLocaleString()}</small>`
+                : msg("-")}`,
            html`${item.scope.join(", ")}`,
        ];
    }
--- a/web/src/elements/user/UserConsentList.ts
+++ b/web/src/elements/user/UserConsentList.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { uiConfig } from "@goauthentik/common/ui/config";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@ -61,7 +62,10 @@ export class UserConsentList extends Table<UserConsent> {
    row(item: UserConsent): TemplateResult[] {
        return [
            html`${item.application.name}`,
-            html`${item.expires?.toLocaleString()}`,
+            html`${item.expires
+                ? html`<div>${getRelativeTime(item.expires)}</div>
+                      <small>${item.expires.toLocaleString()}</small>`
+                : msg("-")}`,
            html`${item.permissions || "-"}`,
        ];
    }
--- a/web/src/user/user-settings/tokens/UserTokenList.ts
+++ b/web/src/user/user-settings/tokens/UserTokenList.ts
@ -1,3 +1,4 @@
+import { getRelativeTime } from "@goauthentik/app/common/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { intentToLabel } from "@goauthentik/common/labels";
 import { uiConfig } from "@goauthentik/common/ui/config";
@ -108,7 +109,14 @@ export class UserTokenList extends Table<Token> {
                            </dt>
                            <dd class="pf-c-description-list__description">
                                <div class="pf-c-description-list__text">
-                                    ${item.expiring ? item.expires?.toLocaleString() : msg("-")}
+                                    ${item.expiring
+                                        ? html`<pf-tooltip
+                                              position="top"
+                                              .content=${item.expires?.toLocaleString()}
+                                          >
+                                              ${getRelativeTime(item.expires!)}
+                                          </pf-tooltip>`
+                                        : msg("-")}
                                </div>
                            </dd>
                        </div>