djpbessems/lucidAuth
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Compare commits

base: djpbessems:ac546633d17c265c7672f8d055820e357cf2a919
Branches Tags
djpbessems:master djpbessems:development
djpbessems:0.6 djpbessems:0.5
...
compare: djpbessems:0.5
Branches Tags
djpbessems:development djpbessems:master
djpbessems:0.6 djpbessems:0.5

19 Commits
ac546633d1 ... 0.5

Author SHA1 Message Date
Danny Bessems
75e8640439 Merge branch 'development' of djpbessems/lucidAuth into master 2019-06-19 10:57:55 +00:00
Danny Bessems
dca8f74f25 Minor edits (housekeeping) 2019-06-19 10:55:01 +00:00
Danny Bessems
21f272e9f0 Renamed file to reflect actual purpose 2019-06-19 10:37:20 +00:00
Danny Bessems
5a2d3313e7 Added missing CORS headers and xhrFields 2019-06-19 10:34:31 +00:00
Danny Bessems
6081e42d14 Resolved merge conflicts 2019-06-19 10:14:04 +00:00
Danny Bessems
0675ad8512 Controller for cross-domain iframes added 2019-06-19 10:09:46 +00:00
Danny Bessems
ee35696cd4 Controller for cross-domain iframes added 2019-06-18 13:21:44 +00:00
Danny Bessems
e3405369ca Delete 'public/misc/script.theme.js' 2019-03-13 10:53:22 +00:00
Danny Bessems
f9664eab18 Periodic merge upstream 
Resolved merge conflicts
 2019-03-13 10:44:00 +00:00
Danny Bessems
a20f13ab7c Babysteps towards cross-domain-cookies-in-iframes 2019-03-13 09:59:12 +00:00
Danny Bessems
0a5384f6a8 Authentication failed due to case sensitive SQL-queries 2019-03-07 19:50:04 +00:00
Danny Bessems
3dbb6b9932 Implemented GUI aspect of usermanagement page 
TODO: add ajax-call that will update database
 2019-03-06 14:21:47 +01:00
Danny Bessems
958897dc0a Implemented GUI aspect of usermanagement page 
TODO: add ajax-call that will update database
 2019-03-06 14:18:07 +01:00
Danny Bessems
a049bdbd24 Refactored template; make main content scrollable without overflow 
Switched to Flexbox CSS based layout
Retargeted HTML-elements for theming
 2019-03-05 11:14:17 +01:00
Danny Bessems
efc66fc3d8 Refactored template; make main content scrollable without overflow 
Switched to Flexbox CSS based layout
Removed theme-easteregg.
 2019-03-05 10:12:26 +01:00
Danny Bessems
1548cd4bb6 Managementinterface retrieves data from database; 
Table on interface is editable; replaced library.
 2019-03-04 10:43:08 +01:00
Danny Bessems
b5df954322 Managementinterface retrieves data from database; 
Table on interface is editable; replaced library.
 2019-03-03 17:06:41 +01:00
Danny Bessems
c8fe81d222 Migrated IDE platform; accepting nonexisting diffs to make IDE happy 2019-02-27 21:39:31 +01:00
djpbessems
1ffa164160 Added placeholder management page (usermanagement, dbmanagement) 2019-02-25 15:00:32 +01:00
15 changed files with 433 additions and 246 deletions
Expand all files Collapse all files

18
include/lucidAuth.functions.php
View File

