Added help text informing the user that the team invite link has been copied when they press the 'Copy Link' button

web/react/components/get_link_modal.jsx

@@ -10,46 +10,56 @@ ZeroClipboardMixin.ZeroClipboard.config({
 
 module.exports = React.createClass({
     zeroclipboardElementsSelector: '[data-copy-btn]',
-    mixins: [ ZeroClipboardMixin ],
+    mixins: [ZeroClipboardMixin],
     componentDidMount: function() {
         var self = this;
-        if(this.refs.modal) {
+        if (this.refs.modal) {
           $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
               var button = e.relatedTarget;
-              self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value') });
+              self.setState({title: $(button).attr('data-title'), value: $(button).attr('data-value')});
+          });
+          $(this.refs.modal.getDOMNode()).on('hide.bs.modal', function() {
+              self.setState({copiedLink: false});
           });
         }
     },
     getInitialState: function() {
         return { };
     },
+    handleClick: function() {
+        this.setState({copiedLink: true});
+    },
     render: function() {
-        var currentUser = UserStore.getCurrentUser()
+        var currentUser = UserStore.getCurrentUser();
 
         if (currentUser != null) {
             return (
-                <div className="modal fade" ref="modal" id="get_link" tabIndex="-1" role="dialog" aria-hidden="true">
-                   <div className="modal-dialog">
-                      <div className="modal-content">
-                        <div className="modal-header">
-                          <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                          <h4 className="modal-title" id="myModalLabel">{this.state.title} Link</h4>
+                <div className='modal fade' ref='modal' id='get_link' tabIndex='-1' role='dialog' aria-hidden='true'>
+                   <div className='modal-dialog'>
+                      <div className='modal-content'>
+                        <div className='modal-header'>
+                          <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
+                          <h4 className='modal-title' id='myModalLabel'>{this.state.title} Link</h4>
                         </div>
-                        <div className="modal-body">
-                          <p>{"The link below is used for open " + strings.TeamPlural + " or if you allowed your " + strings.Team + " members to sign up using their " + strings.Company + " email addresses."}
+                        <div className='modal-body'>
+                          <p>{'The link below is used for open ' + strings.TeamPlural + ' or if you allowed your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses.'}
                           </p>
-                          <textarea className="form-control no-resize" readOnly="true" value={this.state.value}></textarea>
+                          <textarea className='form-control no-resize' readOnly='true' value={this.state.value}></textarea>
                         </div>
-                        <div className="modal-footer">
-                          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                          <button data-copy-btn type="button" className="btn btn-primary pull-left" data-clipboard-text={this.state.value}>Copy Link</button>
+                        <div className='modal-footer'>
+                          <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
+                          <button data-copy-btn='true' type='button' className='btn btn-primary pull-left' onClick={this.handleClick} data-clipboard-text={this.state.value}>Copy Link</button>
+                          {this.state.copiedLink ?
+                            <p className='copy-link-confirm'>Link copied to clipboard.</p>
+                          :
+                            null
+                          }
                         </div>
                       </div>
                    </div>
                 </div>
             );
-        } else {
-            return <div/>;
         }
+        return <div/>;
     }
 });

web/sass-files/sass/partials/_get-link.scss

@@ -0,0 +1,6 @@
+.copy-link-confirm {
+	color: rgb(153, 230, 153);
+	margin-top: -27px;
+	margin-bottom: -25px;
+	margin-right: 300px;
+}

web/sass-files/sass/styles.scss

@@ -33,6 +33,7 @@
 @import "partials/error";
 @import "partials/error-bar";
 @import "partials/loading";
+@import "partials/get-link";
 
 // Responsive Css
 @import "partials/responsive";