@openziti/ziti-console-lib 0.12.10 → 1.0.0

package/assets/html/routers.htm

@@ -1,323 +0,0 @@
-    <!-- General Page Layout HTML -->    
-    <div class="header">
-        <div class="title">
-            <span data-i18n="Manage"></span>
-            <span data-i18n="EdgeRouters"></span>
-        </div>
-        <div class="bread">
-            <span data-i18n="ZitiNetwork"></span>
-            <span class="secondary">/</span>
-            <span data-i18n="Manage"></span>
-            <span data-i18n="EdgeRouters"></span>
-        </div>
-        {{html.line}}
-        {{html.tabRouters}}
-    </div>
-    {{html.add}}
-    {{html.search}}
-    <div class="area data" data-defined="table">
-        <div class="table">
-            <div class="head grid columns">
-                <div class="col">
-                    <div class="selector all"></div>
-                </div>
-                <div class="col sort asc" data-by="name">
-                    <span data-i18n="Name"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="OS"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="RoleAttributes"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop sort" data-by="isVerified">
-                    <span data-i18n="Verified"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="Online"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop sort" data-by="createdAt">
-                    <span data-i18n="Created"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop sort">
-                    <span data-i18n="Token"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="JWT"></span>
-                </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">
-        <span data-i18n="No"></span>
-        <span data-i18n="EdgeRouter"></span>
-        <span data-i18n="NoneDefined"></span>
-        <span data-i18n="EdgeRouter"></span>.
-    </div>
-
-
-
-    <!-- Template HTML will be used to display rows of data -->
-    <div id="RowTemplate" class="row grid columns template" data-defined="template">
-        <div class="col">
-            <div class="selector" data-id="{{id}}"></div>
-        </div>
-        <div class="col" data-id="{{id}}">
-            <span class="circle {{isOnline}}" title="Online"></span>
-            <span class="circle {{isVerified}}" title="Verified"></span>
-            <a href="javascript:page.edit('{{id}}');">{{name}}</a>
-        </div>
-        <div class="col desktop" data-id="{{id}}" style="overflow: unset;"><span class="os {{os}}" data-balloon-pos="up" aria-label="{{osDetails}}"></span></div>
-        <div class="col desktop" data-id="{{id}}">{{roles}}</div>
-        <div class="col desktop" data-id="{{id}}">{{isVerified}}</div>
-        <div class="col desktop" data-id="{{id}}">{{isOnline}}</div>
-        <div class="col desktop" data-id="{{id}}">{{moment.createdAt}}</div>
-        <div class="col desktop notitle">{{token}}</div>
-        <div class="col desktop notitle">{{tokenLink}}</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" data-i18n="Edit"></div>
-                    <div class="gridAction" data-id="{{id}}" data-action="delete" data-i18n="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="EdgeRouter"></span>
-            </div>
-            <div class="subtitle adding">
-                <span data-i18n="AddNew"></span>
-                <span data-i18n="EdgeRouter"></span>
-                <span data-i18n="ByComplete"></span>
-            </div>
-            <div class="title editing">
-                <span data-i18n="Edit"></span>
-                <span data-i18n="EdgeRouter"></span>
-            </div>
-            <div class="subtitle editing">
-                <span data-i18n="Change"></span>
-                <span data-i18n="EdgeRouter"></span>
-                <span data-i18n="Details"></span>
-            </div>
-
-            <div class="grid aside">
-                <div>
-                    <label for="Name" data-i18n="Name"></label>
-                    <input id="Name" data-bind="data.name" type="text" maxlength="500" data-i18n="EnterName" data-enter="SaveButton" />
-                </div>
-                <div>
-                    <label for="Cost" data-i18n="Cost"></label>
-                    <input id="Cost" data-bind="data.cost" type="number" />
-                </div>
-            </div>
-            <div class="grid split">
-                <div class="grid checkLabel">
-                    <div id="IsTunnelerEnabled" class="toggle" aria-label="Turn on to enable tunneler access" data-balloon-pos="right" data-balloon-length="large">
-                        <div class="switch"></div>
-                        <div class="label"></div>
-                    </div>
-                    <div class="toggleLabel" data-i18n="TunnellerEnabled"></div>
-                </div>
-                <div class="grid checkLabel">
-                    <div id="IsNoTraversal" class="toggle" aria-label="Turn on to prevent traversal" data-balloon-pos="right" data-balloon-length="large">
-                        <div class="switch"></div>
-                        <div class="label"></div>
-                    </div>
-                    <div class="toggleLabel" data-i18n="NoTraversal"></div>
-                </div>
-            </div>
-            <label for="Roles" data-i18n="RouterRoleAttributes"></label>
-            <div id="Roles"></div>
-            <label for="AppData" data-i18n="AppData"></label>
-            <textarea id="AppData"></textarea>
-            <div id="TagArea" data-tagarea="router"></div>
-            {{html.customtags}}
-            {{html.api}}
-            {{html.save}}
-        </div>
-	</div>
-
-    <style>
-        .CodeMirror {
-            height: 211px;
-        }
-        .grid.columns {
-	        grid-template-columns: 50px 200px 50px auto 100px 100px 15% 15% 60px 50px;
-        }
-    </style>
-     
-    
-    <script language="javascript" type="text/javascript">
-        page = {
-            filterObject: null,
-            roles: null,
-            appData: null,
-            apiParams: null,
-            init: function() {
-
-                page.roles = new MultiSelect("Roles",  10, true);
-                page.roles.addSource(new SelectSource("edge-router-role-attributes", "", "id")); 
-                page.roles.init();
-
-                page.filterObject = new Data("edge-routers");
-                page.filterObject.init(true, true);
-
-                page.appData = CodeMirror.fromTextArea(document.getElementById("AppData"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"} });                
-                page.appData.on('change', (args) => { 
-                    page.params(); 
-                });
-
-                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
-            }, 
-            row: function(template, data) {
-                var os = "other";
-                var osDetails = "";
-                if (data.versionInfo) {
-                    if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("darwin")>=0) os = "apple";
-                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("linux")>=0) os = "linux";
-                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("android")>=0) os = "android";
-                    else if (data.versionInfo.os&&data.versionInfo.os.toLowerCase().indexOf("windows")>=0) os = "windows";
-                    
-                    if (data.versionInfo.os) osDetails += "OS: "+data.versionInfo.os;
-                    if (data.versionInfo.arch) osDetails += "&#10;Arch: "+data.versionInfo.arch;
-                    if (data.versionInfo.buildDate) osDetails += "&#10;Build: "+moment(data.versionInfo.buildDate).format("MM/DD/YYYY");
-                    if (data.versionInfo.version) osDetails += "&#10;Version: "+data.versionInfo.version;
-                    if (data.versionInfo.revision) osDetails += "&#10;Release: "+data.versionInfo.revision;
-                }
-                if (osDetails.length==0) osDetails = "No Info Available";
-                template = template.split("{{os}}").join(os);
-                template = template.split("{{osDetails}}").join(osDetails);
-
-                var roles = "";
-                if (data.roleAttributes && data.roleAttributes.length>0) {
-                    for (let i=0; i<data.roleAttributes.length; i++) {
-                        roles += ((i>0)?",":"")+'<div class="hashtag">'+data.roleAttributes[i]+'</div>';
-                    }
-                } else roles = "-";
-                template = template.split("{{roles}}").join(roles);
-
-                var enrollment = "N/A";
-                var token = "-";
-                if (data.enrollmentJwt) {
-                    if (data.enrollmentExpiresAt!=null) {
-                        var difference = moment(data.enrollmentExpiresAt).diff(moment());
-                        if (difference>0) enrollment = '<span class="cert" data-id="'+data.id+'"></span>';
-                        token = data.enrollmentToken;
-                    } else {
-                        enrollment = '<span class="cert" data-id="'+data.id+'"></span>';
-                        token = data.enrollmentToken;
-                    }
-                } 
-
-                template = template.split("{{token}}").join(token);
-                template = template.split("{{tokenLink}}").join(enrollment);
-                return template;
-            },
-            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.roles.val(detail.roleAttributes);
-                if (detail.isTunnelerEnabled) $("#IsTunnelerEnabled").addClass("on");
-                else $("#IsTunnelerEnabled").removeClass("on");
-                if (detail.noTraversal) $("#IsNoTraversal").addClass("on");
-                else $("#IsNoTraversal").removeClass("on");
-                var appData = JSON.stringify(detail.appData);
-                if (appData.length>0) {
-                    page.appData.setValue(appData);
-                    page.appData.autoFormatRange({line:0, ch:0}, {line:page.appData.lineCount()});
-                }
-                page.params();
-                modal.show("AddModal");
-            },
-            formReset: function() {
-                page.params();
-            },
-            save: function() {
-                if (page.validate()) {
-                    var obj = page.params();
-                    page.filterObject.save(obj);
-                } else growler.form();
-            },
-            params: function() {
-                try {  
-                    var obj = {
-                        name: $("#Name").val(),
-                        roleAttributes: page.roles.val(),
-                        appData: JSON.parse(page.appData.getValue()),
-                        isTunnelerEnabled: $("#IsTunnelerEnabled").hasClass("on"),
-                        noTraversal: $("#IsNoTraversal").hasClass("on"),
-                        cost: Number($("#Cost").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;
-            },
-            reset: function() {
-                var appData = {};
-                page.appData.setValue(JSON.stringify(appData));
-                page.appData.autoFormatRange({line:0, ch:0}, {line:page.appData.lineCount()});
-                $("#IsTunnelerEnabled").addClass("on");
-                $("#Cost").val("");
-            }, 
-            loaded: function() {
-                $(".cert").click(page.getCert);
-            },
-            getCert: function(e) {
-                var id = $(e.currentTarget).data("id");
-                var data = page.filterObject.details(id);
-                if (data && data.enrollmentJwt) {
-                    var name = data.name.split(" ").join("");
-                    var element = document.createElement('a');
-                    element.setAttribute('href', 'data:application/ziti-jwt;charset=utf-8,' + encodeURIComponent(data.enrollmentJwt));
-                    element.setAttribute('download', name+".jwt");
-                    element.style.display = 'none';
-                    document.body.appendChild(element);
-                    element.click();
-                    document.body.removeChild(element);
-                }
-            }
-        }
-    </script>

package/assets/html/servers.htm

@@ -1,236 +0,0 @@
-<div class="header">
-        <div class="title">Manage <span data-bind="pageTitle"></span></div>
-        <div class="bread">Ziti Network <span class="secondary">/</span> Manage <span data-bind="pageTitle"></span></div>
-        {{html.line}}
-        {{html.tabServers}}
-    </div>
-    <div class="action icon-plus" data-action="add"></div>
-    <div class="area data">
-        <div class="noitems"></div>
-        <div class="table">
-            <div class="head grid floor">
-                <div class="col padCol asc">Name<div class="dragger"></div></div>
-                <div class="col">Url<div class="dragger"></div></div>
-                <div class="col desktop">Type<div class="dragger"></div></div>
-                <div class="col"></div>
-            </div>
-            <div class="rows">
-                <!-- This area will be replaced by data rows -->
-            </div>
-        </div>
-    </div>
-    <div class="pod hasFabrics">
-        <div class="title">Fabric Server</div>
-        <div class="subtitle">Select the fabric server to use with the current session</div>
-        <select id="FabricServicesList"></select>
-    </div>
-    
-    <!-- Row Template -->
-    <div id="RowTemplate" class="row grid floor template">
-        <div class="col padCol" data-id="{{id}}"><a href="javascript:page.edit('{{id}}');">{{name}}</a></div>
-        <div class="col" data-id="{{id}}">{{url}}</div>
-        <div class="col desktop" data-id="{{id}}">{{type}}</div>
-        <div class="col allowOver">
-            <div class="dots {{isMe}}" 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">
-            <div class="close icon-close"></div>
-            <div class="title adding">Create <span data-bind="singular"></span></div>
-            <div class="subtitle adding">Add a New <span data-bind="singular"></span> by completing the following form</div>
-            <div class="title editing">Edit <span data-bind="singular"></span></div>
-            <div class="subtitle editing">Change the <span data-bind="singular"></span> Details</div>
-            <label for="ServerName">Name</label>
-            <input id="ServerName" type="text" maxlength="500" placeholder="Enter a name to display" />
-            <label for="ServerUrl">Url</label>
-            <input id="ServerUrl" type="text" maxlength="500" placeholder="e.g. http://10.0.0.1:1280" />
-            <label for="ServerType">Type</label>
-            <select id="ServerType">
-                <option value="edge">Edge Controller</option>
-            </select>
-            <div class="buttons">
-                <div class="linkButton closer">Oops, No get me out of here</div>
-                <div id="SaveButton" class="button">Save</div>
-            </div>
-        </div>
-    </div>
-    <style>
-    .hasFabrics {
-        display: none;
-    }
-    .hasFabrics.has {
-        display: inline-block;
-    }
-    </style>
-    <script language="javascript" type="text/javascript">
-        page = {
-            binding: {
-                pageTitle: "Servers",
-                singular: "Server"
-            },
-            editId: "",
-            data: [],
-            deleting: "",
-            init: function() {
-                this.events();
-                settings.init();
-            },
-            events: function() {
-                context.addListener(settings.name, page.getLoaded);
-                $(".action").click(page.handleAction);
-                $("#SaveButton").click(page.save);        
-                $("#FabricServicesList").change(page.setFabric);
-            },
-            setFabric: function(e) {
-                context.set("fabricUrl", $("#FabricServicesList").val());
-            },
-            getLoaded: function(e) {
-                $(".selector.selected").removeClass("selected");
-                app.setAction();
-                page.data = settings.data;
-                $(".rows").html("");
-                if (settings.data.edgeControllers.length>0||settings.data.fabricControllers.length>0) {
-                    var index = 0;
-                    for (var i=0; i<settings.data.edgeControllers.length; i++) {
-                        var element = $("#RowTemplate").clone();
-                        element.removeClass("template");
-                        element.attr("id","Row"+index);
-                        element.html(element.html().split("{{id}}").join(app.validate(settings.data.edgeControllers[i].url)));
-                        element.html(element.html().split("{{name}}").join(app.validate(settings.data.edgeControllers[i].name)));
-                        element.html(element.html().split("{{url}}").join(app.validate(settings.data.edgeControllers[i].url)));
-                        element.html(element.html().split("{{type}}").join("Edge"));
-                        $(".rows").append(element);
-                        index++;
-                    }
-                    $("#FabricServicesList").html("");
-                    page.pageLoaded();     
-                    $(".data").show();
-                    $(".nodata").hide();       
-                } else {
-                    $(".data").hide();
-                    $(".nodata").show();
-                }       
-            },
-            pageLoaded: function() {
-                $(".gridAction").click(page.gridAction);
-                $(".clickEdit").click(page.clickEdit);
-                app.postLoad();
-            },
-            toggleList: function() {
-                if ($("#Objects").val()=="all") {
-                    $("#ObjectsList").hide();
-                } else {
-                    $("#ObjectsList").show();
-                }
-            },
-            gridAction: function(e) {
-                var action = $(e.currentTarget).data("action");
-                var id = $(e.currentTarget).data("id");
-
-                var canProceed = true;
-			    if (settings.versionData.requireAuth) canProceed = settings.versionData.baseUrl==id;
-
-                if (canProceed) {
-                    if (action=="edit") page.edit(id);
-                    else if (action=="delete")  {
-                        page.deleting = id;
-                        modal.confirm("you want to delete this "+page.binding.singular, page.confirmedDelete);
-                    }
-                } else growler.error("You can only change edge controllers you have authenticated against.")
-            },
-            save: function() {
-                if (page.validate()) {
-                    if ($("#ServerType").val()=="edge") {
-                        settings.addContoller($("#ServerName").val(), $("#ServerUrl").val());
-                    } else {
-                        settings.addFabric($("#ServerName").val(), $("#ServerUrl").val());
-                    }
-                    modal.close();
-                } else growler.form();
-            },
-            edit: function(id) {
-                page.reset();
-
-                var name = "";
-                var url = "";
-                var type = ""; 
-
-                var found = false;
-
-                for (var i=0; i<settings.data.edgeControllers.length; i++) {
-                    if (settings.data.edgeControllers[i].url==id) {
-                        name = settings.data.edgeControllers[i].name;
-                        url = settings.data.edgeControllers[i].url;
-                        type = "edge";
-                        found = true;
-                    }
-                }
-                if (!found) {
-                    for (var i=0; i<settings.data.fabricControllers.length; i++) {
-                        if (settings.data.fabricControllers[i].url==id) {
-                            name = settings.data.fabricControllers[i].name;
-                            url = settings.data.fabricControllers[i].url;
-                            type = "fabric";
-                            found = true;
-                        }
-                    }
-                }
-
-                if (found) {
-                    $("#ServerName").val(name);
-                    $("#ServerUrl").val(url);
-                    $("#ServerType").val(type);
-                    $("#ServerUrl").prop("readonly", true);
-
-                    $(".adding").hide();
-                    $(".editing").show();
-        
-                    page.editId = url;
-                    modal.show("AddModal");
-                }
-            },
-            validate: function() {
-                $(".errors").removeClass("errors");
-                if ($("#ServerName").val().trim().length==0) $("#ServerName").addClass("errors");
-                if ($("#ServerUrl").val().trim().length==0) $("#ServerUrl").addClass("errors");
-                return $(".errors").length==0;
-            },        
-            reset: function() {
-                app.isDirty = false;
-                page.editId = "";
-                $("#ServerName").val("");
-                $("#ServerUrl").val("");
-                $("#ServerType").val("edge");
-                $("#ServerUrl").prop("readonly", false);
-            },
-            handleAction: function(e) {
-                var action = $(e.currentTarget).data("action");
-                if (action=="add") {
-                    page.reset();
-                    page.add();
-                } else if (action=="remove") page.deleteMulti();
-            },
-            confirmedDelete: function() {
-                settings.delete(page.deleting);
-                app.reset();
-            },
-            clickEdit: function(e) {
-                var id = $(e.currentTarget).data("id");
-                if (id) page.edit(id);
-            },
-            add: function() {
-                $(".adding").show();
-                $(".editing").hide();
-                modal.show("AddModal");
-            }
-        }
-    </script>