implemented adding users, prepared sending reset links

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

de.srsoftware.oidc.web/src/main/resources/DE/navigation.html

@@ -2,4 +2,5 @@
 <a href="clients.html" class="MANAGE_CLIENTS">Clients</a>
 <a href="users.html" class="MANAGE_USERS">Benutzer</a>
 <a href="settings.html">Einstellungen</a>
+<a href="todo.html">TODO</a>
 <a href="logout.html">Abmelden</a>

de.srsoftware.oidc.web/src/main/resources/DE/settings.html

@@ -21,6 +21,10 @@
                             <th>Benutzername</th>
                             <td><input id="username" type="text"></td>
                         </tr>
+                        <tr>
+                            <th>Anzeigename</th>
+                            <td><input id="realname" type="text"></td>
+                        </tr>
                         <tr>
                             <th>E-Mail</th>
                             <td><input id="email" type="email"></td>
@@ -48,6 +52,10 @@
                             <th>altes Passwort</th>
                             <td><input id="oldpass" type="password"></td>
                         </tr>
+                        <tr>
+                            <th></th>
+                            <td><input type="text" style="visibility: hidden"></td>
+                        </tr>
                         <tr>
                             <th>Neues Passwort</th>
                             <td><input id="newpass1" type="password"></td>

de.srsoftware.oidc.web/src/main/resources/en/login.html

@@ -14,7 +14,10 @@
                 <table>
                     <tr>
                         <th>User name</th>
-                        <td><input type="text" id="username" placeholder="User name *"/></td>
+                        <td style="position: relative">
+                            <input type="text" id="username" placeholder="User name *"/>
+                            <span id="bubble" style="display: none">Please enter a username or email to reset your password!</span>
+                        </td>
                     </tr>
                     <tr>
                         <th>Password</th>
@@ -28,8 +31,15 @@
                         <td></td>
                         <td><button type="button" onClick="tryLogin()">Login</button></td>
                     </tr>
+                    <tr>
+                        <td></td>
+                        <td><button type="button" class="light" onClick="resetPw()">reset password?</button></td>
+                    </tr>
                 </table>
             </fieldset>
+            <div id="sent" class="warning" style="display: none">
+                A link to reset your password has been sent.
+            </div>
         </div>
         <div id="ad">
             This tiny login provider is brought to you by <b>SRSoftware</b>. <a href="https://git.srsoftware.de/StephanRichter/LightOidc">Find out more…</a>

de.srsoftware.oidc.web/src/main/resources/en/navigation.html

@@ -2,4 +2,5 @@
 <a href="clients.html" class="MANAGE_CLIENTS">Clients</a>
 <a href="users.html" class="MANAGE_USERS">Users</a>
 <a href="settings.html">Settings</a>
+<a href="todo.html">TODO</a>
 <a href="logout.html">Logout</a>

de.srsoftware.oidc.web/src/main/resources/en/scripts/clients.js

@@ -1,3 +1,7 @@
+function edit(clientId){
+    redirect("edit_client.html?id="+clientId);
+}
+
 async function handleClients(response){
     if (response.status == UNAUTHORIZED) {
         redirect('login.html?return_to='+encodeURI(window.location.href))
@@ -8,7 +12,13 @@ async function handleClients(response){
     for (let id in clients){
         var row = document.createElement("tr");
         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 type="button" onclick="edit(\''+id+'\')">Edit</button><button class="danger" onclick="remove(\''+id+'\')" type="button">Remove</button></td>';
+        row.innerHTML = `<td>${client.name}</td>
+        <td>${id}</td>
+        <td>${client.redirect_uris.join("<br/>")}</td>
+        <td>
+            <button type="button" onclick="edit('${id}')">Edit</button>
+            <button class="danger" onclick="remove('${id}')" type="button">Remove</button>
+        </td>`;
         bottom.parentNode.insertBefore(row,bottom);
     }
 }
@@ -27,8 +37,6 @@ function remove(clientId){
     }
 }
 
-function edit(clientId){
-    redirect("edit_client.html?id="+clientId);
-}
+
 
 fetch(client_controller+"/list",{method:'POST'}).then(handleClients);

de.srsoftware.oidc.web/src/main/resources/en/scripts/common.js

@@ -10,7 +10,7 @@ function get(id){
 }
 
 function disable(id){
-    get(id).setAttribute('disabled',true);
+    get(id).setAttribute('disabled','disabled');
 }
 
 function enable(id){

de.srsoftware.oidc.web/src/main/resources/en/scripts/login.js

@@ -1,3 +1,9 @@
+function doRedirect(){
+        let params = new URL(document.location.toString()).searchParams;
+        redirect( params.get("return_to") || 'index.html');
+        return false;
+}
+
 async function handleLogin(response){
     if (response.ok){
         var body = await response.json();
@@ -8,10 +14,24 @@ async function handleLogin(response){
     }
 }
 
-function doRedirect(){
-        let params = new URL(document.location.toString()).searchParams;
-        redirect( params.get("return_to") || 'index.html');
-        return false;
+function keyDown(ev){
+   if (event.keyCode == 13) tryLogin();
+}
+
+function resetPw(){
+    var user = getValue('username');
+    if (!user) {
+        show('bubble');
+        return;
+    }
+    hide('bubble');
+    fetch(user_controller+"/reset",{
+        method: 'POST',
+        body:user
+    }).then(() => {
+        hide('login');
+        show('sent');
+    });
 }
 
 function tryLogin(){
@@ -29,8 +49,4 @@ function tryLogin(){
         })
     }).then(handleLogin);
     return false;
-}
-
-function keyDown(ev){
-   if (event.keyCode == 13) tryLogin();
 }

de.srsoftware.oidc.web/src/main/resources/en/scripts/settings.js

@@ -6,6 +6,7 @@ function fillForm(){
         setValue('username',user.username);
         setValue('email',user.email);
         setValue('uuid', user.uuid);
+        setValue('realname', user.realname);
     }
 }
 
