Merge pull request #385 from sebadob/ui-user-devices-in-admin-ui

show the user devices in the admin ui as well
sebadob · Apr 30, 2024 · 51a50ac · 51a50ac
2 parents 62d41bc + 1170f06
commit 51a50ac
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 12 deletions.
diff --git a/dev_notes.md b/dev_notes.md
@@ -5,21 +5,20 @@
 ## TODO before v0.23.0
 
 - accept an optional `name` param during initial `device_code` request to have better readable first
-  name for new devices
+  name for new devices OR redirect to account view and open devices directly?
 - cleanup scheduler that looks for expired devices like every 24h
-- UI in the user account view to see and revoke device access
-- have a counterpart in the Admin UI as well? -> provide a user_id and see all devices?
 
 ## Stage 1 - essentials
 
 [x] finished
 
 ## Stage 2 - features - do before v1.0.0
 
-- double check request params validation for `rauthy-client` on callback endpoints
+- sessions view needs pagination + option to revoke a single session
+- `USERINFO_STRICT` config option -> strict session / device id checking against DB
 - add `at_hash` claim to the ID token
-- update the book with all the new features
 - handle `offline_access` properly again - either decide to fully remove or support it everywhere
+- update the book with all the new features
 - benchmarks and performance tuning
 - maybe get a nicer logo
 

diff --git a/frontend/src/components/admin/users/UserDevices.svelte b/frontend/src/components/admin/users/UserDevices.svelte
@@ -0,0 +1,22 @@
+<script>
+
+    import Devices from "../../common/Devices.svelte";
+
+    export let user;
+
+</script>
+
+<div class="container">
+    <Devices userId={user.id}/>
+</div>
+
+<style>
+    .container {
+        margin-bottom: 1rem;
+        padding-left: 1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+</style>
diff --git a/frontend/src/components/admin/users/UserTile.svelte b/frontend/src/components/admin/users/UserTile.svelte
@@ -12,6 +12,7 @@
     import {onMount} from "svelte";
     import {getUser} from "../../../utils/dataFetching.js";
     import Loading from "$lib/Loading.svelte";
+    import UserDevices from "./UserDevices.svelte";
 
     export let userEmail = '';
     export let userId = '';
@@ -26,6 +27,7 @@
         'ATTRIBUTES',
         'PASSWORD',
         'MFA',
+        'DEVICES',
         'LOGOUT',
         'DELETE',
     ];
@@ -73,32 +75,43 @@
 
     <div slot="body">
         {#if isLoading}
-            <Loading />
+            <Loading/>
         {:else}
             <TabBar labels={tabBarItems} bind:selected/>
 
             {#if selected === 'INFO'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserInfo bind:user bind:onSave/>
                 </div>
             {:else if selected === 'ATTRIBUTES'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserAttr bind:user bind:onSave/>
                 </div>
             {:else if selected === 'PASSWORD'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserPassword bind:user bind:onSave/>
                 </div>
             {:else if selected === 'MFA'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserMfa bind:user bind:onSave/>
                 </div>
+            {:else if selected === 'DEVICES'}
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
+                    <UserDevices bind:user/>
+                </div>
             {:else if selected === 'LOGOUT'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserForceLogout bind:user/>
                 </div>
             {:else if selected === 'DELETE'}
-                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }} out:slide|global={{ duration: tabBarDur }}>
+                <div in:slide|global={{ delay: tabBarDly, duration: tabBarDur }}
+                     out:slide|global={{ duration: tabBarDur }}>
                     <UserDelete bind:user onSave={onDelete}/>
                 </div>
             {/if}