feat(admin-ui): gentle push for backup

admin-ui/plugins/admin/components/UserManagement/UserAddPage.js

@@ -4,12 +4,60 @@ import { Container, CardBody, Card } from '../../../../app/components'
 import UserForm from './UserForm'
 import GluuAlert from '../../../../app/routes/Apps/Gluu/GluuAlert'
 import { useTranslation } from 'react-i18next'
-
+import { useFormik } from 'formik'
+import { initialClaims } from './constLists'
+import { createNewUser } from '../../redux/actions/UserActions'
+import { useDispatch } from 'react-redux'
 function UserAddPage() {
+  const dispatch = useDispatch()
   const userAction = {}
   const history = useHistory()
   const { t } = useTranslation()
 
+  const createCustomAttributes = (values) => {
+    let customAttributes = []
+    if (values) {
+      for (let key in values) {
+        if (initialClaims.some((e) => e.id == key)) {
+          let val = []
+          val.push(values[key])
+          let obj = {
+            name: key,
+            multiValued: false,
+            values: val,
+            value: values[key],
+            displayValue: values[key],
+          }
+          customAttributes.push(obj)
+        }
+      }
+      // console.log(values);
+      return customAttributes
+    }
+  }
+
+  const submitData = (values) => {
+    let customAttributes = createCustomAttributes(values)
+    let submitableValues = {
+      userId: values.userId || '',
+      mail: values.mail,
+      displayName: values.displayName || '',
+      jansStatus: values.jansStatus || '',
+      userPassword: values.userPassword || '',
+      givenName: values.givenName || '',
+      customAttributes: customAttributes,
+    }
+    dispatch(createNewUser(submitableValues))
+    // console.log(submitableValues)
+  }
+
+  const formik = useFormik({
+    initialValues: {},
+    onSubmit: (values) => {
+      submitData(values)
+      // alert(JSON.stringify(values, null, 2))
+    },
+  })
   return (
     <React.Fragment>
       {/* <GluuRibbon title={t('titles.user_management')} fromLeft /> */}
@@ -21,7 +69,7 @@ function UserAddPage() {
       <Container>
         <Card className="mb-3">
           <CardBody>
-            <UserForm />
+            <UserForm formik={formik} />
           </CardBody>
         </Card>
       </Container>

admin-ui/plugins/admin/components/UserManagement/UserDetailViewPage.js

@@ -18,21 +18,15 @@ const UserDetailViewPage = ({ row }) => {
           </Col>
           <Col sm={4}>
             <GluuFormDetailRow
-              label="fields.nickName"
-              value={rowData.nickName}
+              label="fields.givenName"
+              value={rowData.givenName}
             />
           </Col>
           <Col sm={4}>
-            <GluuFormDetailRow
-              label="fields.userName"
-              value={rowData.userName}
-            />
+            <GluuFormDetailRow label="fields.userName" value={rowData.userId} />
           </Col>
           <Col sm={6}>
-            <GluuFormDetailRow
-              label="fields.email"
-              value={rowData?.emails[0].value}
-            />
+            <GluuFormDetailRow label="fields.email" value={rowData?.mail} />
           </Col>
         </Row>
       </Container>

admin-ui/plugins/admin/components/UserManagement/UserForm.js

@@ -1,25 +1,11 @@
 import React, { useState } from 'react'
-import { useFormik } from 'formik'
 import * as Yup from 'yup'
-import {
-  Col,
-  InputGroup,
-  CustomInput,
-  Form,
-  FormGroup,
-  Input,
-} from '../../../../app/components'
+import { Col, Form, FormGroup, Input } from '../../../../app/components'
 import GluuLabel from '../../../../app/routes/Apps/Gluu/GluuLabel'
-import GluuInumInput from '../../../../app/routes/Apps/Gluu/GluuInumInput'
-import GluuProperties from '../../../../app/routes/Apps/Gluu/GluuProperties'
-import Counter from '../../../../app/components/Widgets/GroupedButtons/Counter'
-import GluuCommitFooter from '../../../../app/routes/Apps/Gluu/GluuCommitFooter'
-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, initialClaims } from './constLists'
-function UserForm() {
+import { initialClaims } from './constLists'
+
+function UserForm({ formik }) {
   const { t } = useTranslation()
   const [init, setInit] = useState(false)
   const [modal, setModal] = useState(false)
@@ -40,40 +26,34 @@ function UserForm() {
   }
 
   return (
-    <Form>
+    <Form onSubmit={formik.handleSubmit}>
       <FormGroup row>
         <Col sm={8}>
           <FormGroup row>
             <Col sm={3}>
-              <GluuLabel label="User Name" size={12} />
+              <GluuLabel label="User Id" size={12} />
             </Col>
             <Col sm={9}>
-              <Input placeholder={'User Name'} id="userName" name="userName" />
+              <Input
+                placeholder={'User Id'}
+                id="userId"
+                name="userId"
+                onChange={formik.handleChange}
+                value={formik.values.userId || ''}
+              />
             </Col>
           </FormGroup>
           <FormGroup row>
             <Col sm={3}>
-              <GluuLabel label="Full Name" size={12} />
+              <GluuLabel label="Given Name" size={12} />
             </Col>
-            <Col sm={3}>
+            <Col sm={9}>
               <Input
                 placeholder={'Given Name'}
                 id="givenName"
                 name="givenName"
-              />
-            </Col>
-            <Col sm={3}>
-              <Input
-                placeholder={'Middle Name'}
-                id="middleName"
-                name="middleName"
-              />
-            </Col>
-            <Col sm={3}>
-              <Input
-                placeholder={'Family Name'}
-                id="familyName"
-                name="familyName"
+                onChange={formik.handleChange}
+                value={formik.values.givenName || ''}
               />
             </Col>
           </FormGroup>
@@ -86,66 +66,41 @@ function UserForm() {
                 placeholder={'Display Name'}
                 id="displayName"
                 name="displayName"
+                onChange={formik.handleChange}
+                value={formik.values.displayName || ''}
               />
             </Col>
           </FormGroup>
           <FormGroup row>
             <Col sm={3}>
-              <GluuLabel label="Nick Name" size={12} />
-            </Col>
-            <Col sm={9}>
-              <Input placeholder={'Nick Name'} id="nickName" name="nickName" />
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <Col sm={3}>
-              <GluuLabel label="Title" size={12} />
-            </Col>
-            <Col sm={9}>
-              <Input placeholder={'Title'} id="title" name="title" />
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <Col sm={3}>
-              <GluuLabel label="User Type" size={12} />
-            </Col>
-            <Col sm={9}>
-              <Input placeholder={'User Type'} id="userType" name="userType" />
-            </Col>
-          </FormGroup>
-          <FormGroup row>
-            <Col sm={3}>
-              <GluuLabel label="Preffered Language" size={12} />
+              <GluuLabel label="Email" size={12} />
             </Col>
             <Col sm={9}>
               <Input
-                type="select"
-                name="preferredLanguage"
-                id="preferredLanguage"
-                multiple={false}
-              >
-                <option value="en">en</option>
-                <option value="fr">fr</option>
-                <option value="pt">pt</option>
-              </Input>
+                type="email"
+                placeholder={'Enter your email'}
+                id="mail"
+                name="mail"
+                onChange={formik.handleChange}
+                value={formik.values.mail || ''}
+              />
             </Col>
           </FormGroup>
           <FormGroup row>
             <Col sm={3}>
-              <GluuLabel label="Timezone" size={12} />
+              <GluuLabel label="Status" size={12} />
             </Col>
             <Col sm={9}>
               <Input
                 type="select"
-                name="timezone"
-                id="timezone"
+                name="jansStatus"
+                id="jansStatus"
                 multiple={false}
+                onChange={formik.handleChange}
+                value={formik.values.jansStatus || ''}
               >
-                {timezones.map((data, key) => (
-                  <option value={data} key={key}>
-                    {data}
-                  </option>
-                ))}
+                <option value="en">active</option>
+                <option value="fr">inactive</option>
               </Input>
             </Col>
           </FormGroup>
@@ -157,8 +112,10 @@ function UserForm() {
               <Input
                 type="password"
                 placeholder={'Password'}
-                id="password"
-                name="password"
+                id="userPassword"
+                name="userPassword"
+                onChange={formik.handleChange}
+                value={formik.values.userPassword || ''}
               />
             </Col>
           </FormGroup>
@@ -170,7 +127,13 @@ function UserForm() {
                     <GluuLabel label={data.name} size={12} />
                   </Col>
                   <Col sm={8}>
-                    <Input {...data.attributes} />
+                    <Input
+                      {...data.attributes}
+                      name={data.id}
+                      id={data.id}
+                      onChange={formik.handleChange}
+                      value={formik.values[data.id] || ''}
+                    />
                   </Col>
                   <Col
                     sm={1}
@@ -192,7 +155,13 @@ function UserForm() {
                     <GluuLabel label={data.name} size={12} />
                   </Col>
                   <Col sm={8}>
-                    <Input {...data.attributes}>
+                    <Input
+                      {...data.attributes}
+                      name={data.id}
+                      id={data.id}
+                      onChange={formik.handleChange}
+                      value={formik.values[data.id] || ''}
+                    >
                       {data.attributes.values.map((val, key) => (
                         <option value={val} key={'option' + key}>
                           {val}
@@ -215,6 +184,11 @@ function UserForm() {
               )
             }
           })}
+          <FormGroup>
+            <Col sm={12}>
+              <button type="submit">Submit</button>
+            </Col>
+          </FormGroup>
         </Col>
         <Col sm={4}>
           <div className="border border-light ">

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)
@@ -83,23 +83,24 @@ function UserList(props) {
                 title: `${t('fields.name')}`,
                 field: 'displayName',
               },
-              { title: `${t('fields.userName')}`, field: 'userName' },
-              {
-                title: `${t('fields.email')}`,
-                field: 'emails',
-                render: (rowData) => {
-                  return rowData.emails.map((data, key) => {
-                    return (
-                      <Badge
-                        color={data.primary ? 'primary' : 'info'}
-                        key={'UL_email_' + key}
-                      >
-                        {data.value}
-                      </Badge>
-                    )
-                  })
-                },
-              },
+              { title: `${t('fields.userName')}`, field: 'userId' },
+              { title: `${t('fields.email')}`, field: 'mail' },
+              // {
+              //   title: `${t('fields.email')}`,
+              //   field: 'emails',
+              //   render: (rowData) => {
+              //     return rowData.emails.map((data, key) => {
+              //       return (
+              //         <Badge
+              //           color={data.primary ? 'primary' : 'info'}
+              //           key={'UL_email_' + key}
+              //         >
+              //           {data.value}
+              //         </Badge>
+              //       )
+              //     })
+              //   },
+              // },
             ]}
             data={usersList}
             isLoading={loading || false}