feat(admin-ui): change password implemented

admin-ui/app/locales/en/translation.json

@@ -20,7 +20,8 @@
     "remove": "Remove",
     "test": "Test",
     "view": "View",
-    "yes": "Yes"
+    "yes": "Yes",
+    "change_password": "Change Password"
   },
   "fields": {
     "access_token_signing_alg": "Access Token Signing Algorithm",

admin-ui/plugins/user-management/components/UserManagement/UserEditPage.js

@@ -80,6 +80,7 @@ function UserEditPage() {
       givenName: values.givenName || '',
       customAttributes: customAttributes,
       dn: userDetails.dn,
+      customObjectClasses: ['top', 'jansPerson', 'jansCustomPerson'],
     }
     dispatch(updateExistingUser(submitableValues))
   }

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

@@ -1,27 +1,40 @@
 import React, { useEffect, useState } from 'react'
-import { Col, Form, FormGroup } from '../../../../app/components'
+import { Button, Col, Form, FormGroup } from '../../../../app/components'
 import GluuInputRow from '../../../../app/routes/Apps/Gluu/GluuInputRow'
 import GluuSelectRow from '../../../../app/routes/Apps/Gluu/GluuSelectRow'
 import GluuFooter from '../../../../app/routes/Apps/Gluu/GluuFooter'
 import { useTranslation } from 'react-i18next'
 import UserClaimEntry from './UserClaimEntry'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import GluuLoader from '../../../../app/routes/Apps/Gluu/GluuLoader'
 import GluuCommitDialog from '../../../../app/routes/Apps/Gluu/GluuCommitDialog'
