Enable secure for JWT-cookie

Resolved merge conflicts

README.md

@@ -1,32 +1,91 @@
-# lucidAuth
+# lucidAuth [![](https://img.shields.io/badge/status-in%20production-%23003399.svg)](#) [![](https://img.shields.io/badge/contributors-1-green.svg) ](#)  
-[![](https://img.shields.io/badge/status-in%20production-%23003399.svg)](#) [![](https://img.shields.io/badge/contributors-1-green.svg) ](#)  
+> *Respect* the unexpected, mitigate your risks  
-
+
-Forward Authentication for use with proxies (caddy, nginx, traefik, etc)
+Forward Authentication for use with loadbalancers/proxies/webservers (Apache, ~~Caddy~~, Lighttpd, NGINX, Traefik, etc)
-
+
-## Usage
+## Usage
-- Create a new folder, navigate to it in a commandprompt and run the following command:  
+- Create a new folder, navigate to it in a commandprompt and run the following command:  
-  `git clone https://code.spamasaurus.com/djpbessems/lucidAuth.git`  
+  `git clone https://code.spamasaurus.com/djpbessems/lucidAuth.git`  
-- Edit `include/lucidAuth.config.php.example` to reflect your configuration and save as `include/lucidAuth.config.php`  
+- Edit `include/lucidAuth.config.php.example` to reflect your configuration and save as `include/lucidAuth.config.php`  
-- Create a new website (within any php-capable webserver) and make sure that the documentroot points to the `public` folder  
+- Create a new website (within any php-capable webserver) and make sure that the documentroot points to the `public` folder  
-- Check if you are able to browse to `https://<fqdn>/lucidAuth.login.php` (where `<fqdn>` is the actual domain -or IP address- your webserver is listening on)  
+- Check if you are able to browse to `https://<fqdn>/lucidAuth.login.php` (where `<fqdn>` is the actual domain -or IP address- your webserver is listening on)  
-- Edit your proxy's configuration to use the new website as forward proxy:  
+- Edit your webserver's/proxy's configuration to use the new website for forward authentication:  
-  - #### ~~in Caddy/nginx~~    <small>(planned for a later stage)</small>
+  - #### ~~in Apache~~    <small>(Soon™)</small>  
-
+
-  - #### in Traefik  
+  - #### ~~in Caddy~~    <small>(Never, due to lacking functionality)</small>  
-  Add the following lines (change to reflect your existing configuration):  
+
-  ```
+  - #### ~~in Lighttpd~~    <small>(Soon™)</small>  
-  [frontends.server1]
+
-    entrypoints = ["https"]
+  - #### in NGINX
-    backend = "server1"
+  Add the following lines (adjust to reflect your existing configuration - more [details](https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-subrequest-authentication/)):  
-    [frontends.server1.auth.forward]
+  ```
-      address = "https://<fqdn>/lucidAuth.validateRequest.php"
+  http {
-    [frontends.server1.routes]
+          #...
-      [frontends.server1.routes.ext]
+          server {
-        rule = "Host:<fqdn>"
+          #...
-  ```
+            location /private/ {
-
+              auth_request     /auth;
-- #### Important!  
+              auth_request_set $auth_status $upstream_status;
-  The domainname of the website made in step 3, needs to match the domainname (*ignoring subdomains, if any*) of the resource utilizing this authentication proxy.
+            }
-
+
-## Questions or bugs
+            location = /auth {
+              internal;
+              proxy_pass              https://<fqdn>/lucidAuth.validateRequest.php;
+              proxy_pass_request_body off;
+              proxy_set_header        Content-Length "";
+              proxy_set_header        X-Original-URI $request_uri;
+            }
+          }
+  }
+  ```
+
+  - #### in Traefik  
+  Add the following lines (change to reflect your existing configuration):  
+#####   1.7.x (more [details](https://docs.traefik.io/v1.7/configuration/entrypoints/#forward-authentication))  
+  ```
+  [frontends.server1]
+          entrypoints = ["https"]
+          backend = "server1"
+          [frontends.server1.auth.forward]
+            address = "https://<fqdn>/lucidAuth.validateRequest.php"
+          [frontends.server1.routes]
+            [frontends.server1.routes.ext]
+              rule = "Host:<fqdn>"
+  ```
+#####   2.x (more [details](https://docs.traefik.io/middlewares/forwardauth/))  
+  Either whitelist IP's which should be trusted to send `HTTP_X-Forwarded-*` headers, ór enable insecure-mode in your static configuration:  
+  ```
+  entryPoints:
+          https:
+            address: :443
+            forwardedHeaders:
+              trustedIPs:
+                - "127.0.0.1/32"
+                - "192.168.1.0/24"
+        #      insecure: true
+  ```
+  Define a middleware that tells Traefik to forward requests for authentication in your dynamic file provider:  
+  ```
+  https:
+          middlewares:
+            ldap-authentication:
+              forwardAuth:
+                address: "https://<fqdn>/lucidAuth.validateRequest.php"
+                trustForwardHeader: true
+  ```
+  And finally add the new middleware to your service (different methods; this depends on your configuration):  
+  ```
+  # as a label (when using Docker provider)
+  traefik.http.routers.router1.middlewares: "ldap-authentication@file"
+  # as yaml (when using file provider)
+  routers:
+          router1:
+            middlewares:
+              - "ldap-authentication"
+  ```
+
+- #### Important!  
+  The domainname of the website made in step 3, needs to match the domainname (*ignoring subdomains, if any*) of the resource utilizing this authentication proxy.
+
+## Questions or bugs
 Feel free to open issues in this repository.

include/lucidAuth.functions.php

@@ -35,13 +35,36 @@ function authenticateLDAP (string $username, string $password) {
 		if (@ldap_bind($ds, $qualifiedUsername, utf8_encode($_POST['password']))) {
 			// Successful authentication; get additional userdetails from authenticationsource
 			$ldapSearchResults = ldap_search($ds, $settings->LDAP['BaseDN'], "sAMAccountName=$sanitizedUsername");
-			$commonName = ldap_get_entries($ds, $ldapSearchResults)[0]['cn'][0];
+            $commonName = ldap_get_entries($ds, $ldapSearchResults)[0]['cn'][0];
-			// Create JWT-payload
+
+            $browserDetails = get_browser(null, True);
+            $geoLocation = json_decode(file_get_contents("http://ip-api.com/json/{$_SERVER['HTTP_X_REAL_IP']}"));
+            if ($geoLocation->status === 'fail') {
+                switch ($geoLocation->message) {
+                    case 'private range':
+                    case 'reserved range':
+                        $geoLocation = json_decode(file_get_contents("http://ip-api.com/json/" . trim(file_get_contents('https://api.ipify.org')) ));
+                        break;
+                    case 'invalid query':
+                    default:
+                        $geoLocation->city = null;
+                        $geoLocation->countryCode = null;
+                        break;
+                }
+            }
+
+            // Create JWT-payload
 			$jwtPayload = [
-				'iat'	=> time(),					// Issued at: time when the token was generated
+				'iat'	=> time(),                                  // Issued at: time when the token was generated
-				'iss'	=> $_SERVER['SERVER_NAME'],	// Issuer
+				'iss'	=> $_SERVER['SERVER_NAME'],                 // Issuer
-				'sub'	=> $qualifiedUsername,		// Subject (ie. username)
+				'sub'	=> $qualifiedUsername,                      // Subject (ie. username)
-				'name'	=> $commonName				// Common name (as retrieved from AD)
+                'name'	=> $commonName,                             // Common name (as retrieved from AD)
+                'fp'    => base64_encode(json_encode((object) [     // Fingerprint
+                    'browser'       => $browserDetails['browser'],
+                    'platform'      => $browserDetails['platform'],
+                    'city'          => $geoLocation->city,
+                    'countrycode'   => $geoLocation->countryCode
+                ]))
 			];
 
 			$secureToken = JWT::encode($jwtPayload, base64_decode($settings->JWT['PrivateKey_base64']));
@@ -66,24 +89,24 @@ function storeToken (string $secureToken, string $qualifiedUsername, string $htt
 			INSERT INTO SecureToken (UserId, Value)
 			SELECT User.Id, :securetoken
 			FROM User
-			WHERE User.Username = :qualifiedusername
+			WHERE LOWER(User.Username) = :qualifiedusername
 		');
 		$pdoQuery->execute([
 			':securetoken'			=>	$secureToken,
-			':qualifiedusername'	=>	$qualifiedUsername
+			':qualifiedusername'	=>	strtolower($qualifiedUsername)
 		]);
 	}
 	catch (Exception $e) {
 		return ['status' => 'Fail', 'reason' => $e];
 	}
-	
+
 	// Save authentication token in cookie clientside
 	$cookieDomain = array_values(array_filter($settings->Session['CookieDomains'], function ($value) use ($httpHost) {
 		// Check if $_SERVER['HTTP_HOST'] matches any of the configured domains (either explicitly or as a subdomain)
 		//   This might seem backwards, but relying on $_SERVER directly allows spoofed values with potential security risks
 		return (strlen($value) > strlen($httpHost)) ? false : (0 === substr_compare($httpHost, $value, -strlen($value)));
 	}))[0];
-	if ($cookieDomain && setcookie('JWT', $secureToken, (time() + $settings->Session['Duration']), '/', '.' . $cookieDomain)) {
+	if ($cookieDomain && setcookie('JWT', $secureToken, (time() + $settings->Session['Duration']), '/', '.' . $cookieDomain, TRUE)) {
 		return ['status' => 'Success'];
 	} else {
 		return ['status' => 'Fail', 'reason' => 'Unable to store cookie(s)'];
@@ -114,18 +137,19 @@ function validateToken (string $secureToken) {
 
 	// Retrieve all authentication tokens from database matching username
 	$pdoQuery = $pdoDB->prepare('
-		SELECT SecureToken.Value
+		SELECT User.Id, SecureToken.Value
 		FROM SecureToken
-		LEFT JOIN User 
+		LEFT JOIN User
 			ON (User.Id=SecureToken.UserId)
-		WHERE User.Username = :username
+		WHERE LOWER(User.Username) = :username
 	');
 	$pdoQuery->execute([
-			':username'	=>	(string)$jwtPayload->sub
+		':username'	=>	(string) strtolower($jwtPayload->sub)
-		]);
+	]);
 	foreach($pdoQuery->fetchAll(PDO::FETCH_ASSOC) as $row) {
 		try {
 			$storedTokens[] = JWT::decode($row['Value'], base64_decode($settings->JWT['PrivateKey_base64']), $settings->JWT['Algorithm']);
+            $currentUserId = $row['Id'];
 		} catch (Exception $e) {
 			continue;
 		}
@@ -135,9 +159,12 @@ function validateToken (string $secureToken) {
 	if (!empty($storedTokens) && sizeof(array_filter($storedTokens, function ($value) use ($jwtPayload) {
 		return $value->iat === $jwtPayload->iat;
 	})) === 1) {
-		return [
+        purgeTokens($currentUserId, $settings->Session['Duration']);
+
+        return [
 			'status'	=> 'Success',
-			'name'		=> $jwtPayload->name
+			'name'		=> $jwtPayload->name,
+            'uid'       => $currentUserId
 		];
 	} else {
 		if ($settings->Debug['LogToFile']) {
@@ -147,4 +174,85 @@ function validateToken (string $secureToken) {
 	}
 }
 
+function purgeTokens(int $userID, int $maximumTokenAge) {
+	global $settings, $pdoDB;
+
+    $defunctTokens = []; $expiredTokens = [];
+
+    $pdoQuery = $pdoDB->prepare('
+		SELECT SecureToken.Id, SecureToken.Value
+		FROM SecureToken
+		WHERE SecureToken.UserId = :userid
+	');
+	$pdoQuery->execute([
+		':userid'	=>	(int) $userID
+	]);
+	foreach($pdoQuery->fetchAll(PDO::FETCH_ASSOC) as $row) {
+		try {
+            $token = JWT::decode($row['Value'], base64_decode($settings->JWT['PrivateKey_base64']), $settings->JWT['Algorithm']);
+            if ($token->iat < (time() - $maximumTokenAge)) {
+                $expiredTokens[] = $row['Id'];
+            }
+		} catch (Exception $e) {
+			$defunctTokens[] = $row['Id'];
+		}
+    }
+
+    try {
+        // Sadly, PDO does not support named parameters in constructions like 'IN ( :array )'
+        //   instead, the supported syntax is unnamed placeholders like 'IN (?, ?, ?, ...)'
+        $pdoQuery = $pdoDB->prepare('
+            DELETE FROM SecureToken
+            WHERE SecureToken.Id IN (' . implode( ',', array_fill(0, count(array_merge($defunctTokens, $expiredTokens)), '?')) . ')
+        ');
+        $pdoQuery->execute(array_merge($defunctTokens, $expiredTokens));
+
+        if ($settings->Debug['LogToFile']) {
+            file_put_contents('../purgeToken.log', (new DateTime())->format('Y-m-d\TH:i:s.u') . ' --- Garbage collection succeeded (' . $userID . ' => #' . $pdoQuery->rowCount() . ')' . PHP_EOL, FILE_APPEND);
+        }
+
+        return [
+            'status'    => 'Success',
+            'amount'    => $pdoQuery->rowCount()
+        ];
+    } catch (Exception $e) {
+        if ($settings->Debug['LogToFile']) {
+            file_put_contents('../purgeToken.log', (new DateTime())->format('Y-m-d\TH:i:s.u') . ' --- Garbage collection failed (' . $userID . ' => ' . $e . ')' . PHP_EOL, FILE_APPEND);
+        }
+
+        return ['status' => 'Fail', 'reason' => $e];
+    }
+}
+
+function deleteToken(array $tokenIDs, int $userID) {
+    try {
+        // Sadly, PDO does not support named parameters in constructions like 'IN ( :array )'
+        //   instead, the supported syntax is unnamed placeholders like 'IN (?, ?, ?, ...)'
+        $pdoQuery = $pdoDB->prepare('
+            DELETE FROM SecureToken
+            WHERE SecureToken.Id IN (' . implode( ',', array_fill(0, count($tokenIDs), '?')) . ')
+                AND SecureToken.UserId = :userid
+        ');
+        $pdoQuery->execute($tokenIDs,[
+    		':userid'	=>	(int) $userID
+        ]);
+
+        if ($settings->Debug['LogToFile']) {
+            file_put_contents('../deleteToken.log', (new DateTime())->format('Y-m-d\TH:i:s.u') . ' --- Successfully deleted specific token(s) (' . $userID . ' => #' . $pdoQuery->rowCount() . ')' . PHP_EOL, FILE_APPEND);
+        }
+
+        return [
+            'status'    => 'Success',
+            'amount'    => $pdoQuery->rowCount()
+        ];
+    } catch (Exception $e) {
+        if ($settings->Debug['LogToFile']) {
+            file_put_contents('../deleteToken.log', (new DateTime())->format('Y-m-d\TH:i:s.u') . ' --- Failed deleting specific token(s) (' . $userID . ' => ' . $e . ')' . PHP_EOL, FILE_APPEND);
+        }
+
+        return ['status' => 'Fail', 'reason' => $e];
+    }
+
+}
+
 ?>

include/lucidAuth.template.php

@@ -10,15 +10,13 @@ $pageLayout['full'] = <<<'FULL'
     <title>lucidAuth</title>
 	<meta name="application-name" content="lucidAuth" />
 	<meta name="theme-color" content="#003399" />
-	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-	<link rel="manifest" href="/manifest.json" />
 	<link href="misc/style.css" rel="stylesheet" />
 	<link href="misc/style.theme.css" rel="stylesheet" />
     <link href="misc/style.button.css" rel="stylesheet" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
-    <script src="misc/script.theme.js"></script>
     <script src="misc/script.translation.js"></script>
+    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
+    <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />
   </head>
   <body>
     <div id="horizon">
@@ -36,34 +34,60 @@ $pageLayout['full'] = <<<'FULL'
 </html>
 FULL;
 
-$pageLayout['bare'] = <<<'BARE'
+$pageLayout['full_alt'] = <<<'FULL_ALT'
 <!DOCTYPE html>
 <html lang="nl">
   <head>
     <meta charset="utf-8" />
     <title>lucidAuth</title>
 	<meta name="application-name" content="lucidAuth" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
+	<meta name="theme-color" content="#003399" />
-    <script src="misc/script.iframe.js"></script>
+    <link href="misc/style.css" rel="stylesheet" />
+   	<link href="misc/style.panes.css" rel="stylesheet" />
+    <link href="misc/style.button.css" rel="stylesheet" />
+    <link href="misc/style.theme.css" rel="stylesheet" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+    <script src="misc/script.translation.js"></script>
   </head>
   <body>
-  	%1$s
+ 	<div class="wrapper">
+   	  <section id="theme" class="content">
+   	    <div class="columns">
+   	      <main class="main">
+   	        <header class="header">
+   			  <div class="logo">
+                <div class="left"><div class="middle">lucidAuth</div></div><div class="right"></div>
+                <div class="sub"><em>Respect</em> the unexpected; mitigate your risks</div>
+   		      </div>
+              %1$s
+  	        </header>
+            <section>
+              %2$s
+            </section>
+   	      </main>
+   	      <aside class="sidebar-first"></aside>
+   	      <aside class="sidebar-second"></aside>
+   	    </div>
+   	  </section>
+   	</div>
   </body>
 </html>
-BARE;
+FULL_ALT;
 
 $contentLayout['login'] = <<<'LOGIN'
 		  <script src="misc/script.index.js"></script>
-          <fieldset>
+          <section>
-            <legend>Login Details</legend>
             <ul>
+              <li class="misc">
+                <span class="indent">&nbsp;</span>
+              </li>
               <li>
-                <label class="pre" for="username" data-translation="label_username">Gebruikersnaam:</label>
+                <label class="pre" for="username" data-translation="label_username">Username:</label>
                 <input type="text" id="username" name="username" tabindex="100" />
                 <label for="username">@lucidAuth</label>
               </li>
               <li>
-                <label class="pre" for="password" data-translation="label_password">Wachtwoord:</label>
+                <label class="pre" for="password" data-translation="label_password">Password:</label>
                 <input type="password" id="password" name="password" tabindex="200" />
               </li>
               <li>
@@ -71,44 +95,59 @@ $contentLayout['login'] = <<<'LOGIN'
 				<button id="btnlogin" class="bttn-simple bttn-xs bttn-primary" tabindex="300" data-translation="button_login">login</button>
               </li>
               <li class="misc">
-                <span class="indent">&nbsp;</span>
+                <span class="indent" data-translation="span_credentialsavailable">Login credentials available upon request!</span>
-              </li>
-              <li class="misc">
-                <span class="indent" data-translation="span_credentialsavailable">Inloggegevens verkrijgbaar op aanvraag!</span>
               </li>
             </ul>
-          </fieldset>
+          </section>
           <img src="/images/tag_lock.png" style="position: absolute; top: 175px; left: 20px;" alt="Secure!" />
 LOGIN;
 
-$contentLayout['manage'] = <<<'MANAGE'
+$contentLayout['manage']['header'] = <<<'MANAGE_HEADER'
 		  <script src="misc/script.editable.table.js"></script>
 		  <script src="misc/script.manage.js"></script>
-          <span id="user"><span data-translation="span_loggedinas">Ingelogd als</span>&nbsp;%1$s&nbsp;---&nbsp;[<a id="linklanguage-en" href="#" tabindex="700">EN</a>&nbsp;<a id="linklanguage-nl" class="current" href="#" tabindex="700">NL</a>]&nbsp;[<a href="#" tabindex="800" data-translation="link_logout">Log uit</a>]</span>
+          <span id="user"><span data-translation="span_loggedinas">Logged in as</span>&nbsp;%1$s&nbsp;---&nbsp;[<a id="linklanguage-en" class="current" href="#" tabindex="700">EN</a>&nbsp;<a id="linklanguage-nl" href="#" tabindex="700">NL</a>]&nbsp;[<a id="linklogout" href="#" tabindex="800" data-translation="link_logout">Logout</a>]</span>
-          <fieldset style="clear: both;">
+          <ul style="clear: both; margin-top: 20px;">
-            <legend>Beheer Gebruikers</legend>
+            <li class="buttons">
+		      <button id="btnnewuser" class="bttn-simple bttn-xs bttn-primary" data-translation="button_new">new</button>
+                &nbsp;
+		      <button id="btnsave" class="bttn-simple bttn-xs bttn-primary" data-translation="button_save">save</button>
+              <button id="btncancel" class="bttn-simple bttn-xs bttn-primary" data-translation="button_cancel">cancel</button>
+            </li>
+          </ul>
+MANAGE_HEADER;
+$contentLayout['manage']['section'] = <<<'MANAGE_SECTION'
             <ul>
               <li>
-                <table id="tabletest">
+                <table id="usertable">
                   <thead>
                     <tr>
-                      <th>Username</th>
+                      <th class="immutable" data-translation="th_username">Username</th>
-                      <th>Role</th>
+                      <th class="immutable" data-translation="th_role">Role</th>
-                      <th>Sessions</th>
+                      <th class="immutable" data-translation="th_manage">Manage</th>
                     </tr>
                   </thead>
                   <tbody>
-                    %2$s
+                    %1$s
                   </tbody>
                 </table>
-              </li>
+                <div id="sessions">
-              <li>
+                  <span data-translation="label_sessions" style="float: left; margin-left: 5px;">Sessions</span>
-		        <button id="btnaliasadd" class="bttn-simple bttn-xs bttn-primary" tabindex="200" data-translation="button_add">voeg toe</button>
+                  <br>
-		        <button id="btnaliasdelete" class="bttn-simple bttn-xs bttn-primary" tabindex="400" data-translation="button_delete">verwijder</button>
+                  <table id="sessiontable">
-				<button id="btnsync" class="bttn-simple bttn-xs bttn-primary" tabindex="500" data-translation="button_sync">synchroniseer</button>
+                    <thead>
+                      <tr>
+                        <th data-translation="th_timestamp">Timestamp</th>
+                        <th data-translation="th_origin">&lt;origin&gt;</th>
+                        <th data-translation="th_description">Description</th>
+                        <th data-translation="th_manage">Manage</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                  </table>
+                </div>
               </li>
             </ul>
-          </fieldset>
+MANAGE_SECTION;
-MANAGE;
 
 ?>

lucidAuth.config.php.example

@@ -18,6 +18,16 @@ return (object) array(
 		// Specify the NetBios name of the domain; to allow users to log on with just their usernames.
 	],
 
+    '2FA'   => [
+        'Protocol'  => 'TOTP',      // Possible options are HOTP (sequential codes) and TOTP (timebased codes)
+        'TOTP'  => [
+            'Secret'    => 'NULL',  // By default, a 512 bits secret is generated. If you need, you can provide your own secret here.
+            'Age'       => '30',    // The duration that each OTP code is valid for.
+            'Length'    => '6',     // Number of digits the OTP code will consist of.
+            'Algorithm' => 'SHA256' // The hashing algorithm used.
+        ],
+    ],
+
 	'Sqlite'	=> [
 		'Path'	=> '../data/lucidAuth.sqlite.db'
 		// Relative path to the location where the database should be stored
@@ -37,6 +47,9 @@ return (object) array(
 		'CrossDomainLogin'	=> False,
 		// Set this to True if SingleSignOn (albeit rudementary) is desired
 		//   (cookies are inheritently unaware of each other; clearing cookies for one domain does not affect other domains)
+        // Important!
+        // If you leave this set to False, the domainname where lucidAuth will be running on,
+        // needs to match the domainname (*ignoring subdomains, if any*) of the resource utilizing the authentication proxy.
 		'CookieDomains'	=> [
 			'domain1.tld' #, 'domain2.tld', 'subdomain.domain3.tld'
 		]

public/example.php

@@ -1,27 +0,0 @@
-<?php
-
-// Basic example of PHP script to handle with jQuery-Tabledit plug-in.
-// Note that is just an example. Should take precautions such as filtering the input data.
-
-header('Content-Type: application/json');
-
-$input = filter_input_array(INPUT_POST);
-
-$mysqli = new mysqli('localhost', 'user', 'password', 'database');
-
-if (mysqli_connect_errno()) {
-  echo json_encode(array('mysqli' => 'Failed to connect to MySQL: ' . mysqli_connect_error()));
-  exit;
-}
-
-if ($input['action'] === 'edit') {
-    $mysqli->query("UPDATE users SET username='" . $input['username'] . "', email='" . $input['email'] . "', avatar='" . $input['avatar'] . "' WHERE id='" . $input['id'] . "'");
-} else if ($input['action'] === 'delete') {
-    $mysqli->query("UPDATE users SET deleted=1 WHERE id='" . $input['id'] . "'");
-} else if ($input['action'] === 'restore') {
-    $mysqli->query("UPDATE users SET deleted=0 WHERE id='" . $input['id'] . "'");
-}
-
-mysqli_close($mysqli);
-
-echo json_encode($input);

public/images/README.md

@@ -0,0 +1 @@
+Browser logo's obtained from [alrra/browser-logos](https://github.com/alrra/browser-logos).

public/lucidAuth.login.php

@@ -3,7 +3,7 @@
 
 	include_once('../include/lucidAuth.functions.php');
 
-	if ($_POST['do'] == 'login') {
+	if ($_POST['do'] === 'login') {
 		$result = authenticateLDAP($_POST['username'], $_POST['password']);
 		if ($result['status'] === 'Success') {
 			// Store authentication token; in database serverside & in cookie clientside
@@ -14,10 +14,9 @@
 					"Result"			=>	"Failure",
 					"Reason"			=>	"Failed storing authentication token in database and/or cookie"
 				]);
-#				echo '{"Result":"Fail","Reason":"Failed storing authentication token in database and/or cookie"}' . PHP_EOL;
 				exit;
 			}
-            
+
 			// Convert base64 encoded string back from JSON;
 			//   forcing it into an associative array (instead of javascript's default StdClass object)
 			try {
@@ -30,7 +29,6 @@
 					"Result"			=>	"Failure",
 					"Reason"			=>	"Original request-URI lost in transition"
 				]);
-#				echo '{"Result":"Fail","Reason":"Original request URI lost in transition"}' . PHP_EOL;
 				exit;
 			}
 			$originalUri = !empty($proxyHeaders) ? $proxyHeaders['XForwardedProto'] . '://' . $proxyHeaders['XForwardedHost'] . $proxyHeaders['XForwardedUri'] : 'lucidAuth.manage.php';
@@ -40,7 +38,9 @@
 			echo json_encode([
 				"Result"			=>	"Success",
 				"Location"			=>	$originalUri,
-				"CrossDomainLogin"	=>	$settings->Session['CrossDomainLogin']
+				"CrossDomainLogin"	=>	$settings->Session['CrossDomainLogin'],
+                "CookieDomains"     =>  json_encode(array_diff($settings->Session['CookieDomains'], [$_SERVER['HTTP_HOST']])),
+                "SecureToken"       =>  $result['token']
 			]);
 		} else {
 			switch ($result['reason']) {
@@ -63,8 +63,8 @@
 	} else {
 		include_once('../include/lucidAuth.template.php');
 
-		echo sprintf($pageLayout['full'], 
+		echo sprintf($pageLayout['full'],
-			sprintf($contentLayout['login'], 
+			sprintf($contentLayout['login'],
 				$_GET['ref']
 			)
 		);

public/lucidAuth.manage.php

@@ -8,36 +8,124 @@
 	}
 
 	if ($validateTokenResult['status'] === "Success") {
-		include_once('../include/lucidAuth.template.php');
+        switch ($_REQUEST['do']) {
+            case 'mutateusers':
+                if (isset($_REQUEST['new']) && isset($_REQUEST['removed'])) {
+// Do magic!
+                }
+                else {
+                    header('Content-Type: application/json');
+                    echo json_encode([
+                        "Result"	=>	"Failure",
+                        "Reason"	=>	"Incomplete request data"
+                    ]);
+                }
+                break;
+            case 'retrievesessions':
+                $storedTokens = [];
 
-        try {
+                $pdoQuery = $pdoDB->prepare('
-        	$allUsers = $pdoDB->query('
+                    SELECT SecureToken.Id, SecureToken.UserId, SecureToken.Value
-                SELECT User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions
+                    FROM SecureToken
-		        FROM User
+                    WHERE SecureToken.UserId = :userid
-    		    LEFT JOIN Role
+                ');
-	    		    ON (User.RoleId=Role.Id)
+                $pdoQuery->execute([
-                LEFT JOIN SecureToken
+                    ':userid'	=>	(int) $_REQUEST['userid']
-                    ON (User.Id=SecureToken.UserId)
+                ]);
-    	    ')->fetchAll(PDO::FETCH_ASSOC);
+                foreach($pdoQuery->fetchAll(PDO::FETCH_ASSOC) as $row) {
-        } catch (Exception $e) {
+                    try {
+                        $JWTPayload = JWT::decode($row['Value'], base64_decode($settings->JWT['PrivateKey_base64']), $settings->JWT['Algorithm']);
+                        $storedTokens[] = [
+                            'tid'   => $row['Id'],
+                            'iat'	=> $JWTPayload->iat,
+                            'iss'	=> $JWTPayload->iss,
+                            'fp'    => $JWTPayload->fp
+                        ];
+                    } catch (Exception $e) {
+                        // Invalid token
+                        continue;
+                    }
+                }
+
+                // Return JSON object
+                header('Content-Type: application/json');
+                echo json_encode([
+                    "Result"       => "Success",
+                    "SessionCount" => sizeof($storedTokens),
+                    "UserSessions" => json_encode($storedTokens)
+                ]);
+                break;
+            case 'deletesession':
+                if (isset($_REQUEST['userid']) && isset($_REQUEST['tokenid'])) {
+                    try {
+                        $pdoQuery = $pdoDB->prepare('
+                            DELETE FROM SecureToken
+                            WHERE SecureToken.UserId = :userid AND SecureToken.Id = :tokenid
+                        ');
+                        $pdoQuery->execute([
+                            ':userid'	=>	(int) $_REQUEST['userid'],
+                            ':tokenid'  =>  (int) $_REQUEST['tokenid']
+                        ]);
+                        
+                        // Return JSON object
+                        header('Content-Type: application/json');
+                        echo json_encode([
+                            "Result"			=>	"Success",
+                            "RowCount"			=>	$pdoQuery->RowCount()
+                        ]);
+                    }
+                    catch (Exception $e) {
+                        // Return JSON object
+                        header('Content-Type: application/json');
+                        echo json_encode([
+                            "Result"			=>	"Failure",
+                            "Reason"			=>	"Failed deleting tokens from database"
+                        ]);
+                        exit;
+                    }
+                } else {
+                    header('Content-Type: application/json');
+                    echo json_encode([
+                        "Result"	=>	"Failure",
+                        "Reason"	=>	"Incomplete request data"
+                    ]);
+                }
+                break;
+            default:
+                // No action requested, default action
+                include_once('../include/lucidAuth.template.php');
+
+                try {
+                    $allUsers = $pdoDB->query('
+                        SELECT User.Id, User.Username, Role.Rolename
+                        FROM User
+                        LEFT JOIN Role
+                            ON (Role.Id = User.RoleId)
+                    ')->fetchAll(PDO::FETCH_ASSOC);
+                } catch (Exception $e) {
 // Should really do some actual errorhandling here
-            throw new Exception($e);
+                    throw new Exception($e);
+                }
+                foreach($allUsers as $row) {
+                    $tableRows[] = sprintf('<tr%1$s><td data-userid="%2$s">%3$s</td><td>%4$s</td><td class="immutable">%5$s</td></tr>',
+                        $validateTokenResult['uid'] === $row['Id'] ? ' class="currentuser"': null,
+                        $row['Id'],
+                        explode('\\', $row['Username'])[1],
+                        $row['Rolename'],
+                        '<button class="bttn-simple bttn-xs bttn-primary session" data-translation="button_sessions">Sessions</button>' . ($validateTokenResult['uid'] === $row['Id'] ? null : '&nbsp;<button class="bttn-simple bttn-xs bttn-primary delete" data-translation="button_delete">Delete</button>')
+                    );
+                }
+
+                echo sprintf($pageLayout['full_alt'],
+                    sprintf($contentLayout['manage']['header'],
+                        $validateTokenResult['name']
+                    ),
+                    sprintf($contentLayout['manage']['section'],
+                        implode($tableRows)
+                    )
+                );
+                break;
         }
-
-    	foreach($allUsers as $row) {
-            $tableRows[] = sprintf('<tr><td>%1$s</td><td>%2$s</td><td>%3$s</td></tr>',
-                explode('\\', $row['Username'])[1],
-                $row['Rolename'],
-                $row['Sessions']
-            );
-    	}
-
-		echo sprintf($pageLayout['full'],
-			sprintf($contentLayout['manage'],
-				$validateTokenResult['name'],
-                implode($tableRows)
-			)
-		);
 	} else {
 		// No cookie containing valid authentication token found;
 		//   explicitly deleting any remaining cookie, then redirecting to loginpage

public/lucidAuth.requestCookie.php

@@ -0,0 +1,59 @@
+<?php
+	error_reporting(E_ALL ^ E_NOTICE);
+
+	include_once('../include/lucidAuth.functions.php');
+
+    // Start with checking $_REQUEST['ref']
+	if (!empty($_REQUEST['ref'])) {
+		try {
+			$queryString = json_decode(base64_decode($_REQUEST['ref']), JSON_OBJECT_AS_ARRAY);
+		}
+		catch (Exception $e) {
+			// Silently fail, unless explicitly specified otherwise
+            header("HTTP/1.1 400 Bad Request");
+			if ($settings->Debug['Verbose']) throw new Exception($e);
+            exit;
+		}
+
+        switch ($queryString['action']) {
+            case 'login':
+                if (validateToken($queryString['token'])['status'] === "Success") {
+                    // This request appears valid; try storing a cookie
+                    $httpHost = $_SERVER['HTTP_HOST'];
+                    $httpOrigin = $_SERVER['HTTP_ORIGIN'];
+                    // Check if $_SERVER['HTTP_HOST'] and $_SERVER['HTTP_ORIGIN'] match any of the configured domains (either explicitly or as a subdomain)
+                    //   This might seem backwards, but relying on $_SERVER directly allows spoofed values with potential security risks
+                    $cookieDomain = array_values(array_filter($settings->Session['CookieDomains'], function ($value) use ($httpHost) {
+                        return (strlen($value) > strlen($httpHost)) ? false : (0 === substr_compare($httpHost, $value, -strlen($value)));
+                    }))[0];
+                    $originDomain = array_values(array_filter($settings->Session['CookieDomains'], function ($value) use ($httpOrigin) {
+                        return (strlen($value) > strlen($httpOrigin)) ? false : (0 === substr_compare($httpOrigin, $value, -strlen($value)));
+                    }))[0];
+                    if (($cookieDomain && (is_null($httpOrigin) || $originDomain)) && setcookie('JWT', $queryString['token'], (time() + $settings->Session['Duration']), '/', '.' . $cookieDomain)) {
+                        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
+                        header('Access-Control-Allow-Credentials: true');
+                        header('Access-Control-Max-Age: 86400');
+                        header("HTTP/1.1 202 Accepted");
+                        exit;
+                    }
+                    else {
+                        header("HTTP/1.1 400 Bad Request");
+                        exit;
+                    }
+                }
+                else {
+                    header("HTTP/1.1 401 Unauthorized");
+                    exit;
+                }
+                break;
+            default:
+                header("HTTP/1.1 400 Bad Request");
+                exit;
+                break;
+        }
+	}
+    else {
+        header("HTTP/1.1 400 Bad Request");
+        exit;
+    }
+?>

public/lucidAuth.setXDomainCookie.php

@@ -1,24 +0,0 @@
-<?php
-	error_reporting(E_ALL ^ E_NOTICE);
-
-	include_once('../include/lucidAuth.functions.php');
-
-
-	// Start with checking $_REQUEST['ref']
-	// What do we need?
-	//   token again?
-
-	// approach 1:
-	//   origin domain, so we can intersect with $settings->Session['CookieDomains'] and iterate through the remaining domains, serving them in one page (which contains iframes already)
-	//   this might be slower because it means one additional roundtrip between client and server
-
-	// approach 2:
-	//   let the client setup multiple iframes for all domains other than origin domains
-	//   this requires passing an array of domains to the client in asynchronous reply; which feels insecure
-
-	include_once('../include/lucidAuth.template.php');
-
-	echo sprintf($pageLayout['bare'],
-		'// iFrames go here'
-	);
-?>

public/lucidAuth.validateRequest.php

@@ -14,7 +14,7 @@
 	$proxyHeaders = array_filter($proxyHeaders, function ($key) {
 		return substr($key, 0, 10) === 'XForwarded';
 	}, ARRAY_FILTER_USE_KEY);
-	
+
 	// For debugging purposes - enable it in ../lucidAuth.config.php
 	if ($settings->Debug['LogToFile']) {
 		file_put_contents('../requestHeaders.log', (new DateTime())->format('Y-m-d\TH:i:s.u') . ' --- ' . (json_encode($proxyHeaders, JSON_FORCE_OBJECT)) . PHP_EOL, FILE_APPEND);
@@ -22,7 +22,7 @@
 
 	if (sizeof($proxyHeaders) === 0) {
 		// Non-proxied request; this is senseless, go fetch!
-		header("HTTP/1.1 403 Forbidden");
+		header("HTTP/1.1 400 Bad Request");
 		exit;
 	}
 

public/misc/script.editable.table.js

@@ -13,7 +13,7 @@ $.fn.editableTableWidget = function (options) {
 			editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
 			active,
 			showEditor = function (select) {
-				active = element.find('td:focus');
+				active = element.find('td:focus:not(".immutable")');
 				if (active.length) {
 					editor.val(active.text())
 						.removeClass('error')
@@ -89,26 +89,26 @@ $.fn.editableTableWidget = function (options) {
 				editor.removeClass('error');
 			}
 		});
-		element.on('click keypress dblclick', showEditor)
+   		element.on('click keypress dblclick', showEditor)
-		.css('cursor', 'pointer')
+    	.css('cursor', 'pointer')
-		.keydown(function (e) {
+	    .keydown(function (e) {
-			var prevent = true,
+		    var prevent = true,
-				possibleMove = movement($(e.target), e.which);
+			    possibleMove = movement($(e.target), e.which);
-			if (possibleMove.length > 0) {
+   			if (possibleMove.length > 0) {
-				possibleMove.focus();
+    			possibleMove.focus();
-			} else if (e.which === ENTER) {
+	    	} else if (e.which === ENTER) {
-				showEditor(false);
+		    	showEditor(false);
-			} else if (e.which === 17 || e.which === 91 || e.which === 93) {
+   			} else if (e.which === 17 || e.which === 91 || e.which === 93) {
-				showEditor(true);
+    			showEditor(true);
-				prevent = false;
+	    		prevent = false;
-			} else {
+		    } else {
-				prevent = false;
+			    prevent = false;
-			}
+   			}
-			if (prevent) {
+    		if (prevent) {
-				e.stopPropagation();
+	    		e.stopPropagation();
-				e.preventDefault();
+		    	e.preventDefault();
-			}
+   			}
-		});
+    	});
 
 		element.find('td').prop('tabindex', 1);
 
@@ -126,6 +126,6 @@ $.fn.editableTableWidget.defaultOptions = {
 	cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
 					  'text-align', 'font', 'font-size', 'font-family', 'font-weight',
 					  'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
-	editor: $('<input>')
+	editor: $('<input id="editor">')
 };
 

public/misc/script.index.js

@@ -31,11 +31,41 @@ $(document).ready(function(){
 						'color':		'#FFF'
 					});
 					if (data.CrossDomainLogin) {
-						// Create iframes for other domains
+                        var cookieDomains = JSON.parse(data.CookieDomains);
-console.log('CrossDomainLogin initiated');
+                        var XHR = [];
+                        cookieDomains.forEach(function(domain) {
+                            XHR.push($.get({
+                                url: "https://auth." + domain + "/lucidAuth.requestCookie.php",
+                                crossDomain: true,
+                                xhrFields: {
+                                    withCredentials: true,
+                                },
+                                timeout: 750,
+// origin domain should be exempted from timeout
+//   (because origin domain can/will be different from current domain --due to traefik design).
+                                data: {
+                                    ref: btoa(JSON.stringify({
+                                        action: 'login',
+                                        token: data.SecureToken
+                                    }))
+                                }
+                            }).done(function(_data, _textStatus, jqXHR) {
+                                NProgress.inc(1 / XHR.length);
+                                console.log('CrossDomain login succeeded for domain `' + domain + '` [' + JSON.stringify(jqXHR) + ']');
+                            }).fail(function(jqXHR) {
+                                console.log('CrossDomain login failed for domain `' + domain + '` [' + JSON.stringify(jqXHR) + ')]');
+                                // Should check why this failed (timeout or bad request?), and if this is the origin domain, take action
+                            }));
+                        });
+                        $.when.apply($, XHR).then(function(){
+                            $.each(arguments, function(_index, _arg) {
+                                // Finished cross-domain logins (either successfully or through timeout)
+                                NProgress.done();
+                                console.log('CrossDomain login completed; forwarding to `' + data.Location + '`');
+                                window.location.replace(data.Location);
+                            });
+                        });
 					}
-console.log("Navigating to :" + data.Location);
-					window.location.replace(data.Location);
 				}, 2250);
 			} else {
 				$('#btnlogin').css({

public/misc/script.manage.js

@@ -1,3 +1,232 @@
+jQuery.fn.ConfirmDelete = function() {
+    return this.on('click', function() {
+        var sessionID = $(this).data('sessionid');
+
+        $(this).off('click').parent().empty()
+            .append($('<button>', {
+                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_yes'],
+                class: 'bttn-simple bttn-xs bttn-primary sessiondeleteconfirm',
+                style: 'margin-right: 3px;',
+                'data-translation': 'button_yes',
+                'data-sessionid': sessionID
+            }).on('click', function() {
+// Move this out of 'ConfirmDelete()'
+                var pressedButton = $(this);
+                $(pressedButton).prop('disabled', true).css({
+                    'background':	'#999 url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==) no-repeat center',
+                    'color':		'transparent',
+                    'transform':	'rotateX(180deg)',
+                    'cursor':       'default'
+                }).next().prop('disabled', true).addClass('disabled');
+
+                $.post("lucidAuth.manage.php", {
+                    do: "deletesession",
+                    tokenid: sessionID,
+                    userid: $(pressedButton).closest('tr').data('userid')
+                })
+                .done(function(data,_status) {
+                    if (data.Result === 'Success') {
+                        $(pressedButton).css({
+                            'background':	'green url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAaklEQVQ4jeXOMQ5AQBBG4T2BC4i76EWich7ncAKbqCRuodTqnMNTkFgJs3ZU4tXz/Rlj/hUQv8EpMAClFk9sjUAiHVcCnoFMwhZYgPYG575Xe46aIOyMdJx7ji9GwrEzUgOFCu8DkRp/qxU2BKCUyZR6ygAAAABJRU5ErkJggg==) no-repeat center',
+                            'transform':	'rotateX(0deg)'
+                        });
+                        setTimeout(function() {
+                            $(pressedButton).closest('tr').fadeOut(500, function() {
+                                $(this).remove()});
+                        }, 2250);
+                    } else {
+                        $(pressedButton).css({
+        					'background':	'red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAv0lEQVQ4jaWT0Q3CMAxELwh1BEag87AJ6hcLlE/KBLABrNEV2h26QaXHj4NMGgpS7sfJJXd24kQqRMiRQC3pIKk2apD0DCEMq25ABZyBmSVmW6vWxH1GmKLPmph7xJQReq5dnNmVPQE7oHOCzrhoMts9vQ1OSbYOCBb92OPkDe6ZkqMwJwa4SdJmtS1/YGsx7e9VUiPpYvPG4tHtGUsvcf+RkpI2mkHZQ3ImLd+fcpuKf32meM5R0iOEMOb2F+EF33vgCePVr8UAAAAASUVORK5CYII=) no-repeat center',
+                            'transform':	'rotateX(0deg)'
+                        });
+                        setTimeout(function() {
+                            $(pressedButton).closest('td').empty()
+                                .append(
+                                    $('<button>', {
+                                        text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'],
+                                        class: 'bttn-simple bttn-xs bttn-primary sessiondelete',
+                                        'data-translation': 'button_delete',
+                                        'data-sessionid': sessionID
+                                    }).ConfirmDelete())
+                        }, 2250);
+                    }
+                });
+            }))
+            .append($('<button>', {
+                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_no'],
+                class: 'bttn-simple bttn-xs bttn-primary sessiondeletecancel',
+                'data-translation': 'button_no',
+                'data-sessionid': sessionID
+            }).on('click', function() {
+// Move this out of 'ConfirmDelete()'
+                var pressedButton = $(this);
+                $(pressedButton).closest('td').empty()
+                .append(
+                    $('<button>', {
+                        text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'],
+                        class: 'bttn-simple bttn-xs bttn-primary sessiondelete',
+                        'data-translation': 'button_delete',
+                        'data-sessionid': sessionID
+                    }).ConfirmDelete())
+            }))
+    });
+};
+
 $(document).ready(function(){
-    $('#tabletest').editableTableWidget();
+    // Initialize the editable-table functionality
+    $('#usertable').editableTableWidget();
+
+    // Prevent clicking *through* popup-screens
+    $('#sessions').click(function(event) {
+        event.stopPropagation();
+    });
+    
+    // Add eventhandlers to buttons
+    $('#usertable button.session').click(function() {
+        event.stopPropagation();
+        $('#sessions tbody').empty();
+        $('#sessions').fadeToggle();
+
+        var userID = $(this).closest('tr').find('td:nth-child(1)').data('userid');
+
+        $.post("lucidAuth.manage.php", {
+			do: "retrievesessions",
+			userid: userID
+		})
+		.done(function(data,_status) {
+			if (data.Result === 'Success') {
+                var Sessions = JSON.parse(data.UserSessions);
+                for (var i = 0; i < data.SessionCount; i++) {
+                    try {
+                        var fingerPrint = JSON.parse(atob(Sessions[i]['fp']));
+                        var sessionDetails = '<img class="browsericon" src="/images/' + fingerPrint['browser'] + '_256x256.png">';
+                        sessionDetails += fingerPrint['browser'] + ' -- ' + fingerPrint['platform'];
+                        sessionDetails += '<br>' + fingerPrint['city'] + ' (' + fingerPrint['countrycode'] + ')';
+                    } catch(e) {
+                        // Do nothing
+                    } 
+                    $('#sessiontable tbody').append($('<tr>', {
+                            'data-userid': userID
+                        })
+                        .append($('<td>', {
+                            text: new Date(Sessions[i]['iat'] * 1000).toLocaleString('en-GB')
+                        }))
+                        .append($('<td>', {
+                            text: Sessions[i]['iss']
+                        }))
+                        .append($('<td>', {
+                            html: sessionDetails ? sessionDetails : ''
+                        }))
+                        .append($('<td>', {
+                            html: $('<button>', {
+                                text: locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'],
+                                class: 'bttn-simple bttn-xs bttn-primary sessiondelete',
+                                'data-translation': 'button_delete',
+                                'data-sessionid': Sessions[i]['tid']})
+                        }))
+                    );
+                }
+                $('#sessiontable .sessiondelete').ConfirmDelete();
+			} else {
+			}
+		});
+    });
+    $('#usertable button.delete').click(function() {
+        $(this).closest('tr').addClass('removed');
+    });
+
+    $('#btnnewuser').click(function() {
+        // Create a new user; generate pseudo-random username
+        var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');
+
+        // Add new user to the interface
+        //   (new `<tr>` in `<table id="usertable">`)
+        $('#usertable tbody').append($('<tr>', {class: 'new'})
+            .append($('<td>', {
+                text: newUser
+            }))
+            .append($('<td>', {
+                text: 'User'
+            }))
+            .append($('<td>', {
+                class: 'immutable',
+                html: '<button class="bttn-simple bttn-xs bttn-primary disabled" data-translation="button_sessions" disabled="true">' +
+                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_sessions'] + '</button>&nbsp;' +
+                    '<button class="bttn-simple bttn-xs bttn-primary delete" data-translation="button_delete">' +
+                    locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'en')]['button_delete'] +
+                    '</button>'
+            }))
+        );
+        // Call `editableTableWidget()` again to include the newly added `<tr>`
+        //   To prevent recreating multiple new editors; reference the already existing `<input>`
+        $('#usertable').editableTableWidget({editor: $('#editor')});
+        // Add eventhandlers to buttons of newly added `<tr>`
+        $('#usertable .new button.session').unbind().click(function() {
+            console.log('New user, unlikely to have sessions already, lets do nothing for now');
+        });
+        $('#usertable .new button.delete').unbind().click(function() {
+            $(this).closest('tr').remove();
+        });
+    });
+
+    $('#btnsave').click(function() {
+        var newEntries = [];
+        $('#usertable .new').each(function() {
+            newEntries.push({
+                'userName': $(this).find('td:nth-child(1)').text(),
+                'roleName': $(this).find('td:nth-child(2)').text()
+            });
+        });
+        var removedEntries = [];
+        $('#usertable .removed').each(function() {
+            removedEntries.push({
+                'userId':   $(this).find('td:nth-child(1)').data('userid'),
+                'userName': $(this).find('td:nth-child(1)').text(),
+                'roleName': $(this).find('td:nth-child(2)').text()
+            });
+        });
+
+console.log({'new': newEntries, 'removed': removedEntries});
+/*
+        $.post("lucidAuth.manage.php", {
+            do: "mutateusers",
+            new: newEntries,
+            removed: removedEntries
+        })
+        .done(function(data,_status) {
+        }
+*/
+    });
+
+    $('#btncancel').click(function() {
+        window.location.reload();
+    });
+
+    $('#linklogout').click(function() {
+        console.log('Logging out!');
+    });
+
+   	if (localStorage.getItem('theme') !== null) {
+		$('#theme').addClass(localStorage.getItem('theme'));
+	}
+
+	$('.logo .sub').click(function(event) {
+		var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];
+
+		if (event.ctrlKey) {
+			var selectedTheme = classes[~~(Math.random()*classes.length)];
+
+			$('#theme').removeClass(classes.join(' ')).addClass(selectedTheme);
+			localStorage.setItem('theme', selectedTheme);
+		}
+		if (event.altKey) {
+			$('#theme').removeClass(classes.join(' '));
+			localStorage.removeItem('theme');
+		}
+	});
+
+});
+
+$(document).click(function () {
+    $('#sessions').fadeOut();
 });

public/misc/script.theme.js

@@ -1,19 +0,0 @@
-$(document).ready(function() {
-	if (localStorage.getItem('theme') != '') {
-		$('html').addClass(localStorage.getItem('theme'));
-	}
-
-	$('.logo .sub').on('click', function(event) {
-		if (event.ctrlKey) {
-			var classes = ["tablecloth", "weave", "madras", "tartan", "seigaiha"];
-			var selectedTheme = classes[~~(Math.random()*classes.length)];
-			
-			$('html').removeClass().addClass(selectedTheme);
-			localStorage.setItem('theme', selectedTheme);
-		}
-		if (event.altKey) {
-			$('html').removeClass();
-			localStorage.removeItem('theme');
-		}
-	});
-});

public/misc/script.translation.js

@@ -1,29 +1,43 @@
 var locales = {
 	en: {
-		button_add:					"add",
+		button_new:					"new",
+        button_save:                "save",
 		button_cancel:				"cancel",
-		button_continue:			"continue",
+        button_sessions:            "sessions",
 		button_delete:				"delete",
-		button_login:				"login",
+		button_yes:	    			"yes",
+		button_no:			    	"no",
+        button_login:				"login",
 		heading_error:				"ERROR!",
-		label_password:				"Password:",
+        label_password:				"Password:",
+        label_sessions:				"Sessions",
 		label_username:				"Username:",
 		link_logout:				"Logout",
 		span_credentialsavailable:	"Login credentials available upon request!",
-		span_loggedinas:			"Logged in as"
+		span_loggedinas:			"Logged in as",
+        th_username:                "Username",
+        th_role:                    "Role",
+        th_manage:                  "Manage"
 	},
 	nl: {
-		button_add:					"voeg toe",
+		button_new:					"nieuw",
-		button_cancel:				"annuleer",
+        button_save:                "opslaan",
-		button_continue:			"doorgaan",
+		button_cancel:				"annuleren",
+        button_sessions:            "sessies",
 		button_delete:				"verwijder",
+		button_yes:	    			"ja",
+		button_no:			    	"nee",
 		button_login:				"log in",
 		heading_error:				"FOUT!",
-		label_password:				"Wachtwoord:",
+        label_password:				"Wachtwoord:",
+        label_sessions:				"Sessies",
 		label_username:				"Gebruikersnaam:",
 		link_logout:				"Log uit",
 		span_credentialsavailable:	"Inloggegevens verkrijgbaar op aanvraag!",
-		span_loggedinas:			"Ingelogd als"
+		span_loggedinas:			"Ingelogd als",
+        th_username:                "Gebruikersnaam",
+        th_role:                    "Rol",
+        th_manage:                  "Beheer"
 	} // ... etc.
 };
 
@@ -31,19 +45,19 @@ $(document).ready(function(){
 	$('[id^=linklanguage-]').click(function() {
 		var selectedlang = $(this).attr('id').split('-')[1];
 		// Replace text of each element with translated value
-		$('[data-translation]').each(function(index) {
+		$('[data-translation]').each(function() {
 			$(this).text(locales[selectedlang][$(this).data('translation')]);
 		});
 		// Enable/disable (toggle) anchors
 		$('span#user a.current').removeClass('current');
 		$(this).addClass('current');
-		
+
 		// Store current languagesetting in persistent localstorage
 		localStorage.setItem('language', selectedlang);
 	});
-	
+
 	if (localStorage.getItem('language') !== null) {
-		$('[data-translation]').each(function(index) {
+		$('[data-translation]').each(function() {
 			$(this).text(locales[localStorage.getItem('language')][$(this).data('translation')]);
 		});
 		$('span#user a.current').removeClass('current');

public/misc/style.css

@@ -96,64 +96,89 @@ body {
 .main {
 	clear: both;
 }
-	.main fieldset {
+    .main section {
-		border: 0;
+        clear: both;
-	}
+    }
-		.main fieldset legend {
+		.main section label.pre {
-			visibility: hidden;
-		}
-		.main fieldset label.pre {
 			display: inline-block;
 			width: 155px;
 			text-align: right;
 			vertical-align: top;
 			margin-top: 3px;
 		}
-		.main fieldset label#labelallaliases {
+		.main section input {
-			float: left;
-     	}
-     	.main fieldset output#aliasstats {
-			float: left;
-			clear: left;
-			width: 160px;
-			text-align: right;
-			font-size: 12px;
-    	}
-    	.main fieldset output#aliasstats:after {
-    		margin-left: 7px;
-    		content: ' ';
-    	}
-		.main fieldset input {
 			border: 1px solid #003399;
 			padding: 2px;
 			width: 100px;
 		}
-		.main fieldset input[type=radio] {
+		.main section input[type=radio] {
 			border: none;
 			margin-top: 7px;
 			width: 20px;
 		}
-		.main fieldset button {
+        .main header button,
+		.main section button {
 			margin-left: 160px;
 			text-transform: uppercase;
 		}
-		.main fieldset select {
+            .main header .buttons,
-			border: 1px solid #003399;
+            .main section .buttons {
-			padding: 2px;
+                text-align: center;
-			width: 375px;
+            }
-		}
+            .main header .buttons button,
-			.main fieldset select .new {
+            .main section .buttons button {
-				font-weight: bold;
+                margin-left: inherit;
-			}
+            }
-			.main fieldset select .deleted {
+        .main section #sessions {
-				text-decoration: line-through; 
+			display: none;
-			}
+			position: absolute;
-                .main fieldset#signup label.pre {
+			top: calc(50% - 160px);
-			width: 205px;
+			right: 20%;
-		}
+			height: 320px;
-		.main fieldset#signup span.indent, .main fieldset#signup input.button {
+			width: 60%;
-			margin-left: 210px;
+			border: 1px solid rgb(0, 51, 153);
-		}
+			box-shadow: black 0px 0px 20px;
+			box-sizing: border-box;
+	    	padding-top: 5px;
+			background: white;
+	    	font-size: inherit;
+            z-index: 99;
+            overflow-y: auto;
+        }
+            .main section #sessions .browsericon {
+                height: 30px;
+                float: left;
+                margin-right: 5px;
+                border: none;
+                filter: drop-shadow(0px 0px 1px #000);
+            }
+            .main section #sessions .sessiondeleteconfirm {
+                background: crimson linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.33) 51%) no-repeat center;
+            }
+            .main section #sessions .sessiondeletecancel {
+                background: green linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.25) 51%) no-repeat center;
+            }
+        .main section table {
+            width: 100%;
+        }
+        .main section table * {
+			font-size: 14px;
+            padding: 2px;
+            margin: 0;
+        }
+        .main section table .new {
+            font-weight: bold;
+        }
+        .main section table .removed td:nth-child(-n+2) {
+            text-decoration: line-through;
+            color: grey;
+        }
+        .main section table tbody tr:nth-child(odd) {
+            background-color: rgb(215, 215, 215);
+        }
+        .main section table .immutable {
+            cursor: default !important;
+        }
 	.main li {
 		list-style: none;
 		padding: 5px;
@@ -214,25 +239,3 @@ body {
 		.main span#user nav {
 			display: inline;
 		}
-		.main span#user #pluginlogos {
-			display: none;
-			position: absolute;
-			top: 72px;
-			right: 10px;
-			height: 112px;
-			width: 250px;
-			border: 1px solid rgb(0, 51, 153);
-			box-shadow: black 0px 0px 20px;
-			box-sizing: border-box;
-	    	padding-top: 5px;
-			background: white;
-	    	font-size: inherit;
-	    	font-weight: bold;
-		}
-			.main span#user #pluginlogos img {
-				width: 75px;
-				height: 75px;
-				filter: saturate(500%) contrast(200%) grayscale(100%) opacity(50%);
-				transition: all 375ms;
-				cursor: pointer;
-			}

public/misc/style.panes.css

@@ -0,0 +1,50 @@
+body{
+  margin: 0;
+}
+.wrapper{
+  min-height: 100vh;
+  background: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+}
+.header {
+  height: 100px;
+  background: #FFFFFF;
+  color: #000000;
+}
+.content {
+  display: flex;
+  flex: 1;
+  background: #333333;
+  color: #000;
+  min-height: 0px;
+  max-height: 100vh;
+}
+.columns{
+  display: flex;
+  flex:1;
+}
+.main{
+  flex: 1;
+  order: 2;
+  background: #fff;
+  border: 3px solid #CCCCCC;
+  border-radius: 5px;
+  height: 400px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.main section {
+	overflow-y: scroll;
+	height: calc(100% - 100px);
+}
+.sidebar-first{
+  width: 25%;
+  background: transparent;
+  order: 1;
+}
+.sidebar-second{
+  width: 25%;
+  order: 3;
+  background: transparent;
+}

public/misc/style.theme.css

@@ -1,39 +1,39 @@
-html.tablecloth {
+#theme.tablecloth {
-  height: 100%;
+  height: 100%;
-  background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em),
+  background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.6) 0, rgba(68, 68, 68, 0.2) 2em),
-  			  repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666;
+  			  repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(136, 136, 136, 0.4) 0, rgba(136, 136, 136, 0.1) 2em, transparent 0, transparent 1em, rgba(136, 136, 136, 0.3) 0, rgba(136, 136, 136, 0.2) 4em, transparent 0, transparent 1em, rgba(68, 68, 68, 0.4) 0, rgba(68, 68, 68, 0.1) 2em), #666;
-  background-blend-mode: multiply;
+  background-blend-mode: multiply;
-}
+}
-
+
-html.weave {
+#theme.weave {
-	background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0), 
+	background: linear-gradient(45deg, #666 12%, transparent 0, transparent 88%, #666 0),
-				linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0), 
+				linear-gradient(135deg, transparent 37%, #888 0, #888 63%, transparent 0),
-				linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0), 
+				linear-gradient(45deg, transparent 37%, #666 0, #666 63%, transparent 0),
-				#444;
+				#444;
-	background-size: 40px 40px;
+	background-size: 40px 40px;
-}
+}
-
+
-html.madras {
+#theme.madras {
-	height: 100%;
+	height: 100%;
-	background-color: #e9d4b9;
+	background-color: #e9d4b9;
-	background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px),
+	background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px),
-  					  repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px);
+  					  repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px);
-}
+}
-
+
-html.tartan {
+#theme.tartan {
-	height: 100%;
+	height: 100%;
-	background-color: #a0302c;
+	background-color: #a0302c;
-	background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px),
+	background-image: repeating-linear-gradient(20deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px),
-					  repeating-linear-gradient(290deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px),
+					  repeating-linear-gradient(290deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px),
-					  repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px);
+					  repeating-linear-gradient(145deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px);
-}
+}
-
+
-html.seigaiha {
+#theme.seigaiha {
-	background-color: grey;
+	background-color: grey;
-	background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),
+	background-image: radial-gradient(circle at 100% 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),
-  					  radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),
+  					  radial-gradient(circle at 0 150%, grey 24%, silver 25%, silver 28%, grey 29%, grey 36%, silver 36%, silver 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)),
-  					  radial-gradient(circle at 50% 100%, silver 10%, grey 11%, grey 23%, silver 24%, silver 30%, grey 31%, grey 43%, silver 44%, silver 50%, grey 51%, grey 63%, silver 64%, silver 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0)),
+  					  radial-gradient(circle at 50% 100%, silver 10%, grey 11%, grey 23%, silver 24%, silver 30%, grey 31%, grey 43%, silver 44%, silver 50%, grey 51%, grey 63%, silver 64%, silver 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0)),
-  					  radial-gradient(circle at 100% 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)),
+  					  radial-gradient(circle at 100% 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)),
-  					  radial-gradient(circle at 0 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
+  					  radial-gradient(circle at 0 50%, silver 5%, grey 6%, grey 15%, silver 16%, silver 20%, grey 21%, grey 30%, silver 31%, silver 35%, grey 36%, grey 45%, silver 46%, silver 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));
-	background-size: 100px 50px;
+	background-size: 100px 50px;
 }