fixed navbar logout

This commit is contained in:
bill bittner 2017-10-10 16:51:07 -07:00
parent 0e8a45bdfc
commit 7979aabf85
7 changed files with 46 additions and 44 deletions

View file

@ -109,8 +109,20 @@ function checkCookie() {
}
}
function clearCookies() {
function clearCookie(name) {
document.cookie = `${name}=; expires=Thu, 01-Jan-1970 00:00:01 GMT;`;
}
function setUserCookies(channelName, channelClaimId, shortChannelId) {
setCookie('channel_name', channelName)
setCookie('channel_claim_id', channelClaimId);
setCookie('short_channel_id', shortChannelId);
}
function clearUserCookies() {
clearCookie('channel_name')
clearCookie('channel_claim_id');
clearCookie('short_channel_id');
}
function copyToClipboard(event){

View file

@ -1,10 +1,3 @@
function setUserCookies(channelName, channelClaimId, shortChannelId) {
setCookie('channel_name', channelName)
setCookie('channel_claim_id', channelClaimId);
setCookie('short_channel_id', shortChannelId);
}
function replaceChannelOptionInPublishChannelSelect() {
// remove the old channel option
const oldChannel = document.getElementById('publish-channel-select-channel-option')
@ -42,13 +35,16 @@ function replaceChannelOptionInNavBarChannelSelect () {
newChannelOption.innerText = loggedInChannel;
// add the new option
const channelSelect = document.getElementById('nav-bar-channel-select');
channelSelect.style.display = 'inline-block';
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
// hide login
const navBarLoginLink = document.getElementById('nav-bar-login-link');
navBarLoginLink.style.display = 'none';
}
function loginToChannel (event) {
const userName = document.getElementById('channel-login-name-input').value;
const password = document.getElementById('channel-login-password-input').value;
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
// prevent default
event.preventDefault()
// send request
@ -59,15 +55,15 @@ function loginToChannel (event) {
return result;
})
// update channel selection
.then(result => {
.then(() => {
// remove old channel and replace with new one & select it
replaceChannelOptionInPublishChannelSelect();
// remove old channel and replace with new one & select it
replaceChannelOptionInNavBarChannelSelect();
})
.catch(error => {
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
showError(loginErrorDisplayElement, error);
console.log('login failure:', error);
})
}

View file

@ -0,0 +1,17 @@
function toggleNavBarSelection (value) {
const selectedOption = value;
if (selectedOption === 'LOGOUT') {
console.log('log out');
// remove session cookies
clearUserCookies();
// send logout request to server
window.location.href = '/logout';
} else if (selectedOption === 'VIEW') {
console.log('view channel');
// get channel info
const channelName = getCookie('channel_name');
const channelClaimId = getCookie('channel_claim_id');
// redirect to channel page
window.location.href = `/${channelName}:${channelClaimId}`;
}
}

View file

@ -56,7 +56,7 @@ function previewAndStageFile(selectedFile){
stagedFiles = [selectedFile];
}
// Validate the publish submission and then trigger publishing.
// Validate the publish submission and then trigger upload
function publishStagedFile(event) {
// prevent default so this script can handle submission
event.preventDefault();

View file

@ -25,6 +25,7 @@
<script src="/assets/js/publishFileFunctions.js"></script>
<script src="/assets/js/authFunctions.js"></script>
<script src="/assets/js/loginFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script>
{{{ body }}}
</body>
</html>

View file

@ -21,6 +21,7 @@
<script src="/assets/js/validationFunctions.js"></script>
<script src="/assets/js/authFunctions.js"></script>
<script src="/assets/js/loginFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script>
{{{ body }}}
</body>
</html>

View file

@ -6,37 +6,12 @@
<a class="nav-bar-link" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a>
<a class="nav-bar-link" href="/about">About</a>
{{#if user}}
<select type="text" id="nav-bar-channel-select" class="select select--no-arrow nav-bar-link" onchange="toggleLogin(event.target.selectedOptions[0].value)">
<option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option>
<option value="VIEW">View</option>
<option value="LOGOUT">Logout</option>
</select>
{{else}}
<a class="nav-bar-link" href="/login">Login</a>
{{/if}}
<select type="text" id="nav-bar-channel-select" class="select select--no-arrow nav-bar-link" onchange="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}>
<option id="nav-bar-channel-select-channel-option">@{{user.userName}}</option>
<option value="VIEW">View</option>
<option value="LOGOUT">Logout</option>
</select>
<a id="nav-bar-login-link" class="nav-bar-link" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
</div>
</div>
</div>
<script type="text/javascript">
function toggleLogin (value) {
const selectedOption = value;
if (selectedOption === 'LOGOUT') {
console.log('log out');
// remove session cookies
clearCookies();
// send logout request to server
window.location.href = '/logout';
} else if (selectedOption === 'VIEW') {
console.log('view channel');
// get channel info
const channelName = getCookie('channel_name');
const channelClaimId = getCookie('channel_claim_id');
// redirect to channel page
window.location.href = `/${channelName}:${channelClaimId}`;
}
}
</script>
</div>