-
+import applicationstyle from '../../../../app/routes/Apps/Gluu/styles/applicationstyle'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
+import { updateUserPassword } from '../../redux/actions/UserActions'
 function UserForm({ formik }) {
+  const dispatch = useDispatch()
   const { t } = useTranslation()
   const DOC_SECTION = 'user'
   const [searchClaims, setSearchClaims] = useState('')
   const [selectedClaims, setSelectedClaims] = useState([])
   const [passwordError, setPasswordError] = useState('')
   const [showButtons, setShowButtons] = useState(false)
   const [modal, setModal] = useState(false)
+  const [changePasswordModal, setChangePasswordModal] = useState(false)
 
   const toggle = () => {
     setModal(!modal)
   }
 
+  const submitChangePassword = () => {
+    let submitableValue = {
+      userPassword: formik.values.userPassword,
+      inum: userDetails.inum,
+    }
+    dispatch(updateUserPassword(submitableValue))
+    toggleChangePasswordModal()
+  }
+
   const submitForm = () => {
     toggle()
     formik.handleSubmit()
@@ -100,8 +113,78 @@ function UserForm({ formik }) {
     setSelectedClaims(newList)
   }
 
+  function goBack() {
+    window.history.back()
+  }
+
+  const toggleChangePasswordModal = () => {
+    setChangePasswordModal(!changePasswordModal)
+    formik.setFieldValue('userPassword')
+    formik.setFieldValue('userConfirmPassword')
+    setShowButtons(true)
+  }
+
   return (
     <GluuLoader blocking={loading}>
+      <Modal
+        isOpen={changePasswordModal}
+        toggle={toggleChangePasswordModal}
+        className="modal-outline-primary"
+      >
+        <ModalHeader>Change Password</ModalHeader>
+        <ModalBody>
+          <FormGroup row>
+            <Col>
+              <GluuInputRow
+                doc_category={DOC_SECTION}
+                label="Password"
+                name="userPassword"
+                type="password"
+                value={formik.values.userPassword || ''}
+                formik={formik}
+                lsize={3}
+                rsize={9}
+              />
+              <GluuInputRow
+                doc_category={DOC_SECTION}
+                label="Confirm Password"
+                name="userConfirmPassword"
+                type="password"
+                value={formik.values.userConfirmPassword || ''}
+                formik={formik}
+                lsize={3}
+                rsize={9}
+              />
+
+              {passwordError != '' && (
+                <span className="text-danger">{passwordError}</span>
+              )}
+            </Col>
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter>
+          {formik.values?.userPassword?.length > 3 &&
+            formik.values?.userPassword ==
+              formik.values.userConfirmPassword && (
+              <Button
+                color="primary"
+                style={applicationstyle.buttonStyle}
+                type="button"
+                onClick={() => submitChangePassword()}
+              >
+                {t('actions.change_password')}
+              </Button>
+            )}
+          &nbsp;
+          <Button
+            color="primary"
+            style={applicationstyle.buttonStyle}
+            onClick={toggleChangePasswordModal}
+          >
+            {t('actions.cancel')}
+          </Button>
+        </ModalFooter>
+      </Modal>
       <Form
         onSubmit={(e) => {
           e.preventDefault()
@@ -215,7 +298,7 @@ function UserForm({ formik }) {
                 rsize={9}
               />
             )}
-            {passwordError != '' && (
+            {passwordError != '' && !changePasswordModal && (
               <span className="text-danger">{passwordError}</span>
             )}
             {selectedClaims.map((data, key) => (
@@ -227,7 +310,44 @@ function UserForm({ formik }) {
                 type="input"
               />
             ))}
-            {showButtons && <GluuFooter />}
+            {showButtons && (
+              <FormGroup row>
+                <Col md={4}>
+                  {userDetails && (
+                    <Button
+                      color="secondary"
+                      onClick={() => setChangePasswordModal(true)}
+                      style={applicationstyle.buttonStyle}
+                    >
+                      <i className="fa fa-key mr-2"></i>
+                      {t('actions.change_password')}
+                    </Button>
+                  )}
+                </Col>
+                <Col md={8} className="text-right">
+                  <Button
+                    color="secondary"
+                    type="button"
+                    onClick={goBack}
+                    style={applicationstyle.buttonStyle}
+                  >
+                    <i className="fa fa-arrow-circle-left mr-2"></i>
+                    {t('actions.cancel')}
+                  </Button>
+                  {/* For Space in buttons */}
+                  &nbsp; &nbsp; &nbsp;
+                  {/* For Space in buttons */}
+                  <Button
+                    color="primary"
+                    type="submit"
+                    style={applicationstyle.buttonStyle}
+                  >
+                    <i className="fa fa-check-circle mr-2"></i>
+                    {t('actions.save')}
+                  </Button>
+                </Col>
+              </FormGroup>
+            )}
           </Col>
           <Col sm={4}>
             <div className="border border-light ">

admin-ui/plugins/user-management/redux/actions/UserActions.js

@@ -7,6 +7,7 @@ import {
   UM_UPDATE_EXISTING_USER,
   UM_REDIRECT_TO_LIST,
   UM_DELETE_EXISTING_USER,
+  UM_UPDATE_PASSWORD,
 } from './types'
 
 export const getUsers = (action) => ({
@@ -48,6 +49,12 @@ export const updateExistingUser = (action) => {
     payload: action,
   }
 }
+export const updateUserPassword = (action) => {
+  return {
+    type: UM_UPDATE_PASSWORD,
+    payload: action,
+  }
+}
 
 export const deleteExistingUser = (inum) => {
   return {

admin-ui/plugins/user-management/redux/actions/types.js

@@ -71,3 +71,4 @@ export const UM_UPDATE_EXISTING_USER = 'UM_UPDATE_EXISTING_USER'
 export const UM_SELECTED_USER_DATA = 'UM_SELECTED_USER_DATA'
 export const UM_REDIRECT_TO_LIST = 'UM_REDIRECT_TO_LIST'
 export const UM_DELETE_EXISTING_USER = 'UM_DELETE_EXISTING_USER'
+export const UM_UPDATE_PASSWORD = 'UM_UPDATE_PASSWORD'

admin-ui/plugins/user-management/redux/api/UserApi.js

@@ -21,25 +21,23 @@ export default class UserApi {
     })
   }
   updateUsers = (data) => {
-    // customUser
-
-    //CODE WITH PUT
     const options = {}
     options['customUser'] = data
     return new Promise((resolve, reject) => {
       this.api.putUser(options, (error, data) => {
         this.handleResponse(error, reject, resolve, data)
       })
     })
+  }
 
-    //Code with PATCH
-    // const options = {}
-    // options['userPatchRequest'] = data
-    // return new Promise((resolve, reject) => {
-    //   this.api.patchUserByInum(data.inum, options, (error, data) => {
-    //     this.handleResponse(error, reject, resolve, data)
-    //   })
-    // })
+  updateUserPassword = (data) => {
+    const options = {}
+    options['userPatchRequest'] = data
+    return new Promise((resolve, reject) => {
+      this.api.patchUserByInum(data.inum, options, (error, data) => {
+        this.handleResponse(error, reject, resolve, data)
+      })
+    })
   }
   deleteUser = (inum) => {
     return new Promise((resolve, reject) => {

admin-ui/plugins/user-management/redux/reducers/UserReducer.js

@@ -7,6 +7,7 @@ import {
   UM_CREATE_NEW_USER,
   UM_UPDATE_EXISTING_USER,
   UM_DELETE_EXISTING_USER,
+  UM_UPDATE_PASSWORD,
 } from '../actions/types'
 import reducerRegistry from '../../../../app/redux/reducers/ReducerRegistry'
 
@@ -30,6 +31,11 @@ export default function userReducer(state = INIT_STATE, action) {
         ...state,
         loading: true,
       }
+    case UM_UPDATE_PASSWORD:
+      return {
+        ...state,
+        loading: true,
+      }
     case UM_UPDATE_EXISTING_USER:
       return {
         ...state,

admin-ui/plugins/user-management/redux/sagas/UserSaga.js

@@ -19,6 +19,7 @@ import {
   UM_CREATE_NEW_USER,
   UM_UPDATE_EXISTING_USER,
   UM_DELETE_EXISTING_USER,
+  UM_UPDATE_PASSWORD,
 } from '../actions/types'
 import UserApi from '../api/UserApi'
 import { getClient } from '../../../../app/redux/api/base'
@@ -77,6 +78,22 @@ export function* updateExistingUserSaga({ payload }) {
   }
 }
 
+export function* updateUserPasswordSaga({ payload }) {
+  const audit = yield* initAudit()
+  try {
+    addAdditionalData(audit, FETCH, API_USERS, payload)
+    const userApi = yield* newFunction()
+    yield call(userApi.updateUserPassword, payload)
+    yield put(UMupdateUserLoading(false))
+  } catch (e) {
+    yield put(UMupdateUserLoading(false))
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  }
+}
+
 export function* getUsersSaga({ payload }) {
   const audit = yield* initAudit()
   try {
@@ -125,12 +142,16 @@ export function* watchUpdateUser() {
 export function* deleteUser() {
   yield takeLatest(UM_DELETE_EXISTING_USER, deleteUserSaga)
 }
+export function* updateUserPassword() {
+  yield takeLatest(UM_UPDATE_PASSWORD, updateUserPasswordSaga)
+}
 
 export default function* rootSaga() {
   yield all([
     fork(watchGetUsers),
     fork(watchCreateUser),
     fork(watchUpdateUser),
     fork(deleteUser),
+    fork(updateUserPassword),
   ])
 }