tCMS/www/templates/html/components/jsalert.tx

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // Defined-or, not a ternary: success is 0, which is falsy, so the old
        // test collapsed every success to -1 and hid the banner entirely.
        var loginFailure = <: $failure // -1 :>;
        if( loginFailure === -1 ) {
            document.querySelector('#jsalert').style.cssText = 'display:none;';
        } else if ( loginFailure === 1 ) {
            document.querySelector('#jsalert').classList.remove("alert-success");
            document.querySelector('#jsalert').classList.add("alert-danger");
            document.querySelector('#msgIcon').innerHTML = "❌";
            document.querySelector('#message').innerHTML = "<: $message :>";
        } else {
            document.querySelector('#jsalert').classList.remove("alert-danger");
            document.querySelector('#jsalert').classList.add("alert-success");
            document.querySelector('#msgIcon').innerHTML = "✓";
            document.querySelector('#message').innerHTML = "<: $message :>";
            : if ($to) {
            //JS redir better ux than 302
            window.setTimeout(function() {
                window.location="<: $to :>";
            }, 500);
            : } else {
            // Dismiss after a few seconds.
            window.setTimeout(function() {
                document.querySelector('#jsalert').classList.add('hidon');
            }, 500);
            : }
        }
    });
</script>

<style>
    #jsalert {
        margin: 1rem;
        border-radius: .75rem;
        border-color: rgba(255,0,0,.75);
        padding: 1rem;
        margin-top: 3rem;
        position: fixed;
        width:95%;
        left: 0px;
    }
    .alert-danger {
        background-color: rgba(100,0,0,.95);
    }
    .alert-success {
        background-color: rgba(0,255,0,.95);
    }
</style>

<div id="jsalert" class="alert-danger">
  <table>
    <tr>
      <td id="msgIcon">
        ⚠
      </td>
      <td id="message" style="padding-left: 1rem;">
        Please enable JavaScript on this domain.
      </td>
    </tr>
  </table>
</div>