Knowledge Base (Posts about javascript)

Redirect http to https in html (well, javascript)

bgstack15 — Fri, 28 Mar 2025 13:28:00 GMT

I wanted to redirect an http page to https, without changing virtual hostname. And I was able to find this on the Internet.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
<script>
<!-- from https://stackoverflow.com/questions/4954768/automatic-redirection-to-https/4954784#4954784 -->
var loc = window.location.href+'';
if (loc.indexOf('http://')==0){
    window.location.href = loc.replace('http://','https://');
}
</script>
<footer>
</footer>
</html>

So as long as you reach this index.html, it will then redirect you to the webapp hosted only on the TLS-enabled virtual host.

Troubleshooting problem in Infcloud, my web calendar solution

bgstack15 — Sun, 30 Jun 2024 12:50:25 GMT

I've written about my web calendar solution. Over time I've noticed that my web calendar malfunctions and doesn't always hide/display my calendars when I check and uncheck the box.

I spent a bunch of time debugging this, and learned that it might be a commit where I forcefully set a variable at login time in commit d9ddf89b32a1514248f0943e72f704a8bcb523e4 to file webdav_protocol.js.

@@ -747,6 +772,8 @@ function netFindResource(inputResource, inputResourceIndex, forceLoad, indexR, l
                    if(globalSettings.activecalendarcollections.value.length>0 && globalVisibleCalDAVCollections.length==0)
                        globalDefaultCalendarCollectionActiveAll=true;
                }
+               // stackrpms,2 This forces all calendars to turn on at initial load
+               globalDefaultCalendarCollectionActiveAll=true;

                if(globalDefaultCalendarCollectionActiveAll)
                    for(var i=0; i<globalResourceCalDAVList.collections.length; i++)

I think even if a calendar is off, but I set that value to true, it misleads the variable globalVisibleCalDAVCollections. I found that using the java console to reset that value makes this work better.

globalVisibleCalDAVCollections=[]

So I haven't made any changes to the code, at this time. By just resetting that array with 5,445 entries (of the 11 calendars I have in production), my web calendar started behaving better.

enable paste on website with javascript

bgstack15 — Tue, 27 Feb 2024 13:42:58 GMT

I'm directly quoting/ripping off https://stackoverflow.com/questions/32784487/script-to-enable-paste-on-website/68414487#68414487 here. Because it's incredibly useful.

I found this simple script did work [for enabling "paste" on website]:

document.addEventListener('paste', function(e) {
  e.stopImmediatePropagation();
  return true;
}, true);

Which was found here: https://www.howtogeek.com/251807/how-to-enable-pasting-text-on-sites-that-block-it/

Edit: May need to stop propagation for keydown as well for some websites.

document.addEventListener('keydown', function(e) {
  e.stopImmediatePropagation();
  return true;
}, true);

Paste that into the console of devtools (F12) and carry on with business.

Sample colorized icon in desktop notification from browser

bgstack15 — Sat, 11 Nov 2023 14:28:50 GMT

I am considering adding desktop notifications to my fork of InfCloud, and to do that I had to learn how to send desktop notifications. MDN did not disappoint!

You'll see that I do some very basic find-button logic to add the click function. Of course this is boilerplate and won't look exactly the same whenever I get around to adding it to InfCloud/CalDAVZap.

files/2023/11/listings/notifications.html (Source)

	`<html>`
	`<header>`
	`<title>Example page</title>`
	`<script src="notifications.js">`
	`</script>`
	`</header>`
	`<body>`
	`<h1>example</h1>`
	`Lorem ipsum, etc.`
	`<button>Notify me!</button>`
	`</body>`
	`<footer>`
	`</footer>`
	`</html>`

