/logout/

www/data/css/styles.css

@@ -130,6 +130,7 @@ body {
     padding: 0;
     height: 42px; }
     #headerdiv .logowrapper .logo {
+      min-width: 197.5px;
       height: 30px;
       margin: 4px 0 8px 6px;
       flex: initial; }
@@ -166,6 +167,14 @@ body {
       #headerdiv .tabrow .tab_github:hover {
         background-color: #c9510c;
         color: black; }
+    #headerdiv .tabrow .tab_logout {
+      background-color: #A00;
+      border-left: 1px solid #111;
+      border-right: none;
+      color: black; }
+      #headerdiv .tabrow .tab_logout:hover {
+        background-color: #c9510c;
+        color: black; }
 
 @media (max-width: 850px) {
   #headerdiv {

www/data/css/styles.min.css

@@ -25,7 +25,7 @@ body{background-color:#EEE;color:#CCC;font-family:serif}
 .button:hover{background-color:#555}
 #headerdiv{z-index:999;background-color:#333;display:flex;border-bottom:1px solid #111;box-shadow:0 0 8px #000;position:fixed;width:100%}
 #headerdiv .logowrapper{flex:initial;margin:0;padding:0;height:42px}
-#headerdiv .logowrapper .logo{height:30px;margin:4px 0 8px 6px;flex:initial}
+#headerdiv .logowrapper .logo{min-width:197.5px;height:30px;margin:4px 0 8px 6px;flex:initial}
 #headerdiv .tabrow{display:flex;flex:auto}
 #headerdiv .tabrow .tab{display:flex;justify-content:center;align-items:center;background-color:#222;color:#CCC;border-left:1px solid #000;border-right:1px solid #000;font-weight:bold;text-decoration:none;margin:0 0 0 20px;padding:2px 5px;min-width:64px;text-align:center;flex:initial}
 #headerdiv .tabrow .tab:hover{cursor:pointer;background-color:#555}
@@ -33,6 +33,8 @@ body{background-color:#EEE;color:#CCC;font-family:serif}
 #headerdiv .tabrow .tab_split{flex:auto}
 #headerdiv .tabrow .tab_github{background-color:#4078c0;border-left:1px solid #111;border-right:0;color:black}
 #headerdiv .tabrow .tab_github:hover{background-color:#c9510c;color:black}
+#headerdiv .tabrow .tab_logout{background-color:#A00;border-left:1px solid #111;border-right:0;color:black}
+#headerdiv .tabrow .tab_logout:hover{background-color:#c9510c;color:black}
 @media(max-width:850px){
 	#headerdiv{position:static;flex-direction:column}
 	#headerdiv .logowrapper{display:flex;align-items:center;justify-content:center}

www/data/css/styles_header.scss

@@ -16,6 +16,7 @@
     height: 42px;
 
     .logo {
+      min-width: 197.5px; // prevents flickering after DOM load
       height: 30px;
       margin: 4px 0 8px 6px;
       flex: initial;
@@ -68,6 +69,18 @@
         color: black;
       }
     }
+
+    .tab_logout {
+      background-color: #A00;
+      border-left:  1px solid #111;
+      border-right: none;
+      color: black;
+
+      &:hover {
+        background-color: #c9510c;
+        color: black;
+      }
+    }
   }
 }
 

www/fragments/header.php

@@ -8,8 +8,10 @@
 		<a class="tab <?php if ($HEADER_ACTIVE === 'euler')    echo 'tab_active'; ?>" href="/blog/1/Project_Euler_with_Befunge">Project Euler</a>
 		<a class="tab <?php if ($HEADER_ACTIVE === 'blog')     echo 'tab_active'; ?>" href="/blog">Blog</a>
         <a class="tab <?php if ($HEADER_ACTIVE === 'programs') echo 'tab_active'; ?>" href="/programs">Programs</a>
+        <?php if (isLoggedInByCookie()): ?><a class="tab tab_active" href="/admin">Admin</a><?php endif; ?>
 		<a class="tab <?php if ($HEADER_ACTIVE === 'about')    echo 'tab_active'; ?>" href="/about">About</a>
 		<div class="tab_split" ></div>
+		<?php if (isLoggedInByCookie()): ?><a class="tab tab_logout" href="/logout">{Logout}</a><?php endif; ?>
         <a class="tab tab_github" href="https://github.com/Mikescher/">Github</a>
 	</div>
 

www/index.php

@@ -11,6 +11,7 @@ $URL_RULES =
 	[ 'url' => ['about'],                                    'target' => 'pages/about.php',                  'options' => [],                                        ],
 	[ 'url' => ['msmain', 'about'],                          'target' => 'pages/about.php',                  'options' => [],                                        ],
 	[ 'url' => ['login'],                                    'target' => 'pages/login.php',                  'options' => [ 'login_target'  => '/' ],                ],
+	[ 'url' => ['logout'],                                   'target' => 'pages/logout.php',                 'options' => [ 'logout_target' => '/' ],                ],
 
 	[ 'url' => ['programs'],                                 'target' => 'pages/programs_list.php',          'options' => [ 'categoryfilter' => '' ],                ],
 	[ 'url' => ['programs', 'index'],                        'target' => 'pages/programs_list.php',          'options' => [ 'categoryfilter' => '%GET%' ],           ],
@@ -143,14 +144,7 @@ try {
 
 		if (in_array('password', $opt))
 		{
-			$auth = hash('sha256', $CONFIG['admin_username'] . ';' . $CONFIG['admin_password']);
+			if (!isLoggedInByCookie())
-
-			if (!key_exists('mikescher_auth', $_COOKIE))
-			{
-				$opt['login_target'] = $path;
-				$target = 'pages/login.php';
-			}
-			else if ($auth !== $_COOKIE['mikescher_auth'])
 			{
 				$opt['login_target'] = $path;
 				$target = 'pages/login.php';

www/internals/base.php

@@ -154,3 +154,31 @@ function convertLanguageToFlag($lang) {
 
 	return null;
 }
+
+function setLoginCookie($user, $pass)
+{
+	$expires = time() + (24*60*60); // 24h
+	$hash = hash('sha256', $user . ';' . $pass);
+	setcookie('mikescher_auth', $hash, $expires);
+}
+
+function isLoggedInByCookie()
+{
+	static $_loginCache = null;
+	if ($_loginCache !== null) return $_loginCache;
+
+	global $CONFIG;
+	if (key_exists('mikescher_auth', $_COOKIE))
+	{
+		if (strlen($_COOKIE['mikescher_auth']) !== 64) return $_loginCache = false;
+		$auth = hash('sha256', $CONFIG['admin_username'] . ';' . $CONFIG['admin_password']);
+		if ($auth === $_COOKIE['mikescher_auth']) return $_loginCache = true;
+	}
+
+	return $_loginCache = false;
+}
+
+function clearLoginCookie()
+{
+	setcookie("mikescher_auth", "", time()+30);
+}

www/pages/login.php

@@ -10,10 +10,7 @@ if (key_exists('username', $_GET) && key_exists('password', $_GET) && key_exists
 {
 	if ($_GET['username'] === $CONFIG['admin_username'] && $_GET['password'] === $CONFIG['admin_password'])
     {
-		$expires = time() + (24*60*60); // 24h
+	    setLoginCookie($_GET['username'], $_GET['password']);
-		$hash = hash('sha256', $_GET['username'] . ';' . $_GET['password']);
-		setcookie('mikescher_auth', $hash, $expires);
-
 		header('Location: ' . $_GET['redirect']);
 		die();
 	}

www/pages/logout.php

@@ -0,0 +1,25 @@
+<?php
+require_once (__DIR__ . '/../internals/base.php');
+global $OPTIONS;
+
+$redirect = $OPTIONS['logout_target'];
+
+clearLoginCookie();
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Mikescher.com - Logout</title>
+    <link rel="icon" type="image/png" href="/data/images/favicon.png"/>
+    <link rel="canonical" href="https://www.mikescher.com/logout"/>
+    <meta http-equiv="refresh" content="1; url=<?php echo $redirect; ?>" />
+</head>
+<body>
+You have been logged out
+<script>
+    setTimeout(function () { window.location.href = "<?php echo $redirect; ?>"; }, 1000);
+</script>
+</body>
+</html>