@ -66,17 +66,17 @@ function storeToken (string $secureToken, string $qualifiedUsername, string $htt
INSERT INTO SecureToken (UserId, Value) INSERT INTO SecureToken (UserId, Value)
SELECT User.Id, :securetoken SELECT User.Id, :securetoken
FROM User FROM User
WHERE User.Username = :qualifiedusername WHERE LOWER(User.Username) = :qualifiedusername
'); ');
$pdoQuery->execute([ $pdoQuery->execute([
':securetoken' => $secureToken, ':securetoken' => $secureToken,
':qualifiedusername' => $qualifiedUsername ':qualifiedusername' => strtolower($qualifiedUsername)
]); ]);
} }
catch (Exception $e) { catch (Exception $e) {
return ['status' => 'Fail', 'reason' => $e]; return ['status' => 'Fail', 'reason' => $e];
} }
// Save authentication token in cookie clientside // Save authentication token in cookie clientside
$cookieDomain = array_values(array_filter($settings->Session['CookieDomains'], function ($value) use ($httpHost) { $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) // Check if $_SERVER['HTTP_HOST'] matches any of the configured domains (either explicitly or as a subdomain)
@ -114,18 +114,19 @@ function validateToken (string $secureToken) {
// Retrieve all authentication tokens from database matching username // Retrieve all authentication tokens from database matching username
$pdoQuery = $pdoDB->prepare(' $pdoQuery = $pdoDB->prepare('
SELECT SecureToken.Value SELECT User.Id, SecureToken.Value
FROM SecureToken FROM SecureToken
LEFT JOIN User LEFT JOIN User
ON (User.Id=SecureToken.UserId) ON (User.Id=SecureToken.UserId)
WHERE User.Username = :username WHERE LOWER(User.Username) = :username
'); ');
$pdoQuery->execute([ $pdoQuery->execute([
':username' => (string)$jwtPayload->sub ':username' => (string) strtolower($jwtPayload->sub)
]); ]);
foreach($pdoQuery->fetchAll(PDO::FETCH_ASSOC) as $row) { foreach($pdoQuery->fetchAll(PDO::FETCH_ASSOC) as $row) {
try { try {
$storedTokens[] = JWT::decode($row['Value'], base64_decode($settings->JWT['PrivateKey_base64']), $settings->JWT['Algorithm']); $storedTokens[] = JWT::decode($row['Value'], base64_decode($settings->JWT['PrivateKey_base64']), $settings->JWT['Algorithm']);
$currentUserId = $row['Id'];
} catch (Exception $e) { } catch (Exception $e) {
continue; continue;
} }
@ -137,7 +138,8 @@ function validateToken (string $secureToken) {
})) === 1) { })) === 1) {
return [ return [
'status' => 'Success', 'status' => 'Success',
'name' => $jwtPayload->name 'name' => $jwtPayload->name,
'uid' => $currentUserId
]; ];
} else { } else {
if ($settings->Debug['LogToFile']) { if ($settings->Debug['LogToFile']) {

91
include/lucidAuth.template.php
View File

@ -10,14 +10,10 @@ $pageLayout['full'] = <<<'FULL'
<title>lucidAuth</title> <title>lucidAuth</title>
<meta name="application-name" content="lucidAuth" /> <meta name="application-name" content="lucidAuth" />
<meta name="theme-color" content="#003399" /> <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.css" rel="stylesheet" />
<link href="misc/style.theme.css" rel="stylesheet" /> <link href="misc/style.theme.css" rel="stylesheet" />
<link href="misc/style.button.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="misc/script.translation.js"></script>
</head> </head>
<body> <body>
@ -36,34 +32,60 @@ $pageLayout['full'] = <<<'FULL'
</html> </html>
FULL; FULL;
$pageLayout['bare'] = <<<'BARE' $pageLayout['full_alt'] = <<<'FULL_ALT'
<!DOCTYPE html> <!DOCTYPE html>
<html lang="nl"> <html lang="nl">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>lucidAuth</title> <title>lucidAuth</title>
<meta name="application-name" content="lucidAuth" /> <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> </head>
<body> <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> </body>
</html> </html>
BARE; FULL_ALT;
$contentLayout['login'] = <<<'LOGIN' $contentLayout['login'] = <<<'LOGIN'
<script src="misc/script.index.js"></script> <script src="misc/script.index.js"></script>
<fieldset> <section>
<legend>Login Details</legend>
<ul> <ul>
<li class="misc">
<span class="indent">&nbsp;</span>
</li>
<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" /> <input type="text" id="username" name="username" tabindex="100" />
<label for="username">@lucidAuth</label> <label for="username">@lucidAuth</label>
</li> </li>
<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" /> <input type="password" id="password" name="password" tabindex="200" />
</li> </li>
<li> <li>
@ -71,44 +93,43 @@ $contentLayout['login'] = <<<'LOGIN'
<button id="btnlogin" class="bttn-simple bttn-xs bttn-primary" tabindex="300" data-translation="button_login">login</button> <button id="btnlogin" class="bttn-simple bttn-xs bttn-primary" tabindex="300" data-translation="button_login">login</button>
</li> </li>
<li class="misc"> <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> </li>
</ul> </ul>
</fieldset> </section>
<img src="/images/tag_lock.png" style="position: absolute; top: 175px; left: 20px;" alt="Secure!" /> <img src="/images/tag_lock.png" style="position: absolute; top: 175px; left: 20px;" alt="Secure!" />
LOGIN; LOGIN;
$contentLayout['manage'] = <<<'MANAGE' $contentLayout['manage']['header'] = <<<'MANAGE_HEADER'
<script src="misc/script.editable.table.js"></script> <script src="misc/script.editable.table.js"></script>
<script src="misc/script.manage.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> <ul>
<li> <li>
<table id="tabletest"> <table id="usertable">
<thead> <thead>
<tr> <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> </tr>
</thead> </thead>
<tbody> <tbody>
%2$s %1$s
</tbody> </tbody>
</table> </table>
</li> </li>
<li>
<button id="btnaliasadd" class="bttn-simple bttn-xs bttn-primary" tabindex="200" data-translation="button_add">voeg toe</button>
<button id="btnaliasdelete" class="bttn-simple bttn-xs bttn-primary" tabindex="400" data-translation="button_delete">verwijder</button>
<button id="btnsync" class="bttn-simple bttn-xs bttn-primary" tabindex="500" data-translation="button_sync">synchroniseer</button>
</li>
</ul> </ul>
</fieldset> MANAGE_SECTION;
MANAGE;
?> ?>

12
public/lucidAuth.login.php
View File

@ -14,10 +14,9 @@
"Result" => "Failure", "Result" => "Failure",
"Reason" => "Failed storing authentication token in database and/or cookie" "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; exit;
} }
// Convert base64 encoded string back from JSON; // Convert base64 encoded string back from JSON;
// forcing it into an associative array (instead of javascript's default StdClass object) // forcing it into an associative array (instead of javascript's default StdClass object)
try { try {
@ -30,7 +29,6 @@
"Result" => "Failure", "Result" => "Failure",
"Reason" => "Original request-URI lost in transition" "Reason" => "Original request-URI lost in transition"
]); ]);
# echo '{"Result":"Fail","Reason":"Original request URI lost in transition"}' . PHP_EOL;
exit; exit;
} }
$originalUri = !empty($proxyHeaders) ? $proxyHeaders['XForwardedProto'] . '://' . $proxyHeaders['XForwardedHost'] . $proxyHeaders['XForwardedUri'] : 'lucidAuth.manage.php'; $originalUri = !empty($proxyHeaders) ? $proxyHeaders['XForwardedProto'] . '://' . $proxyHeaders['XForwardedHost'] . $proxyHeaders['XForwardedUri'] : 'lucidAuth.manage.php';
@ -40,7 +38,9 @@
echo json_encode([ echo json_encode([
"Result" => "Success", "Result" => "Success",
"Location" => $originalUri, "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 { } else {
switch ($result['reason']) { switch ($result['reason']) {
@ -63,8 +63,8 @@
} else { } else {
include_once('../include/lucidAuth.template.php'); include_once('../include/lucidAuth.template.php');
echo sprintf($pageLayout['full'], echo sprintf($pageLayout['full'],
sprintf($contentLayout['login'], sprintf($contentLayout['login'],
$_GET['ref'] $_GET['ref']
) )
); );

27
public/lucidAuth.manage.php
View File

@ -12,32 +12,33 @@
try { try {
$allUsers = $pdoDB->query(' $allUsers = $pdoDB->query('
SELECT User.Username, Role.Rolename, COUNT(DISTINCT SecureToken.Value) AS Sessions SELECT User.Id, User.Username, Role.Rolename
FROM User FROM User
LEFT JOIN Role LEFT JOIN Role
ON (User.RoleId=Role.Id) ON (Role.Id = User.RoleId)
LEFT JOIN SecureToken
ON (User.Id=SecureToken.UserId)
')->fetchAll(PDO::FETCH_ASSOC); ')->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) { } catch (Exception $e) {
// Should really do some actual errorhandling here // Should really do some actual errorhandling here
throw new Exception($e); throw new Exception($e);
} }
foreach($allUsers as $row) { foreach($allUsers as $row) {
$tableRows[] = sprintf('<tr><td>%1$s</td><td>%2$s</td><td>%3$s</td></tr>', $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], explode('\\', $row['Username'])[1],
$row['Rolename'], $row['Rolename'],
$row['Sessions'] '<button class="bttn-simple bttn-xs bttn-primary" 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'], echo sprintf($pageLayout['full_alt'],
sprintf($contentLayout['manage'], sprintf($contentLayout['manage']['header'],
$validateTokenResult['name'], $validateTokenResult['name']
),
sprintf($contentLayout['manage']['section'],
implode($tableRows) implode($tableRows)
) )
); );
} else { } else {
// No cookie containing valid authentication token found; // No cookie containing valid authentication token found;
// explicitly deleting any remaining cookie, then redirecting to loginpage // explicitly deleting any remaining cookie, then redirecting to loginpage

59
public/lucidAuth.requestCookie.php Normal file
View File

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

24
public/lucidAuth.setXDomainCookie.php
View File

@ -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'
);
?>

4
public/lucidAuth.validateRequest.php
View File

@ -14,7 +14,7 @@
$proxyHeaders = array_filter($proxyHeaders, function ($key) { $proxyHeaders = array_filter($proxyHeaders, function ($key) {
return substr($key, 0, 10) === 'XForwarded'; return substr($key, 0, 10) === 'XForwarded';
}, ARRAY_FILTER_USE_KEY); }, ARRAY_FILTER_USE_KEY);
// For debugging purposes - enable it in ../lucidAuth.config.php // For debugging purposes - enable it in ../lucidAuth.config.php
if ($settings->Debug['LogToFile']) { 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); 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) { if (sizeof($proxyHeaders) === 0) {
// Non-proxied request; this is senseless, go fetch! // Non-proxied request; this is senseless, go fetch!
header("HTTP/1.1 403 Forbidden"); header("HTTP/1.1 400 Bad Request");
exit; exit;
} }

44
public/misc/script.editable.table.js
View File

@ -13,7 +13,7 @@ $.fn.editableTableWidget = function (options) {
editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()), editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
active, active,
showEditor = function (select) { showEditor = function (select) {
active = element.find('td:focus'); active = element.find('td:focus:not(".immutable")');
if (active.length) { if (active.length) {
editor.val(active.text()) editor.val(active.text())
.removeClass('error') .removeClass('error')
@ -89,26 +89,26 @@ $.fn.editableTableWidget = function (options) {
editor.removeClass('error'); 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); element.find('td').prop('tabindex', 1);
@ -126,6 +126,6 @@ $.fn.editableTableWidget.defaultOptions = {
cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
'text-align', 'font', 'font-size', 'font-family', 'font-weight', 'text-align', 'font', 'font-size', 'font-family', 'font-weight',
'border', 'border-top', 'border-bottom', 'border-left', 'border-right'], 'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
editor: $('<input>') editor: $('<input id="editor">')
}; };

31
public/misc/script.index.js
View File

@ -31,11 +31,34 @@ $(document).ready(function(){
'color': '#FFF' 'color': '#FFF'
}); });
if (data.CrossDomainLogin) { 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,
},
data: {
ref: btoa(JSON.stringify({
action: 'login',
token: data.SecureToken
}))
}
}));
});
$.when.apply($, XHR).then(function(){
$.each(arguments, function(_index, _arg) {
// Show progress somehow (maybe something like https://minicss.org/v2/progress)
});
});
} }
console.log("Navigating to :" + data.Location); // Finished (either succesfully or through timeout) cross-domain logins
window.location.replace(data.Location); // redirect once all finished loading or timeout after $X ms
// origin domain should be exempted from timeout
// (because origin domain can/will be different from current domain --due to traefik design).
//window.location.replace(data.Location);
}, 2250); }, 2250);
} else { } else {
$('#btnlogin').css({ $('#btnlogin').css({

94
public/misc/script.manage.js
View File

@ -1,3 +1,95 @@
$(document).ready(function(){ $(document).ready(function(){
$('#tabletest').editableTableWidget(); // Initialize the editable-table functionality
$('#usertable').editableTableWidget();
$('#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.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});
/* $.get("psworker.php", {
do: "mutate",
mutations: {
new: newEntries,
removed: removedEntries
}
})*/
});
$('#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');
}
});
}); });

19
public/misc/script.theme.js
View File

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

30
public/misc/script.translation.js
View File

@ -1,8 +1,9 @@
var locales = { var locales = {
en: { en: {
button_add: "add", button_new: "new",
button_save: "save",
button_cancel: "cancel", button_cancel: "cancel",
button_continue: "continue", button_sessions: "sessions",
button_delete: "delete", button_delete: "delete",
button_login: "login", button_login: "login",
heading_error: "ERROR!", heading_error: "ERROR!",
@ -10,12 +11,16 @@ var locales = {
label_username: "Username:", label_username: "Username:",
link_logout: "Logout", link_logout: "Logout",
span_credentialsavailable: "Login credentials available upon request!", 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: { 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_delete: "verwijder",
button_login: "log in", button_login: "log in",
heading_error: "FOUT!", heading_error: "FOUT!",
@ -23,7 +28,10 @@ var locales = {
label_username: "Gebruikersnaam:", label_username: "Gebruikersnaam:",
link_logout: "Log uit", link_logout: "Log uit",
span_credentialsavailable: "Inloggegevens verkrijgbaar op aanvraag!", span_credentialsavailable: "Inloggegevens verkrijgbaar op aanvraag!",
span_loggedinas: "Ingelogd als" span_loggedinas: "Ingelogd als",
th_username: "Gebruikersnaam",
th_role: "Rol",
th_manage: "Beheer"
} // ... etc. } // ... etc.
}; };
@ -31,19 +39,19 @@ $(document).ready(function(){
$('[id^=linklanguage-]').click(function() { $('[id^=linklanguage-]').click(function() {
var selectedlang = $(this).attr('id').split('-')[1]; var selectedlang = $(this).attr('id').split('-')[1];
// Replace text of each element with translated value // Replace text of each element with translated value
$('[data-translation]').each(function(index) { $('[data-translation]').each(function() {
$(this).text(locales[selectedlang][$(this).data('translation')]); $(this).text(locales[selectedlang][$(this).data('translation')]);
}); });
// Enable/disable (toggle) anchors // Enable/disable (toggle) anchors
$('span#user a.current').removeClass('current'); $('span#user a.current').removeClass('current');
$(this).addClass('current'); $(this).addClass('current');
// Store current languagesetting in persistent localstorage // Store current languagesetting in persistent localstorage
localStorage.setItem('language', selectedlang); localStorage.setItem('language', selectedlang);
}); });
if (localStorage.getItem('language') !== null) { if (localStorage.getItem('language') !== null) {
$('[data-translation]').each(function(index) { $('[data-translation]').each(function() {
$(this).text(locales[localStorage.getItem('language')][$(this).data('translation')]); $(this).text(locales[localStorage.getItem('language')][$(this).data('translation')]);
}); });
$('span#user a.current').removeClass('current'); $('span#user a.current').removeClass('current');

100
public/misc/style.css
View File

@ -96,64 +96,60 @@ body {
.main { .main {
clear: both; 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; display: inline-block;
width: 155px; width: 155px;
text-align: right; text-align: right;
vertical-align: top; vertical-align: top;
margin-top: 3px; 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; border: 1px solid #003399;
padding: 2px; padding: 2px;
width: 100px; width: 100px;
} }
.main fieldset input[type=radio] { .main section input[type=radio] {
border: none; border: none;
margin-top: 7px; margin-top: 7px;
width: 20px; width: 20px;
} }
.main fieldset button { .main header button,
.main section button {
margin-left: 160px; margin-left: 160px;
text-transform: uppercase; 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 table {
text-decoration: line-through; width: 100%;
} }
.main fieldset#signup label.pre { .main section table * {
width: 205px; font-size: 14px;
} padding: 2px;
.main fieldset#signup span.indent, .main fieldset#signup input.button { margin: 0;
margin-left: 210px; }
} .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 { .main li {
list-style: none; list-style: none;
padding: 5px; padding: 5px;
@ -214,25 +210,3 @@ body {
.main span#user nav { .main span#user nav {
display: inline; 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;
}

50
public/misc/style.panes.css Normal file
View File

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

76
public/misc/style.theme.css
View File

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