spee.ch/views/partials/publishChannel.handlebars

<div id="claim-channel-input-area">
    <p>
        <div id="input-error-channel-select" class="info-message info-message--failure"></div>
        <label for="channel-name-select">Channel:</label>
        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="toggleChannel(event)">
            {{#if user}}
                <option value="{{user.channelName}}" >{{user.channelName}}</option>
            {{/if}}
            <option value="@speech" >Anonymous</option>
            <option value="login">Login</option>
            <option value="new" >New</option>
        </select>
    </p>

    <div id="channel-login-details" hidden="true">
        <p>
        <form id="channel-login-form">
            <div id="login-error-display-element" class="info-message info-message--failure"></div>
            <div>
                <label for="login-channel-name">Channel Name: </label>
                @<input type="text" name="login-channel-name" id="login-channel-name" class="input-text input-text--primary" placeholder="" value="">
            </div>
            <div>
                <label for="login-channel-password" >Password: </label>
                <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
            </div>

        </form>
        </p>
        <button onclick="loginToChannel(event)">Login</button>
    </div>

    <div id="channel-create-details" hidden="true">
        <p>
            <form id="publish-channel-form">
                <div>
                    <div id="input-error-channel-name" class="info-message info-message--failure"></div>
                    <label for="new-channel-name">Channel Name: </label>
                    @<input type="text" name="new-channel-name" id="new-channel-name" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
                    <span id="input-success-channel-name" class="info-message info-message--success"></span>
                </div>
                <div>
                    <div id="input-error-channel-password" class="info-message info-message--failure"></div>
                    <label for="new-channel-password">Password: </label>
                    <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
                </div>
            </form>
        </p>
        <button onclick="publishNewChannel(event)">Create Channel</button>
    </div>
</div>

<script src="/assets/js/authFunctions.js"></script>
<script type="text/javascript">

 function toggleChannel (event) {
     const createChannelTool = document.getElementById('channel-create-details');
     const loginToChannelTool = document.getElementById('channel-login-details');
     const selectedOption = event.target.selectedOptions[0].value;
     if (selectedOption === 'new') {
         createChannelTool.hidden = false;
         loginToChannelTool.hidden = true;
     } else if (selectedOption === 'login') {
         loginToChannelTool.hidden = false;
         createChannelTool.hidden = true;
     } else {
         loginToChannelTool.hidden = true;
         createChannelTool.hidden = true;
         hideError(document.getElementById('input-error-channel-select'));
     }
 }

 function publishNewChannel (event) {
     const channelName = `@${document.getElementById('new-channel-name').value}`;
     const password = document.getElementById('new-channel-password').value;
     const channelNameErrorDisplayElement = document.getElementById('input-error-channel-name');
     const passwordErrorDisplayElement = document.getElementById('input-error-channel-password');
     // prevent default so this script can handle submission
     event.preventDefault();
     // validate submission
     validateNewChannelSubmission(channelName, password)
         .then(() => {
             document.getElementById('channel-create-details').innerHTML = '<p>Creating your new channel...</p>';
             return sendAuthRequest(channelName, password, '/signup') // post the request
         })
         .then(() => {
             console.log('success');
             document.getElementById('channel-create-details').innerHTML = '<p>Your channel has been successfully created!</p>';
             // referesh window logged in as the channel
             window.location.href = '/';
         })
         .catch(error => {
             if (error.name === 'ChannelNameError'){
                 showError(channelNameErrorDisplayElement, error.message);
             } else if (error.name === 'ChannelPasswordError'){
                 showError(passwordErrorDisplayElement, error.message);
             } else {
                 console.log('failure:', error);
             }
         })
 }

 function loginToChannel (event) {
     const channelName = `@${document.getElementById('login-channel-name').value}`;
     const password = document.getElementById('login-channel-password').value;
     const loginErrorDisplayElement = document.getElementById('login-error-display-element');
     // prevent default
     event.preventDefault()
     // send request
     sendAuthRequest(channelName, password, '/login')
         .then(() => {
             console.log('login success');
             window.location.href = '/';
         })
         .catch(error => {
             showError(loginErrorDisplayElement, error);
             console.log('login failure:', error);
         })
 }

</script>