69 lines
No EOL
3.1 KiB
Handlebars
69 lines
No EOL
3.1 KiB
Handlebars
|
|
<form id="channel-login-form">
|
|
<div class="row row--wide row--short">
|
|
<div class="column column--3 column--sml-10">
|
|
<label class="label" for="login-channel-name">Name:</label>
|
|
</div><div class="column column--6 column--sml-10">
|
|
<div id="login-error-display-element" class="info-message info-message--failure"></div>
|
|
<div class="input-text--primary">
|
|
<span>@</span>
|
|
<input type="text" name="login-channel-name" id="login-channel-name" class="input-text" placeholder="" value="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row--wide row--short">
|
|
<div class="column column--3 column--sml-10">
|
|
<label class="label" for="login-channel-password" >Password:</label>
|
|
</div><div class="column column--6 column--sml-10">
|
|
<input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
|
|
</div>
|
|
</div>
|
|
<div class="row row--wide">
|
|
<button class="button--primary" onclick="loginToChannel(event)">Authenticate</button>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
function loginToChannel (event) {
|
|
const userName = 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(userName, password, '/login')
|
|
// update session cookie with new channel name and ids
|
|
.then(result => {
|
|
console.log('login success', result);
|
|
// replace the current cookies
|
|
document.cookie = `channel_name=${result.channelName}`;
|
|
document.cookie = `channel_claim_id=${result.channelClaimId}`;
|
|
document.cookie = `short_channel_id=${result.shortChannelId}`;
|
|
return result;
|
|
})
|
|
// update channel selection
|
|
.then(result => {
|
|
const channelSelect = document.getElementById('channel-name-select');
|
|
// remove the old channel option
|
|
const oldChannel = document.getElementById('channel-option')
|
|
if (oldChannel){
|
|
oldChannel.parentNode.removeChild(oldChannel);
|
|
}
|
|
// add new channel option & select it
|
|
const newChannelOption = document.createElement('option');
|
|
newChannelOption.setAttribute('value', result.channelName);
|
|
newChannelOption.setAttribute('id', 'channel-option');
|
|
newChannelOption.setAttribute('selected', '');
|
|
newChannelOption.innerText = result.channelName;
|
|
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
|
|
// update selection
|
|
toggleSelectedChannel(result.channelName);
|
|
})
|
|
.catch(error => {
|
|
showError(loginErrorDisplayElement, error);
|
|
console.log('login failure:', error);
|
|
})
|
|
}
|
|
</script> |