settings.html

<style>
    :root {
        --windowBarHeight: 30px;
    }

    @keyframes rainbowbackground {
        0% {
            background-position: 90% 0%
        }

        50% {
            background-position: 0% 85%
        }

        100% {
            background-position: 90% 0%
        }
    }

    html {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        margin: 0px;
        overflow: hidden;
        overflow-y: scroll;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    body {
        /* top: 50%; */
        /* left: 50%; */
        background-color: #181818;
        color: white;
        margin: 0px;
        margin-bottom: 5vh;
        /* margin-top: var(--windowBarHeight); */
        font-family: system, -apple-system, '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
        text-align: center;
        /* position: absolute;
        transform: translate(-50%, -50%);
        background: linear-gradient(200deg, #00ff00, #00adff, #ff0000);
        background-size: 2000% 2000%;
        animation: rainbowbackground 20s ease infinite;
        animation-fill-mode: forwards; */
        /* -webkit-app-region: drag; */
        align-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .container {
        width: 100vw;
        height: auto;
        /* margin-top: var(--windowBarHeight);
        height: calc(100vh - var(--windowBarHeight));
        overflow: auto; */
    }

    .topBar {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: var(--windowBarHeight);
        background: #00233a;
        z-index: 9999;
        -webkit-app-region: drag;
        display: flex;
        justify-content: center;
        vertical-align: middle;
        text-align: center;
        align-content: center;
    }

    .topBar #exitbutton {
        background: rgb(165, 46, 46);
        height: var(--windowBarHeight);
        position: fixed;
        right: 0px;
        top: 0px;
        width: 50px;
    }

    .topBar #exitbutton:hover {
        background: rgb(216, 26, 26);
    }

    .topBar #exitbutton:focus {
        outline: none;
    }

    .topBar #topBarClose {
        background: #002b47;
        height: var(--windowBarHeight);
        position: fixed;
        right: 50px;
        top: 0px;
        width: 50px;
    }

    .topBar #topBarClose:hover {
        background: #003d66;
    }

    .topBar #topBarClose:focus {
        outline: none;
    }

    .topBar p {
        margin: auto;
        color: #ffffff70;
        user-select: none;
    }

    button {
        color: white;
        /* width: 200px; */
        width: auto;
        height: 40px;
        background: linear-gradient(200deg, #00ff00, #00adff, #ff0000);
        background-size: 2000% 2000%;
        animation: rainbowbackground 20s ease infinite;
        animation-fill-mode: forwards;
        -webkit-text-fill-color: initial;
        font-size: 25px;
        margin: 0px;
        border: 0px;
        transition-duration: 0.3s;
        -webkit-app-region: no-drag;
    }

    button:hover {
        background: linear-gradient(200deg, #00ff0036, #00aeff25, #ff000059);
        background-size: 2000% 2000%;
        animation: rainbowbackground 20s ease infinite;
        animation-fill-mode: forwards;
        cursor: pointer;
    }

    button:active {
        background: linear-gradient(200deg, #00ff00, #00ff00, #00ff00);
        background-size: 2000% 2000%;
        animation: rainbowbackground 20s ease infinite;
        animation-fill-mode: forwards;
    }

    #colorpicker {
        color: black;
        width: 200px;
        height: 40px;
        -webkit-text-fill-color: initial;
        font-size: 25px;
        transition-duration: 0.3s;
        text-align: center;
        border: solid black 2px;
        -webkit-app-region: no-drag;
    }

    .bottomButtons {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .settingsSection-horizontal {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 80%;
        margin: auto;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .settingsSection-horizontal input {
        color: white;
        background: unset;
        text-align: center;
        outline: none;
        border-radius: 5px;
        border: white solid 2px;
        font-size: 1.3em;
    }
</style>

<body>
    <div class="topBar">
        <p>DiscordChroma - Settings</p>
        <button id="topBarClose" title="minimize settings">-</button>
        <button id="exitbutton" title="exit DiscordChroma">X</button>
    </div>
    <div class="container">
        <div class="text">
            <h1>DiscordChroma Settings</h1>
            <br>
            <h2>General</h2>
            <!-- <p>Logout or change discord acount</p>
            <button type="button" id="resetautologin">Logout</button>
            <script>
                $( "#resetautologin" ).click(function() {
                    // ipcRenderer.send('asynchronous-message', 'logout');
                    window.close();
                });    
            </script>
            <br> -->
            <h3>Discord app credentials</h3>
            <div class="settingsSection-horizontal">
                <p>Client id:</p>
                <input id="clientIdInput" type="text" size="20" name="clientId">
                <button class="settingUpdateButton" id="updateClientId">Update client id</button>
            </div>
            <div class="settingsSection-horizontal">
                <p>Client secret:</p>
                <input id="clientSecretInput" type="text" size="20" name="clientSecret">
                <button class="settingUpdateButton" id="updateClientSecret">Update client secret</button>
            </div>
            <h3>Startup behavior</h3>
            <div class="settingsSection-horizontal">
                <p>Start DiscordChroma when you start your pc:</p>
                <div class="switch-button"><span class="active"></span>
                    <button class="switch-button-case left">On</button>
                    <button class="switch-button-case right">Off</button>
                </div>
            </div>
            <h2>Animations</h2>
            <p>Options for this catogory are yet to come...</p>
            <!-- <p>Message alert color (hex color (without #)) (not working yet)</p>
            <input type="text" value="ffffff" name="Message color" maxlength="6" id="colorpicker">
            <button id="confirmmsgcolor">Confirm color</button>
            <script>
                $("#colorpicker").on("change paste keyup", function() { 
                    var messagecolor = document.getElementById("colorpicker").value;
                    $('#colorpicker').css('background-color', messagecolor);
                });    
                $( "#confirmmsgcolor" ).click(function() {
                    var messagecolor = document.getElementById("colorpicker").value;
                    // ipcRenderer.send('asynchronous-message', "msgcolor", messagecolor);
                });
            </script> -->
            <div class="bottomButtons">
                <button id="restartButton">Restart DiscordChroma</button>
            </div>
            <script>
                document.querySelector('#exitbutton').addEventListener('click', function () {
                    window.app.exit()
                    window.close()
                });
                document.querySelector('#topBarClose').addEventListener('click', function () {
                    window.close()
                });
                document.querySelector('#restartButton').addEventListener('click', function () {
                    window.app.restart()
                    window.close()
                });
                document.querySelector('#updateClientId').addEventListener('click', function () {
                    const clientId = document.getElementById("clientIdInput").value
                    if (clientId) {
                        window.config.setClientId(clientId)
                    } else {
                        alert('Client id cannot be blank')
                    }
                })
                document.querySelector('#updateClientSecret').addEventListener('click', function () {
                    const clientSecret = document.getElementById("clientSecretInput").value
                    if (clientSecret) {
                        window.config.setClientSecret(clientSecret)
                    } else {
                        alert('Client secret cannot be blank')
                    }
                })
            </script>
        </div>
    </div>
</body>

<!-- switchbutton css from https://codepen.io/vanderlanth/pen/BoNLvq -->
<style>
    .switch-button {
        width: 400px;
        height: 40px;
        margin: auto;
        margin-right: 0px;
        margin-left: 0px;
        text-align: center;
        /*position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate3D(-50%, -50%, 0);
        transform: translate3D(-50%, -50%, 0);*/
        will-change: transform;
        cursor: pointer;
        transition: .3s ease all;
        border: 1px solid white;
    }

    .switch-button-case {
        display: inline-block;
        background: none;
        width: 49%;
        height: 100%;
        color: white;
        position: relative;
        border: none;
        transition: .3s ease all;
        text-transform: uppercase;
        letter-spacing: 5px;
        padding-bottom: 1px;
    }

    .switch-button-case:hover {
        color: rgb(192, 192, 192);
        background: rgb(71, 71, 71);
        cursor: pointer;
    }

    .switch-button-case:focus {
        outline: none;
    }

    .switch-button .active {
        background: white;
        transition: .3s ease-out all;
    }

    .switch-button .active-case {
        background: white;
        color: #151515;
    }
</style>

<!-- switchbutton js from https://codepen.io/vanderlanth/pen/BoNLvq -->
<script>
    var switchButton = document.querySelector('.switch-button');
    var switchBtnRight = document.querySelector('.switch-button-case.right');
    var switchBtnLeft = document.querySelector('.switch-button-case.left');
    var activeSwitch = document.querySelector('.active');

    function switchLeft() {
        switchBtnRight.classList.remove('active-case');
        switchBtnLeft.classList.add('active-case');
        activeSwitch.style.left = '0%';
    }

    function switchRight() {
        switchBtnRight.classList.add('active-case');
        switchBtnLeft.classList.remove('active-case');
        activeSwitch.style.left = '50%';
    }

    switchBtnLeft.addEventListener('click', function () {
        window.config.setAutoLaunchState(true)
        switchLeft();
    }, false);

    switchBtnRight.addEventListener('click', function () {
        window.config.setAutoLaunchState(false)
        switchRight();
    }, false);

    // receiving vars from main
    window.config.get('settings-win-init').then((_config) => {
        const config = JSON.parse(_config);
        document.getElementById("clientIdInput").value = config.clientID
        document.getElementById("clientSecretInput").value = config.clientSecret

        if (config.autoStart) {
            switchLeft()
        } else {
            switchRight()
        }
    })
</script>