files/2023/11/listings/notifications.js (Source)

	`// vim: set et ts=3 sw=3 sts=3:`
	`// Startdate: 2023-11-09 18:36`
	`// Purpose: Reference implementation for sending a notification with a colorized image from this server`
	`// Reference:`
	`// https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API`
	`// https://www.w3docs.com/snippets/html/how-to-display-base64-images-in-html.html`
	`// https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string`

	`const img = "/calendar/images/banner_calendar.svg";`
	`const notification_attempts = 10;`
	`const notification_ms = 200;`
	`// Due to how browsers/css work with colors, you can pass #000000 or web safe color names.`
	`var colors = Array("red","orange","yellow","green","blue","purple","black","white","brown");`

	`function colorizeSvg(inSvg, oldColor, newColor) {`
	// In case we have to do more than `s//g` in the future.
	`return inSvg.replaceAll(oldColor, newColor);`
	`}`

	`function SendColorizedNotification(_title, _body, _icon, _tag, _color) {`
	`// given _icon as path on server, get contents and adjust the main color in it to desired color.`
	`// The 585858 is the specific color of the calendar.svg we intend to replace.`
	`const xhr = new XMLHttpRequest();`
	`xhr.open("GET",_icon);`
	`xhr.onload = () => {`
	`newSvg = colorizeSvg(xhr.responseText,"#585858",_color);`
	`encodedData = window.btoa(newSvg); // turn it into the base64 stream`
	`encodedData = "data:image/svg+xml;base64," + encodedData; // prepend the type of stream`
	`SendNotification(_title, _body, encodedData, _tag, _color);`
	`}`
	`xhr.send();`
	`}`

	`function SendNotification(_title, _body, _icon, _tag) {`
	`// From: https://developer.mozilla.org/en-US/docs/Web/API/notification`
	`if (!("Notification" in window)) {`
	`// Check if the browser supports notifications`
	`alert("This browser does not support desktop notification");`
	`} else if (Notification.permission === "granted") {`
	`// Check whether notification permissions have already been granted;`
	`// if so, create a notification`
	`const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });`
	`// …`
	`} else if (Notification.permission !== "denied") {`
	`// We need to ask the user for permission`
	`Notification.requestPermission().then((permission) => {`
	`// If the user accepts, let's create a notification`
	`if (permission === "granted") {`
	`const notification = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });`
	`// …`
	`}`
	`});`
	`}`
	`// At last, if the user has denied notifications, and you`
	`// want to be respectful there is no need to bother them anymore.`
	`}`

	`function SendNotificationManyTimes(_title, _body, _icon, _tag) {`
	`// From: https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API`
	`if (Notification?.permission === "granted") {`
	`// If the user agreed to get notified`
	`// Let's try to send ten notifications`
	`let i = 0;`
	`// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.`
	`const interval = setInterval(() => {`
	`// Thanks to the tag, we should only see the "Hi! 9" notification`
	`const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });`
	//const n = new Notification(`Hi! breakfast ${i}`, { tag: "soManyNotification", body: "this is body?", icon: img });
	`if (i === (notification_attempts-1)) {`
	`clearInterval(interval);`
	`}`
	`i++;`
	`}, notification_ms);`
	`} else if (Notification && Notification.permission !== "denied") {`
	`// If the user hasn't told if they want to be notified or not`
	`// Note: because of Chrome, we are not sure the permission property`
	`// is set, therefore it's unsafe to check for the "default" value.`
	`Notification.requestPermission().then((status) => {`
	`// If the user said okay`
	`if (status === "granted") {`
	`let i = 0;`
	`// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.`
	`const interval = setInterval(() => {`
	`// Thanks to the tag, we should only see the "Hi! 9" notification`
	`const n = new Notification(String(_title), { tag: _tag, body: _body, icon: _icon });`
	`if (i === (notification_attempts-1)) {`
	`clearInterval(interval);`
	`}`
	`i++;`
	`}, notification_ms);`
	`} else {`
	`// Otherwise, we can fallback to a regular modal alert`
	`alert(String(_title)+": "+String(_body));`
	`}`
	`});`
	`} else {`
	`// If the user refuses to get notified, we can fallback to a regular modal alert`
	`alert(String(_title)+": "+String(_body));`
	`}`
	`}`

	`function getRandomColor() {`
	`return colors[Math.floor(Math.random()*colors.length)];`
	`}`

	`window.addEventListener("load", () => {`
	`const button = document.querySelector("button");`
	`button.addEventListener("click", () => {`
	`SendColorizedNotification("sample calendar appointment","in 10 minutes",img,"",getRandomColor());`
	`});`
	`});`

