html/css work

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
This commit is contained in:
2024-08-05 01:28:16 +02:00
parent d01289c068
commit 358fe1099b
18 changed files with 471 additions and 211 deletions

5
Readme.md Normal file
View File

@@ -0,0 +1,5 @@
# LightOIDC
This aims to be a [specification] compliant OpenID connect provider with minimal footprint.
[specification]: https://openid.net/specs/openid-connect-core-1_0.html

View File

@@ -9,27 +9,28 @@
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<div id="content">
<h1>Clients</h1> <h1>Clients</h1>
<fieldset> <fieldset>
<legend>bei LightOIDC registrierte Clients:</legend> <legend>bei LightOIDC registrierte Clients:</legend>
<table> <table>
<tr> <tr class="centered">
<th>Client</th> <th>Client</th>
<th>ID</th> <th>ID</th>
<th>Weiterleitungs-URLs</th> <th>Weiterleitungs-URLs</th>
<th>Aktionen</th> <th>Aktionen</th>
</tr> </tr>
<tr id="bottom"> <tr id="bottom">
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td> <td>
<button onclick="window.location.href='new_client.html';">Neuen Client hinzufügen…</button> <button onclick="window.location.href='new_client.html';">Neuen Client hinzufügen…</button>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
<span class="hidden" id="message">Client "{}" wirklich löschen?</span> <span class="hidden" id="message">Client "{}" wirklich löschen?</span>
</fieldset> </fieldset>
</div>
</body> </body>
</html> </html>

View File

@@ -0,0 +1,43 @@
<html>
<head>
<meta charset="utf-8">
<title>Light OIDC</title>
<script src="scripts/common.js"></script>
<script src="scripts/user.js"></script>
<script src="scripts/edit_client.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav></nav>
<div id="content">
<h1>Client bearbeiten</h1>
<fieldset class="wide">
<legend>Daten</legend>
<table>
<tr>
<th>ID</th>
<td><input type="text" disabled="true" id="client-id" /></td>
</tr>
<tr>
<th>Name</th>
<td><input type="text" id="client-name" /></td>
</tr>
<tr>
<th>Geheimnis</th>
<td><input type="text" id="client-secret" /></td>
</tr>
<tr>
<th>Weiterleitungs-URIs</th>
<td>
<textarea id="redirect-urls"></textarea>
</td>
</tr>
<tr>
<td></td>
<td><button type="button" id="button" onclick="updateClient();">Aktualisieren</button></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>

View File

@@ -0,0 +1,35 @@
<html>
<head>
<meta charset="utf-8">
<title>Light OIDC</title>
<script src="scripts/common.js"></script>
<script src="scripts/login.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">
<h1>Anmeldung</h1>
<fieldset id="login">
<legend>Zugangsdaten</legend>
<table>
<tr>
<th>Benutzername</th>
<td><input type="text" id="username" /></td>
</tr>
<tr>
<th>Passwort</th>
<td><input type="password" id="password" onkeydown="keyDown()"/></td>
</tr>
<tr id="error" style="display: none">
<th>Fehler</th>
<td class="warning">Anmeldung nicht erfolgreich!</td>
</tr>
<tr>
<td></td>
<td><button type="button" onClick="tryLogin()">Anmelden</button></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>

View File

@@ -0,0 +1,12 @@
<html>
<head>
<meta charset="utf-8">
<title>Light OIDC</title>
<script src="scripts/common.js"></script>
<script src="scripts/logout.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="content">Sie werden abgemeldet…</div>
</body>
</html>

View File

@@ -1,6 +1,5 @@
<a href="index.html">Übersicht</a> <a href="index.html">Übersicht</a>
<a href="clients.html" class="MANAGE_CLIENTS">Clients</a> <a href="clients.html" class="MANAGE_CLIENTS">Clients</a>
<a href="users.html" class="MANAGE_USERS">Benutzer</a> <a href="users.html" class="MANAGE_USERS">Benutzer</a>
<a href="https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth" target="_blank">Spec</a>
<a href="settings.html">Einstellungen</a> <a href="settings.html">Einstellungen</a>
<a href="logout.html">Ausloggen</a> <a href="logout.html">Abmelden</a>

View File

