Add login/logout buttons

public/scripts/main.js

@@ -0,0 +1,14 @@
+const logInButton = document.getElementById('login-button');
+const logOutButton = document.getElementById('logout-button');
+
+if(logInButton) {
+    logInButton.addEventListener('click', () => {
+        window.location.href = "/auth/login";
+    });
+}
+
+if(logOutButton) {
+    logOutButton.addEventListener('click', () => {
+        window.location.href = "/auth/logout";
+    });
+}

public/stylesheets/index.css

@@ -25,8 +25,3 @@ tr {
     flex-direction: row;
 }
 
-#actions-div {
-    display: flex;
-    flex-direction: column;
-    margin-left: auto;
-}

public/stylesheets/style.css

@@ -23,3 +23,8 @@ a {
 .send-to-right {
   margin-left: auto;
 }
+
+#actions-div {
+  display: flex;
+  margin-left: auto;
+}

routes/index.js

@@ -3,7 +3,7 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'View Scores' });
+  res.render('index', { title: 'View Scores', userLoggedIn: !!req.user });
 });
 
 module.exports = router;

routes/manage.js

@@ -30,14 +30,14 @@ function adminLoggedIn(req, res, next) {
 
 
 router.get('/' ,userLoggedIn, function(req, res, next) {
-  if(req.user[2]) res.render('manage', { title: 'Score Management' });
+  if(req.user[2]) res.render('manage', { title: 'Score Management', userLoggedIn: !!req.user });
-  else res.render('manage/manage-nonadmin', { title: "My Games" });
+  else res.render('manage/manage-nonadmin', { title: "My Games", userLoggedIn: !!req.user });
 });
 
 router.get('/game', userLoggedIn, function(req, res, next) {
   let title = req.query.game ? 'Edit Game' : 'Submit Score'
   
-  res.render('manage/addgame', { title });
+  res.render('manage/addgame', { title, userLoggedIn: !!req.user });
 });
 
 router.post('/game', userLoggedIn, function(req, res, next) {
@@ -73,7 +73,7 @@ router.post('/game', userLoggedIn, function(req, res, next) {
 });
 
 router.get('/season', adminLoggedIn, function(req, res, next) {
-  res.render('manage/addseason', { title: 'Add Season', currentYear : (new Date()).getFullYear() });
+  res.render('manage/addseason', { title: 'Add Season', currentYear : (new Date()).getFullYear(), userLoggedIn: !!req.user });
 });
 
 router.post('/season', adminLoggedIn, function(req, res, next) {
@@ -87,7 +87,7 @@ router.post('/season', adminLoggedIn, function(req, res, next) {
 });
 
 router.get('/sport', adminLoggedIn, function(req, res, next) {
-  res.render('manage/addsport', { title: 'Add Sport' });
+  res.render('manage/addsport', { title: 'Add Sport', userLoggedIn: !!req.user });
 });
 
 router.post('/sport', adminLoggedIn, function(req, res, next) {
@@ -103,7 +103,7 @@ router.post('/sport', adminLoggedIn, function(req, res, next) {
 router.get('/division', adminLoggedIn, function(req, res, next) {
   let title = req.query.division ? 'Edit Division' : 'Add Division'
 
-  res.render('manage/adddivision', { title });
+  res.render('manage/adddivision', { title, userLoggedIn: !!req.user });
 });
 
 router.post('/division', adminLoggedIn, function(req, res, next) {
@@ -134,7 +134,7 @@ router.post('/division', adminLoggedIn, function(req, res, next) {
 router.get('/team', adminLoggedIn, function(req, res, next) {
   let title = req.query.team ? 'Edit Team' : 'Add Team'
 
-  res.render('manage/addteam', { title });
+  res.render('manage/addteam', { title, userLoggedIn: !!req.user });
 });
 
 router.post('/team', adminLoggedIn, function(req, res, next) {
@@ -156,12 +156,12 @@ router.get('/account', userLoggedIn, (req, res, next) => {
   if(userIsAdmin) {
     let title = req.query.account ? 'Manage User' : 'Create User'
 
-    res.render('accounts/createuser', { title });  
+    res.render('accounts/createuser', { title, userLoggedIn: !!req.user });  
   }
   else {
     let title = 'Manage Account';
 
-    res.render('accounts/createuser', { title, accountID });  
+    res.render('accounts/createuser', { title, accountID, userLoggedIn: !!req.user });  
   }
 });
 

views/accounts/createuser.pug

@@ -5,8 +5,6 @@ block stylesheets
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     form#submission-form(action='/manage/account', method='POST')
       if accountID 
         input#account-id(type="hidden" name="account" value=accountID)

views/accounts/login.pug

@@ -5,8 +5,6 @@ block stylesheets
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
   form(action='/auth/login', method='POST')
     span(class='form-section')
       label Email

views/index.pug

@@ -4,13 +4,13 @@ block stylesheets
   link(rel='stylesheet', href='/stylesheets/index.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
+block actions 
+    if userLoggedIn 
+        button#add-score-button Submit score
+        button#manage-button Manage scores
+
+
 block content
-  div#mobile-view
-    div#header-div
-        h1 Score Tracker
-        div#actions-div
-            button#add-score-button +
-            button#manage-button Manage
     div
         span(class='form-section')
             label Year

views/layout.pug

@@ -1,10 +1,19 @@
 doctype html
 html
   head
-    title= title
+    title= title + ' - Score Tracker'
     meta(name='viewport', content='width=device-width, initial-scale=1') 
     link(rel='stylesheet', href='/stylesheets/style.css')
     block stylesheets
   body
+    div#mobile-view
+      div#actions-div
+        block actions 
+        if userLoggedIn
+          button#logout-button Log out
+        else if userLoggedIn !== undefined
+          button#login-button Log in
+      h1 #{title}
       block content
     block scripts
+    script(src='/scripts/main.js' type="module")

views/manage.pug

@@ -5,8 +5,6 @@ block stylesheets
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 Management Panel
     div
         span(class='form-section')
             label Category

views/manage/adddivision.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     form#submission-form(action='./division', method='POST')
       span(class='form-section')
         label Sport

views/manage/addgame.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     form#submission-form(action='./game', method='POST')
       span(class='form-section')
         label Year

views/manage/addseason.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     form(action='./season', method='POST')
       span(class='form-section')
         label Ending year

views/manage/addsport.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1#main-header Add Sport
     form#submission-form(action='./sport', method='POST')
       span(class='form-section')
         label Sport name

views/manage/addteam.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/submit.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     form#submission-form(action='./team', method='POST')
       span(class='form-section')
         label Sport

views/manage/manage-nonadmin.pug

@@ -1,12 +1,10 @@
-extends layout
+extends ../layout
 
 block stylesheets
   link(rel='stylesheet', href='/stylesheets/manage.css')
   link(rel='stylesheet', href='/stylesheets/form.css')
 
 block content
-  div#mobile-view
-    h1 #{title}
     span(class="flat-content")
       button#add-new-button Add new...
       button#manage-account-button(class="send-to-right") Manage account...