@openziti/ziti-console-lib 0.12.11 → 1.0.1

package/assets/html/index.htm

@@ -1,222 +0,0 @@
-<style>
-    .overlay {
-        left: 0px;
-        top: 0px;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(52deg, var(--primary) 0%,var(--secondary) 80%,var(--secondary) 100%);
-        opacity: 0.2;
-    }
-</style>
-<div class="overlay"></div>
-<div class="header">
-    <div class="title">
-        <span data-i18n="Dashboard"></span> 
-    </div>
-</div>
-<div id="DashHeader" class="grid dashboard">
-    <div class="grid numbers">
-        <div class="dial"></div>
-        <a href="./identities">
-            <div class="totalPod">
-                <div id="TotalIdentities" class="total"></div>
-                <div class="label" data-i18n="Identities"></div>
-            </div>
-        </a>
-        <a href="./services">
-            <div class="totalPod">
-                <div id="TotalServices" class="total"></div>
-                <div class="label" data-i18n="Services"></div>
-            </div>
-        </a>
-        <a href="./configs" class="desktop">
-            <div class="totalPod">
-                <div id="TotalConfigurations" class="total"></div>
-                <div class="label" data-i18n="Configurations"></div>
-            </div>
-        </a>
-        <a href="./routers" class="desktop">
-            <div class="totalPod">
-                <div id="TotalEdgeRouters" class="total"></div>
-                <div class="label" data-i18n="Routers"></div>
-            </div>
-        </a>
-        <a href="./sessions" class="desktop">
-            <div class="totalPod">
-                <div id="TotalSessions" class="total"></div>
-                <div class="label" data-i18n="Sessions"></div>
-            </div>
-        </a>
-        <a href="./service-policies" class="desktop">
-            <div class="totalPod">
-                <div id="TotalServicePolicies" class="total"></div>
-                <div class="label" data-i18n="ServicePolicies"></div>
-            </div>
-        </a>
-    </div>
-    <div id="NavLinks" class="grid split wide">
-        <a id="NetVisualizer" href="./network-visualizer" style="display: none">
-            <div class="iconLink">
-                <div class="network-visualizer"></div>
-                <div class="label" data-i18n="Network" ></div>
-                <div class="label" data-i18n="Visualizer"></div>
-            </div>
-        </a>
-        <a href="https://docs.openziti.io/docs/downloads" target="_blank">
-            <div class="iconLink">
-                <div class="downloads"></div>
-                <div class="label" data-i18n="Downloads"></div>
-            </div>
-        </a>
-        <a href="https://docs.openziti.io/" target="_blank">
-            <div class="iconLink">
-                <div class="docs"></div>
-                <div class="label" data-i18n="Docs"></div>
-            </div>
-        </a>
-    </div>
-</div>
-<div id="MainMap"></div>
-
-
-
-    <script language="javascript" type="text/javascript">
-        var tempGroup;
-        page = {
-            map: null,
-            roles: null,
-            services: null,
-            identities: null,
-            lastId: null,
-            binding: {
-                pageTitle: "Dashboard",
-                singular: "Dashboard"
-            },
-            data: [],
-            idsObject: null,
-            init: function() {
-                page.map = L.map("MainMap", {zoomControl: false});
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; NetFoundry Inc.'}).addTo(page.map);
-                page.map.setView(new L.LatLng(41.850033, -87.6500523), 4);
-
-                page.idsObject = new Data("identities");
-                page.ersObject = new Data("edge-routers");
-
-                page.services = new Selector("Services","services","services");
-                page.identities = new Selector("Identities","identities","identities");
-
-                page.services.isDropOver = true;
-                page.services.isSingleSelect = true;
-                page.services.isForceAt = true;
-                page.services.init();
-
-                page.identities.isDropOver = true;
-                page.identities.isSingleSelect = true;
-                page.identities.isForceAt = true;
-                page.identities.init();
-
-                page.roles = new Selector("Roles","roles");
-                page.roles.isForceHash = false;
-                page.roles.init();
-
-                page.events();
-
-                page.idsObject.init(true);
-                page.ersObject.init(true);
-                summary.get();
-                page.showVisualizer();
-            },
-            events: function() {
-                page.markers = [];
-                context.addListener(page.idsObject.name, page.idsLoaded);
-                context.addListener(page.ersObject.name, page.ersLoaded);
-                context.addListener(summary.name, page.getLoaded);
-            },
-            getLoaded: function(e) {
-                page.data = context.get(summary.name);
-                $("#TotalIdentities").html(page.data.identities);
-                $("#TotalServices").html(page.data['services.edge']);
-                $("#TotalConfigurations").html(page.data.configs);
-                $("#TotalEdgeRouters").html(page.data.routers);
-                $("#TotalServicePolicies").html(page.data.servicePolicies);
-                $("#TotalSessions").html(page.data.sessions);
-            },
-            ersLoaded: function (e) {
-                var erMarker = L.icon({
-                    iconUrl:       '/assets/svgs/router-marker.svg',
-                    iconRetinaUrl: '/assets/svgs/router-marker.svg',
-                    shadowUrl:     '/assets/scripts/components/leaflet/images/marker-shadow.png',
-                    iconSize:    [40, 60],
-                    iconAnchor:  [20, 54],
-                    popupAnchor: [0, -50],
-                    tooltipAnchor: [16, -28],
-                    shadowSize:  [62, 62]
-                });
-                for (var i=0; i<page.ersObject.data.length; i++) {
-                    if (page.ersObject.data[i].tags&&page.ersObject.data[i].tags.geolocation&&page.ersObject.data[i].tags.geolocation.split(',').length==2) {
-                        var items = page.ersObject.data[i].tags.geolocation.split(',');
-                        if (!isNaN(items[0])&&!isNaN(items[1])) {
-                            var marker = L.marker([items[0], items[1]], {icon: erMarker});
-                            marker.addTo(page.map).bindPopup(page.ersObject.data[i].name);
-                            page.markers.push(marker);
-                        }
-                    }
-                }
-                page.ersInit = true;
-                page.initMap();
-            },
-            idsLoaded: function(e) {
-                var identMarker = L.icon({
-                    iconUrl: '/assets/svgs/identity-marker.svg',
-                    iconRetinaUrl: '/assets/svgs/identity-marker.svg',
-                    shadowUrl:     '/assets/scripts/components/leaflet/images/marker-shadow.png',
-                    iconSize:    [40, 60],
-                    iconAnchor:  [20, 54],
-                    popupAnchor: [0, -50],
-                    tooltipAnchor: [16, -28],
-                    shadowSize:  [62, 62]
-                });
-                for (var i=0; i<page.idsObject.data.length; i++) {
-                    if (page.idsObject.data[i].tags&&page.idsObject.data[i].tags.geolocation&&page.idsObject.data[i].tags.geolocation.split(',').length==2) {
-                        var items = page.idsObject.data[i].tags.geolocation.split(',');
-                        if (!isNaN(items[0])&&!isNaN(items[1])) {
-                            var marker = L.marker([items[0], items[1]], {icon: identMarker});
-                            marker.addTo(page.map).bindPopup(page.idsObject.data[i].name);
-                            page.markers.push(marker);
-                        }
-                    }
-                }
-                page.idsInit = true;
-                page.initMap();
-            },
-            initMap: function () {
-                if (!page.ersInit || !page.idsInit) {
-                    return;
-                }
-                if (page.markers.length>0) {
-                    var group = new L.featureGroup(page.markers);
-                    tempGroup = group;
-                    page.map.fitBounds(group.getBounds());
-                }
-                setTimeout(function() {
-                    page.map.invalidateSize();
-                }, 1000);
-            },
-            reset: function(e) {
-                $("#Host").val("localhost");
-                $("#Port").val("80");
-                $("#HowToPort").val("80");
-            },
-            showVisualizer: function(e) {
-                const urlParams = new URLSearchParams(window.location.search);
-                const feature = urlParams.get('feature');
-                if (feature === 'visualizer') {
-                    $('#NetVisualizer').show();
-                    $('.grid.split.wide').addClass('exp');
-                    $('.grid.dashboard').addClass('exp');
-                    $('.grid.numbers').addClass('exp');
-                }
-            }
-        }
-    </script>