@@ -0,0 +1,42 @@
<html>
<head>
<meta charset="utf-8">
<title>Light OIDC</title>
<script src="scripts/common.js"></script>
<script src="scripts/user.js"></script>
<script src="scripts/new_client.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav></nav>
<div id="content">
<h1>neuen Client hinzufügen</h1>
<fieldset>
<legend>Einstellungen</legend>
<table>
<tr>
<th>Client-Id</th>
<td><input type="text" size="50" id="client-id"></td>
</tr>
<tr>
<th>Client-Name</th>
<td><input type="text" size="50" id="client-name"></td>
</tr>
<tr>
<th>Client-Geheimnus</th>
<td><input type="text" size="50" id="client-secret"></td>
</tr>
<tr>
<th>Weiterleitungs-URLs</th>
<td><textarea cols="50" rows="5" id="redirect-urls"></textarea></td>
</tr>
<tr>
<td></td>
<td><button id="button" type="button" onclick="addClient()">Client speichern</button></td>
</tr>
</table>
</fieldset>
</div>
</body>
</html>

View File

@@ -0,0 +1,76 @@
<html>
<head>
<meta charset="utf-8">
<title>Light OIDC</title>
<script src="scripts/common.js"></script>
<script src="scripts/user.js"></script>
<script src="scripts/settings.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav></nav>
<div id="content">
<h1>Einstellungen</h1>
<form>
<fieldset>
<legend>
Benutzer
</legend>
<table>
<tr>
<th>Benutzername</th>
<td><input id="username" type="text"></td>
</tr>
<tr>
<th>E-Mail</th>
<td><input id="email" type="email"></td>
</tr>
<tr>
<th>ID</th>
<td><input id="uuid" type="text" disabled="true"></td>
</tr>
<tr id="update_error" style="display: none">
<th>Fehler</th>
<td class="warning">Aktualisieren der Einstellungen fehlgeschlagen!</td>
</tr>
<tr>
<td></td>
<td><button id="updateBtn" type="button" onClick="update()">Aktualisieren</button></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>
Passwort
</legend>
<table>
<tr>
<th>altes Passwort</th>
<td><input id="oldpass" type="password"></td>
</tr>
<tr>
<th>Neues Passwort</th>
<td><input id="newpass1" type="password"></td>
</tr>
<tr>
<th>Passwort wiederholen</th>
<td><input id="newpass2" type="password" onkeydown="passKeyDown()"></td>
</tr>
<tr id="wrong_password" style="display: none">
<th>Error</th>
<td class="warning">Wrong password!</td>
</tr>
<tr id="password_mismatch" style="display: none">
<th>Fehler</th>
<td class="warning">Passwort und Wiederholung stimmen nicht überein!</td>
</tr>
<tr>
<td></td>
<td><button id="passBtn" type="button" onClick="updatePass()">Aktualisieren</button></td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>

View File

@@ -9,28 +9,29 @@
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<div id="content">
<h1>Clients</h1> <h1>Clients</h1>
<fieldset> <fieldset>
<legend>These are clients that are registered with LightOIDC:</legend> <legend>These are clients that are registered with LightOIDC:</legend>
<table> <table>
<tr> <tr class="centered">
<th>Client</th> <th>Client</th>
<th>ID</th> <th>ID</th>
<th>Redirect URLs</th> <th>Redirect URLs</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
<tr id="bottom"> <tr id="bottom">
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td> <td>
<button onclick="window.location.href='new_client.html';">Add new client…</button> <button onclick="window.location.href='new_client.html';">Add new client…</button>
</td> </td>
<td></td>
</tr> </tr>
</table> </table>
<span class="hidden" id="message">Really remove client "{}"?</span> <span class="hidden" id="message">Really remove client "{}"?</span>
</fieldset> </fieldset>
<a href="https://umbrella.srsoftware.de/user/login">Umbrella</a> </div>
</body> </body>
</html> </html>

View File

@@ -8,9 +8,10 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<h1>Edit client</h1> <div id="content">
<fieldset> <h1>Edit client</h1>
<fieldset class="wide">
<legend>Data</legend> <legend>Data</legend>
<table> <table>
<tr> <tr>
@@ -36,6 +37,7 @@
<td><button type="button" id="button" onclick="updateClient();">Update</button></td> <td><button type="button" id="button" onclick="updateClient();">Update</button></td>
</tr> </tr>
</table> </table>
</fieldset> </fieldset>
</div>
</body> </body>
</html> </html>

View File

@@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<div id="content">
<h1>Welcome!</h1> <h1>Welcome!</h1>
</div>
</body> </body>
</html> </html>

View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div id="content">
<h1>Login</h1> <h1>Login</h1>
<fieldset id="login"> <fieldset id="login">
<legend>User credentials</legend> <legend>User credentials</legend>
@@ -29,5 +30,6 @@
</tr> </tr>
</table> </table>
</fieldset> </fieldset>
</div>
</body> </body>
</html> </html>

