Org admin improve (#3090)

* move btn position

* repair ui interaction

* add btn-loading state

* repair text to password bug

* repair height bug

frontend/src/components/dialog/org-add-admin-dialog.js

@@ -48,8 +48,8 @@ class AddOrgAdminDialog extends React.Component {
           />
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.addOrgAdmin}>{gettext('Submit')}</Button>
           <Button color="secondary" onClick={this.toggle}>{gettext('Close')}</Button>
+          <Button color="primary" onClick={this.addOrgAdmin}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/org-add-user-dialog.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Input, ModalHeader, ModalBody, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
+import { Button, Modal, Input, ModalHeader, ModalBody, ModalFooter, Label, Form, InputGroup, InputGroupAddon, FormGroup } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 
 const propTypes = {
@@ -9,6 +9,7 @@ const propTypes = {
 };
 
 class AddOrgUserDialog extends React.Component {
+
   constructor(props) {
     super(props);
     this.state = {
@@ -17,7 +18,8 @@ class AddOrgUserDialog extends React.Component {
       name: '',
       password: '',
       passwdnew: '',
-      errMessage: ''
+      errMessage: '',
+      isAddingUser: false,
     };
   }
 
@@ -25,6 +27,7 @@ class AddOrgUserDialog extends React.Component {
     let isValid = this.validateInputParams();
     if (isValid) {
       let { email, name, password } = this.state;
+      this.setState({isAddingUser: true});
       this.props.handleSubmit(email, name, password);
     }
   } 
@@ -60,7 +63,6 @@ class AddOrgUserDialog extends React.Component {
     this.setState({name: name});
   }
 
-
   inputPassword = (e) => {
     let passwd = e.target.value.trim();
     this.setState({password: passwd});
@@ -75,6 +77,10 @@ class AddOrgUserDialog extends React.Component {
     this.props.toggle();
   };
 
+  onInputTypeChange = () => {
+    this.setState({isPasswordVisible: false});
+  }
+
   validateInputParams() {
     let errMessage = '';
     let email = this.state.email;
@@ -111,17 +117,17 @@ class AddOrgUserDialog extends React.Component {
         <ModalBody>
           <Form>
             <FormGroup>
-              <Label>{gettext('Email')}</Label>
-              <Input value={this.state.email || ''} onChange={this.inputEmail} />
+              <Label for="userEmail">{gettext('Email')}</Label>
+              <Input id="userEmail"  value={this.state.email || ''} onChange={this.inputEmail} autoComplete="off" />
             </FormGroup>
             <FormGroup>
-              <Label>{gettext('Name(optional)')}</Label>
-              <Input value={this.state.name || ''} onChange={this.inputName} />
+              <Label for="userName">{gettext('Name(optional)')}</Label>
+              <Input id="userName" value={this.state.name || ''} onChange={this.inputName} autoComplete="off" />
             </FormGroup>
             <FormGroup>
-              <Label>{gettext('Password')}</Label>
+              <Label for="userPwd">{gettext('Password')}</Label>
               <InputGroup className="passwd">
-                <Input type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.password || ''} onChange={this.inputPassword}/>
+                <Input id="userPwd" type={this.state.isPasswordVisible ? 'text' : 'password'} onFocus={this.onInputTypeChange} value={this.state.password || ''} onChange={this.inputPassword} autoComplete="off" />
                 <InputGroupAddon addonType="append">
                   <Button onClick={this.togglePasswordVisible}><i className={`link-operation-icon fas ${this.state.isPasswordVisible ? 'fa-eye': 'fa-eye-slash'}`}></i></Button>
                   <Button onClick={this.generatePassword}><i className="link-operation-icon fas fa-magic"></i></Button>
@@ -129,13 +135,15 @@ class AddOrgUserDialog extends React.Component {
               </InputGroup>
             </FormGroup>
             <FormGroup>
-              <Label>{gettext('Confirm Password')}</Label>
-              <Input className="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} />
+              <Label for="userPwdNew">{gettext('Confirm Password')}</Label>
+              <Input id="userPwdNew" id="user" className="passwd" type={this.state.isPasswordVisible ? 'text' : 'password'} value={this.state.passwdnew || ''} onChange={this.inputPasswordNew} autoComplete="off" />
             </FormGroup>
-            <Button onClick={this.handleSubmit}>{gettext('Submit')}</Button>
           </Form>
           <Label className="err-message">{gettext(this.state.errMessage)}</Label>
         </ModalBody>
+        <ModalFooter>
+          <Button color="primary" disabled={this.state.isAddingUser} onClick={this.handleSubmit} className={this.state.isAddingUser ? 'btn-loading' : ''}>{gettext('Submit')}</Button>
+        </ModalFooter>
       </Modal>
     );
   }

frontend/src/pages/org-admin/index.js

@@ -57,7 +57,7 @@ class Org extends React.Component {
     return (
       <div id="main">
         <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} />
-        <MainPanel>
+        <MainPanel currentTab={currentTab} toggleAddOrgAdmin={this.toggleAddOrgAdmin} toggleAddOrgUser={this.toggleAddOrgUser}>
           <Router>
             <OrgUsers 
               path={siteRoot + "org/useradmin"}

frontend/src/pages/org-admin/main-panel.js

@@ -1,19 +1,41 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
 import Account from '../../components/common/account';
 
 const propTypes = {
+  currentTab: PropTypes.string.isRequired,
   children: PropTypes.object.isRequired,
 };
 
 class MainPanel extends Component {
 
+  toggleAddOrgUser = () => {
+    this.props.toggleAddOrgUser();
+  }
+
+  toggleAddOrgAdmin = () => {
+    this.props.toggleAddOrgAdmin();
+  }
+
   render() {
     return (
       <div className="main-panel o-hidden">
         <div className="main-panel-north border-left-show">
           <div className="cur-view-toolbar">
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
+            <div className="operation">
+              {this.props.currentTab === 'users' &&
+              <button className="btn btn-secondary operation-item" title={gettext('Add user')} onClick={this.toggleAddOrgUser}>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}
+              </button>
+              }
+              {this.props.currentTab === 'admins' &&
+              <button className="btn btn-secondary operation-item" title={gettext('Add admin')} onClick={this.toggleAddOrgAdmin}>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
+              </button>
+              }
+            </div>
           </div>
           <div className="common-toolbar">
             <Account />

frontend/src/pages/org-admin/org-user-item.js

@@ -136,7 +136,7 @@ class UserItem extends React.Component {
             <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
               <DropdownToggle
                 tag="a"
-                className="fas fa-ellipsis-v"
+                className="attr-action-icon fas fa-ellipsis-v"
                 title={gettext('More Operations')}
                 data-toggle="dropdown"
                 aria-expanded={this.state.isItemMenuShow}

frontend/src/pages/org-admin/org-users.js

@@ -14,14 +14,6 @@ class OrgUsers extends Component {
     this.props.tabItemClick(param);
   }
 
-  toggleAddOrgUser = () => {
-    this.props.toggleAddOrgUser();
-  }
-
-  toggleAddOrgAdmin = () => {
-    this.props.toggleAddOrgAdmin();
-  }
-
   render() {
     return (
       <div className="main-panel-center flex-row">
@@ -35,18 +27,6 @@ class OrgUsers extends Component {
                 <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + "org/useradmin/admins/"} title={gettext('Admin')}>{gettext('Admin')}</Link>
               </li>
             </ul>
-            <div className="operation mt-1">
-              {this.props.currentTab === 'users' &&
-              <button className="btn btn-secondary operation-item" title={gettext('Add user')} onClick={this.toggleAddOrgUser}>
-                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}
-              </button>
-              }
-              {this.props.currentTab === 'admins' &&
-              <button className="btn btn-secondary operation-item" title={gettext('Add admin')} onClick={this.toggleAddOrgAdmin}>
-                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
-              </button>
-              }
-            </div>
           </div>
           {this.props.children}
         </div>