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){ 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() { function replaceChannelOptionInPublishChannelSelect() {
// remove the old channel option // remove the old channel option
const oldChannel = document.getElementById('publish-channel-select-channel-option') const oldChannel = document.getElementById('publish-channel-select-channel-option')
@ -42,13 +35,16 @@ function replaceChannelOptionInNavBarChannelSelect () {
newChannelOption.innerText = loggedInChannel; newChannelOption.innerText = loggedInChannel;
// add the new option // add the new option
const channelSelect = document.getElementById('nav-bar-channel-select'); const channelSelect = document.getElementById('nav-bar-channel-select');
channelSelect.style.display = 'inline-block';
channelSelect.insertBefore(newChannelOption, channelSelect.firstChild); channelSelect.insertBefore(newChannelOption, channelSelect.firstChild);
// hide login
const navBarLoginLink = document.getElementById('nav-bar-login-link');
navBarLoginLink.style.display = 'none';
} }
function loginToChannel (event) { function loginToChannel (event) {
const userName = document.getElementById('channel-login-name-input').value; const userName = document.getElementById('channel-login-name-input').value;
const password = document.getElementById('channel-login-password-input').value; const password = document.getElementById('channel-login-password-input').value;
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
// prevent default // prevent default
event.preventDefault() event.preventDefault()
// send request // send request
@ -59,15 +55,15 @@ function loginToChannel (event) {
return result; return result;
}) })
// update channel selection // update channel selection
.then(result => { .then(() => {
// remove old channel and replace with new one & select it // remove old channel and replace with new one & select it
replaceChannelOptionInPublishChannelSelect(); replaceChannelOptionInPublishChannelSelect();
// remove old channel and replace with new one & select it // remove old channel and replace with new one & select it
replaceChannelOptionInNavBarChannelSelect(); replaceChannelOptionInNavBarChannelSelect();
}) })
.catch(error => { .catch(error => {
const loginErrorDisplayElement = document.getElementById('login-error-display-element');
showError(loginErrorDisplayElement, error); showError(loginErrorDisplayElement, error);
console.log('login failure:', 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]; stagedFiles = [selectedFile];
} }
// Validate the publish submission and then trigger publishing. // Validate the publish submission and then trigger upload
function publishStagedFile(event) { function publishStagedFile(event) {
// prevent default so this script can handle submission // prevent default so this script can handle submission
event.preventDefault(); event.preventDefault();

View file

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

View file

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

View file

@ -6,37 +6,12 @@
<a class="nav-bar-link" href="/">Upload</a> <a class="nav-bar-link" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a> <a class="nav-bar-link" href="/popular">Popular</a>
<a class="nav-bar-link" href="/about">About</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="toggleNavBarSelection(event.target.selectedOptions[0].value)" {{#unless user}}style="display:none"{{/unless}}>
<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 id="nav-bar-channel-select-channel-option">@{{user.userName}}</option> <option value="VIEW">View</option>
<option value="VIEW">View</option> <option value="LOGOUT">Logout</option>
<option value="LOGOUT">Logout</option> </select>
</select> <a id="nav-bar-login-link" class="nav-bar-link" href="/login" {{#if user}}style="display:none"{{/if}}>Channel</a>
{{else}}
<a class="nav-bar-link" href="/login">Login</a>
{{/if}}
</div> </div>
</div> </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>