web: Tidy temporal utilities. (#13755)

web/src/admin/admin-overview/cards/RecentEventsCard.ts

@@ -2,7 +2,7 @@ import { EventGeo, EventUser } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { actionToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-event-info";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -74,7 +74,7 @@ export class RecentEventsCard extends Table<Event> {
             html`<div><a href="${`#/events/log/${item.pk}`}">${actionToLabel(item.action)}</a></div>
                 <small>${item.app}</small>`,
             EventUser(item),
-            html`<div>${getRelativeTime(item.created)}</div>
+            html`<div>${formatElapsedTime(item.created)}</div>
                 <small>${item.created.toLocaleString()}</small>`,
             html` <div>${item.clientIp || msg("-")}</div>
                 <small>${EventGeo(item)}</small>`,

web/src/admin/blueprints/BlueprintListPage.ts

@@ -2,7 +2,7 @@ import "@goauthentik/admin/blueprints/BlueprintForm";
 import "@goauthentik/admin/rbac/ObjectPermissionModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/buttons/ActionButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
@@ -141,7 +141,7 @@ export class BlueprintListPage extends TablePage<BlueprintInstance> {
             html`<div>${item.name}</div>
                 ${description ? html`<small>${description}</small>` : html``}`,
             html`${BlueprintStatus(item)}`,
-            html`<div>${getRelativeTime(item.lastApplied)}</div>
+            html`<div>${formatElapsedTime(item.lastApplied)}</div>
                 <small>${item.lastApplied.toLocaleString()}</small>`,
             html`<ak-status-label ?good=${item.enabled}></ak-status-label>`,
             html`<ak-forms-modal>

web/src/admin/enterprise/EnterpriseLicenseListPage.ts

@@ -2,7 +2,7 @@ import "@goauthentik/admin/enterprise/EnterpriseLicenseForm";
 import "@goauthentik/admin/enterprise/EnterpriseStatusCard";
 import "@goauthentik/admin/rbac/ObjectPermissionModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/Spinner";
 import "@goauthentik/elements/buttons/SpinnerButton";
@@ -186,7 +186,7 @@ export class EnterpriseLicenseListPage extends TablePage<License> {
                     >
                         ${this.summary &&
                         this.summary?.status !== LicenseSummaryStatusEnum.Unlicensed
-                            ? html`<div>${getRelativeTime(this.summary.latestValid)}</div>
+                            ? html`<div>${formatElapsedTime(this.summary.latestValid)}</div>
                                   <small>${this.summary.latestValid.toLocaleString()}</small>`
                             : "-"}
                     </ak-aggregate-card>

web/src/admin/events/EventListPage.ts

@@ -3,7 +3,7 @@ import { EventGeo, EventUser } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { actionToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-event-info";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { TableColumn } from "@goauthentik/elements/table/Table";
@@ -78,7 +78,7 @@ export class EventListPage extends TablePage<Event> {
             html`<div>${actionToLabel(item.action)}</div>
                 <small>${item.app}</small>`,
             EventUser(item),
-            html`<div>${getRelativeTime(item.created)}</div>
+            html`<div>${formatElapsedTime(item.created)}</div>
                 <small>${item.created.toLocaleString()}</small>`,
             html`<div>${item.clientIp || msg("-")}</div>
                 <small>${EventGeo(item)}</small>`,

web/src/admin/events/EventViewPage.ts

@@ -2,7 +2,7 @@ import { EventGeo, EventUser } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { actionToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-event-info";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/PageHeader";
@@ -104,7 +104,7 @@ export class EventViewPage extends AKElement {
                                     </dt>
                                     <dd class="pf-c-description-list__description">
                                         <div class="pf-c-description-list__text">
-                                            <div>${getRelativeTime(this.event.created)}</div>
+                                            <div>${formatElapsedTime(this.event.created)}</div>
                                             <small>${this.event.created.toLocaleString()}</small>
                                         </div>
                                     </dd>

web/src/admin/groups/MemberSelectModal.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
@@ -105,7 +105,7 @@ export class MemberSelectTable extends TableModal<User> {
                 <small>${item.name}</small>`,
             html` <ak-status-label type="warning" ?good=${item.isActive}></ak-status-label>`,
             html`${item.lastLogin
-                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                ? html`<div>${formatElapsedTime(item.lastLogin)}</div>
                       <small>${item.lastLogin.toLocaleString()}</small>`
                 : msg("-")}`,
         ];

web/src/admin/groups/RelatedUserList.ts

@@ -8,8 +8,8 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { PFSize } from "@goauthentik/common/enums.js";
 import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { MessageLevel } from "@goauthentik/common/messages";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { me } from "@goauthentik/common/users";
-import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import { WithBrandConfig } from "@goauthentik/elements/Interface/brandProvider";
 import {
@@ -194,7 +194,7 @@ export class RelatedUserList extends WithBrandConfig(WithCapabilitiesConfig(Tabl
             </a>`,
             html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
             html`${item.lastLogin
-                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                ? html`<div>${formatElapsedTime(item.lastLogin)}</div>
                       <small>${item.lastLogin.toLocaleString()}</small>`
                 : msg("-")}`,
             html`<ak-forms-modal>

web/src/admin/outposts/OutpostHealth.ts

@@ -1,4 +1,4 @@
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { AKElement } from "@goauthentik/elements/Base";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/Spinner";
@@ -51,7 +51,7 @@ export class OutpostHealthElement extends AKElement {
                     <div class="pf-c-description-list__text">
                         <ak-label color=${PFColor.Green} ?compact=${true}>
                             ${msg(
-                                str`${getRelativeTime(this.outpostHealth.lastSeen)} (${this.outpostHealth.lastSeen?.toLocaleTimeString()})`,
+                                str`${formatElapsedTime(this.outpostHealth.lastSeen)} (${this.outpostHealth.lastSeen?.toLocaleTimeString()})`,
                             )}
                         </ak-label>
                     </div>

web/src/admin/outposts/OutpostHealthSimple.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { AKElement } from "@goauthentik/elements/Base";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/Spinner";
@@ -69,7 +69,7 @@ export class OutpostHealthSimpleElement extends AKElement {
         const lastSeen = this.outpostHealths[0].lastSeen;
         return html`<ak-label color=${PFColor.Green}>
             ${msg(
-                str`Last seen: ${getRelativeTime(lastSeen)} (${lastSeen.toLocaleTimeString()})`,
+                str`Last seen: ${formatElapsedTime(lastSeen)} (${lastSeen.toLocaleTimeString()})`,
             )}</ak-label
         >`;
     }

web/src/admin/policies/reputation/ReputationListPage.ts

@@ -1,6 +1,6 @@
 import "@goauthentik/admin/rbac/ObjectPermissionModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@@ -89,7 +89,7 @@ export class ReputationListPage extends TablePage<Reputation> {
                 : html``}
             ${item.ip}`,
             html`${item.score}`,
-            html`<div>${getRelativeTime(item.updated)}</div>
+            html`<div>${formatElapsedTime(item.updated)}</div>
                 <small>${item.updated.toLocaleString()}</small>`,
             html`
                 <ak-rbac-object-permission-modal

web/src/admin/stages/invitation/InvitationForm.ts

@@ -1,6 +1,7 @@
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { dateTimeLocal, first } from "@goauthentik/common/utils";
+import { dateTimeLocal } from "@goauthentik/common/temporal";
+import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";

web/src/admin/system-tasks/SystemTaskListPage.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { PFColor } from "@goauthentik/elements/Label";
 import "@goauthentik/elements/buttons/ActionButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
@@ -100,7 +100,7 @@ export class SystemTaskListPage extends TablePage<SystemTask> {
                                                       item.expires || new Date()
                                                   ).toLocaleString()}
                                               >
-                                                  ${getRelativeTime(item.expires || new Date())}
+                                                  ${formatElapsedTime(item.expires || new Date())}
                                               </pf-tooltip>
                                           `
                                         : msg("-")}
@@ -128,7 +128,7 @@ export class SystemTaskListPage extends TablePage<SystemTask> {
         return [
             html`<pre>${item.name}${item.uid ? `:${item.uid}` : ""}</pre>`,
             html`${item.description}`,
-            html`<div>${getRelativeTime(item.finishTimestamp)}</div>
+            html`<div>${formatElapsedTime(item.finishTimestamp)}</div>
                 <small>${item.finishTimestamp.toLocaleString()}</small>`,
             this.taskStatus(item),
             html`<ak-action-button

web/src/admin/tokens/TokenForm.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { dateTimeLocal, first } from "@goauthentik/common/utils";
+import { dateTimeLocal } from "@goauthentik/common/temporal";
+import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";

web/src/admin/tokens/TokenListPage.ts

@@ -2,7 +2,7 @@ import "@goauthentik/admin/rbac/ObjectPermissionModal";
 import "@goauthentik/admin/tokens/TokenForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { intentToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/buttons/Dropdown";
 import "@goauthentik/elements/buttons/TokenCopyButton";
@@ -107,7 +107,7 @@ export class TokenListPage extends TablePage<Token> {
             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.expires && item.expiring
-                ? html`<div>${getRelativeTime(item.expires)}</div>
+                ? html`<div>${formatElapsedTime(item.expires)}</div>
                       <small>${item.expires.toLocaleString()}</small>`
                 : msg("-")}`,
             html`${intentToLabel(item.intent ?? IntentEnum.Api)}`,

web/src/admin/users/ServiceAccountForm.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { dateTimeLocal } from "@goauthentik/common/utils";
+import { dateTimeLocal } from "@goauthentik/common/temporal";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModalForm } from "@goauthentik/elements/forms/ModalForm";

web/src/admin/users/UserDevicesTable.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { deviceTypeName } from "@goauthentik/common/labels";
 import { SentryIgnoredError } from "@goauthentik/common/sentry";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@@ -108,15 +108,15 @@ export class UserDeviceTable extends Table<Device> {
             ${item.extraDescription ? ` - ${item.extraDescription}` : ""}`,
             html`${item.confirmed ? msg("Yes") : msg("No")}`,
             html`${item.created.getTime() > 0
-                ? html`<div>${getRelativeTime(item.created)}</div>
+                ? html`<div>${formatElapsedTime(item.created)}</div>
                       <small>${item.created.toLocaleString()}</small>`
                 : html`-`}`,
             html`${item.lastUpdated
-                ? html`<div>${getRelativeTime(item.lastUpdated)}</div>
+                ? html`<div>${formatElapsedTime(item.lastUpdated)}</div>
                       <small>${item.lastUpdated.toLocaleString()}</small>`
                 : html`-`}`,
             html`${item.lastUsed
-                ? html`<div>${getRelativeTime(item.lastUsed)}</div>
+                ? html`<div>${formatElapsedTime(item.lastUsed)}</div>
                       <small>${item.lastUsed.toLocaleString()}</small>`
                 : html`-`}`,
         ];

web/src/admin/users/UserListPage.ts

@@ -10,9 +10,9 @@ import { PFSize } from "@goauthentik/common/enums.js";
 import { parseAPIResponseError } from "@goauthentik/common/errors/network";
 import { userTypeToLabel } from "@goauthentik/common/labels";
 import { MessageLevel } from "@goauthentik/common/messages";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { DefaultUIConfig, uiConfig } from "@goauthentik/common/ui/config";
 import { me } from "@goauthentik/common/users";
-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";
@@ -244,7 +244,7 @@ export class UserListPage extends WithBrandConfig(WithCapabilitiesConfig(TablePa
             </a>`,
             html`<ak-status-label ?good=${item.isActive}></ak-status-label>`,
             html`${item.lastLogin
-                ? html`<div>${getRelativeTime(item.lastLogin)}</div>
+                ? html`<div>${formatElapsedTime(item.lastLogin)}</div>
                       <small>${item.lastLogin.toLocaleString()}</small>`
                 : msg("-")}`,
             html`${userTypeToLabel(item.type)}`,

web/src/admin/users/UserViewPage.ts

@@ -15,8 +15,8 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { PFSize } from "@goauthentik/common/enums.js";
 import { userTypeToLabel } from "@goauthentik/common/labels";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { me } from "@goauthentik/common/users";
-import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/DescriptionList";
 import {
     type DescriptionPair,
@@ -155,11 +155,11 @@ export class UserViewPage extends WithCapabilitiesConfig(AKElement) {
             [msg("Name"), user.name],
             [msg("Email"), user.email || "-"],
             [msg("Last login"), user.lastLogin
-                ? html`<div>${getRelativeTime(user.lastLogin)}</div>
+                ? html`<div>${formatElapsedTime(user.lastLogin)}</div>
                       <small>${user.lastLogin.toLocaleString()}</small>`
                 : html`${msg("-")}`],
             [msg("Last password change"), user.passwordChangeDate
-                ? html`<div>${getRelativeTime(user.passwordChangeDate)}</div>
+                ? html`<div>${formatElapsedTime(user.passwordChangeDate)}</div>
                       <small>${user.passwordChangeDate.toLocaleString()}</small>`
                 : html`${msg("-")}`],
             [msg("Active"), html`<ak-status-label type="warning" ?good=${user.isActive}></ak-status-label>`],

web/src/common/temporal.ts

@@ -0,0 +1,132 @@
+/**
+ * @file Temporal utilitie for working with dates and times.
+ */
+
+/**
+ * Duration in milliseconds for time units used by the `Intl.RelativeTimeFormat` API.
+ */
+export const Duration = {
+    /**
+     * The number of milliseconds in a year.
+     */
+    year: 1000 * 60 * 60 * 24 * 365,
+    /**
+     * The number of milliseconds in a month.
+     */
+    month: (24 * 60 * 60 * 1000 * 365) / 12,
+    /**
+     * The number of milliseconds in a day.
+     */
+    day: 1000 * 60 * 60 * 24,
+    /**
+     * The number of milliseconds in an hour.
+     */
+    hour: 1000 * 60 * 60,
+    /**
+     * The number of milliseconds in a minute.
+     */
+    minute: 1000 * 60,
+    /**
+     * The number of milliseconds in a second.
+     */
+    second: 1000,
+} as const satisfies Partial<Record<Intl.RelativeTimeFormatUnit, number>>;
+
+export type DurationUnit = keyof typeof Duration;
+
+/**
+ * The order of time units used by the `Intl.RelativeTimeFormat` API.
+ */
+const DurationGranularity = [
+    "year",
+    "month",
+    "day",
+    "hour",
+    "minute",
+    "second",
+] as const satisfies DurationUnit[];
+
+/**
+ * Given two dates, return a human-readable string describing the time elapsed between them.
+ */
+export function formatElapsedTime(d1: Date, d2: Date = new Date()): string {
+    const elapsed = d1.getTime() - d2.getTime();
+    const rtf = new Intl.RelativeTimeFormat("default", { numeric: "auto" });
+
+    for (const unit of DurationGranularity) {
+        const duration = Duration[unit];
+
+        if (Math.abs(elapsed) > duration || unit === "second") {
+            let rounded = Math.round(elapsed / duration);
+
+            if (!isFinite(rounded)) {
+                rounded = 0;
+            }
+
+            return rtf.format(rounded, unit);
+        }
+    }
+    return rtf.format(Math.round(elapsed / 1000), "second");
+}
+
+/**
+ * Convert a Date object to a string in the format required by the datetime-local input field.
+ *
+ * ```js
+ *  html`<input
+ *     type="datetime-local"
+ *     data-type="datetime-local"
+ *     class="pf-c-form-control"
+ *     required
+ *     value="${dateTimeLocal(new Date())}"
+ *   />
+ * ```
+ *
+ * @param input - The Date object to convert.
+ * @returns A string in the format "YYYY-MM-DDTHH:MM" (e.g., "2023-10-01T12:00").
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
+ *
+ * @remarks
+ *
+ * So for some reason, the datetime-local input field requires ISO Datetime as value.
+ *
+ * But the standard`date.toISOString()` returns everything with seconds and milliseconds,
+ * which the input field doesn't like (on chrome, on firefox its fine)
+ *
+ * On chrome, setting .valueAsNumber works, but that causes an error on firefox, so go figure.
+ *
+ * Additionally, `toISOString` always returns the date without timezone,
+ * which we would like to include for better usability
+ */
+export function dateTimeLocal(input: Date): string {
+    const tzOffset = new Date().getTimezoneOffset() * 60_000; //offset in milliseconds
+    const localISOTime = new Date(input.getTime() - tzOffset).toISOString().slice(0, -1);
+
+    const [datePart, timePart] = localISOTime.split(":");
+
+    return [datePart, timePart].join(":");
+}
+
+/**
+ * Convert a Date object to UTC.
+ *
+ * @remarks
+ *
+ * Sigh...so our API is UTC/can take TZ info in the ISO format as it should.
+ *
+ * datetime-local fields (which is almost the only date-time input we use)
+ * can return its value as a UTC timestamp...however the generated API client
+ * _requires_ a Date object, only to then convert it to an ISO string anyways
+ * JS Dates don't include timezone info in the ISO string, so that just sends
+ * the local time as UTC...which is wrong.
+ *
+ * Instead we have to do this, convert the given date to a UTC timestamp,
+ * then subtract the timezone offset to create an "invalid" date (correct time&date)
+ * but it still "thinks" it's in local TZ.
+ */
+export function dateToUTC(input: Date): Date {
+    const timestamp = input.getTime();
+    const offset = -1 * (new Date().getTimezoneOffset() * 60_000);
+
+    return new Date(timestamp - offset);
+}

web/src/common/utils.ts

@@ -103,35 +103,6 @@ export function randomString(len: number, charset: string): string {
     return chars.join("");
 }
 
-export function dateTimeLocal(date: Date): string {
-    // So for some reason, the datetime-local input field requires ISO Datetime as value
-    // But the standard javascript date.toISOString() returns everything with seconds and
-    // milliseconds, which the input field doesn't like (on chrome, on firefox its fine)
-    // On chrome, setting .valueAsNumber works, but that causes an error on firefox, so go
-    // figure.
-    // Additionally, toISOString always returns the date without timezone, which we would like
-    // to include for better usability
-    const tzOffset = new Date().getTimezoneOffset() * 60000; //offset in milliseconds
-    const localISOTime = new Date(date.getTime() - tzOffset).toISOString().slice(0, -1);
-    const parts = localISOTime.split(":");
-    return `${parts[0]}:${parts[1]}`;
-}
-
-export function dateToUTC(date: Date): Date {
-    // Sigh...so our API is UTC/can take TZ info in the ISO format as it should.
-    // datetime-local fields (which is almost the only date-time input we use)
-    // can return its value as a UTC timestamp...however the generated API client
-    // _requires_ a Date object, only to then convert it to an ISO string anyways
-    // JS Dates don't include timezone info in the ISO string, so that just sends
-    // the local time as UTC...which is wrong
-    // Instead we have to do this, convert the given date to a UTC timestamp,
-    // then subtract the timezone offset to create an "invalid" date (correct time&date)
-    // but it still "thinks" it's in local TZ
-    const timestamp = date.getTime();
-    const offset = -1 * (new Date().getTimezoneOffset() * 60000);
-    return new Date(timestamp - offset);
-}
-
 // Lit is extremely well-typed with regard to CSS, and Storybook's `build` does not currently have a
 // coherent way of importing CSS-as-text into CSSStyleSheet. It works well when Storybook is running
 // in `dev,` but in `build` it fails. Storied components will have to map their textual CSS imports
@@ -156,28 +127,3 @@ export function adaptCSS(sheet: AdaptableStylesheet[]): CSSStyleSheet[];
 export function adaptCSS(sheet: AdaptableStylesheet | AdaptableStylesheet[]): AdaptedStylesheets {
     return Array.isArray(sheet) ? sheet.map(_adaptCSS) : _adaptCSS(sheet);
 }
-
-export function getRelativeTime(d1: Date, d2: Date = new Date()): string {
-    const elapsed = d1.getTime() - d2.getTime();
-    const rtf = new Intl.RelativeTimeFormat("default", { numeric: "auto" });
-
-    const _timeUnits: [Intl.RelativeTimeFormatUnit, number][] = [
-        ["year", 1000 * 60 * 60 * 24 * 365],
-        ["month", (24 * 60 * 60 * 1000 * 365) / 12],
-        ["day", 1000 * 60 * 60 * 24],
-        ["hour", 1000 * 60 * 60],
-        ["minute", 1000 * 60],
-        ["second", 1000],
-    ];
-
-    for (const [key, value] of _timeUnits) {
-        if (Math.abs(elapsed) > value || key === "second") {
-            let rounded = Math.round(elapsed / value);
-            if (!isFinite(rounded)) {
-                rounded = 0;
-            }
-            return rtf.format(rounded, key);
-        }
-    }
-    return rtf.format(Math.round(elapsed / 1000), "second");
-}

web/src/components/events/ObjectChangelog.ts

@@ -2,7 +2,7 @@ import { EventGeo, EventUser } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { actionToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-event-info";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -73,7 +73,7 @@ export class ObjectChangelog extends Table<Event> {
         return [
             html`${actionToLabel(item.action)}`,
             EventUser(item),
-            html`<div>${getRelativeTime(item.created)}</div>
+            html`<div>${formatElapsedTime(item.created)}</div>
                 <small>${item.created.toLocaleString()}</small>`,
             html`<div>${item.clientIp || msg("-")}</div>
 

web/src/components/events/UserEvents.ts

@@ -2,7 +2,7 @@ import { EventUser } from "@goauthentik/admin/events/utils";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EventWithContext } from "@goauthentik/common/events";
 import { actionToLabel } from "@goauthentik/common/labels";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-event-info";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/Dropdown";
@@ -47,7 +47,7 @@ export class UserEvents extends Table<Event> {
         return [
             html`${actionToLabel(item.action)}`,
             EventUser(item),
-            html`<div>${getRelativeTime(item.created)}</div>
+            html`<div>${formatElapsedTime(item.created)}</div>
                 <small>${item.created.toLocaleString()}</small>`,
             html`<span>${item.clientIp || msg("-")}</span>`,
         ];

web/src/elements/charts/Chart.ts

@@ -4,7 +4,7 @@ import {
     parseAPIResponseError,
     pluckErrorDetail,
 } from "@goauthentik/common/errors/network";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
 import {
@@ -176,7 +176,7 @@ export abstract class AKChart<T> extends AKElement {
 
     timeTickCallback(tickValue: string | number, index: number, ticks: Tick[]): string {
         const valueStamp = ticks[index];
-        return getRelativeTime(new Date(valueStamp.value));
+        return formatElapsedTime(new Date(valueStamp.value));
     }
 
     getOptions(): ChartOptions {

web/src/elements/events/LogViewer.ts

@@ -1,4 +1,4 @@
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/EmptyState";
 import { PaginatedResponse, Table, TableColumn } from "@goauthentik/elements/table/Table";
@@ -102,7 +102,7 @@ export class LogViewer extends Table<LogEvent> {
 
     row(item: LogEvent): TemplateResult[] {
         return [
-            html`${getRelativeTime(item.timestamp)}`,
+            html`${formatElapsedTime(item.timestamp)}`,
             html`<ak-status-label
                 type=${this.statusForItem(item)}
                 bad-label=${item.logLevel}

web/src/elements/forms/Form.ts

@@ -1,7 +1,8 @@
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { parseAPIResponseError, pluckErrorDetail } from "@goauthentik/common/errors/network";
 import { MessageLevel } from "@goauthentik/common/messages";
-import { camelToSnake, convertToSlug, dateToUTC } from "@goauthentik/common/utils";
+import { dateToUTC } from "@goauthentik/common/temporal";
+import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
 import { PreventFormSubmit } from "@goauthentik/elements/forms/helpers";

web/src/elements/notifications/APIDrawer.ts

@@ -1,7 +1,7 @@
 import { RequestInfo } from "@goauthentik/common/api/middleware";
 import { EVENT_API_DRAWER_TOGGLE, EVENT_REQUEST_POST } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { AKElement } from "@goauthentik/elements/Base";
 
 import { msg } from "@lit/localize";
@@ -79,7 +79,7 @@ export class APIDrawer extends AKElement {
                 >${item.path}</a
             >
             <div class="pf-c-notification-drawer__list-item-timestamp">
-                ${getRelativeTime(new Date(item.time))}
+                ${formatElapsedTime(new Date(item.time))}
             </div>
         </li>`;
     }

web/src/elements/notifications/NotificationDrawer.ts

@@ -3,8 +3,8 @@ import { EVENT_NOTIFICATION_DRAWER_TOGGLE, EVENT_REFRESH } from "@goauthentik/co
 import { globalAK } from "@goauthentik/common/global";
 import { actionToLabel } from "@goauthentik/common/labels";
 import { MessageLevel } from "@goauthentik/common/messages";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { me } from "@goauthentik/common/users";
-import { getRelativeTime } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
 import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
@@ -134,7 +134,7 @@ export class NotificationDrawer extends AKElement {
             <p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
             <small class="pf-c-notification-drawer__list-item-timestamp"
                 ><pf-tooltip position="top" .content=${item.created?.toLocaleString()}>
-                    ${getRelativeTime(item.created!)}
+                    ${formatElapsedTime(item.created!)}
                 </pf-tooltip></small
             >
         </li>`;

web/src/elements/oauth/UserAccessTokenList.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
@@ -92,7 +92,7 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
                 bad-label=${msg("Yes")}
             ></ak-status-label>`,
             html`${item.expires
-                ? html`<div>${getRelativeTime(item.expires)}</div>
+                ? html`<div>${formatElapsedTime(item.expires)}</div>
                       <small>${item.expires.toLocaleString()}</small>`
                 : msg("-")}`,
             html`<ak-chip-group>

web/src/elements/oauth/UserRefreshTokenList.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
@@ -93,7 +93,7 @@ export class UserOAuthRefreshTokenList extends Table<TokenModel> {
                 bad-label=${msg("Yes")}
             ></ak-status-label>`,
             html`${item.expires
-                ? html`<div>${getRelativeTime(item.expires)}</div>
+                ? html`<div>${formatElapsedTime(item.expires)}</div>
                       <small>${item.expires.toLocaleString()}</small>`
                 : msg("-")}`,
             html`<ak-chip-group>

web/src/elements/sync/SyncStatusCard.ts

@@ -1,5 +1,5 @@
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/components/ak-status-label";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/EmptyState";
@@ -71,7 +71,7 @@ export class SyncStatusTable extends Table<SystemTask> {
                 good-label=${msg("Finished successfully")}
                 bad-label=${msg("Finished with errors")}
             ></ak-status-label>`,
-            html`<div>${getRelativeTime(item.finishTimestamp)}</div>
+            html`<div>${formatElapsedTime(item.finishTimestamp)}</div>
                 <small>${item.finishTimestamp.toLocaleString()}</small>`,
         ];
     }

web/src/elements/user/SessionList.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@@ -73,9 +73,9 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
                     ${item.lastIp}
                 </div>
                 <small>${item.userAgent.userAgent?.family}, ${item.userAgent.os?.family}</small>`,
-            html`<div>${getRelativeTime(item.lastUsed)}</div>
+            html`<div>${formatElapsedTime(item.lastUsed)}</div>
                 <small>${item.lastUsed?.toLocaleString()}</small>`,
-            html`<div>${getRelativeTime(item.expires || new Date())}</div>
+            html`<div>${formatElapsedTime(item.expires || new Date())}</div>
                 <small>${item.expires?.toLocaleString()}</small>`,
         ];
     }

web/src/elements/user/UserConsentList.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@@ -62,7 +62,7 @@ export class UserConsentList extends Table<UserConsent> {
         return [
             html`${item.application.name}`,
             html`${item.expires && item.expiring
-                ? html`<div>${getRelativeTime(item.expires)}</div>
+                ? html`<div>${formatElapsedTime(item.expires)}</div>
                       <small>${item.expires.toLocaleString()}</small>`
                 : msg("-")}`,
             html`${item.permissions

web/src/elements/user/UserReputationList.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/forms/DeleteBulkForm";
 import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
@@ -73,7 +73,7 @@ export class UserReputationList extends Table<Reputation> {
                 : html``}
             ${item.ip}`,
             html`${item.score}`,
-            html`<div>${getRelativeTime(item.updated)}</div>
+            html`<div>${formatElapsedTime(item.updated)}</div>
                 <small>${item.updated.toLocaleString()}</small>`,
         ];
     }

web/src/user/user-settings/mfa/MFADevicesPage.ts

@@ -2,7 +2,7 @@ import { AndNext, DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { globalAK } from "@goauthentik/common/global";
 import { deviceTypeName } from "@goauthentik/common/labels";
 import { SentryIgnoredError } from "@goauthentik/common/sentry";
-import { getRelativeTime } from "@goauthentik/common/utils";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/buttons/Dropdown";
 import "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/TokenCopyButton";
@@ -133,11 +133,11 @@ export class MFADevicesPage extends Table<Device> {
             html`${deviceTypeName(item)}
             ${item.extraDescription ? ` - ${item.extraDescription}` : ""}`,
             html`${item.created.getTime() > 0
-                ? html`<div>${getRelativeTime(item.created)}</div>
+                ? html`<div>${formatElapsedTime(item.created)}</div>
                       <small>${item.created.toLocaleString()}</small>`
                 : html`-`}`,
             html`${item.lastUsed
-                ? html`<div>${getRelativeTime(item.lastUsed)}</div>
+                ? html`<div>${formatElapsedTime(item.lastUsed)}</div>
                       <small>${item.lastUsed.toLocaleString()}</small>`
                 : html`-`}`,
             html`

web/src/user/user-settings/tokens/UserTokenForm.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
-import { dateTimeLocal } from "@goauthentik/common/utils";
+import { dateTimeLocal } from "@goauthentik/common/temporal";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 

web/src/user/user-settings/tokens/UserTokenList.ts

@@ -1,7 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { intentToLabel } from "@goauthentik/common/labels";
+import { formatElapsedTime } from "@goauthentik/common/temporal";
 import { me } from "@goauthentik/common/users";
-import { getRelativeTime } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-status-label";
 import "@goauthentik/elements/buttons/Dropdown";
 import "@goauthentik/elements/buttons/ModalButton";
@@ -110,7 +110,7 @@ export class UserTokenList extends Table<Token> {
                                               position="top"
                                               .content=${item.expires?.toLocaleString()}
                                           >
-                                              ${getRelativeTime(item.expires!)}
+                                              ${formatElapsedTime(item.expires!)}
                                           </pf-tooltip>`
                                         : msg("-")}
                                 </div>