@openziti/ziti-console-lib 0.3.0

package/assets/html/recipes.htm

@@ -0,0 +1,455 @@
+    <!-- General Page Layout HTML -->  
+    <div class="header">
+        <div class="title">
+            <span data-i18n="Manage"></span> 
+            <span data-i18n="Recipes"></span>
+        </div>
+        <div class="bread">
+            <span data-i18n="ZitiNetwork"></span> 
+            <span class="secondary">/</span> 
+            <span data-i18n="Manage"></span> 
+            <span data-i18n="Recipes"></span>
+        </div>
+        {{html.line}}
+        {{html.tabIdentities}}
+    </div>
+    <div class="action icon-plus" data-action="add"></div>
+    <div class="area data" data-defined="table">
+        <div class="noitems"></div>
+        <div class="table">
+            <div class="head grid templates">
+                <div class="col">
+                    <div class="selector all"></div>
+                </div>
+                <div class="col" data-by="name">Name<div class="dragger"></div></div>
+                <div class="col desktop">Policies<div class="dragger"></div></div>
+                <div class="col desktop">Services<div class="dragger"></div></div>
+                <div class="col desktop">Profiles<div class="dragger"></div></div>
+                <div class="col"></div>
+            </div>
+            <div class="rows" data-defined="rows">
+                <!-- This area will be replaced by data rows -->
+            </div>
+        </div>
+    </div>
+    <div class="nodata" data-defined="empty">No <span data-bind="pageTitle"></span> Defined, Click the plus to add A <span data-bind="singular"></span>.</div>
+
+
+
+    <!-- Template HTML will be used to display rows of data -->
+    <div id="RowTemplate" class="row grid templates template" data-defined="template">
+        <div class="col">
+            <div class="selector" data-id="{{id}}"></div>
+        </div>
+        <div class="col" data-id="{{id}}"><a href="javascript:page.edit('{{id}}');">{{name}}</a></div>
+        <div class="col desktop">{{policies}}</div>
+        <div class="col desktop">{{services}}</div>
+        <div class="col desktop">{{profiles}}</div>
+        <div class="col allowOver">
+            <div class="dots" data-id="{{id}}">...
+                <div class="gridMenu" data-id="{{id}}">
+                    <div class="gridAction" data-id="{{id}}" data-action="edit">Edit</div>
+                    <div class="gridAction" data-id="{{id}}" data-action="execute">Execute</div>
+                    <div class="gridAction" data-id="{{id}}" data-action="delete">Delete</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+	<!-- Modification Modals -->
+    <div id="AddModal" class="modal box full">
+        <div class="sized">
+            <div class="close icon-close"></div>
+            <div class="title adding">
+                <span data-i18n="Create"></span>
+                <span data-i18n="Recipe"></span>
+            </div>
+            <div class="subtitle adding">
+                <span data-i18n="AddNew"></span>
+                <span data-i18n="Recipe"></span>
+                <span data-i18n="ByComplete"></span>
+            </div>
+            <div class="title editing">
+                <span data-i18n="Edit"></span>
+                <span data-i18n="Recipe"></span>
+            </div>
+            <div class="subtitle editing">
+                <span data-i18n="Change"></span>
+                <span data-i18n="Recipe"></span>
+                <span data-i18n="Details"></span>
+            </div>
+
+            <div class="blurb" data-i18n="RecipeDefined"></div>
+
+            <label for="Name">Name</label>
+            <input id="Name" data-bind="data.name" type="text" maxlength="500" placeholder="Enter a name" data-restrict="empty" />
+            <label for="Roles">Roles</label>
+            <div id="Roles"></div>
+            <label for="Policies">Policies</label>
+            <div id="Policies"></div>
+            <label for="Services">Services</label>
+            <div id="Services"></div>
+            <label for="Profiles">Profiles</label>
+            <div id="Profiles"></div>
+            <div class="buttons">
+                <div class="linkButton closer">Oops, No get me out of here</div>
+                <div id="SaveButton" class="button" data-defined="save">Save</div>
+            </div>
+        </div>
+	</div>
+
+    <div id="ExecuteModal" class="modal box full">
+        <div id="Step1" class="sized">
+            <div class="close icon-close"></div>
+            <div class="title">Process <span data-bind="singular"></span></div>
+            <div class="subtitle adding">Process your identity <span data-bind="singular"></span> by entering a new name</div>
+            <label for="IdName">Name</label>
+            <input id="IdName" type="text" maxlength="500" placeholder="Enter a name" autocomplete="new-password" data-restrict="empty" />
+            <div class="hasdata" style="display: none;">
+                <label for="WillGenerate">Will Generate Identities</label>
+                <div id="WillGenerate"></div>
+                <label for="WillGeneratePolicy" class="policy">And a Policy Named <span id="PolicyName"></span> with Dial access to services</label>
+                <div id="WillGeneratePolicy" class="policy"></div>
+                <label for="WillAppend" class="appendPolicy">And Append to these existing policies</label>
+                <div id="WillAppend" class="appendPolicy"></div>
+                <div class="buttons">
+                    <div class="linkButton closer">Oops, No get me out of here</div>
+                    <div id="ExecuteButton" class="button">Create</div>
+                </div>
+            </div>
+        </div>
+        <div id="Step2" class="sized" style="display: none;">
+            <div class="close icon-close"></div>
+            <div class="title">Generated Identities</div>
+            <div class="subtitle adding">Download, Scan or Send your identities</div>
+            <div id="NewIdList"></div>
+            <label for="SendTo">Send To</label>
+            <input id="SendTo" type="text" placeholder="someone@somewhere.com" />
+            <div class="buttons">
+                <div></div>
+                <div id="SendButton" class="button">Send</div>
+            </div>
+        </div>
+    </div>
+    
+    
+    <script language="javascript" type="text/javascript">
+        page = {
+            binding: {
+                pageTitle: "Recipes",
+                singular: "Recipe"
+            }, 
+            data: [],
+            roles: [],
+            profiles: [],
+            policies: [],
+            services: [],
+            editId: null,
+            executing: null,
+            deleting: [],
+            newids: [],
+            init: function() {
+
+                page.roles = new MultiSelect("Roles", 10, true);
+                page.roles.addSource(new SelectSource("service-role-attributes", "", "id")); 
+                page.roles.init();
+
+                page.profiles = new MultiSelect("Profiles", 10, true);
+                page.profiles.init();
+
+                page.policies = new MultiSelect("Policies", 10, true);
+                page.policies.returnObject = true;
+                page.policies.addSource(new SelectSource("service-policies", "@")); 
+                page.policies.init();
+
+                page.services = new MultiSelect("Services", 10, true);
+                page.services.returnObject = true;
+                page.services.addSource(new SelectSource("services", "@")); 
+                page.services.init();
+
+                page.events();
+
+                templates.init();
+            }, 
+            events: function() {
+                $(".action").click(page.handleAction);
+                $("#SaveButton").click(page.save);
+                $("#SendButton").click(page.send);
+                $("#ExecuteButton").click(page.create);
+                context.addListener(templates.name, page.loaded);
+            },
+            loaded: function(e) {
+                app.setAction();
+                $(".rows").html("");
+                $(".data").hide();
+                $(".nodata").hide();
+                if (templates.data.length>0) {
+                    for (var i=0; i<templates.data.length; i++) {
+                        var element = $("#RowTemplate").clone();
+                        element.removeClass("template");
+                        element.attr("id","Row"+i);
+                        var policyList = "";
+                        for (var j=0; j<templates.data[i].policies.length; j++) {
+                            policyList += '<div class="attag">'+templates.data[i].policies[j].name+'</div>';
+                        }
+                        element.html(element.html().split("{{policies}}").join(policyList));
+
+                        var serviceList = "";
+                        for (var j=0; j<templates.data[i].services.length; j++) {
+                            serviceList += '<div class="attag">'+templates.data[i].services[j].name+'</div>';
+                        }
+                        element.html(element.html().split("{{services}}").join(serviceList));
+
+                        var tagList = "";
+                        for (var j=0; j<templates.data[i].profiles.length; j++) {
+                            tagList += '<div class="hashtag">'+templates.data[i].profiles[j]+'</div>';
+                        }
+                        element.html(element.html().split("{{profiles}}").join(tagList));
+
+                        for (var key in templates.data[i]) element.html(element.html().split("{{"+key+"}}").join(app.validate(templates.data[i][key])));
+                        $(".rows").append(element);
+                    }
+                    page.pageLoaded();  
+                    $(".data").show();
+                } else {
+                    $(".nodata").show();
+                }
+            },
+            pageLoaded: function() {
+                $("#IdName").keyup(page.updateIds);
+                $(".gridAction").click(page.gridAction);
+                $(".clickEdit").click(page.clickEdit);
+                app.postLoad();
+            },
+            handleAction: function(e) {
+                page.reset();
+                var action = $(e.currentTarget).data("action");
+                if (action=="add") page.add();
+                else if (action=="remove") {
+                    page.deleting = [];
+                    $(".selector.selected").each(function(index, e) {
+                        var id = $(e).data("id");
+                        if (id&&id.trim().length>0&&id!="{{id}}") page.deleting.push(id);
+                    });
+
+                    if (page.deleting.length>0) page.delete(page.deleting);
+                }
+            },
+            delete:  function(ids) {
+                page.deleting = ids;
+                if (page.deleting.length>0) {
+                    modal.confirm("you want to delete these "+page.deleting.length+" "+((page.deleting.length>1)?page.binding.pageTitle:page.binding.singular), page.doDelete);
+                }
+            },
+            doDelete: function() {
+                service.call("templates", { ids: page.deleting }, templates.loaded, "DELETE");
+            },
+            add: function() {
+                $(".adding").show();
+                $(".editing").hide();
+                modal.show("AddModal");
+            },
+            gridAction: function(e) {
+                var action = $(e.currentTarget).data("action");
+                var id = $(e.currentTarget).data("id");
+                if (action=="delete") page.delete([id]);
+                else if (action=="edit") page.edit(id);
+                else if (action=="execute") page.execute(id);
+            },
+            execute: function(id) {
+                $("#SendTo").val("");
+                $("#Step1").show();
+                $("#Step2").hide();
+                $("#IdName").val("");
+                page.executing = null;
+                var obj = templates.details(id);
+
+                if (obj) {
+                    page.executing = obj;
+                    page.updateIds();
+                    modal.show("ExecuteModal");
+                }
+            },
+            updateIds: function() {
+                $("#WillGenerate").html("");
+                $("#WillGeneratePolicy").html("");
+                $(".policy").hide();
+                $(".appendPolicy").hide();
+                $(".hasdata").hide();
+                if (page.executing) {
+                    var name = $("#IdName").val().trim();
+
+                    if (name.length>0) {
+                        var html = '';
+                        for (var i=0; i<page.executing.profiles.length; i++) {
+                            html += '<div class="hashtag">'+name+'-'+page.executing.profiles[i]+'</div>';
+                        }
+                        $("#WillGenerate").html(html);
+
+                        if (page.executing.services.length>0) {
+                            $("#PolicyName").html(name+"-Policy");
+                            var serviceHtml = "";
+                            for (var i=0; i<page.executing.services.length; i++) {
+                                serviceHtml += '<div class="attag">'+page.executing.services[i].name+'</div>';
+                            }
+                            $("#WillGeneratePolicy").html(serviceHtml);
+                            $(".policy").show();
+                        }
+
+                        if (page.executing.policies.length>0) {
+                            var policyHtml = "";
+                            for (var i=0; i<page.executing.policies.length; i++) {
+                                policyHtml += '<div class="attag">'+page.executing.policies[i].name+'</div>';
+                            }
+                            $("#WillAppend").html(policyHtml);
+                            $(".appendPolicy").show();
+                        }
+                        $(".hasdata").show();
+                    } 
+                }
+            },
+            create: function(e) {
+                var params = {
+                    name: $("#IdName").val().trim(),
+                    id: page.executing.id
+                }
+                service.call("execute", params, (result) => {
+                    if (result.error) growler.error(result.error);
+                    else {
+                        growler.success("Execution Complete");
+                        $("#Step1").hide();
+                        $("#NewIdList").html("");
+                        page.newids = result.data;
+                        for (var i=0; i<result.data.length; i++) {
+                            var identity = result.data[i];
+                            var html = "";
+                            html += '<div class="idBox">';
+                            html += '<div class="title">'+app.validate(identity.name)+'</div>';
+                            html += '<div id="Qr_'+i+'" class="qrCode"></div>';
+                            html += '<div class="dlButton linkButton" data-download="'+i+'">Download</div>';
+                            html += '</div>';
+                            $("#NewIdList").append(html);
+                            page.showQr("Qr_"+i, identity.enrollment.ott.jwt);
+                        };
+                        $(".dlButton").click(page.download);
+                        $("#Step2").show();
+                    }
+                });
+            },
+            download: function(e) {
+                var id = Number($(e.currentTarget).data("download"));
+                var identity = page.newids[id];
+                if (identity&&identity.enrollment&&identity.enrollment.ott&&identity.enrollment.ott.jwt) {
+                    var name = identity.name.split(" ").join("");
+                    var element = document.createElement('a');
+                    element.setAttribute('href', 'data:application/ziti-jwt;charset=utf-8,' + encodeURIComponent(identity.enrollment.ott.jwt));
+                    element.setAttribute('download', name+".jwt");
+                    element.style.display = 'none';
+                    document.body.appendChild(element);
+                    element.click();
+                    document.body.removeChild(element);
+                } else if (identity&&identity.enrollment&&identity.enrollment.updb&&identity.enrollment.updb.jwt) {
+                    var name = identity.name.split(" ").join("");
+                    var element = document.createElement('a');
+                    element.setAttribute('href', 'data:application/ziti-jwt;charset=utf-8,' + encodeURIComponent(identity.enrollment.updb.jwt));
+                    element.setAttribute('download', name+".jwt");
+                    element.style.display = 'none';
+                    document.body.appendChild(element);
+                    element.click();
+                    document.body.removeChild(element);
+                }
+            },
+            showQr: function(id, data) {
+                try {
+                    var qrcode = new QRCode(id, {
+                        text: encodeURIComponent(data),
+                        width: 260,
+                        height: 260,
+                        colorDark : "#000000",
+                        colorLight : "#ffffff",
+                        correctLevel : QRCode.CorrectLevel.M
+                    });
+                } catch (e) {
+                    console.log("Error Generating QR Code");
+                }
+            },
+            edit: function(id) {
+                var obj = templates.details(id);
+
+                if (obj) {
+                    $(".adding").hide();
+                    $(".editing").show();
+                    $("#Name").val(obj.name);
+                    page.roles.val(obj.roles);
+                    page.services.val(obj.services);
+                    page.profiles.val(obj.profiles);
+                    page.policies.val(obj.policies);
+                    modal.show("AddModal");
+                }
+
+            },
+            save: function() {
+                if (page.validate()) {
+                    var obj = {
+                        id: page.editId,
+                        name: $("#Name").val(),
+                        roles: page.roles.val(),
+                        services: page.services.val(),
+                        policies: page.policies.val(),
+                        profiles: page.profiles.val(),
+                    };
+                    templates.save(obj);
+                } else growler.form();
+            },
+            validate: function() {
+                $(".errors").removeClass("errors");
+                if ($("#Name").val().trim().length==0) $("#Name").addClass("errors");
+                return $(".errors").length==0;
+            },
+            reset: function() {
+                app.isDirty = false;
+                $("#SendTo").removeClass("error");
+                page.editId = null;
+                $("#Name").val("");
+                page.services.val([]);
+                page.roles.val([]);
+                page.profiles.val([]);
+                page.policies.val([]);
+            },
+            send: function(e) {
+                $("#SendTo").removeClass("error");
+                var to = $("#SendTo").val();
+                if (to.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
+                    var element = $("#NewIdList").clone();
+                    var codes = [];
+                    element.find("img").each((i, elem) => {
+                        codes.push($(elem).prop("src"));
+                    });
+                    var message = {
+                        to: to,
+                        codes: codes,
+                        subject: "Identities Created for Recipe: "+page.executing.name,
+                        attachments: []
+                    }
+                    for (var i=0; i<page.newids.length; i++) {
+                        var identity = page.newids[i];
+                        var content = "";
+                        if (identity&&identity.enrollment&&identity.enrollment.ott&&identity.enrollment.ott.jwt) content = identity.enrollment.ott.jwt;
+                        else if (identity&&identity.enrollment&&identity.enrollment.updb&&identity.enrollment.updb.jwt) content = identity.enrollment.updb.jwt;
+                        message.attachments.push({
+                            filename: identity.name.split(" ").join("")+".jwt",
+                            content: content
+                        });
+                    }
+                    service.call("send", message, page.sendComplete);
+                } else {
+                    $("#SendTo").addClass("error");
+                }
+            },
+            sendComplete: function(e) {
+                var message = "Message Has Been Sent!";
+                $("#SendTo").val("");
+                growler.success(message);
+            }
+        }
+    </script>

