spee.ch/views/partials/publishForm-Channel.handlebars

<!-- select whether to publish anonymously or in a channel -->
<div class="row">
    <div class="column column--10">
        <form>
            <label class="label" for="anonymous-select">Anonymous:</label>
            <input type="radio" name="anonymous-or-channel" id="anonymous-select" class="" value="anonymous" {{#unless user}}checked {{/unless}} onchange="toggleChannel(event.target.value)"/>
            <label class="label" for="in-a-channel-select">In a channel:</label>
            <input type="radio" name="anonymous-or-channel" id="in-a-channel-select" class="" value="in a channel" {{#if user}}checked {{/if}} onchange="toggleChannel(event.target.value)"/>
        </form>
    </div>
</div>

<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
    <!-- select whether to create new or log in to existing channel -->
    <div class="row">
        <div class="column column--3 column--sml-10">
            <label class="label" for="channel-name-select">Channel:</label>
        </div><div class="column column--7 column--sml-10">
            <div id="input-error-channel-select" class="info-message info-message--failure"></div>
            <select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleChannelSelect(event.target.selectedOptions[0].value)">
            {{#if user}}
                <option value="{{user.channelName}}" >{{user.channelName}}</option>
            {{/if}}
                <option value="login">Existing</option>
                <option value="new" >New</option>
            </select>
        </div>
    </div>
    <!-- log into an existing channel -->
    <div id="channel-login-details" class="row row--short" {{#if user}}hidden="true"{{/if}}>
        {{> channelLoginForm}}
    </div>
    <!-- create a channel -->
    <div  id="channel-create-details" class="row row--short" hidden="true">
        {{> channelCreationForm}}
    </div>
</div>

<script src="/assets/js/authFunctions.js"></script>
<script type="text/javascript">
    function updateUrl (selectedOption) {
        const urlChannel = document.getElementById('url-channel');
        if (selectedOption === 'new' || selectedOption === 'login'){
            // update URL
            urlChannel.innerText = '@channelName';
            //toolTipText.innerText = 'will be replaced by your channel and id';
            urlChannel.setAttribute('class', 'url-text url-text--secondary')
        } else if (selectedOption === 'anonymous'){
            urlChannel.innerText = 'xyz';
            //toolTipText.innerText = 'will be replaced by a random id';
            urlChannel.setAttribute('class', 'url-text url-text--secondary')
        } else {
            urlChannel.innerText = `{{user.channelName}}:{{user.shortChannelId}}`;
            //toolTipText.innerText = '';
            urlChannel.setAttribute('class', 'url-text url-text--primary')
        }
    }
    // show or hide the channel selection tools
    function toggleChannel (selectedOption) {
        const channelSelectOptions = document.getElementById('channel-select-options');
        console.log('toggleChannel event triggered', selectedOption);
        // show/hide the login and new channel forms
        if (selectedOption === 'anonymous') {
            channelSelectOptions.hidden = true;
            channelSelectOptions.hidden = true;
        } else if (selectedOption === 'in a channel') {
            channelSelectOptions.hidden = false;
        } else {
            console.log('selected option was not recognized');
        }
        // update url
        updateUrl(selectedOption);
    }
    // show or hide the channel create/login tool
    function toggleChannelSelect (selectedOption) {
         const createChannelTool = document.getElementById('channel-create-details');
         const loginToChannelTool = document.getElementById('channel-login-details');
         console.log('toggleChannelSelect event triggered', selectedOption);
         // show/hide the login and new channel forms
         if (selectedOption === 'new') {
             createChannelTool.hidden = false;
             loginToChannelTool.hidden = true;
         } else if (selectedOption === 'login') {
             loginToChannelTool.hidden = false;
             createChannelTool.hidden = true;
         } else {
             // hide the login and new channel forms
             loginToChannelTool.hidden = true;
             createChannelTool.hidden = true;
             hideError(document.getElementById('input-error-channel-select'));
         }
        // update url
        updateUrl(selectedOption);
    }
</script>