View File

@@ -7,6 +7,6 @@
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
You are being logged out… <div id="content">You are being logged out…</div>
</body> </body>
</html> </html>

View File

@@ -1,6 +1,5 @@
<a href="index.html">Dashboard</a> <a href="index.html">Dashboard</a>
<a href="clients.html" class="MANAGE_CLIENTS">Clients</a> <a href="clients.html" class="MANAGE_CLIENTS">Clients</a>
<a href="users.html" class="MANAGE_USERS">Users</a> <a href="users.html" class="MANAGE_USERS">Users</a>
<a href="https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowAuth" target="_blank">Spec</a>
<a href="settings.html">Settings</a> <a href="settings.html">Settings</a>
<a href="logout.html">Logout</a> <a href="logout.html">Logout</a>

View File

@@ -7,10 +7,12 @@
<script src="scripts/new_client.js"></script> <script src="scripts/new_client.js"></script>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<h1>Add new client</h1> <div id="content">
<fieldset>
<h1>Add new client</h1>
<fieldset>
<legend>Settings</legend> <legend>Settings</legend>
<table> <table>
<tr> <tr>
@@ -34,6 +36,7 @@
<td><button id="button" type="button" onclick="addClient()">Add client</button></td> <td><button id="button" type="button" onclick="addClient()">Add client</button></td>
</tr> </tr>
</table> </table>
</fieldset> </fieldset>
</body> </div>
</body>
</html> </html>

View File

@@ -8,7 +8,7 @@ async function handleClients(response){
for (let id in clients){ for (let id in clients){
var row = document.createElement("tr"); var row = document.createElement("tr");
var client = clients[id]; var client = clients[id];
row.innerHTML = "<td>"+client.name+"</td>\n<td>"+id+"</td>\n<td>"+client.redirect_uris.join("<br/>")+'</td>\n<td><button onclick="remove(\''+id+'\')" type="button">remove '+client.name+'</button><button type="button" onclick="edit(\''+id+'\')">Edit</button></td>'; row.innerHTML = "<td>"+client.name+"</td>\n<td>"+id+"</td>\n<td>"+client.redirect_uris.join("<br/>")+'</td>\n<td><button class="danger" onclick="remove(\''+id+'\')" type="button">remove&nbsp;'+client.name+'</button><button type="button" onclick="edit(\''+id+'\')">Edit</button></td>';
bottom.parentNode.insertBefore(row,bottom); bottom.parentNode.insertBefore(row,bottom);
} }
} }

View File

@@ -1,19 +1,20 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Light OIDC</title> <title>Light OIDC</title>
<script src="scripts/common.js"></script> <script src="scripts/common.js"></script>
<script src="scripts/user.js"></script> <script src="scripts/user.js"></script>
<script src="scripts/settings.js"></script> <script src="scripts/settings.js"></script>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<nav></nav> <nav></nav>
<h1>Settings</h1> <div id="content">
<form> <h1>Settings</h1>
<form>
<fieldset> <fieldset>
<legend> <legend>
Basic settings User settings
</legend> </legend>
<table> <table>
<tr> <tr>
@@ -69,6 +70,7 @@
</tr> </tr>
</table> </table>
</fieldset> </fieldset>
</form> </form>
</body> </div>
</body>
</html> </html>

View File

@@ -1,24 +1,55 @@
body { body {
background: black; background: rgb(48,48,48);
color: white; color: white;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
text-align: center;
} }
a{
color: rgb(108, 182, 255);
text-decoration: none;
font-weight: bold;
}
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
button {
background: royalblue;
border: none;
border-radius: 7px;
padding: 10px;
color: white;
margin: 2px;
}
.danger{
background: crimson;
}
body fieldset { body fieldset {
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
} }
a { .wide input, textarea{
color: yellow;
}
input, textarea{
width: 600px; width: 600px;
} }
input:disabled{ input, textarea{
border: none;
border-radius: 3px;
background-color: rgb(38, 103, 152);
padding: 7px;
color: white; color: white;
background-color: gray; margin: 2px;
}
input:disabled{
color: indigo;
} }
fieldset th, fieldset th,
@@ -26,6 +57,11 @@ form th{
text-align: right; text-align: right;
} }
fieldset .centered th,
form .centered th{
text-align: center;
}
.hidden{ .hidden{
display: none; display: none;
} }