continua bottone creazione nuvo dominio

webapp/public/domains.html

@@ -87,65 +87,49 @@
             </tbody>
         </table>
 </div>
-<a href="http://localhost:8080/realms/test00/protocol/openid-connect/logout?id_token_hint=$ID_TOKEN" id="button-logout">
-    <button class="btn btn-primary position-absolute bottom-0 end-0">Logout</button>
-</a>
+<button class="btn btn-primary position-absolute bottom-0 end-0" id="button-logout">Logout</button>
 <!-- <a class="btn btn-primary position-absolute bottom-0 end-0" href="http://localhost:8080/realms/test00/protocol/openid-connect/logout?id_token_hint=$ID_TOKEN" role="button" id="id-logout">Link</a> -->
-        <div class="modal fade" id="domain-modal" tabindex="-1" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title">Nuova luce</h5>
-                        <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
-                    </div>
-                    <form method="POST" id="search-form">
-                        <div class="modal-body">
-                            <div>
-                                <label for="#luogoLuce" class="form-label">Luogo</label>
-                                <!-- <input type="text" class="form-control" id="luogoLuce" aria-describedby="luogoLuceHelp" required> -->
-                                <select class="form-select" id="luogoLuce" name="luogo">
-                                    <option value="unselected" selected>Scegli un luogo</option>
-                                    <option value="cucina">Cucina</option>
-                                    <option value="camera1">Camera 1</option>
-                                    <option value="camera2">Camera 2</option>
-                                    <option value="bagno">Bagno</option>
-                                    <option value="ingresso">Ingresso</option>
-                                    <option value="soggiorno">Soggiorno</option>
-                                    <option value="giardino">Giardino</option>
-                                    <option value="garage">Garage</option>
-                                    <option value="altro">Altro</option>
-                                </select>
-                                <div id="luogoLuceHelp" class="form-text">Scegli la stanza in cui si trova la tua
-                                    luce.</div>
-                                <label for="#scelta-porta-in" class="more-margin-top form-label">Porta di
-                                    attivazione</label>
-                                <select class="form-select scelta-porta-in" id="scelta-porta-in" name="porta-in">
-                                    <option value="unselected">Scegli una porta di attivazione</option>
-                                    <!-- <option value="in0">in0</option> -->
-                                    <!-- TODO js populate the options with the available sensors -->
-                                </select>
-                                <div class="form-text">Scegli una porta di attivazione della luce.</div>
-                                <label for="#scelta-porta-out" class="more-margin-top form-label">Porta della luce</label>
-                                <select class="form-select scelta-porta-out" id="scelta-porta-out" name="porta-out">
-                                    <option value="unselected">Scegli la porta della luce</option>
-                                    <!-- <option value="in0">in0</option> -->
-                                    <!-- TODO js populate the options with the available sensors -->
-                                </select>
-                                <div class="form-text">Scegli la porta in cui si trova la luce.</div>
-                            </div>
-                            <div class="invisible" id="nuovaStanzaDIV">
-                                <label for="nuovaStanza" class="form-label">Nuova stanza</label>
-                                <input type="text" class="form-control" id="nuovaStanza" aria-describedby="nuovaStanzaHelp">
-                                <div id="nuovaStanzaHelp" class="form-text">Inserisci il nome della nuova stanza.</div>
-                            </div>
-                        </div>
-                        <div class="modal-footer justify-content-around">
-                            <button type="button" class="btn btn-secondary w-25" data-bs-dismiss="modal">Cancel</button>
-                            <button type="submit" class="btn btn-primary w-25">Add</button>
-                        </div>
-                    </form>
+    <div class="modal fade" id="domain-modal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Creazione di un nuovo dominio</h5>
+                    <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
                 </div>
