feat(admin-ui): make list workable for add user

GluuFederation · Apr 7, 2022 · 7f13117 · 7f13117
1 parent 95fe299
commit 7f13117
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 21 deletions.
diff --git a/admin-ui/plugins/admin/components/UserManagement/UserForm.js b/admin-ui/plugins/admin/components/UserManagement/UserForm.js
@@ -18,11 +18,20 @@ import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
 import GluuTooltip from '../../../../app/routes/Apps/Gluu/GluuTooltip'
 import { SCRIPT, USERS } from '../../../../app/utils/ApiResources'
 import { useTranslation } from 'react-i18next'
-import { timezones } from './Timezones'
+import { timezones, initialClaims } from './constLists'
 function UserForm() {
   const { t } = useTranslation()
   const [init, setInit] = useState(false)
   const [modal, setModal] = useState(false)
+  const [searchClaims, setSearchClaims] = useState('')
+  const [selectedClaims, setSelectedClaims] = useState([])
+  const [claims, setClaims] = useState(initialClaims)
+
+  const setSelectedClaimsToState = (data) => {
+    let tempList = [...selectedClaims]
+    tempList.push(data)
+    setSelectedClaims(tempList)
+  }
 
   return (
     <Form>
@@ -147,18 +156,54 @@ function UserForm() {
               />
             </Col>
           </FormGroup>
+          {selectedClaims.map((data, key) => {
+            return (
+              <FormGroup row key={key}>
+                <Col sm={3}>
+                  <GluuLabel label={data.name} size={12} />
+                </Col>
+                <Col sm={8}>
+                  <Input {...data.attributes} />
+                </Col>
+                <Col sm={1}>X</Col>
+              </FormGroup>
+            )
+          })}
         </Col>
         <Col sm={4}>
           <div className="border border-light ">
             <div className="bg-light text-bold p-2">Available Claims</div>
+            <input
+              type="search"
+              className="form-control mb-2"
+              placeholder="Search Claims Here "
+              onChange={(e) => setSearchClaims(e.target.value)}
+              value={searchClaims}
+            />
             <ul className="list-group">
-              <li className="list-group-item">Birthday</li>
-              <li className="list-group-item">
-                CIBA Device Registration Token
-              </li>
-              <li className="list-group-item">CIBA User Code</li>
-              <li className="list-group-item">Country</li>
-              <li className="list-group-item">Enrollment Code</li>
+              {claims.map((data, key) => {
+                let name = data.name.toLowerCase()
+                const alreadyAddedClaim = selectedClaims.some(
+                  (el) => el.name === data.name,
+                )
+                if (
+                  (name.includes(searchClaims.toLowerCase()) ||
+                    searchClaims == '') &&
+                  !alreadyAddedClaim
+                ) {
+                  return (
+                    <li
+                      className="list-group-item"
+                      key={'list' + key}
+                      title="Click to add to the form"
+                    >
+                      <a onClick={() => setSelectedClaimsToState(data)}>
+                        {data.name}
+                      </a>
+                    </li>
+                  )
+                }
+              })}
             </ul>
           </div>
         </Col>

diff --git a/admin-ui/plugins/admin/components/UserManagement/UserList.js b/admin-ui/plugins/admin/components/UserManagement/UserList.js
@@ -4,7 +4,7 @@ import { Paper } from '@material-ui/core'
 import UserDetailViewPage from './UserDetailViewPage'
 // import RoleAddDialogForm from './RoleAddDialogForm'
 import { Badge } from 'reactstrap'
-import { getUsers } from '../../redux/actions/UserActions'
+// import { getUsers } from '../../redux/actions/UserActions'
 import { useDispatch, useSelector } from 'react-redux'
 import { Card, CardBody, FormGroup } from '../../../../app/components'
 import { useTranslation } from 'react-i18next'
@@ -22,10 +22,10 @@ import {
 function UserList(props) {
   const dispatch = useDispatch()
 
-  useEffect(() => {
-    dispatch(getUsers({}))
-    console.log('HERE')
-  }, [])
+  // useEffect(() => {
+  //   dispatch(getUsers({}))
+  //   console.log('HERE')
+  // }, [])
 
   const usersList = useSelector((state) => state.userReducer.items)
   const loading = useSelector((state) => state.userReducer.loading)

diff --git a/...in/components/UserManagement/Timezones.js → ...n/components/UserManagement/constLists.js b/...in/components/UserManagement/Timezones.js → ...n/components/UserManagement/constLists.js
@@ -386,3 +386,218 @@ export const timezones = [
   'Pacific/Wallis',
   'WET',
 ]
+
+export const initialClaims = [
+  {
+    type: 'input',
+    name: 'Birthday',
+    attributes: [
+      {
+        type: 'date',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'CIBA Device Registration Token',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'CIBA User Code',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Country',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Enrollment Code',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'select',
+    name: 'Gender',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+        values: ['Male', 'Female'],
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'IMAP Data',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Organization',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Open ID Connect JSON formatted address',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'select',
+    name: 'Phone Number Verified',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+        values: ['true', 'false'],
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Picture URL',
+    attributes: [
+      {
+        type: 'url',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Preferred language',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Preferred username',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Profile URL',
+    attributes: [
+      {
+        type: 'url',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Secret Question',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Secret Answer',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'Time Zone info',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'input',
+    name: 'TransientId',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'textarea',
+    name: 'User Certificate',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'text',
+    name: 'User Permission',
+    attributes: [
+      {
+        type: 'text',
+        class: 'form-control',
+      },
+    ],
+  },
+  {
+    type: 'text',
+    name: 'Website URL',
+    attributes: [
+      {
+        type: 'url',
+        class: 'form-control',
+      },
+    ],
+  },
+]
diff --git a/admin-ui/plugins/admin/plugin-metadata.js b/admin-ui/plugins/admin/plugin-metadata.js
@@ -15,7 +15,7 @@ import scriptSaga from './redux/sagas/CustomScriptSaga'
 import apiRoleSaga from './redux/sagas/ApiRoleSaga'
 import apiPermissionSaga from './redux/sagas/ApiPermissionSaga'
 import mappingSaga from './redux/sagas/MappingSaga'
-import userSaga from './redux/sagas/UserSaga'
+// import userSaga from './redux/sagas/UserSaga'
 
 import scriptReducer from './redux/reducers/CustomScriptReducer'
 import apiRoleReducer from './redux/reducers/ApiRoleReducer'
@@ -156,7 +156,7 @@ const pluginMetadata = {
     apiRoleSaga(),
     apiPermissionSaga(),
     mappingSaga(),
-    userSaga(),
+    // userSaga(),
   ],
 }
 

diff --git a/admin-ui/plugins/admin/redux/actions/UserActions.js b/admin-ui/plugins/admin/redux/actions/UserActions.js
@@ -5,15 +5,15 @@ import {
 } from './types'
 
 export const getUsers = (action) => ({
-  type: UM_GET_USERS,
-  payload: { action },
+  // type: UM_GET_USERS,
+  // payload: { action },
 })
 
 export const updateUserResponse = (action) => ({
-  type: UM_UPDATE_USERS_RESPONSE,
-  payload: { action },
+  // type: UM_UPDATE_USERS_RESPONSE,
+  // payload: { action },
 })
 export const UMupdateUserLoading = (action) => ({
-  type: UM_UPDATE_LOADING,
-  payload: action,
+  // type: UM_UPDATE_LOADING,
+  // payload: action,
 })