feat(admin-ui): update revoke action

GluuFederation · Sep 5, 2022 · 7967f9b · 7967f9b
1 parent 1a1dee6
commit 7967f9b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 20 deletions.
diff --git a/admin-ui/app/locales/en/translation.json b/admin-ui/app/locales/en/translation.json
@@ -25,7 +25,8 @@
     "yes": "Yes",
     "change_password": "Change Password",
     "close": "Close",
-    "delete": "Delete"
+    "delete": "Delete",
+    "revoke": "Revoke"
   },
   "dashboard": {
     "summary_title": "Actives Users & Access Token Stats",
@@ -300,7 +301,8 @@
     "creationTime": "Creation Time",
     "select_date_range":"Select a date range",
     "scope": "Scope",
-    "scopeExpression": "Scope Expression"
+    "scopeExpression": "Scope Expression",
+    "selectUserRevoke": "Select the user to revoke"
   },
   "languages": {
     "french": "French",

diff --git a/admin-ui/app/locales/fr/translation.json b/admin-ui/app/locales/fr/translation.json
@@ -91,7 +91,8 @@
     "view": "Vue",
     "yes": "Oui",
     "close": "Fermer",
-    "delete": "Supprimez"
+    "delete": "Supprimez",
+    "revoke": "Révoquer"
   },
   "fields": {
     "access_token_signing_alg": "Algorithme de signature de jeton d'accès",
@@ -287,7 +288,8 @@
     "associatedClient": "Client associé",
     "creationTime": "Heure de création",
     "portée": "Portée",
-    "scopeExpression": "Expression d'étendue"
+    "scopeExpression": "Expression d'étendue",
+    "selectUserRevoke": "Sélectionnez l'utilisateur à révoquer"
   },
   "messages": {
     "action_commit_question": "Journal d'audit : vous souhaitez appliquer les modifications apportées sur cette page ?",

diff --git a/admin-ui/app/locales/pt/translation.json b/admin-ui/app/locales/pt/translation.json
@@ -89,7 +89,8 @@
     "view": "Visualizar",
     "yes": "Sim",
     "close": "Fechar",
-    "delete": "Deletar"
+    "delete": "Deletar",
+    "revoke": "Revogar"
   },
   "fields": {
     "access_token_signing_alg": "Algoritmo de assinatura de token de acesso",
@@ -281,7 +282,8 @@
     "associatedClient": "Cliente Associado",
     "creationTime": "Tempo de Criação",
     "escopo": "Escopo",
-    "scopeExpression": "Expressão de escopo"
+    "scopeExpression": "Expressão de escopo",
+    "selectUserRevoke": "Selecione o usuário para revogar"
   },
   "messages": {
     "action_commit_question": "Registro de auditoria: deseja aplicar as alterações feitas nesta página?",

diff --git a/admin-ui/app/utils/PermChecker.js b/admin-ui/app/utils/PermChecker.js
@@ -90,9 +90,12 @@ export const STAT_JANS_READ = 'jans_stat'
 export const USER_READ = BASE_URL + '/config/user.readonly'
 export const USER_WRITE = BASE_URL + '/config/user.write'
 
+export const SESSION_READ = BASE_URL + '/jans-auth-server/session.readonly'
+export const SESSION_DELETE = BASE_URL + '/jans-auth-server/session.delete'
+
 export const hasPermission = (scopes, scope) => {
   if (scopes) {
-    return scopes.includes(scope, 0)
+    return scopes.map(scp => scope === scp)
   }
   return false
 }

diff --git a/admin-ui/plugins/auth-server/components/Sessions/SessionListPage.js b/admin-ui/plugins/auth-server/components/Sessions/SessionListPage.js
@@ -1,9 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react'
 import moment from 'moment'
+import isEmpty from 'lodash/isEmpty'
 import MaterialTable from '@material-table/core'
-import { DeleteOutlined } from '@material-ui/icons'
-import { Paper } from '@material-ui/core'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import { Paper, TextField, Box } from '@material-ui/core'
 import { connect } from 'react-redux'
+import { Button } from 'reactstrap'
 import { Card, CardBody } from 'Components'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
@@ -13,8 +15,13 @@ import { getSessions, revokeSession } from 'Plugins/auth-server/redux/actions/Se
 import SetTitle from 'Utils/SetTitle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
+import {
+  hasPermission,
+  SESSION_DELETE,
+} from 'Utils/PermChecker'
 
 function SessionListPage({ sessions, permissions, loading, dispatch }) {
+  console.log('permissions', permissions)
   const { t } = useTranslation()
   const myActions = []
   const [item, setItem] = useState({})
@@ -25,6 +32,9 @@ function SessionListPage({ sessions, permissions, loading, dispatch }) {
   const selectedTheme = theme.state.theme
   const themeColors = getThemeColor(selectedTheme)
   const bgThemeColor = { background: themeColors.background }
+  const sessionUsername = sessions.map(session => session.sessionAttributes.auth_user)
+  const usernames = [...new Set(sessionUsername)]
+  const [revokeUsername, setRevokeUsername] = useState()
 
   SetTitle(t('menus.sessions'))
 
@@ -60,9 +70,12 @@ function SessionListPage({ sessions, permissions, loading, dispatch }) {
     dispatch(getSessions())
   }, [])
 
-  const handleRevoke = (row) => {
-    setItem(row)
-    toggle()
+  const handleRevoke = () => {
+    const row = !isEmpty(sessions) ? sessions.find(({ sessionAttributes }) => sessionAttributes.auth_user === revokeUsername) : null
+    if (row) {
+      setItem(row)
+      toggle()
+    }
   }
 
   const onRevokeConfirmed = (message) => {
@@ -76,6 +89,30 @@ function SessionListPage({ sessions, permissions, loading, dispatch }) {
     <Card style={applicationStyle.mainCard}>
       <CardBody>
         <GluuViewWrapper canShow>
+          {hasPermission(permissions, SESSION_DELETE) && (
+            <Box display="flex" justifyContent="flex-end">
+              <Box display="flex" alignItems="center" fontSize="16px" mr="20px">
+                {t('fields.selectUserRevoke')}
+              </Box>
+              <Autocomplete
+                id="combo-box-demo"
+                options={usernames}
+                getOptionLabel={(option) => option}
+                style={{ width: 300 }}
+                onChange={(_, value) => setRevokeUsername(value)}
+                renderInput={(params) => <TextField {...params} label="Username" variant="outlined" />}
+              />
+              {revokeUsername && (
+                <Button
+                  color={`danger`}
+                  style={{ marginLeft: 20 }}
+                  onClick={handleRevoke}
+                >
+                  {t('actions.revoke')}
+                </Button>
+              )}
+            </Box>
+          )}
           <MaterialTable
             components={{
               Container: (props) => <Paper {...props} elevation={0} />,
@@ -96,14 +133,16 @@ function SessionListPage({ sessions, permissions, loading, dispatch }) {
             }}
           />
         </GluuViewWrapper>
-        <GluuDialog
-          row={item}
-          name={item.clientName}
-          handler={toggle}
-          modal={modal}
-          subject="openid connect client"
-          onAccept={onRevokeConfirmed}
-        />
+        {!isEmpty(item) && (
+          <GluuDialog
+            row={item}
+            name={item.sessionAttributes.auth_user}
+            handler={toggle}
+            modal={modal}
+            subject="user session revoke"
+            onAccept={onRevokeConfirmed}
+          />
+        )}
       </CardBody>
     </Card>
   )