package/assets/html/jwt-signers.htm

@@ -1,260 +0,0 @@
-    
-    <!-- General Page Layout HTML -->
-    <div class="header">
-        <div class="title">
-            <span data-i18n="Manage"></span> 
-            <span data-i18n="JwtSigners"></span>
-        </div>
-        <div class="bread">
-            <span data-i18n="ZitiNetwork"></span> 
-            <span class="secondary">/</span> 
-            <span data-i18n="Manage"></span> 
-            <span data-i18n="JwtSigners"></span>
-        </div>
-        {{html.line}}
-        {{html.tabAuthentication}}
-    </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="Issuer"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="Audience"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="Enabled"></span>
-                    <div class="dragger"></div>
-                </div>
-                <div class="col desktop">
-                    <span data-i18n="Created"></span>
-                    <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">
-        <span data-i18n="No"></span>
-        <span data-i18n="JwtSigner"></span>
-        <span data-i18n="NoneDefined"></span>
-        <span data-i18n="JwtSigner"></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 notitle">
-            <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}}">{{issuer}}</div>
-        <div class="col desktop" data-id="{{id}}">{{audience}}</div>
-        <div class="col desktop" data-id="{{id}}">{{enabled}}</div>
-        <div class="col desktop" data-id="{{id}}">{{moment.createdAt}}</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>
-
-    <style>
-        .grid.columns {
-	        grid-template-columns: 50px auto 20% 20% 150px 250px 50px
-        }
-    </style>
-
-	<!-- Modification Modals -->
-    <div id="AddModal" class="modal box full">
-        <div class="sized large">
-            <div class="close icon-close"></div>
-            <div class="title adding">
-                <span data-i18n="Create"></span>
-                <span data-i18n="JwtSigner"></span>
-            </div>
-            <div class="subtitle adding">
-                <span data-i18n="AddNew"></span>
-                <span data-i18n="JwtSigner"></span>
-                <span data-i18n="ByComplete"></span>
-            </div>
-            <div class="title editing">
-                <span data-i18n="Edit"></span>
-                <span data-i18n="JwtSigner"></span>
-            </div>
-            <div class="subtitle editing">
-                <span data-i18n="Change"></span>
-                <span data-i18n="JwtSigner"></span>
-                <span data-i18n="Details"></span>
-            </div>
-            <div class="grid split">
-                <div>
-
-                    <label for="Name" data-i18n="Name"></label>
-                    <input id="Name" data-bind="data.name" type="text" maxlength="500" data-i18n="EnterName" />
-                    <label for="Issuer" data-i18n="Issuer"></label>
-                    <input id="Issuer" data-bind="data.issuer" type="text" maxlength="500" data-i18n="EnterIssuer" />
-                    <label for="Audience" data-i18n="Audience"></label>
-                    <input id="Audience" data-bind="data.audience" type="text" maxlength="500" data-i18n="EnterAudience" />
-                    <label for="ClaimsProperty" data-i18n="ClaimsProperty"></label>
-                    <input id="ClaimsProperty" data-bind="data.claimsProperty" type="text" maxlength="500" data-i18n="EnterClainms" value="sub" />
-                    <label for="ExternalAuthUrl" data-i18n="ExternalAuthUrl"></label>
-                    <input id="ExternalAuthUrl" data-bind="data.externalAuthUrl" type="text" maxlength="500" data-i18n="EnterUrl" />
-                    <div class="grid split">
-                        <div>
-                            <label data-i18n="Enabled"></label>
-                            <div id="Enabled" class="toggle" aria-label="Turn on to enable this jwt signer" data-balloon-pos="right" data-balloon-length="large">
-                                <div class="switch"></div>
-                                <div class="label"></div>
-                            </div>
-                        </div>
-                        <div>
-                            <label data-i18n="UseExternal"></label>
-                            <div id="UseExternal" class="toggle" aria-label="Turn on to use an external JWT Signer" data-balloon-pos="right" data-balloon-length="large">
-                                <div class="switch"></div>
-                                <div class="label"></div>
-                            </div>
-                        </div>
-                    </div>
-        
-                    <div class="configBox" style="margin-top: 20px;">
-                        <div class="sectionTitle" data-i18n="CertDefined"></div>
-                        <label for="Pem"><span data-i18n="PEM"></span> <span id="SelectFile" class="note" data-i18n="SelectFile"></span><input id="PemFile" type="file" accept=".pem"/></label>
-                        <textarea id="Pem" data-bind="data.certPem" spellcheck="false" style="height: 300px; font-size: 12px;" data-i18n="PastePEM"></textarea>
-                        <label for="Kid" data-i18n="Kid"></label>
-                        <input id="Kid" data-bind="data.kid" type="text" maxlength="500" data-i18n="EnterKid" />
-                    </div>
-        
-                    <div class="configBox" style="margin-top: 20px;">
-                        <div class="sectionTitle" data-i18n="JWKSDefined"></div>
-                        <label for="JWKSEndpoint" data-i18n="JWKSEndpoint"></label>
-                        <input id="JWKSEndpoint" data-bind="data.jwksEndpoint" type="text" maxlength="500" data-i18n="EnterUrl" />
-                    </div>
-                </div>
-                <div>
-
-                    <div id="TagArea" data-tagarea="policies"></div>
-                    {{html.customtags}}
-                    {{html.api}}
-                    {{html.save}}
-
-                </div>
-
-        </div>
-	</div>
-    
-    
-    <script language="javascript" type="text/javascript">
-        page = {
-            filterObject: null,
-            apiParams: null,
-            init: function() {
-                page.filterObject = new Data("external-jwt-signers");
-                page.filterObject.init(true, true);
-                page.events();
-
-                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
-            }, 
-            events: function() {
-                $("#PemFile").change(page.loadFile);
-                $("#SelectFile").click(function() { 
-                    $("#PemFile").click(); 
-                });
-            },
-            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);
-                $(".toggle").removeClass("on");
-                if (detail.enabled) $("#Enabled").addClass("on");
-                if (detail.useExternalId) $("#UseExternal").addClass("on");
-                page.params();
-                modal.show("AddModal");
-            },
-            save: function() {
-                if (page.validate()) {
-                    var obj = page.params();
-                    for (let prop in obj) {
-                        if (obj[prop]=='') delete obj[prop];
-                    }
-                    page.filterObject.save(obj);
-                } else growler.form();
-            },
-            formReset: function() {
-                page.params();
-            },
-            params: function() {
-                try {  
-                    var obj = {
-                        name: $("#Name").val().trim(),
-                        audience: $("#Audience").val().trim(),
-                        issuer: $("#Issuer").val().trim(),
-                        certPem: $("#Pem").val().trim(),
-                        claimsProperty: $("#ClaimsProperty").val().trim(),
-                        enabled: $("#Enabled").hasClass("on"),
-                        useExternalId: $("#UseExternal").hasClass("on"),
-                        externalAuthUrl: $("#ExternalAuthUrl").val().trim(),
-                        kid: $("#Kid").val().trim(),
-                        jwksEndpoint: $("#JWKSEndpoint").val().trim(),
-                        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;
-            },
-            loadFile: function(e) {
-                try {
-                    var fileToLoad = document.getElementById("PemFile").files[0];
-                    var fileReader = new FileReader();
-                    fileReader.onload = function(fileLoadedEvent) {
-                        var textFromFileLoaded = fileLoadedEvent.target.result;
-                        $("#Pem").val(textFromFileLoaded);
-                    };
-                    fileReader.readAsText(fileToLoad, "UTF-8");
-                } catch (e) {
-                    growler.error("Invalid File", locale.get("ErrorInvalidFile"));
-                } 
-            },
-            reset: function() {
-                $("#ClaimsProperty").val("sub");
-                $("#Enabled").addClass("on");
-            }
-        }
-    </script>

package/assets/html/known.htm

@@ -1,115 +0,0 @@
-    <!-- General Page Layout HTML -->  
-    <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>
-        <div class="line"></div>
-        <div class="tabs">
-            <div class="tab" data-go="/configs">Configurations</div>
-            <div class="tab selected">Config Types</div>
-        </div>
-    </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="noitems"></div>
-        <div class="table">
-            <div class="head grid four">
-                <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 sort" data-by="createdAt">Created</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 four 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}}">{{moment.createdAt}}</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">
-            <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="Name">Name</label>
-            <input id="Name" data-bind="data.name" type="text" maxlength="500" placeholder="Enter a name" data-restrict="empty" />
-            <label for="Schema">Schema</label>
-            <textarea id="Schema"></textarea>
-            <div>
-            <div id="TagArea"></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>
-    
-    
-    <script language="javascript" type="text/javascript">
-        page = {
-            binding: {
-                pageTitle: "Well Known Systems",
-                singular: "Well Known System"
-            },
-            init: function() {
-            }, 
-            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);
-
-                modal.show("AddModal");
-            },
-            save: function() {
-                if (page.validate()) {
-                    var obj = {
-                        name: $("#Name").val()
-                    };
-                } 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;
-                //page.schema.setValue("");
-            }
-        }
-    </script>