Common unit for email invite modal for devices screens

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.email.invite-modal/invite-modal.hbs

@@ -0,0 +1,74 @@
+{{!
+  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+
+  WSO2 Inc. licenses this file to you under the Apache License,
+  Version 2.0 (the "License"); you may not use this file except
+  in compliance with the License.
+  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing,
+  software distributed under the License is distributed on an
+  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, either express or implied. See the License for the
+  specific language governing permissions and limitations
+  under the License.
+}}
+
+{{#zone "content"}}
+<div id="invite-by-email-modal" class="hidden">
+    <div class="modal-header">
+        <h4 class="pull-left modal-title">
+                <span class="fw-stack add-margin-right-1x">
+                    <i class="fw fw-user fw-stack-2x"></i>
+                    <span class="fw-stack fw-move-right fw-move-bottom">
+                      <i class="fw fw-ring fw-stack-2x"></i>
+                      <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
+                      <i class="fw fw-add fw-stack-1x fw-inverse"></i>
+                   </span>
+                </span>
+            Send Invites
+        </h4>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+    </div>
+    <hr>
+    <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        <div class="panel-body col-centered text-center">
+            <h5>
+
+            </h5>
+            <br>
+            <div class="panel panel-default">
+                <div class="panel-body">
+                    <div id="user-create-form" class="col-centered col-lg-8 wr-content">
+                        <div class="text-left">
+                            <div class="wr-input-control">
+                                <select multiple="true" name="choose_usr_email[]" id="choose_usr_email" class="form-control">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <p>Please add one or more email addresses seperated by a <b>comma ( , )</b> to send an email invitation which includes</br>
+                        instructions on how to download the respective device agent.</p>
+                </div>
+            </div>
+            </br>
+            </br>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <div class="buttons">
+            <a href="javascript:sendInvites()" class="btn-operations btn-default">Send Invite(s)</a>
+        </div>
+    </div>
+</div>
+{{/zone}}
+
+{{#zone "topCss"}}
+    {{css "css/invite-modal-styles.css"}}
+{{/zone}}
+
+{{#zone "bottomJs"}}
+    {{js "js/invite-modal.js"}}
+{{/zone}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.email.invite-modal/invite-modal.json

@@ -0,0 +1,4 @@
+{
+  "version": "1.0.0",
+  "index": 10
+}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.email.invite-modal/public/css/invite-modal-styles.css

@@ -0,0 +1,3 @@
+.select2-container{
+    color: #000;
+}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.email.invite-modal/public/js/invite-modal.js

@@ -0,0 +1,52 @@
+/**
+ * Created by imesh on 16/12/16.
+ */
+
+/**
+ * Opens a modal popup with input to enter multiple email addresses to send invites
+ */
+function toggleEmailInvite(){
+    $(".modal-content").html($("#invite-by-email-modal").html());
+    //$('.modal-content .select2-container').remove();
+    $('.modal-content #choose_usr_email').select2({
+        tags: true,
+        tokenSeparators: [",", " "],
+        createTag: function(term, data) {
+            var value = term.term;
+            if(validateEmail(value)) {
+                return {
+                    id: value,
+                    text: value
+                };
+            }
+            return null;
+        }
+    });
+    showPopup();
+}
+
+function validateEmail(email) {
+    var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(email);
+}
+
+/**
+ * Action to get email object from select2 element
+ * @returns {boolean}
+ */
+function sendInvites(){
+    var emailObj = $('.modal-content #choose_usr_email').select2('data'),
+        emailArr = [];
+
+    if(emailObj.length <= 0){
+        console.log('no values to print');
+        return false;
+    }
+
+    emailObj.forEach(function(el){
+        emailArr.push(el.text);
+    })
+
+    hidePopup();
+    console.log(emailArr);
+}