spee.ch/views/partials/publishChannel.handlebars
2017-09-20 11:36:20 -07:00

76 lines
No EOL
3.4 KiB
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="new" >New</option>
</select>
</p>
<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="channelName">Channel Name: </label>
@<input type="text" name="channelName" 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="channelPassword" >Password: </label>
<input type="password" name="channelPassword" 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 type="text/javascript">
function toggleChannel (event) {
const createChannelTool = document.getElementById('channel-create-details');
const selectedOption = event.target.selectedOptions[0].value;
if (selectedOption != 'new') {
createChannelTool.hidden = true;
hideError(document.getElementById('input-error-channel-select'));
} else {
createChannelTool.hidden = false;
}
}
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(() => {
return sendSignupRequest(channelName, password) // post the request
})
.then(() => {
console.log('success');
document.getElementById('signup-form').innerHTML = '<p>Your channel has been successfully created! Redirecting you now...</p>';
window.location.href = `/${channelName}`;
})
.catch(error => {
if (error.name === 'ChannelNameError'){
showError(channelNameErrorDisplayElement, error.message);
} else if (error.name === 'ChannelPasswordError'){
showError(passwordErrorDisplayElement, error.message);
} else {
console.log('failure:', error);
}
})
}
</script>