fixed navbar logout

public/assets/js/generalFunctions.js

@@ -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){

public/assets/js/loginFunctions.js

@@ -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);
         })
 }
-

public/assets/js/navBarFunctions.js

@@ -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}`;
+    }
+}

public/assets/js/publishFileFunctions.js

@@ -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();

views/layouts/main.handlebars

@@ -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>

views/layouts/show.handlebars

@@ -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>

views/partials/topBar.handlebars

@@ -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="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>
-
-<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>