@@ -29,6 +30,7 @@ function update(){
     var newData = {
         username : getValue('username'),
         email : getValue('email'),
+        realname : getValue('realname'),
         uuid : getValue('uuid')
     }
     fetch(user_controller+'/update',{

de.srsoftware.oidc.web/src/main/resources/en/scripts/user.js

@@ -16,8 +16,8 @@ async function handleNavigation(response){
         var nav = document.getElementsByTagName('nav')[0];
         nav.innerHTML = content;
         var links = nav.getElementsByTagName('a');
-        for (var index = 0; index < links.length; index++){
-            var link = links[index];
+        for (var index = links.length; index > 0; index--){
+            var link = links[index-1];
             var clazz = link.hasAttribute('class') ? link.getAttribute("class") : null;
             if (clazz != null && !user.permissions.includes(clazz)) nav.removeChild(link);
         }

de.srsoftware.oidc.web/src/main/resources/en/scripts/users.js

@@ -0,0 +1,68 @@
+function addUser(){
+    var pw = getValue('pw');
+    var pw2 = getValue('pw2');
+    if (pw != pw2) {
+        show('pw-mismatch');
+        return;
+    }
+    var msg = {
+        username : getValue('username'),
+        realname : getValue('realname'),
+        email : getValue('email'),
+        password : pw
+    };
+    fetch(user_controller+"/add",{
+        method:'POST',
+        header: {
+            'Content-Type':'application/json'
+        },
+        body: JSON.stringify(msg)
+    }).then(() => location.reload())
+}
+
+async function handleUsers(response){
+    if (response.status == UNAUTHORIZED) {
+        redirect('login.html?return_to='+encodeURI(window.location.href))
+        return;
+    }
+    var users = await response.json();
+    var bottom = document.getElementById('bottom');
+    for (let id in users){
+        var row = document.createElement("tr");
+        var user = users[id];
+        row.innerHTML = `<td>${user.username}</td>
+        <td>${user.realname}</td>
+        <td>${user.email}</td>
+        <td>${id}</td>
+        <td>
+            <button type="button" onclick="reset_password('${id}')" id="reset-${id}">Reset password</button>
+            <button class="danger" onclick="remove('${id}')" type="button">Remove</button>
+        </td>`;
+        bottom.parentNode.insertBefore(row,bottom);
+    }
+}
+
+function handleRemove(response){
+    redirect("users.html");
+}
+
+function remove(userId){
+    var message = document.getElementById('message').innerHTML;
+    if (confirm(message.replace("{}",userId))) {
+        fetch(user_controller+"/delete",{
+            method: 'DELETE',
+            body : JSON.stringify({ userId : userId })
+        }).then(handleRemove);
+    }
+}
+
+function reset_password(userid){
+    fetch(user_controller+"/reset",{
+        method: 'POST',
+        body:userid
+    }).then(() => {
+        disable('reset-'+userid);
+    });
+}
+
+fetch(user_controller+"/list",{method:'POST'}).then(handleUsers);

de.srsoftware.oidc.web/src/main/resources/en/settings.html

@@ -21,6 +21,10 @@
                             <th>User name</th>
                             <td><input id="username" type="text"></td>
                         </tr>
+                        <tr>
+                            <th>Display name</th>
+                            <td><input id="realname" type="text"></td>
+                        </tr>
                         <tr>
                             <th>Email</th>
                             <td><input id="email" type="email"></td>
@@ -48,6 +52,10 @@
                             <th>Old password</th>
                             <td><input id="oldpass" type="password"></td>
                         </tr>
+                        <tr>
+                            <th></th>
+                            <td><input type="text" style="visibility: hidden"></td>
+                        </tr>
                         <tr>
                             <th>New Password</th>
                             <td><input id="newpass1" type="password"></td>

de.srsoftware.oidc.web/src/main/resources/en/style.css

@@ -29,6 +29,30 @@ button {
     margin: 2px;
 }
 
+button:hover{
+    padding: 9px;
+    border: 1px solid orange;
+}
+
+button[disabled]{
+    background: rgb(48,48,48);
+    border: 1px solid gray;
+    color: gray;
+    padding: 9px;
+}
+
+button.light{
+    background: rgb(48,48,48);
+    color: #444;
+    border: 1px solid #444;
+    padding: 9px;
+}
+
+button.light:hover{
+    background: indigo;
+    color: orange;
+}
+
 #login button{
     width: 100%;
     margin: 0;
@@ -72,8 +96,10 @@ form th{
     text-align: right;
 }
 
-fieldset .centered th,
-form .centered th{
+.centered,
+.centered input,
+.centered th,
+.centered th{
     text-align: center;
 }
 
@@ -101,4 +127,34 @@ legend {
   position: fixed;
   bottom: 0;
   width: 100%;
+}
+ul{
+    display: inline-block;
+    text-align: left;
+}
+
+#bubble {
+  --c: indigo;
+  background: var(--c);
+  color: orange;
+  padding: .5em 1em;
+    position: absolute;
+    top: 16px;
+    left: 100%;
+    width: 220px;
+
+  border-radius: 0 .25em .25em .25em;
+  &::after {
+    content: '';
+    position: absolute;
+    border: .5em solid transparent;
+    border-top-color: var(--c);
+    border-right-color: var(--c);
+    right: 100%;
+    top: 0%;
+
+    // magic
+    transform: skewY(20deg);
+    transform-origin: 100% 100%;
+  }
 }

de.srsoftware.oidc.web/src/main/resources/en/todo.html

@@ -0,0 +1,22 @@
+<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/users.js"></script>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <nav></nav>
+        <div id="content">
+            <h1>to do…</h1>
+            <ul>
+                <li><a href="users.html">Users: remove</a></li>
+                <li><a href="users.html">Users: send password reset link</a></li>
+                <li><a href="login.html">Login: send password reset link</a></li>
+                <li><a href="login.html">Login: "remember me" option</a></li>
+            </ul>
+        </div>
+    </body>
+</html>

de.srsoftware.oidc.web/src/main/resources/en/users.html

@@ -0,0 +1,48 @@
+<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/users.js"></script>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+<nav></nav>
+<div id="content">
+    <h1>Users</h1>
+    <fieldset>
+        <legend>These are users that are registered with LightOIDC:</legend>
+        <table class="centered">
+            <tr>
+                <th>Username</th>
+                <th>Display name</th>
+                <th>Email</th>
+                <th>ID</th>
+                <th>Actions</th>
+            </tr>
+            <tr id="bottom">
+                <td>
+                    <input value="" type="text" id="username" placeholder="user name" />
+                </td>
+                <td>
+                    <input value="" type="text" id="realname" placeholder="display name" />
+                </td>
+                <td>
+                    <input value="" type="text" id="email" placeholder="email address" autocomplete="off" />
+                </td>
+                <td>
+                    <input value="" type="password" id="pw" placeholder="password" autocomplete="new-password" />
+                    <input value="" type="password" id="pw2" placeholder="repeat password" autocomplete="repeat-password" />
+                </td>
+                <td>
+                    <button onclick="addUser()">Add new user…</button>
+                </td>
+            </tr>
+
+        </table>
+        <span class="error" style="display: none" id="pw-mismatch">Passwords do not match!</span>
+    </fieldset>
+</div>
+</body>
+</html>