show device state in webui

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

authentik/stages/authenticator_mobile/api/device.py

@@ -5,7 +5,7 @@ from django_filters.rest_framework.backends import DjangoFilterBackend
 from drf_spectacular.utils import OpenApiResponse, extend_schema, inline_serializer
 from rest_framework import mixins
 from rest_framework.decorators import action
-from rest_framework.fields import CharField, ChoiceField, JSONField, UUIDField
+from rest_framework.fields import CharField, ChoiceField, JSONField, UUIDField, DateTimeField
 from rest_framework.filters import OrderingFilter, SearchFilter
 from rest_framework.permissions import IsAdminUser
 from rest_framework.request import Request
@@ -40,6 +40,7 @@ class MobileDeviceSerializer(DeviceSerializer):
     """Serializer for Mobile authenticator devices"""
 
     state = MobileDeviceInfoSerializer(read_only=True)
+    last_checkin = DateTimeField(read_only=True)
 
     class Meta:
         model = MobileDevice

schema.yml

@@ -35322,8 +35322,13 @@ components:
           allOf:
           - $ref: '#/components/schemas/MobileDeviceInfo'
           readOnly: true
+        last_checkin:
+          type: string
+          format: date-time
+          readOnly: true
       required:
       - confirmed
+      - last_checkin
       - meta_model_name
       - name
       - pk

schemas/authentik-cloud-gateway.yml

@@ -453,8 +453,13 @@ components:
           allOf:
           - $ref: '#/components/schemas/MobileDeviceInfo'
           readOnly: true
+        last_checkin:
+          type: string
+          format: date-time
+          readOnly: true
       required:
       - confirmed
+      - last_checkin
       - meta_model_name
       - name
       - pk

web/src/admin/users/UserDevicesTable.ts

@@ -5,8 +5,11 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
 import { Table, TableColumn } from "@goauthentik/elements/table/Table";
 
 import { msg } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 import { AuthenticatorsApi, Device } from "@goauthentik/api";
 
@@ -16,6 +19,11 @@ export class UserDeviceTable extends Table<Device> {
     userId?: number;
 
     checkbox = true;
+    expandable = true;
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFDescriptionList);
+    }
 
     async apiEndpoint(): Promise<PaginatedResponse<Device>> {
         return new AuthenticatorsApi(DEFAULT_CONFIG)
@@ -95,6 +103,91 @@ export class UserDeviceTable extends Table<Device> {
         >`;
     }
 
+    renderExpanded(item: Device): TemplateResult {
+        return html`
+            <td role="cell" colspan="5">
+                <div class="pf-c-table__expandable-row-content">
+                    <dl class="pf-c-description-list pf-m-horizontal">
+                        ${until(
+                            new AuthenticatorsApi(DEFAULT_CONFIG)
+                                .authenticatorsMobileRetrieve({
+                                    uuid: item.pk,
+                                })
+                                .then((device) => {
+                                    return html`
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text"
+                                                    >${msg("Last check-in")}</span
+                                                >
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    ${device.lastCheckin.toLocaleString()}
+                                                </div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text"
+                                                    >${msg("App version")}</span
+                                                >
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    ${device.state.appVersion}
+                                                </div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text"
+                                                    >${msg("Device model")}</span
+                                                >
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    ${device.state.model}
+                                                </div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text"
+                                                    >${msg("OS Version")}</span
+                                                >
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    ${device.state.osVersion}
+                                                </div>
+                                            </dd>
+                                        </div>
+                                        <div class="pf-c-description-list__group">
+                                            <dt class="pf-c-description-list__term">
+                                                <span class="pf-c-description-list__text"
+                                                    >${msg("Platform")}</span
+                                                >
+                                            </dt>
+                                            <dd class="pf-c-description-list__description">
+                                                <div class="pf-c-description-list__text">
+                                                    ${device.state.platform}
+                                                </div>
+                                            </dd>
+                                        </div>
+                                    `;
+                                }),
+                        )}
+                    </dl>
+                </div>
+            </td>
+        `;
+    }
+
+    rowExpandable(item: Device): boolean {
+        return item.type.toLowerCase() === "authentik_stages_authenticator_mobile.mobiledevice";
+    }
+
     row(item: Device): TemplateResult[] {
         return [
             html`${item.name}`,

web/src/elements/table/Table.ts

@@ -149,6 +149,11 @@ export abstract class Table<T> extends AKElement implements TableLike {
     @property({ type: Boolean })
     expandable = false;
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    rowExpandable(item: T): boolean {
+        return this.expandable;
+    }
+
     @property({ attribute: false })
     expandedElements: T[] = [];
 
@@ -375,7 +380,11 @@ export abstract class Table<T> extends AKElement implements TableLike {
                         : itemSelectHandler}
                 >
                     ${this.checkbox ? renderCheckbox() : html``}
-                    ${this.expandable ? renderExpansion() : html``}
+                    ${this.rowExpandable(item)
+                        ? renderExpansion()
+                        : this.expandable
+                          ? html`<td></td>`
+                          : html``}
                     ${this.row(item).map((col) => {
                         return html`<td role="cell">${col}</td>`;
                     })}