@openziti/ziti-console-lib 0.3.0

package/assets/html/auth-policies.htm

@@ -0,0 +1,410 @@
+    
+    <!-- General Page Layout HTML -->
+    <div class="header">
+        <div class="title">
+            <span data-i18n="Manage"></span> 
+            <span data-i18n="AuthPolicies"></span>
+        </div>
+        <div class="bread">
+            <span data-i18n="ZitiNetwork"></span> 
+            <span class="secondary">/</span> 
+            <span data-i18n="Manage"></span> 
+            <span data-i18n="AuthPolicies"></span>
+        </div>
+        <div class="line"></div>
+        {{html.tabPolicies}}
+    </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="Cert"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop">
+                    <span data-i18n="Jwt"></span>
+                    <div class="dragger"></div>
+                </div>
+                <div class="col desktop">
+                    <span data-i18n="UPDB"></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="AuthPolicy"></span>
+        <span data-i18n="NoneDefined"></span>
+        <span data-i18n="AuthPolicy"></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}}">{{cert}}</div>
+        <div class="col desktop" data-id="{{id}}">{{extJwt}}</div>
+        <div class="col desktop" data-id="{{id}}">{{updb}}</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 large">
+            <div class="close icon-close"></div>
+            <div class="title adding">
+                <span data-i18n="Create"></span>
+                <span data-i18n="AuthPolicy"></span>
+            </div>
+            <div class="subtitle adding">
+                <span data-i18n="AddNew"></span>
+                <span data-i18n="AuthPolicy"></span>
+                <span data-i18n="ByComplete"></span>
+            </div>
+            <div class="title editing">
+                <span data-i18n="Edit"></span>
+                <span data-i18n="AuthPolicy"></span>
+            </div>
+            <div class="subtitle editing">
+                <span data-i18n="Change"></span>
+                <span data-i18n="AuthPolicy"></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" />
+
+                    <div class="sectionTitle" data-i18n="AllowFollowing"></div>
+                    <div class="grid ethree mb15">
+                        <div>
+                            <label data-i18n="Certificate"></label>
+                            <div id="Certificate" class="toggle" aria-label="Turn on to allow certificate authentication" data-balloon-pos="right" data-balloon-length="large">
+                                <div class="switch"></div>
+                                <div class="label"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <label data-i18n="ExternalJwt"></label>
+                            <div id="ExternalJwt" class="toggle" aria-label="Turn on to allow authentication via external JWT" data-balloon-pos="right" data-balloon-length="large">
+                                <div class="switch"></div>
+                                <div class="label"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <label data-i18n="UPDB"></label>
+                            <div id="UPDB" class="toggle" aria-label="Turn on to allow User/Password authentication" data-balloon-pos="right" data-balloon-length="large">
+                                <div class="switch"></div>
+                                <div class="label"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="certs configureBox" style="display: none;">
+                        <div class="sectionTitle" data-i18n="CertificateOptions"></div>
+                        <label data-i18n="AllowExpired"></label>
+                        <div class="spread">
+                            <div id="AllowExpired" class="toggle" aria-label="Turn on to allow expired certificates to authenticate" data-balloon-pos="right" data-balloon-length="large">
+                                <div class="switch"></div>
+                                <div class="label"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="jwts configureBox" style="display: none;">
+                        <div class="sectionTitle" data-i18n="SignersOptions"></div>
+                        <label data-i18n="AllowSigners"></label>
+                        <div id="Signers"></div>
+                    </div>
+
+                    <div class="updb configureBox" style="display: none;">
+                        <div class="sectionTitle" data-i18n="UPDBOptions"></div>
+                        <div class="grid ethree">
+                            <div>
+                                <label for="MinPasswordLength" data-i18n="MinPasswordLength"></label>
+                                <input id="MinPasswordLength" data-bind="data.updb.minPasswordLength" type="number" data-i18n="EnterNumeric" />
+                            </div>
+                            <div>
+                                <label for="MaxAttempts" data-i18n="MaxAttempts"></label>
+                                <input id="MaxAttempts" data-bind="data.updb.maxAttempts" type="number" data-i18n="EnterNumeric" />
+                            </div>
+                            <div>
+                                <label for="LockoutDuration" data-i18n="LockoutDuration"></label>
+                                <input id="LockoutDuration" data-bind="data.updb.locoutDurationMinutes" type="number" data-i18n="EnterMinutes" />
+                            </div>
+                        </div>
+                        <div class="grid ethree">
+                            <div>
+                                <label data-i18n="RequireMixedCase"></label>
+                                <div id="RequireMixedCase" class="toggle" aria-label="Turn on to force mixed case passwords" data-balloon-pos="right" data-balloon-length="large">
+                                    <div class="switch"></div>
+                                    <div class="label"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <label data-i18n="RequireNumberChars"></label>
+                                <div id="RequireNumberChars" class="toggle" aria-label="Turn on to require numeric characters" data-balloon-pos="right" data-balloon-length="large">
+                                    <div class="switch"></div>
+                                    <div class="label"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <label data-i18n="RequireSpecialChars"></label>
+                                <div id="RequireSpecialChars" class="toggle" aria-label="Turn on to require special characters" data-balloon-pos="right" data-balloon-length="large">
+                                    <div class="switch"></div>
+                                    <div class="label"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <!-- Need To Finish these -->
+
+                    <div class="sectionTitle" data-i18n="Secondary"></div>
+                    <div class="grid split">
+                        <div>
+                            <label data-i18n="JwtSigners"></label>
+                            <select id="JwtSigners"></select>
+                        </div>
+                        <div>
+                            <label data-i18n="RequireTotp"></label>
+                            <div id="RequireTotp" class="toggle" aria-label="Turn on to require time based one time passowrd authentication" data-balloon-pos="right" data-balloon-length="large">
+                                <div class="switch"></div>
+                                <div class="label"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div id="TagArea" data-tagarea="policies"></div>
+                    {{html.customtags}}
+                    {{html.api}}
+        
+                    {{html.save}}
+                </div>
+            </div>
+
+        </div>
+	</div>
+
+    <style>
+        .grid.columns {
+	        grid-template-columns: 50px minmax(150px, auto) 150px 150px 150px 250px 50px
+        }
+    </style>
+    
+    
+    <script language="javascript" type="text/javascript">
+        page = {
+            filterObject: null,
+            jwtsList: null,
+            jwts: null,
+            apiParams: null,
+            init: function() {
+                page.jwts = new MultiSelect("Signers");
+                page.jwts.addSource(new SelectSource("external-jwt-signers"));
+                page.jwts.init();
+
+                page.filterObject = new Data("auth-policies");
+                page.filterObject.init(true, true);
+
+                page.events();
+
+                page.jwtsList = new Data("external-jwt-signers", "signers-list");
+                page.jwtsList.init(false, false, true);
+                page.jwtsList.get();
+                
+                page.apiParams = CodeMirror.fromTextArea(document.getElementById("ApiParams"), { mode: "application/json", lineNumbers: true, extraKeys: {"Ctrl-Space": "autocomplete"}, readOnly: true });
+            },
+            events: function() {
+                context.addListener("signers-list", page.signersLoaded);
+            },
+            signersLoaded: function(e) {
+                $("#JwtSigners").empty().append("<option value=\"\">"+app.validate(locale.get("SelectSigner"))+"</option>");
+                for (let i=0; i<e.data.length; i++) {
+                    $("#JwtSigners").append('<option value="'+e.data[i].id+'">'+app.validate(e.data[i].name)+'</option>');
+                }
+            },
+            toggled: function(e) {
+                var isCert = $("#Certificate").hasClass("on");
+                var isJwt = $("#ExternalJwt").hasClass("on");
+                var isUpdb = $("#UPDB").hasClass("on");
+
+                if (isCert) $(".certs").show();
+                else $(".certs").hide();
+                if (isJwt) $(".jwts").show();
+                else $(".jwts").hide();
+                if (isUpdb) $(".updb").show();
+                else $(".updb").hide();
+            },
+            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) {
+                page.reset();
+                var detail = page.filterObject.details(id);
+                if  (detail.primary) {
+                    if (detail.primary.extJwt) {
+                        if (detail.primary.extJwt.allowed) $("#ExternalJwt").addClass("on");
+                        page.jwts.val(detail.primary.extJwt.allowedSigners);
+                    }
+                    if (detail.primary.cert) {
+                        if (detail.primary.cert.allowed) $("#Certificate").addClass("on");
+                        if (detail.primary.cert.allowExpiredCerts) $("#AllowExpired").addClass("on");
+                    }
+                    if (detail.primary.updb) {
+
+                        
+                        if (detail.primary.updb.allowed) $("#UPDB").addClass("on");
+                        if (detail.primary.updb.requireMixedCase) $("#RequireMixedCase").addClass("on");
+                        if (detail.primary.updb.requireNumberChar) $("#RequireNumberChars").addClass("on");
+                        if (detail.primary.updb.requireSpecialChar) $("#RequireSpecialChars").addClass("on");
+
+                        $("#MinPasswordLength").val(detail.primary.updb.minPasswordLength);
+                        $("#MaxAttempts").val(detail.primary.updb.minPasswordLength);
+                        $("#LockoutDuration").val(detail.primary.updb.lockoutDurationMinutes);
+                    }
+                }
+                if (detail.secondary) {
+                    if (detail.secondary.requireTotp) $("#RequireTotp").addClass("on");
+                    if (detail.secondary.requiredExtJwtSigner) $("#JwtSigners").val(detail.secondary.requiredExtJwtSigner);
+                }
+                page.toggled();
+                page.params();
+
+                modal.show("AddModal");
+                const name = $('#Name').val() || '';
+                const editDefaultConfirmed = () => {
+                    modal.keepAddModalOpen = true;
+                    $('.modal.background').css('display', '');
+                    $('.modal.background').css('z-index', '');
+                    $('#ConfirmModal').css('width', '');
+                    $('#ConfirmModal').css('height', '');
+                };
+                if(name.toLowerCase() === 'default') {
+                    const warningText = '<p>WARNING: Do not change these settings unless you\'re sure you know what you are doing.</p> <p>Before changing the default policy, it\'s recommended that you make another policy and apply that to other users first. Then make sure you can still authenticate. </p> <p>Do you still want to continue?</p>';
+                    modal.confirm(warningText, editDefaultConfirmed);
+                    $('.modal.background.open').css('display', 'block');
+                    $('.modal.background.open').css('z-index', '10001');
+                    $('#ConfirmModal').css('width', '500');
+                    $('#ConfirmModal').css('height', '285');
+                    $('.modal .close, .linkButton.closer').click(() => {
+                        $('.modal.background').css('display', '');
+                        $('.modal.background').css('z-index', '');
+                        $('#ConfirmModal').css('width', '');
+                        $('#ConfirmModal').css('height', '');
+                    });
+                }
+            },
+            row: function(template, data) {
+                var cert = "No";
+                var jwt = "No";
+                var updb = "No";
+                if (data.primary.cert.allowed) cert = "Yes";
+                if (data.primary.extJwt.allowed) jwt = "Yes";
+                if (data.primary.updb.allowed) updb = "Yes";
+                template = template.split("{{cert}}").join(cert);
+                template = template.split("{{extJwt}}").join(jwt);
+                template = template.split("{{updb}}").join(updb);
+                return template;
+            },
+            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(),
+                        primary: {
+                            cert: {
+                                allowExpiredCerts: $("#AllowExpired").hasClass("on"),
+                                allowed: $("#Certificate").hasClass("on")
+                            },
+                            extJwt: {
+                                allowed: $("#ExternalJwt").hasClass("on"),
+                                allowedSigners: page.jwts.val()
+                            },
+                            updb: {
+                                allowed: $("#UPDB").hasClass("on"),
+                                lockoutDurationMinutes: Number($("#LockoutDuration").val()),
+                                maxAttempts: Number($("#MaxAttempts").val()),
+                                minPasswordLength: Number($("#MinPasswordLength").val()),
+                                requireMixedCase: $("#RequireMixedCase").hasClass("on"),
+                                requireNumberChar: $("#RequireNumberChars").hasClass("on"),
+                                requireSpecialChar: $("#RequireSpecialChars").hasClass("on")
+                            }
+                        },
+                        secondary: {
+                            requiredExtJwtSigner: $("#JwtSigners").val(),
+                            requireTotp: $("#RequireTotp").hasClass("on")
+                        },
+                        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() {
+                $(".toggle").removeClass("on");
+                $("#MaxAttempts").val("5");
+                $("#MinPasswordLength").val("5");
+                $("#LockoutDuraction").val("0");
+                $("#MaxAttempts").val("5");
+                $("#Enabled").addClass("on");
+            }
+        }
+    </script>