package/assets/html/router-policies.htm

@@ -0,0 +1,168 @@
+    <!-- General Page Layout HTML -->
+    <div class="header">
+        <div class="title">Manage <span data-i18n="RouterPolicies"></span></div>
+        <div class="bread">Ziti Network <span class="secondary">/</span> Manage <span data-i18n="RouterPolicies"></span></div>
+        {{html.line}}
+        {{html.tabPolicies}}
+    </div>
+    <div class="action icon-plus" data-action="add"></div>
+    <div class="filters">
+        <input id="SearchFilter" data-defined="search" type="text" class="search" placeholder="Type to Filter" />
+        <div class="clear icon-clear" data-defined="clear"></div>
+        <div class="searchButton icon-search"></div>
+        <div class="counters"><span id="Start">-</span>-<span id="End">-</span> of <span id="Total">-</span></div>
+        <div class="navigate prev icon-prev disabled"></div>
+        <div class="navigate next icon-next disabled"></div>
+    </div>
+    <div class="area data" data-defined="table">
+        <div class="table">
+            <div class="head grid six">
+                <div class="col">
+                    <div class="selector all"></div>
+                </div>
+                <div class="col sort asc" data-by="name">Name<div class="dragger"></div></div>
+                <div class="col desktop">Routers<div class="dragger"></div></div>
+                <div class="col desktop">Identities<div class="dragger"></div></div>
+                <div class="col desktop sort" data-by="semantic">Semantic<div class="dragger"></div></div>
+                <div class="col"></div>
+            </div>
+            <div class="rows" data-defined="rows">
+                <!-- This area will be replaced by data rows -->
+            </div>
+        </div>
+    </div>
+    <div class="nodata" data-defined="empty">No <span data-i18n="RouterPolicies"></span> Defined, Click the plus to add a <span data-i18n="RouterPolicy"></span>.</div>
+
+
+
+    <!-- Template HTML will be used to display rows of data -->
+    <div id="RowTemplate" class="row grid six template" data-defined="template">
+        <div class="col">
+            <div class="selector" data-id="{{id}}"></div>
+        </div>
+        <div class="col" data-id="{{id}}"><a href="javascript:page.edit('{{id}}');">{{name}}</a></div>
+        <div class="col desktop" data-id="{{id}}">{{selector.edgeRouterRoles}}</div>
+        <div class="col desktop" data-id="{{id}}">{{selector.identityRoles}}</div>
+        <div class="col desktop" data-id="{{id}}">{{semantic}}</div>
+        <div class="col allowOver">
+            <div class="dots" data-id="{{id}}">...
+                <div class="gridMenu" data-id="{{id}}">
+                    <div class="gridAction" data-id="{{id}}" data-action="edit">Edit</div>
+                    <div class="gridAction" data-id="{{id}}" data-action="delete">Delete</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+	<!-- Modification Modals -->
+    <div id="AddModal" class="modal box full">
+        <div class="sized large">
+            <div class="close icon-close"></div>
+            <div class="title adding">Create <span data-i18n="RouterPolicy"></span></div>
+            <div class="subtitle adding">Add a New <span data-i18n="RouterPolicy"></span> by completing the following form</div>
+            <div class="title editing">Edit <span data-i18n="RouterPolicy"></span></div>
+            <div class="subtitle editing">Change the <span data-i18n="RouterPolicy"></span> Details</div>
+            <div class="grid split">
+                <div>
+                    <label for="Name">Name</label>
+                    <input id="Name" data-bind="data.name" type="text" maxlength="500" placeholder="Enter a name" />
+                    <label for="RouterRoles">Router Roles</label>
+                    <div id="RouterRoles"></div>
+                    <label for="IDRoles">Identity Roles</label>
+                    <div id="IDRoles"></div>
+                    <label for="Semantics">Semantics</label>
+                    <select id="Semantics" data-bind="data.semantic" data-default="AnyOf">
+                        <option value="AnyOf">Has Any Role</option>
+                        <option value="AllOf">Must Have All Roles</option>
+                    </select>
+                </div>
+                <div>
+                    <div id="TagArea" data-tagarea="policies"></div>
+                    {{html.customtags}}
+                    {{html.api}}
+                    {{html.save}}
+                </div>
+            </div>
+        </div>
+	</div>
+    
+    
+    <script language="javascript" type="text/javascript">
+        page = {
+            filterObject: null,
+            routerRoles: null,
+            identityRoles: null,
+            apiParams: null,
+            init: function() {
+
+                page.identityRoles = new MultiSelect("IDRoles", 10, true);
+                page.identityRoles.addSource(new SelectSource("identities", "@")); 
+                page.identityRoles.addSource(new SelectSource("identity-role-attributes", "#", "id")); 
+                page.identityRoles.init();
+
+                page.routerRoles = new MultiSelect("RouterRoles",  10, true);
+                page.routerRoles.addSource(new SelectSource("routers", "@")); 
+                page.routerRoles.addSource(new SelectSource("edge-router-role-attributes", "#", "id")); 
+                page.routerRoles.init();
+
+                page.filterObject = new Data("edge-router-policies");
+                page.filterObject.init(true, true);
+
+                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
+            }, 
+            gridAction: function(e) {
+                var action = $(e.currentTarget).data("action");
+                var id = $(e.currentTarget).data("id");
+                if (action=="delete") page.filterObject.delete([id]);
+                else if (action=="edit") page.edit(id);
+            },
+            edit: function(id) {
+                var detail = page.filterObject.details(id);
+                page.routerRoles.val(detail.edgeRouterRolesDisplay);
+                page.identityRoles.val(detail.identityRolesDisplay);
+                page.params();
+                modal.show("AddModal");
+            },
+            save: function() {
+                if (page.validate()) {
+                    var obj = page.params();
+                    page.filterObject.save(obj);
+                } else growler.form();
+            },
+            formReset: function() {
+                page.params();
+            },
+            params: function() {
+                try {  
+                    var obj = {
+                        name: $("#Name").val(),
+                        type: $("#Type").val(),
+                        edgeRouterRoles: page.routerRoles.val(),
+                        identityRoles: page.identityRoles.val(),
+                        semantic: $("#Semantics").val(),
+                        tags: tags.val()
+                    };
+
+                    var url = settings.versionData.baseUrl+settings.versionData.serviceUrl+"/"+page.filterObject.name;
+                    if (page.filterObject.isEditing()) url += "/"+page.filterObject.editId;
+                    $("#ApiUrl").val(url);  
+                    var stayAt = $("#AddModal").scrollTop();
+                    page.apiParams.setValue(JSON.stringify(obj));
+                    page.apiParams.autoFormatRange({line:0, ch:0}, {line:page.apiParams.lineCount()});
+                    page.apiParams.scrollTo(null, 0);
+                    $("#AddModal").scrollTop(stayAt);
+
+                    return obj
+                } catch (e) {
+                    console.log(e);
+                }
+            },
+            validate: function() {
+                $(".errors").removeClass("errors");
+                if ($("#Name").val().trim().length==0) $("#Name").addClass("errors");
+                return $(".errors").length==0;
+            }
+        }
+    </script>