+                <form method="POST" id="new-domain-form">
+                    <div class="modal-body" id="modal-body-new-domain">
+                            
+                            <label for="#nuovoDominio" class="form-label">Nuovo dominio</label>
+                            <input type="text" class="form-control" id="nuovoDominio" aria-describedby="#nuovoDominioHelp">
+                            <div id="nuovoDominioHelp" class="form-text">Inserisci il nome del nuovo dominio.</div>
+
+
+                            <!--<div class="form-check">
+                                <input class="form-check-input" type="checkbox" value="" id="${nomeServizio}"/>
+                                <label class="form-check-label" for="#${nomeServizio}">
+                                    ${nomeServizio}
+                                </label>
+                            </div>-->
+
+                            <!--<div id="utente0">
+                                <label for="#nuovoUtente" class="form-label">Nuovo utente</label>
+                                <input type="text" class="form-control" id="nuovoUtente" aria-describedby="#nuovoUtenteHelp">
+                                <div id="nuovoUtenteHelp" class="form-text">Inserisci il nome del nuovo utente.</div>
+
+                                <label for="#passwordUtente" class="form-label">Password utente</label>
+                                <input type="text" class="form-control" id="passwordUtente" aria-describedby="#passwordUtenteHelp">
+                                <div id="passwordUtenteHelp" class="form-text">Inserisci la password del nuovo utente.</div>
+                            </div>-->
+                            
+                    </div>
+                    <div class="modal-footer justify-content-around">
+                        <button type="button" class="btn btn-dark" id="add-user-button">Aggiungi utente</button>
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancella</button>
+                        <button type="submit" class="btn btn-primary">Crea</button>
+                    </div>
+                </form>
             </div>
         </div>
+    </div>
 </body>
 </html>
\ No newline at end of file

webapp/public/index.html

@@ -28,6 +28,7 @@
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <link rel="stylesheet" href="css/buttons.css" type="text/css">
     <!-- link ts/stript.ts which calls other scripts -->
+    <script defer src="js/authentication/moment.min.js"></script>
     <script defer src="js/scriptIndex.js" type="module"></script>
 </head>
 
@@ -45,6 +46,7 @@
         <!-- alert-danger -->
         <!-- alert-success -->
     </div>
+    <button class="btn btn-primary position-absolute bottom-0 end-0" id="button-logout">Logout</button>
 
     <!-- container of the top buttons to change what is seen -->
     <div id="mainButtonContainer" class="d-flex flex-row justify-content-around">

webapp/public/js/authentication/app.js

 'use strict';
 import {createRowDomain} from '../templates/domains-template.js';
 import { getToken, logoutKeycloak } from './script.js';
