fix: add expiry to ui

jmattheis · jmattheis · commit dc6d775a1acf · 2026-05-18T17:16:08.000+02:00
diff --git a/ui/src/client/AddClientDialog.tsx b/ui/src/client/AddClientDialog.tsx
@@ -6,18 +6,20 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
+import {NumberField} from '../common/NumberField';
 
 interface IProps {
     fClose: VoidFunction;
-    fOnSubmit: (name: string) => Promise<void>;
+    fOnSubmit: (name: string, expiresAfterInactivitySeconds: number) => Promise<void>;
 }
 
 const AddClientDialog = ({fClose, fOnSubmit}: IProps) => {
     const [name, setName] = useState('');
+    const [expiresAfter, setExpiresAfter] = useState(0);
 
     const submitEnabled = name.length !== 0;
     const submitAndClose = async () => {
-        await fOnSubmit(name);
+        await fOnSubmit(name, Math.max(0, expiresAfter));
         fClose();
     };
 
@@ -35,6 +37,14 @@ const AddClientDialog = ({fClose, fOnSubmit}: IProps) => {
                     onChange={(e) => setName(e.target.value)}
                     fullWidth
                 />
+                <NumberField
+                    margin="dense"
+                    className="expires-after"
+                    label="Expires after inactivity (seconds, 0 = never)"
+                    value={expiresAfter}
+                    onChange={(value) => setExpiresAfter(value)}
+                    fullWidth
+                />
             </DialogContent>
             <DialogActions>
                 <Button onClick={fClose}>Cancel</Button>
diff --git a/ui/src/client/ClientStore.ts b/ui/src/client/ClientStore.ts
@@ -20,22 +20,35 @@ export class ClientStore extends BaseStore<IClient> {
     }
 
     @action
-    public update = async (id: number, name: string): Promise<void> => {
-        await axios.put(`${config.get('url')}client/${id}`, {name});
+    public update = async (
+        id: number,
+        name: string,
+        expiresAfterInactivitySeconds: number
+    ): Promise<void> => {
+        await axios.put(`${config.get('url')}client/${id}`, {
+            name,
+            expiresAfterInactivitySeconds,
+        });
         await this.refresh();
         this.snack('Client updated');
     };
 
     @action
-    public createNoNotifcation = async (name: string): Promise<IClient> => {
-        const client = await axios.post(`${config.get('url')}client`, {name});
+    public createNoNotifcation = async (
+        name: string,
+        expiresAfterInactivitySeconds = 0
+    ): Promise<IClient> => {
+        const client = await axios.post(`${config.get('url')}client`, {
+            name,
+            expiresAfterInactivitySeconds,
+        });
         await this.refresh();
         return client.data;
     };
 
     @action
-    public create = async (name: string): Promise<void> => {
-        await this.createNoNotifcation(name);
+    public create = async (name: string, expiresAfterInactivitySeconds = 0): Promise<void> => {
+        await this.createNoNotifcation(name, expiresAfterInactivitySeconds);
         this.snack('Client added');
     };
 
diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
@@ -58,6 +58,7 @@ const Clients = observer(() => {
                                 <TableCell>Last Used</TableCell>
                                 <TableCell>Elevation ends</TableCell>
                                 <TableCell>Created</TableCell>
+                                <TableCell>Expires in</TableCell>
                                 <TableCell />
                                 <TableCell />
                                 <TableCell />
@@ -72,6 +73,7 @@ const Clients = observer(() => {
                                     createdAt={client.createdAt}
                                     lastUsed={client.lastUsed}
                                     elevatedUntil={client.elevatedUntil}
+                                    expiresAt={client.expiresAt}
                                     fEdit={() => setToUpdateClient(client)}
                                     fDelete={() => setToDeleteClient(client)}
                                     fElevate={() => setToElevateClient(client)}
@@ -90,8 +92,13 @@ const Clients = observer(() => {
             {toUpdateClient != null && (
                 <UpdateClientDialog
                     fClose={() => setToUpdateClient(undefined)}
-                    fOnSubmit={(name) => clientStore.update(toUpdateClient.id, name)}
+                    fOnSubmit={(name, expiresAfterInactivitySeconds) =>
+                        clientStore.update(toUpdateClient.id, name, expiresAfterInactivitySeconds)
+                    }
                     initialName={toUpdateClient.name}
+                    initialExpiresAfterInactivitySeconds={
+                        toUpdateClient.expiresAfterInactivitySeconds
+                    }
                 />
             )}
             {toDeleteClient != null && (
@@ -120,6 +127,7 @@ interface IRowProps {
     createdAt: string;
     lastUsed: string | null;
     elevatedUntil?: string;
+    expiresAt: string | null;
     fEdit: VoidFunction;
     fDelete: VoidFunction;
     fElevate: VoidFunction;
@@ -131,6 +139,7 @@ const Row = ({
     createdAt,
     lastUsed,
     elevatedUntil,
+    expiresAt,
     fEdit,
     fDelete,
     fElevate,
@@ -156,6 +165,13 @@ const Row = ({
         <TableCell>
             <TimeAgo date={createdAt} formatter={TimeAgoFormatter.long} />
         </TableCell>
+        <TableCell className="expires-in">
+            {expiresAt ? (
+                <TimeAgo date={expiresAt} formatter={TimeAgoFormatter.longMinutes} />
+            ) : (
+                '-'
+            )}
+        </TableCell>
         <TableCell align="right" padding="none">
             <Tooltip title="Elevate">
                 <IconButton onClick={fElevate} className="elevate">
diff --git a/ui/src/client/UpdateClientDialog.tsx b/ui/src/client/UpdateClientDialog.tsx
@@ -7,19 +7,27 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
+import {NumberField} from '../common/NumberField';
 
 interface IProps {
     fClose: VoidFunction;
-    fOnSubmit: (name: string) => Promise<void>;
+    fOnSubmit: (name: string, expiresAfterInactivitySeconds: number) => Promise<void>;
     initialName: string;
+    initialExpiresAfterInactivitySeconds: number;
 }
 
-const UpdateClientDialog = ({fClose, fOnSubmit, initialName = ''}: IProps) => {
+const UpdateClientDialog = ({
+    fClose,
+    fOnSubmit,
+    initialName = '',
+    initialExpiresAfterInactivitySeconds,
+}: IProps) => {
     const [name, setName] = useState(initialName);
+    const [expiresAfter, setExpiresAfter] = useState(initialExpiresAfterInactivitySeconds);
 
     const submitEnabled = name.length !== 0;
     const submitAndClose = async () => {
-        await fOnSubmit(name);
+        await fOnSubmit(name, Math.max(0, expiresAfter));
         fClose();
     };
 
@@ -41,6 +49,14 @@ const UpdateClientDialog = ({fClose, fOnSubmit, initialName = ''}: IProps) => {
                     onChange={(e) => setName(e.target.value)}
                     fullWidth
                 />
+                <NumberField
+                    margin="dense"
+                    className="expires-after"
+                    label="Expires after inactivity (seconds, 0 = never)"
+                    value={expiresAfter}
+                    onChange={(value) => setExpiresAfter(value)}
+                    fullWidth
+                />
             </DialogContent>
             <DialogActions>
                 <Button onClick={fClose}>Cancel</Button>
diff --git a/ui/src/tests/client.test.ts b/ui/src/tests/client.test.ts
@@ -21,20 +21,35 @@ const waitForClient =
         await waitForExists(page, $table.cell(row, ClientCol.Name), name);
     };
 
-const updateClient =
-    (id: number, data: {name?: string}): (() => Promise<void>) =>
+interface ClientFields {
+    name?: string;
+    expiresAfter?: number;
+}
+
+const fillClientDialog =
+    (opener: string, submit: string, data: ClientFields): (() => Promise<void>) =>
     async () => {
-        await page.click($table.cell(id, ClientCol.Edit, '.edit'));
+        await page.click(opener);
         await page.waitForSelector($dialog.selector());
-        if (data.name) {
+        if (data.name !== undefined) {
             const nameSelector = $dialog.input('.name');
             await clearField(page, nameSelector);
             await page.type(nameSelector, data.name);
         }
-        await page.click($dialog.button('.update'));
+        if (data.expiresAfter !== undefined) {
+            const expiresSelector = $dialog.input('.expires-after');
+            await clearField(page, expiresSelector);
+            await page.type(expiresSelector, data.expiresAfter.toString());
+        }
+        await page.click($dialog.button(submit));
         await waitToDisappear(page, $dialog.selector());
     };
 
+const createClient = (data: ClientFields) => fillClientDialog('#create-client', '.create', data);
+
+const updateClient = (id: number, data: ClientFields) =>
+    fillClientDialog($table.cell(id, ClientCol.Edit, '.edit'), '.update', data);
+
 const $table = selector.table('#client-table');
 const $dialog = selector.form('#client-dialog');
 
@@ -52,17 +67,8 @@ describe('Client', () => {
         expect(await count(page, $table.rows())).toBe(1);
     });
     describe('create clients', () => {
-        const createClient =
-            (name: string): (() => Promise<void>) =>
-            async () => {
-                await page.click('#create-client');
-                await page.waitForSelector($dialog.selector());
-                await page.type($dialog.input('.name'), name);
-                await page.click($dialog.button('.create'));
-                await waitToDisappear(page, $dialog.selector());
-            };
-        it('phone', createClient('phone'));
-        it('desktop app', createClient('desktop app'));
+        it('phone', createClient({name: 'phone'}));
+        it('desktop app', createClient({name: 'desktop app', expiresAfter: 60 * 60}));
     });
     it('has created clients', async () => {
         await page.waitForSelector($table.row(3));
@@ -73,8 +79,15 @@ describe('Client', () => {
         expect(await innerText(page, $table.cell(2, ClientCol.Name))).toBe('phone');
         expect(await innerText(page, $table.cell(3, ClientCol.Name))).toBe('desktop app');
     });
-    it('updates client', updateClient(1, {name: 'firefox'}));
+    it('shows expires after for new clients', async () => {
+        expect(await innerText(page, $table.cell(2, ClientCol.ExpiresIn))).toBe('-');
+        expect(await innerText(page, $table.cell(3, ClientCol.ExpiresIn))).toBe('in 1 hour');
+    });
+    it('updates client', updateClient(1, {name: 'firefox', expiresAfter: 60 * 60 * 10}));
     it('has updated client name', waitForClient('firefox', 1));
+    it('has updated expires after', async () => {
+        expect(await innerText(page, $table.cell(1, ClientCol.ExpiresIn))).toBe('in 10 hours');
+    });
     it('shows token', async () => {
         await page.click($table.cell(3, ClientCol.Token, '.toggle-visibility'));
         expect(
diff --git a/ui/src/tests/utils.ts b/ui/src/tests/utils.ts
@@ -74,7 +74,8 @@ export enum ClientCol {
     LastSeen = 3,
     ElevationEnds = 4,
     Created = 5,
-    Elevate = 6,
-    Edit = 7,
-    Delete = 8,
+    ExpiresIn = 6,
+    Elevate = 7,
+    Edit = 8,
+    Delete = 9,
 }
diff --git a/ui/src/types.ts b/ui/src/types.ts
@@ -18,6 +18,8 @@ export interface IClient {
     lastUsed: string | null;
     elevatedUntil?: string;
     createdAt: string;
+    expiresAfterInactivitySeconds: number;
+    expiresAt: string | null;
 }
 
 export interface IPlugin {

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,8 @@ export interface IClient {`
`18`	`18`	`lastUsed: string \| null;`
`19`	`19`	`elevatedUntil?: string;`
`20`	`20`	`createdAt: string;`
	`21`	`+ expiresAfterInactivitySeconds: number;`
	`22`	`+ expiresAt: string \| null;`
`21`	`23`	`}`
`22`	`24`
`23`	`25`	`export interface IPlugin {`