Add toggle from dashboard #145

NHAS · Nov 23, 2024 · e035cee · e035cee
1 parent a390a34
commit e035cee
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/adminui/frontend/src/pages/Dashboard.vue b/adminui/frontend/src/pages/Dashboard.vue
@@ -34,7 +34,7 @@ const lockedDevices = computed(() => allDevices.value.filter(x => x.is_locked))
       <div class="flex w-full gap-4">
         <div class="flex grid w-1/2 grid-cols-2 gap-4 min-w-[405px]">
           <router-link
-            to="/management/users"
+            :to="'/management/users' + (usersLackingMfa.length == 0 ? '' : '/unset') "
             class="card-compact bg-base-100 shadow-xl border-l-4"
             :class="usersLackingMfa.length == 0 ? 'border-primary' : 'border-error'"
           >
@@ -48,7 +48,7 @@ const lockedDevices = computed(() => allDevices.value.filter(x => x.is_locked))
             </div>
           </router-link>
           <router-link
-            to="/management/devices"
+             :to="'/management/devices' + (lockedDevices.length == 0 ? '/' : '/locked') "
             class="card-compact bg-base-100 shadow-xl border-l-4"
             :class="lockedDevices.length == 0 ? 'border-primary' : 'border-error'"
           >

diff --git a/adminui/frontend/src/pages/Devices.vue b/adminui/frontend/src/pages/Devices.vue
@@ -9,25 +9,24 @@ import RegistrationToken from '@/components/RegistrationToken.vue'
 import { usePagination } from '@/composables/usePagination'
 import { useToastError } from '@/composables/useToastError'
 
+import { useRoute } from 'vue-router'
 import { useDevicesStore } from '@/stores/devices'
-
 import { Icons } from '@/util/icons'
 
-
 import { deleteDevices, editDevice, DeviceEditActions, type EditDevicesDTO, type DeviceDTO } from '@/api'
 
 const devicesStore = useDevicesStore()
 devicesStore.load(false)
 
+const route = useRoute()
 
 const filterText = ref('')
 
 const allDevices = computed(() => devicesStore.devices ?? [])
 
 
-const filterActive = ref(false)
-const filterLocked = ref(false)
-
+const filterActive = ref(route.params.filter == 'active')
+const filterLocked = ref(route.params.filter == 'locked')
 
 const filteredDevices = computed(() => {
   const arr = allDevices.value.filter(a => (a.active || !filterActive.value)).filter(a => a.is_locked || !filterLocked.value)

diff --git a/adminui/frontend/src/pages/Users.vue b/adminui/frontend/src/pages/Users.vue
@@ -14,18 +14,22 @@ import { useUsersStore } from '@/stores/users'
 import { Icons } from '@/util/icons'
 
 import { deleteUsers, editUser, UserEditActions, type EditUsersDTO, type UserDTO } from '@/api'
+import { useRoute } from 'vue-router'
 
 const usersStore = useUsersStore()
 usersStore.load(false)
 
+const route = useRoute()
+
 const filterText = ref('')
 
 const allUsers = computed(() => usersStore.users ?? [])
 
-const filterLocked = ref(false)
+const filterLocked = ref(route.params.filter == 'locked')
+const filterUnsetMfa = ref(route.params.filter == 'unset')
 
 const filteredUsers = computed(() => {
-  const arr = allUsers.value.filter(a => a.locked || !filterLocked.value)
+  const arr = allUsers.value.filter(a => a.locked || !filterLocked.value).filter(a => (a.mfa_type == '' || a.mfa_type == 'unset') || !filterUnsetMfa.value)
 
   if (filterText.value == '') {
     return arr
@@ -121,6 +125,10 @@ function sortUsers(by: keyof UserDTO) {
               </button>
             </div>
             <span class="flex">
+              <label class="label cursor-pointer mr-4">
+                <span class="label-text mr-2">Unset MFA</span>
+                <input v-model="filterUnsetMfa" type="checkbox" class="toggle toggle-primary" />
+              </label>
               <label class="label cursor-pointer mr-4">
                 <span class="label-text mr-2">Locked</span>
                 <input v-model="filterLocked" type="checkbox" class="toggle toggle-primary" />

diff --git a/adminui/frontend/src/router/index.ts b/adminui/frontend/src/router/index.ts
@@ -49,8 +49,8 @@ const router = createRouter({
     route('/diagnostics/check', 'Check Firewall', () => import('@/pages/Diagnostics/TestRule.vue')),
     route('/diagnostics/acls', 'ACLs', () => import('@/pages/Diagnostics/Acls.vue')),
 
-    route('/management/users', 'User Management', () => import('@/pages/Users.vue')),
-    route('/management/devices', 'Device Management', () => import('@/pages/Devices.vue')),
+    route('/management/users/:filter?', 'User Management', () => import('@/pages/Users.vue')),
+    route('/management/devices/:filter?', 'Device Management', () => import('@/pages/Devices.vue')),
     route('/management/registration_tokens', 'Registration Tokens', () => import('@/pages/RegistrationTokens.vue')),
 
     route('/settings', 'Settings', () => import('@/pages/Settings.vue')),