stammtv-helper/base/settings/settings.js

const stammTVBaseUrl = document.getElementById('stammtv-base-url');
const stammTVWSSUrl = document.getElementById('stammtv-wss-url');
const saveButton = document.getElementById('save');

function validateAndSave() {
    let valid = true;
    //check stammTVBaseUrl
    if (stammTVBaseUrl.value.startsWith('http://') || stammTVBaseUrl.value.startsWith('https://')) {
        stammTVBaseUrl.classList.remove('is-invalid');
        stammTVBaseUrl.classList.add('is-valid');
        valid = valid && true;
    } else {
        stammTVBaseUrl.classList.remove('is-valid');
        stammTVBaseUrl.classList.add('is-invalid');
        valid = false;
    }

    //check stammTVWSSUrl
    if (stammTVWSSUrl.value.startsWith('wss://')) {
        stammTVWSSUrl.classList.remove('is-invalid');
        stammTVWSSUrl.classList.add('is-valid');
        valid = valid && true;
    } else {
        stammTVWSSUrl.classList.remove('is-valid');
        stammTVWSSUrl.classList.add('is-invalid');
        valid = false;
    }

    if (valid) {
        save();
    } else {
        console.log('Failed to save settings - form validation was not successful.')
        saveButton.classList.replace('btn-primary', 'btn-danger');
        saveButton.classList.replace('btn-success', 'btn-danger');
        saveButton.textContent = chrome.i18n.getMessage('settingsSaveButtonCaptionFailure');
    }
}

// Saves options to chrome.storage
function save() {
    if (chrome && chrome.storage && chrome.storage.local) {
        chrome.storage.local.set({
            baseURL: stammTVBaseUrl.value,
            wssURL: stammTVWSSUrl.value
        }, function () {
            // Update form controls to let user know options were saved.
            saveButton.classList.replace('btn-primary', 'btn-success');
            saveButton.classList.replace('btn-danger', 'btn-success');
            saveButton.textContent = chrome.i18n.getMessage('settingsSaveButtonCaptionSuccess');
        });
    } else {
        console.error('Unsupported browser or no access to localStorage')
    }
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function load(){
    if (chrome && chrome.storage && chrome.storage.local) {
        chrome.storage.local.get({
            baseURL: chrome.i18n.getMessage("settingsFormInputRequired"),
            wssURL: chrome.i18n.getMessage("settingsFormInputRequired")
        }, function (items) {
            stammTVBaseUrl.value = items.baseURL;
            stammTVWSSUrl.value = items.wssURL;
        });
    } else {
        console.error('Unsupported browser or no access to localStorage')
    }
}

function autofillWSSURL() {
    if (stammTVBaseUrl.value.startsWith('http')) {
        let predictedWSSURL = stammTVBaseUrl.value.replace('https', 'wss').replace('http', 'wss');
        if (predictedWSSURL.endsWith('/')) {
            predictedWSSURL += 'wss'
        } else {
            predictedWSSURL += '/wss'
        }
        stammTVWSSUrl.value = predictedWSSURL;
    }
}

document.addEventListener('DOMContentLoaded', init);

function init() {
    stammTVBaseUrl.onchange = autofillWSSURL;
    saveButton.addEventListener('click', validateAndSave);
    load();
}