feat(admin-ui): design the layout for api role management #327

GluuFederation · Dec 5, 2021 · 1cc2789 · 1cc2789
1 parent 9e7c947
commit 1cc2789
Show file tree

Hide file tree

Showing 20 changed files with 176 additions and 35 deletions.
diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
@@ -241,7 +241,7 @@
     "api": {
       "roles": "Access roles",
       "permissions": "Permissions",
-      "mapping":"Mapping"
+      "mapping": "Mapping"
     },
     "cache": "Cache",
     "clients": "Clients",
@@ -358,13 +358,15 @@
   },
   "titles": {
     "acrs": "ACRs",
+    "active_users": "Actives Users && Access Token Stats",
     "acrs_logging": "ACRs && Logging",
     "algorithmic_keys": "Algorithmic Keys",
-    "application_settings":"Application Settings",
+    "application_settings": "Application Settings",
     "all_attributes": "Attributes/Claims",
     "all_custom_scripts": "Custom Scripts",
     "all_oidc_clients": "OpenID Clients",
     "all_scopes": "OAuth/OpenID Scopes",
+    "couchbase_authentication": "Couchbase Authentication",
     "client_advanced": "Advanced",
     "client_attributes": "Client Attributes",
     "client_basic": "Basic",
@@ -377,6 +379,7 @@
     "detail_information": "Detailed information",
     "detail_contact": "Detail Contact",
     "ldap_authentication": "LDAP Authentication",
+    "services_health":"Services Health Status",
     "sql_authentication": "SQL Authentication",
     "logging": "LOGGING",
     "jwk_keys": "JWK keys",

diff --git a/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js b/app/routes/Apps/Gluu/GluuAutoCompleteWithAdd.js
@@ -3,6 +3,7 @@ import { FormGroup, Col, Row, Button, Input } from '../../../components'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import GluuLabel from '../Gluu/GluuLabel'
 import GluuTooltip from './GluuTooltip'
+import applicationStyle from './styles/applicationstyle'
 import { useTranslation } from 'react-i18next'
 
 function GluuAutoCompleteWithAdd({
@@ -53,7 +54,12 @@ function GluuAutoCompleteWithAdd({
             <Col sm={10}>
               <Input placeholder={placeholder} id={inputId} />
             </Col>
-            <Button color="primary" type="button" onClick={addItem}>
+            <Button
+              color="primary"
+              style={applicationStyle.buttonStyle}
+              type="button"
+              onClick={addItem}
+            >
               {t('actions.add')}
             </Button>
           </Row>

diff --git a/app/routes/Apps/Gluu/GluuCommitDialog.js b/app/routes/Apps/Gluu/GluuCommitDialog.js
@@ -11,6 +11,7 @@ import {
   ModalFooter,
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from './styles/applicationstyle'
 import ClipLoader from 'react-spinners/ClipLoader'
 
 const GluuCommitDialog = ({
@@ -44,7 +45,7 @@ const GluuCommitDialog = ({
         document.getElementById(USER_MESSAGE).value,
       )
     }
-    setLoading(true);
+    setLoading(true)
     onAccept(document.getElementById(USER_MESSAGE).value)
   }
   return (
@@ -91,12 +92,20 @@ const GluuCommitDialog = ({
       <ModalFooter>
         <ClipLoader loading={loading} size={35} />
         {active && (
-          <Button color="primary" onClick={handleAccept}>
+          <Button
+            color="primary"
+            style={applicationStyle.buttonStyle}
+            onClick={handleAccept}
+          >
             <i className="fa fa-check-circle mr-2"></i>
             {t('actions.accept')}
           </Button>
         )}{' '}
-        <Button color="danger" onClick={handler}>
+        <Button
+          color="danger"
+          style={applicationStyle.buttonStyle}
+          onClick={handler}
+        >
           <i className="fa fa-remove mr-2"></i>
           {t('actions.no')}
         </Button>

diff --git a/app/routes/Apps/Gluu/GluuCommitFooter.js b/app/routes/Apps/Gluu/GluuCommitFooter.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Col, Button, FormGroup, Divider } from './../../../components'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from '../../Apps/Gluu/styles/applicationstyle'
 
 function GluuCommitFooter({
   extraOnClick,
@@ -20,7 +21,12 @@ function GluuCommitFooter({
         &nbsp;
         {!hideButtons || !hideButtons['back'] ? (
           <Col sm={2} md={1}>
-            <Button color="secondary" type="button" onClick={goBack}>
+            <Button
+              color="secondary"
+              style={applicationStyle.buttonStyle}
+              type="button"
+              onClick={goBack}
+            >
               <i className="fa fa-arrow-circle-left mr-2"></i>
               {t('actions.cancel')}
             </Button>
@@ -30,7 +36,12 @@ function GluuCommitFooter({
         )}
         <Col sm={0} md={7}>
           {extraLabel && extraOnClick && (
-            <Button color="primary" type="button" onClick={extraOnClick}>
+            <Button
+              color="primary"
+              type="button"
+              style={applicationStyle.buttonStyle}
+              onClick={extraOnClick}
+            >
               {extraLabel}
             </Button>
           )}
@@ -47,6 +58,7 @@ function GluuCommitFooter({
           <Button
             type="button"
             color="primary"
+            style={applicationStyle.buttonStyle}
             className="ml-auto px-4"
             onClick={saveHandler}
           >

diff --git a/app/routes/Apps/Gluu/GluuDialog.js b/app/routes/Apps/Gluu/GluuDialog.js
@@ -10,6 +10,7 @@ import {
   ModalFooter,
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from '../../Apps/Gluu/styles/applicationstyle'
 
 const GluuDialog = ({ row, handler, modal, onAccept, subject, name }) => {
   const [active, setActive] = useState(false)
@@ -54,11 +55,19 @@ const GluuDialog = ({ row, handler, modal, onAccept, subject, name }) => {
         </ModalBody>
         <ModalFooter>
           {active && (
-            <Button color="primary" onClick={handleAccept}>
+            <Button
+              color="primary"
+              style={applicationStyle.buttonStyle}
+              onClick={handleAccept}
+            >
               {t('actions.yes')}
             </Button>
           )}{' '}
-          <Button color="secondary" onClick={handler}>
+          <Button
+            color="secondary"
+            style={applicationStyle.buttonStyle}
+            onClick={handler}
+          >
             {t('actions.no')}
           </Button>
         </ModalFooter>

diff --git a/app/routes/Apps/Gluu/GluuFooter.js b/app/routes/Apps/Gluu/GluuFooter.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Col, Button, FormGroup, Divider } from './../../../components'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from '../../Apps/Gluu/styles/applicationstyle'
 
 function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
   const { t } = useTranslation()
@@ -15,14 +16,22 @@ function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
       <FormGroup row>
         <Col sm={4} md={2}>
           {extraLabel && extraOnClick && (
-            <Button color="primary" onClick={extraOnClick}>
+            <Button
+              color="primary"
+              onClick={extraOnClick}
+              style={applicationStyle.buttonStyle}
+            >
               {t(extraLabel)}
             </Button>
           )}
         </Col>
         {!hideButtons || !hideButtons['back'] ? (
           <Col sm={4} md={2}>
-            <Button color="secondary" onClick={goBack}>
+            <Button
+              color="secondary"
+              onClick={goBack}
+              style={applicationStyle.buttonStyle}
+            >
               <i className="fa fa-arrow-circle-left mr-2"></i>
               {t('actions.cancel')}
             </Button>
@@ -33,7 +42,11 @@ function GluuFooter({ extraOnClick, extraLabel, hideButtons }) {
         &nbsp;
         {!hideButtons || !hideButtons['save'] ? (
           <Col sm={4} md={2}>
-            <Button color="primary" type="submit">
+            <Button
+              color="primary"
+              type="submit"
+              style={applicationStyle.buttonStyle}
+            >
               <i className="fa fa-check-circle mr-2"></i>
               {t('actions.save')}
             </Button>

diff --git a/app/routes/Apps/Gluu/GluuInlineInput.js b/app/routes/Apps/Gluu/GluuInlineInput.js
@@ -3,6 +3,7 @@ import GluuLabel from './GluuLabel'
 import GluuTooltip from './GluuTooltip'
 import { useTranslation } from 'react-i18next'
 import { Typeahead } from 'react-bootstrap-typeahead'
+import applicationStyle from '../../Apps/Gluu/styles/applicationstyle'
 import {
   Col,
   InputGroup,
@@ -114,7 +115,12 @@ function GluuInlineInput({
       <Col sm={2}>
         {show && (
           <>
-            <Button color="primary" size="sm" onClick={onAccept}>
+            <Button
+              color="primary"
+              style={applicationStyle.buttonStyle}
+              size="sm"
+              onClick={onAccept}
+            >
               <i className="fa fa-check mr-2"></i>
             </Button>{' '}
             <Button color="danger" size="sm" onClick={onCancel}>

diff --git a/app/routes/Apps/Gluu/GluuModal.js b/app/routes/Apps/Gluu/GluuModal.js
@@ -8,6 +8,7 @@ import {
   Input,
 } from 'reactstrap'
 import { useTranslation } from 'react-i18next'
+import applicationStyle from './styles/applicationstyle'
 
 function GluuModal({ title, modal, handler, onAccept }) {
   const { t } = useTranslation()
@@ -24,11 +25,19 @@ function GluuModal({ title, modal, handler, onAccept }) {
         <Input placeholder={t('placeholders.redirect_uri')} />
       </ModalBody>
       <ModalFooter>
-        <Button color="primary" onClick={onAccept}>
+        <Button
+          color="primary"
+          style={applicationStyle.buttonStyle}
+          onClick={onAccept}
+        >
           {t('actions.add')}
         </Button>
         &nbsp;
-        <Button color="primary" onClick={handler}>
+        <Button
+          color="primary"
+          style={applicationStyle.buttonStyle}
+          onClick={handler}
+        >
           {t('ations.cancel')}
         </Button>
       </ModalFooter>

diff --git a/app/routes/Apps/Gluu/GluuProperties.js b/app/routes/Apps/Gluu/GluuProperties.js
@@ -42,7 +42,11 @@ function GluuProperties({
       <Accordion.Header>{t(label).toUpperCase()}</Accordion.Header>
       <Accordion.Body>
         <Button
-          style={{ float: 'right', marginTop: -40 }}
+          style={{
+            background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
+            float: 'right',
+            marginTop: -40,
+          }}
           type="button"
           color="primary"
           onClick={addProperty}

diff --git a/app/routes/Apps/Gluu/GluuTypeAheadWithAdd.js b/app/routes/Apps/Gluu/GluuTypeAheadWithAdd.js
@@ -3,6 +3,7 @@ import { FormGroup, Col, Row, Button, Input } from '../../../components'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import GluuLabel from '../Gluu/GluuLabel'
 import GluuTooltip from './GluuTooltip'
+import applicationStyle from './styles/applicationstyle'
 import { useTranslation } from 'react-i18next'
 
 function GluuTypeAheadWithAdd({
@@ -59,7 +60,12 @@ function GluuTypeAheadWithAdd({
                 aria-label="new_entry"
               />
             </Col>
-            <Button color="primary" type="button" onClick={addItem}>
+            <Button
+              color="primary"
+              type="button"
+              style={applicationStyle.buttonStyle}
+              onClick={addItem}
+            >
               <i className="fa fa-plus-circle mr-2"></i>
               {t('actions.add')}
             </Button>

diff --git a/app/routes/Apps/Gluu/styles/applicationstyle.js b/app/routes/Apps/Gluu/styles/applicationstyle.js
@@ -12,4 +12,7 @@ export default {
     padding: '0px 5px 0px 5px',
     color: 'white',
   },
+  buttonStyle: {
+    background: 'linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)',
+  },
 }
diff --git a/plugins/admin/components/Configuration/LicenseDetailsPage.js b/plugins/admin/components/Configuration/LicenseDetailsPage.js
@@ -13,6 +13,7 @@ import {
   CardBody,
   CardTitle,
   Container,
+  FormGroup,
   Row,
   Col,
 } from '../../../../app/components'
@@ -36,6 +37,8 @@ function LicenseDetailsPage({ item, loading, dispatch }) {
         <CardBody>
           <CardTitle tag="h6" className="mb-4">
             <GluuRibbon title="fields.licenseDetails" doTranslate fromLeft />
+            <FormGroup row />
+            <FormGroup row />
           </CardTitle>
           <GluuLoader blocking={loading}>
             {item.licenseEnable ? (

diff --git a/plugins/admin/components/MonthlyActiveUsersPage.js b/plugins/admin/components/MonthlyActiveUsersPage.js
@@ -4,11 +4,14 @@ import {
   Card,
   CardFooter,
   CardBody,
+  FormGroup,
   Label,
   Input,
   Badge,
 } from '../../../app/components'
 import GluuLoader from '../../../app/routes/Apps/Gluu/GluuLoader'
+import GluuRibbon from '../../../app/routes/Apps/Gluu/GluuRibbon'
+import applicationStyle from '../../../app/routes/Apps/Gluu/styles/applicationstyle'
 import GluuViewWrapper from '../../../app/routes/Apps/Gluu/GluuViewWrapper'
 import {
   LineChart,
@@ -224,6 +227,9 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
       >
         <ResponsiveContainer>
           <Card>
+            <GluuRibbon title={t('titles.active_users')} fromLeft />
+            <FormGroup row />
+            <FormGroup row />
             <CardBody
               className="d-flex flex-column justify-content-center align-items-center pt-5"
               style={{ minHeight: '400px' }}
@@ -253,7 +259,12 @@ function MonthlyActiveUsersPage({ stat, permissions, loading, dispatch }) {
                     onClick={_handleClickRangeBox2}
                   />
                 </Picker>
-                <Button className="ml-4 mr-4" color="primary" onClick={search}>
+                <Button
+                  style={applicationStyle.buttonStyle}
+                  className="ml-4 mr-4"
+                  color="primary"
+                  onClick={search}
+                >
                   {t('actions.view')}
                 </Button>
                 <Label className="h4">

diff --git a/plugins/auth-server/components/Clients/ClientWizardForm.js b/plugins/auth-server/components/Clients/ClientWizardForm.js
@@ -17,6 +17,8 @@ import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
 import { Formik } from 'formik'
 import { useTranslation } from 'react-i18next'
 import { hasPermission, CLIENT_WRITE } from '../../../../app/utils/PermChecker'
+import applicationStyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
+
 const sequence = [
   'Basic',
   'Advanced',
@@ -394,6 +396,7 @@ function ClientWizardForm({
                     <Button
                       type="button"
                       onClick={prevStep}
+                      style={applicationStyle.buttonStyle}
                       color="link"
                       className="mr-3"
                     >
@@ -406,6 +409,7 @@ function ClientWizardForm({
                       type="button"
                       color="primary"
                       onClick={nextStep}
+                      style={applicationStyle.buttonStyle}
                       className="ml-auto px-4"
                     >
                       {t('actions.next')}
@@ -420,6 +424,7 @@ function ClientWizardForm({
                         color="primary"
                         className="ml-auto px-4"
                         onClick={toggle}
+                        style={applicationStyle.buttonStyle}
                       >
                         {t('actions.apply')}
                       </Button>