+import {createNewUser, createNewService} from '../templates/create-new-domain-template.js';
 
 class App {
     constructor(myDomains, requestsToDomain) {
         // this.myDomains = myDomains;
         this.requestsToDomain = requestsToDomain;
         this.showAllDomains(myDomains);
+        this.fillModal();
         this.performLogout();
     }
 
     showAllDomains(domainsToShow) {
         const addHere = document.getElementById('table-row-domains');
-        console.log(addHere);
         for(const d of domainsToShow) {
             const tr = document.createElement('tr');
             tr.innerHTML = createRowDomain(d);
@@ -63,6 +64,83 @@ class App {
         });
     }
 
+
+    async fillModal() {
+        const allServices = ["luci","camera","azione"];//await this.requestsToDomain.getAllServices(); // DA FARE: scommenta (quindi usa la chiamata al domain)
+        const div = document.createElement('div');
+        div.id = "checkbox-div";
+        for(const s of allServices) {
+            div.innerHTML = div.innerHTML+createNewService(s); 
+        }
+        const modalBody = document.getElementById('modal-body-new-domain');
+        modalBody.appendChild(div);
+        modalBody.innerHTML = modalBody.innerHTML + createNewUser();
+
+        let userNum = 0;
+        const addUserButton = document.getElementById('add-user-button');
+        addUserButton.addEventListener('click', () => {
+            modalBody.innerHTML = modalBody.innerHTML + createNewUser();
+            userNum++;
+        });
+
+        const form = document.getElementById('new-domain-form');
+        form.addEventListener('submit', (event) => {
+            event.preventDefault();
+            
+            const domainName = form['nuovoDominio'].value;
+            if(domainName == null){
+                alert('Inserire un valore valido in ogni campo');
+                return;
+            }
+
+            const topicsArr = [ {role:"A", topic: `+/${domainName}/#`} ];
+            const checkboxarr = document.querySelectorAll("input.form-check-input");
+            const checks = [];  // array contentente i nomi dei servizi che l'utente vuole nel dominio che sta creando
+            for(const c of checkboxarr){
+                if(c.checked) {
+                    checks.push(c.value);
+                    topicsArr.push({role:"U", topic: `to/${domainName}/luci/${c.value}/#`});
+                    topicsArr.push({role:"U", topic: `from/${domainName}/luci/${c.value}/#`});
+                    topicsArr.push({role:"U", topic: `rpc/${domainName}/luci/${c.value}/#`});        
+                    
+                       
+                   }
+            }
+            if(checks.length === 0){
+                alert('Inserire un valore valido in ogni campo');
+                return;
+            }
+
+            let i=1;
+            const utenti = [];
+            while(i<=userNum){
+                const nome = document.getElementById(`nuovoUtente${i}`).value;
+                const password = document.getElementById(`passwordUtente${i}`).value;
+                const ruolo = document.getElementById(`ruoloUtente${i}`).value;
+                console.log(ruolo);//FIXME aaaaaaaaa
+                if(nome == null || password == null || ruolo == null || ruolo == "unselected"){
+                    alert('Inserire un valore valido in ogni campo');
+                    return;
+                }
+
+                utenti.push({nome,password,ruolo});
+                i++;
+            }
+            
+            const json = {
+                domain: domainName,
+                services: checks,
+                users: utenti,
+                topics: topicsArr
+            };
+            console.log(json);
+
+            this.requestsToDomain.createNewDomain(json);
+        });
+    }
+
+
+
     performLogout() {
         const buttonLogout = document.getElementById('button-logout');
         buttonLogout.addEventListener('click', async (event) => {

webapp/public/js/authentication/requests-to-domain.js

@@ -35,11 +35,32 @@ class RequestToDomain {
     /**
      * Effettua la richiesta per creare un nuovo dominio.
      */
-    async createNewDomain() {
+    async createNewDomain(json) {
 
     }
 
 
+    /**
+     * Effettua la richiesta al domain manager per ottenere tutti i sevizi 
+     * disponibili.
+     */
+    async getAllServices() {
+        const responseDomain = await fetch('http://localhost:3001/secured/services', {  // DA FARE: controllare che l'uri che ho specificato qui coincida con quello specificato dal domain manager
+            method: 'GET', 
+            headers: {
+                'Authorization': `Bearer ${await getToken()}`
+            }
+        }) ;
+        const servicesJson = await response.json();
+        if(response.ok) {
+            const servicesArray = servicesJson.response;
+            return servicesArray;
+        } 
+        else
+            throw servicesJson; 
+    }
+
+
     /**
      * Effettua la richiesta al domain manager per far partire un dominio.
      * @param {*} d dominio che si vuole far partire.

webapp/public/js/authentication/script.js

@@ -8,7 +8,6 @@ import RequestToDomain from './requests-to-domain.js';
 const mySecure = new Secure();
 
 let token = null;
-let tokenTime = null; // momento in cui ottengo il token
 let expirationTime = null; // momento a partire dal quale il token non sarà più valido
 let alreadyRefreshed = false; // true se ho appena fatto la richiesta del token usando il refresh token
 let oldTimeout = null;
@@ -36,11 +35,8 @@ else if(uri.includes("#")){
     else {
         await requestFirstToken(uriAuthCode);  // post per la richiesta del token
         if(token !== null) {
-            // console.log(token);
-
-            tokenTime = moment();
-            expirationTime = tokenTime.add(token.expires_in,'s');
-
+            expirationTime = moment().add(token.expires_in,'s');
+            sessionStorage.setItem("expirationTime", expirationTime.toJSON());
             const requestsToDomain = new RequestToDomain();
             // const myDomains = await requestsToDomain.getMyDomains();
 const myDomains = [{nome: "casa1", stato:"on", admin: true},
@@ -58,6 +54,10 @@ const myDomains = [{nome: "casa1", stato:"on", admin: true},
 
         // DA FARE: capire come richiedere il refresh token
     }
+} else if(uri.includes('/secured/home/')) {
+    token = JSON.parse(sessionStorage.getItem('token'));
+    expirationTime = moment(sessionStorage.getItem('expirationTime'));
+    oldTimeout = timeoutRefresh();
 }
 
 /**
@@ -93,6 +93,7 @@ async function requestFirstToken(uriAuthCode) {
     });
     token = await response.json();
     if(response.ok) {
+        sessionStorage.setItem("token", JSON.stringify(token));
         oldTimeout = timeoutRefresh();
     }
     else
@@ -129,6 +130,9 @@ async function getToken() {
     token = await response.json();
     if(response.ok) {
         alreadyRefreshed = true;
+        sessionStorage.setItem("token", JSON.stringify(token));
+        expirationTime = moment().add(token.expires_in,'s');
+        sessionStorage.setItem("expirationTime", expirationTime.toJSON());
         oldTimeout = timeoutRefresh();
     }
     else
@@ -150,7 +154,7 @@ function timeoutRefresh() {
             await requestUsingRefreshToken();
             alreadyRefreshed = false;
         }
-    }, (token.refresh_expires_in*1000)-5000);
+    }, 10000);//(token.refresh_expires_in*1000)-5000);
 }
 
 
@@ -158,6 +162,8 @@ function timeoutRefresh() {
  * Effettua il logout.
  */
 async function logoutKeycloak() {
+    if(token == null)
+        return;
     clearTimeout(oldTimeout); // DA FARE: funziona, ma vedere se fare il redirect alla pagina iniziale. 
     window.location.href = `http://localhost:8080/realms/test00/protocol/openid-connect/logout?id_token_hint=${await getIdToken()}`;
 }

webapp/public/js/scriptIndex.js

@@ -3,6 +3,7 @@ import Luci from './luci.js';
 import Scenari from "./scenari.js";
 import Antifurto from "./antifurto.js";
 import Sensori from './sensori.js';
+import { logoutKeycloak } from './authentication/script.js';
 
 // launch each class
 new Sensori();
@@ -11,4 +12,9 @@ new Scenari();
 
 setTimeout(() => {
     new Luci();
-}, 1000);
+}, 1000);
\ No newline at end of file
+
+const logout = document.getElementById("button-logout");
+logout.addEventListener('click', () => {
+    logoutKeycloak();
+});
\ No newline at end of file

webapp/public/js/templates/create-new-domain-template.js

+'use strict';
+
+let count = 0;
+/*
+<!--<div class="form-check">
+    <input class="form-check-input" type="checkbox" value="" id="${nomeServizio}"/>
+    <label class="form-check-label" for="#${nomeServizio}">
+        ${nomeServizio}
+    </label>
+</div>-->
+
+<!--<div id="utente0">
+    <label for="#nuovoUtente" class="form-label">Nuovo utente</label>
+    <input type="text" class="form-control" id="nuovoUtente" aria-describedby="#nuovoUtenteHelp">
+    <div id="nuovoUtenteHelp" class="form-text">Inserisci il nome del nuovo utente.</div>
+
+    <label for="#passwordUtente" class="form-label">Password utente</label>
+    <input type="text" class="form-control" id="passwordUtente" aria-describedby="#passwordUtenteHelp">
+    <div id="passwordUtenteHelp" class="form-text">Inserisci la password del nuovo utente.</div>
+</div>-->
+*/
+
+function createNewUser() {
+    count++;
+    return `<div id="utente${count}">
+                <label for="#nuovoUtente${count}" class="form-label">Nuovo utente</label>
+                <input type="text" class="form-control" id="nuovoUtente${count}" aria-describedby="#nuovoUtente${count}Help">
+                <div id="nuovoUtente${count}Help" class="form-text">Inserisci il nome del nuovo utente.</div>
+
+                <label for="#passwordUtente${count}" class="form-label">Password utente</label>
+                <input type="text" class="form-control" id="passwordUtente${count}" aria-describedby="#passwordUtente${count}Help">
+                <div id="passwordUtente${count}Help" class="form-text">Inserisci la password del nuovo utente.</div>
+
+                
+                <select class="form-select" id="ruoloUtente${count}" name="ruolo">
+                    <option value="unselected" selected>Scegli un ruolo</option>
+                    <option value="U">Utente</option>
+                    <option value="A">Amministratore</option>
+                </select>
+            </div>`;
+}
+
+function createNewService(nomeServizio) {
+    return `<div class="form-check">
+                <input class="form-check-input" type="checkbox" value="${nomeServizio}" id="${nomeServizio}"/>
+                <label class="form-check-label" for="#${nomeServizio}">
+                    ${nomeServizio}
+                </label>
+            </div>`;
+}
+
+export {createNewUser, createNewService};
\ No newline at end of file