Infcloud improvement: keyboard shortcuts dialog

bgstack15 — Sat, 22 Apr 2023 12:34:02 GMT

I added a dialog to my fork of Infcloud! This application originally had zero keyboard navigation, and I've slowly been adding some to make it more usable to me.

Right now the contents of the help dialog are hard-coded, but perhaps someday I will attempt to have the section that adds the keyboard shortcuts add their own text description to a variable that is used to populate this field.

All the work this time is in one merge commit.

Infcloud: auto login my way

bgstack15 — Wed, 17 Aug 2022 13:27:00 GMT

I have now added to InfCloud the ability to use the browser localStorage feature to store username, password, and chosen locale. To be more precise, it can load these values if present. InfCloud does not set them yet. I haven't bothered to write that part.

To use this feature, you need to run a few commands in the javascript console of your web browser. Not all of my browsers work correctly, even though localStorage object exists.

localStorage.setItem("user","bgstack15");
localStorage.setItem("pass","plaintexthere");
localStorage.setItem("locale","English (24h)");

The locale value is the contents of the text box, and not the shortcode such as en_BS.

If these values are set, when you refresh the page it should auto-login right away.

See the commit that includes the functionality.

Infcloud with event import feature

bgstack15 — Sat, 13 Aug 2022 12:51:16 GMT

I've previously discussed my self-hosted calendar solution, and I have an update for it!

I have now added a working upload feature! See commit 81431ce6cce507535d871020fcb4c9b3844ffd4a. I spent a long time to add these very short lines.

Now, in the new-event form, you can drag-and-drop a .ics file onto the "Import" button, and it will add the new event for you! I was not aware of any previous import/upload feature in InfCloud, so I wrote my own.

I started with duplicates of multiple, large internal functions. In the end though, it was a lot shorter than I thought it would be.

Javascript blink a select option input if trying to add it again

bgstack15 — Mon, 20 Dec 2021 14:18:22 GMT

Overview

As part of an up-and-coming project that will be discussed at a future date, I have been working in javascript and html again. I want a form with a list of attributes, to which the user can add and remove entries. I wanted a way to show that the requested entry was already in the list. Here's what I've got so far.

The code

This one html template file includes css, javascript, and the html form itself.

