Custom org saml login domain (#5622)

* add domain verification api

* improve org saml config page

* improve code

* optimize code

* optimize code

* optimize code

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

@@ -1,9 +1,11 @@
 import React, { Component, Fragment } from 'react';
-import { Input, Row, Col, Label } from 'reactstrap';
+import { Input, InputGroup, InputGroupAddon, Button, Row, Col, Label } from 'reactstrap';
 import PropTypes from 'prop-types';
+import { gettext } from '../../utils/constants';
 
 const propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.string,
+  domainVerified: PropTypes.bool,
   changeValue: PropTypes.func.isRequired,
   displayName: PropTypes.string.isRequired,
 };
@@ -12,14 +14,45 @@ class OrgSamlConfigInput extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      isBtnsShown: false,
+      value: this.props.value,
+    };
   }
 
-  inputValue = (e) => {
-    this.props.changeValue(e);
+  componentWillReceiveProps(nextProps) {
+    this.setState({value: nextProps.value,});
+  }
+
+  toggleBtns = () => {
+    this.setState({isBtnsShown: !this.state.isBtnsShown});
+  };
+
+  hideBtns = () => {
+    if (!this.state.isBtnsShown) {
+      return;
+    }
+    if (this.props.value != this.state.value) {
+      this.setState({value: this.props.value});
+    }
+    this.toggleBtns();
+  };
+
+  onInputChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+
+  onSubmit = () => {
+    const value = this.state.value.trim();
+    if (value != this.props.value) {
+      this.props.changeValue(value);
+    }
+    this.toggleBtns();
   };
 
   render() {
-    const { value, displayName } = this.props;
+    const { isBtnsShown, value } = this.state;
+    const { displayName } = this.props;
     return (
       <Fragment>
         <Row className="my-4">
@@ -27,7 +60,22 @@ class OrgSamlConfigInput extends Component {
             <Label className="web-setting-label">{displayName}</Label>
           </Col>
           <Col md="5">
-            <Input innerRef={input => {this.newInput = input;}} value={value} onChange={this.inputValue}/>
+            <InputGroup>
+              <Input type='text' value={value} onChange={this.onInputChange} onFocus={this.toggleBtns} onBlur={this.hideBtns}/>
+              {this.props.domainVerified &&
+                <InputGroupAddon addonType="append">
+                  <Button color="success" className="border-0">{gettext('Verified')}</Button>
+                </InputGroupAddon>
+              }
+            </InputGroup>
+          </Col>
+          <Col md="4">
+            {isBtnsShown &&
+              <Fragment>
+                <Button className="sf2-icon-tick web-setting-icon-btn web-setting-icon-btn-submit" onMouseDown={this.onSubmit} title={gettext('Submit')}></Button>
+                <Button className="ml-1 sf2-icon-x2 web-setting-icon-btn web-setting-icon-btn-cancel" title={gettext('Cancel')}></Button>
+              </Fragment>
+            }
           </Col>
         </Row>
       </Fragment>