<html>
<head>
<title>{{ title }}</title>
<style>
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
  -webkit-animation: fadeIn 1s ease-in-out 0s;
  -moz-animation: fadeIn 1s ease-in-out 0s;
  -o-animation: fadeIn 1s ease-in-out 0s;
   animation: fadeIn 1s ease-in-out 0s;
}
</style>
</head>
<form action="#" method="post" id="edit">
<label for="title">Title:</label><input accesskey="t" id="title" name="title" type="text" value="{{ title }}"><br/>
<label for="tag">Tag entry:</label><input id="tag" name="tag" type="text" value=""><br/>
<input type='button' value='add to list' id='add' />
<input type='button' value='remove from list' id='remove' /><br/>
<label for="tags">Tags:</label><select id="tags" name="tags" multiple='multiple'>
{% for i in tags %}<option id="opt_{{ i }}" value="{{ i }}">{{ i }}</option>{% endfor %}</select><br/>
<input accesskey="s" type="submit" value="Submit">
</form>
<script type="text/javascript">
let tag = document.getElementById("tag");
let tags = document.getElementById("tags");
// blink function depends on css above
function blink_once(item) {
   //var item = document.getElementById(item);
   console.log(`Want to blink ${item} with ${item.value}`);
   item.classList.add('fadeIn');
   // remove the class, after the delay, so that the item can blink again if necessary.
   setTimeout(function(){item.classList.remove('fadeIn')},1000);
}
function add_option() {
   let text = tag.value;
   if (text != "" && text.match('[0-9a-zA-Z]') ) {
      var optexists = document.getElementById("opt_"+text);
      if (optexists) {
         // it already exists
         blink_once(optexists);
         } else {
         // need to add it
         var opt = document.createElement('option');
         opt.value = text; opt.innerHTML = text; opt.id = "opt_" + text;
         tags.appendChild(opt);
         tag.value = "";
         return 0;
      }
   }
   return 1;
};
function remove_option() {
   let text = tag.value;
   let opt = document.getElementById("opt_"+text);
   if (opt) { opt.remove(); };
   console.log(`Want to remove item "${text}" from list?`);
};
// When the tags list selection is changed, update the value of the tag entry field
function set_option() {
   let text = tags[tags.selectedIndex].value;
   console.log(`text is "${text}"`);
   tag.value = text;
}
// Behavior of the add and remove buttons
document.getElementById("add").onclick = function(){add_option()};
document.getElementById("remove").onclick = function(){remove_option()};
// Behavior of the tags list
tags.onclick = function(){set_option()};
tags.onchange = function(){set_option()};
tags.onfocus = function(){this.selectedIndex = -1};
// when press enter, run the "add" event.
tag.onkeypress = function(event,value) {
   if (13 == event.which) {
      event.preventDefault(); // this blocks the Enter key from submitting the form, for this field only!
      console.log("Enter was pressed!");
      if (0 == add_option()) {
         console.log("Successful addition!")
      } else {
         console.log(`failed to add "${document.getElementById("tag").value}".`);
      }
   };
}
function submitform() {
   console.log("The submit button was pressed!");
};
</script>
</html>

Walkthrough

I set up a text field, "Tag entry." This value changes to the currently-selected option from the select field. When the user presses enter, the javascript adds the tag to the list of tags. If the tag already exists, it will blink once.

The submit behavior is not complete yet, but that's a separate story for another day.

References

Principal work comes from two answers on the same SO question: javascript - Making a div flash just once Praveen Kumar Prushothaman's answer Srikanth Reddy's answer
https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript/8674667#8674667
https://stackoverflow.com/questions/33758595/html-form-run-javascript-on-enter/33758792#33758792
https://stackoverflow.com/questions/647282/is-there-an-onselect-event-or-equivalent-for-html-select/12404521#12404521

Use login form for Jira even when SAML auth is primary

bgstack15 — Thu, 23 Apr 2020 13:14:43 GMT

If you use SAML authentication as primary auth for Jira, but it malfunctions, you can still get in with a local account. Use this URL: https://jira.example.com/login.jsp?auth_fallback. The auth_fallback parameter will skip the redirection for unauthenticated users.

How to enable this feature

You have to tell Jira to listen for this parameter. Hit this REST endpoint:

curl -vvv -X PUT https://jira.example.com/rest/authconfig/1.0/sso -H 'Content-Type: application/json' -d '{"allow-redirect-override": true}' -u 'internalapplications'

You can also append a colon and the password in the -u parameter.

Bonus content

Use the Announcement banner for a "Login with SSO" button, and even a redirection to the login form, if the user visits anything other than the login page while unauthenticated.

<script>
if(jQuery('#header-details-user-fullname').text().indexOf(" ")==-1 && window.location.href.indexOf("login.jsp")==-1)
{ window.location = "/login.jsp" }

if(window.location.href.indexOf("login.jsp") != -1) {
  jQuery(document).ready(function(){
    jQuery( "<a class='aui-button aui-button-primary' href='/plugins/servlet/external-login' id='SSOLogin' target='_parent' resolved=''>Use SSO Login</a>" ).insertAfter( '#login-form-submit' );
  });
}
</script>

References

Weblinks

Bypass SAML authentication for Jira Data Center - Atlassian Documentation refers to a command that is not valid for Jira Software 8.7.1.

curl -vvv -XPUT /rest/authconfig/1.0/saml -H 'Content-Type: application/json' -d '{"allow-saml-redirect-override": true}' -u admin_username

Other

Original research with REST API browser