Skip to content
Snippets Groups Projects
Commit 6dae2028 authored by Elisa Giglio's avatar Elisa Giglio
Browse files

continuazione

parent bdd0924e
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 391 additions and 2489 deletions
webapp/public/PROVA.html 0 → 100644
+ 147
− 0
View file @ 6dae2028
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title id="title">SmartHome</title>
<link rel="icon" href="res/favicon.png">
<!-- link all other useful scripts -->
<!-- link bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- link fontawesome (for icons)-->
<script defer src="https://kit.fontawesome.com/a1635545b7.js" crossorigin="anonymous"></script>
<!-- link my scripts and styles -->
<link rel="stylesheet" href="css/domains.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script defer src="js/authentication/script.js" type="module"></script>
</head>
<body id="body-id">
<h1>Pissir SmartHome</h1>
<!-- <a href="http://$DOMAIN/realms/$REALM/protocol/openid-connect/auth?
response_type=code&
code_challenge=$MY_CODE_CHALLENGE&
code_challenge_method=S256&
client_id=myclient&
redirect_uri=$MY_REDIRECT_URI&
scope=openid&
nonce=a81e1a84-8885-4702-b8d1-f6c5a0d1fc4d&
response_mode=fragment&
state=$MY_STATE" id="my-link">I'm the best at logging in :p</a> -->
<div class="container-fluid table-responsive">
<table class="table table-striped">
<thead>
<tr class="more-margin-top">
<th scope="col">
<h2 class="d-flex justify-content-center">Dominio</h2>
</th>
<th scope="col">
<h2 class="d-flex justify-content-center">Stato</h2>
</th>
<th scope="col">
<h2 class="d-flex justify-content-center">Elimina</h2>
</th>
</tr>
</thead>
<tbody id="table-row-domains">
<!-- row to add a new element -->
<!--<tr>
<th scope="row">
<h4 class="d-flex justify-content-center mt-2">Casa</h4>
</th>
<td class="align-middle">
<div class="switch-container no-box-sizing d-flex justify-content-center">
<div class="toggle-button no-box-sizing">
<div class="inner-circle no-box-sizing"></div>
</div>
</div>
</td>
<td class="d-flex justify-content-center">
<i class="fa-solid fa-trash fa-2x py-2">
</td>
</tr>-->
<tr>
<th scope="row" class="d-flex justify-content-center">
<!-- FIXME show fa-bounce if there's at no light [it moves the button :/] -->
<i class="fa-solid fa-circle-plus fa-2x" data-bs-toggle="modal"
data-bs-target="#domain-modal"></i>
</th>
<td>
<span class="d-flex justify-content-center">Crea un nuovo dominio</span>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<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>
</div>
</div>
</body>
</html>
\ No newline at end of file
webapp/public/css/domains.css 0 → 100644
+ 36
− 0
View file @ 6dae2028
/* switch toggle */
/* .switch-container {
position: relative;
left: 50%;
top: 50%;
} */
.toggle-button {
background: gray;
width: 50px;
height: 20px;
border-radius: 30px;
padding: 5px;
cursor: pointer;
transition: all 300ms ease-in-out;
}
.toggle-button>.inner-circle {
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
transition: all 300ms ease-in-out;
}
.toggle-button.active {
background: #00ff22;
}
.toggle-button.active>.inner-circle {
margin-left: 40px;
}
.no-box-sizing {
box-sizing: content-box !important;
}
\ No newline at end of file
webapp/public/js/authentication/app.js 0 → 100644
+ 44
− 0
View file @ 6dae2028
'use strict';
import {createRowDomain} from '../templates/domains-template.js';
import {statoDomainToggle} from '../toggles.js';
import { getToken } from './script.js';
class App {
constructor(myDomains) {
this.myDomains = myDomains;
this.showAllDomains(myDomains);
}
showAllDomains(myDomains) {
const addHere = document.getElementById('table-row-domains');
for(const d of myDomains) {
const row = createRowDomain(d);
const tr = document.createElement('tr');
tr.innerHTML = row;
const plusRow = addHere.lastElementChild;
addHere.insertBefore(row, plusRow);
if(d.admin) {
const toggle = row.querySelector('.toggle-button');
statoDomainToggle(d, toggle);
const deleteDomain = row.querySelector('.fa-trash');
deleteDomain.addEventListener('click', () => {
const token = getToken();
const response = await fetch('http://localhost:3001/delete', {
method: 'POST',
headers: , // DA FARE: inserire il token
body: JSON.stringify({domain: domain.nome})
});
if(response.ok) {
addHere.removeChild(row);
}
else {
throw new Error('Impossibile eliminare il dominio, provare piu\' tardi');
}
});
}
}
}
}
export default App;
\ No newline at end of file
webapp/public/js/authentication/domain.js 0 → 100644
+ 22
− 0
View file @ 6dae2028
'use strict';
class Domain {
constructor(nome, stato, admin) {
this.nome = nome; // nome del dominio
this.stato = stato; // on/off
this.admin = admin; // true se l'utente attualmente loggato e' amministratore di questo dominio, false altrimenti
}
/**
* Costruisce un oggetto Domain partendo dall'oggetto passato in input.
* @param {*} json oggetto dal quale si vuole creare un oggetto Domain.
* @returns l'oggetto Domain creato.
*/
static from(json) {
const p = Object.assign(new Domain(), json);
return p;
}
}
export default Domain;
\ No newline at end of file
webapp/public/js/authentication/domains.js deleted 100644 → 0
+ 0
− 2
View file @ bdd0924e
'use strict';
webapp/public/js/authentication/keycloak.js deleted 100644 → 0
+ 0
− 2408
View file @ bdd0924e
This diff is collapsed.
webapp/public/js/authentication/script.js
+ 65
− 78
View file @ 6dae2028
'use strict';
import Secure from './secured.js';
import Secure from './secure.js';
import Domain from './domain.js';
import App from './app';
// import * as jose from 'jose'; // per la gestione del token
// const axios = require("axios").default;
const mySecure = new Secure();
let token = null;
const uri = window.location.toString();
if(!uri.includes('#')) {
......@@ -27,82 +28,14 @@ else {
body.innerHTML = `Errors in the request!`;
}
else {
// post per la richiesta del token
// const options = {
// method: 'POST',
// url: 'http://localhost:8080/realms/$REALM/protocol/openid-connect/token',
// headers: {'content-type': 'application/x-www-form-urlencoded'},
// data: new URLSearchParams({
// grant_type: 'authorization_code',
// client_id: 'myclient',
// code_verifier: sessionStorage.getItem("codeVerifier"),
// code: uriAuthCode,
// redirect_uri: 'https://localhost:3000/secured'
// })
// };
// axios.request(options).then(function (response) {
// console.log(response.data);
// }).catch(function (error) {
// console.error(error);
// });
const url = 'http://localhost:8080/realms/test00/protocol/openid-connect/token';
// const xhr = new XMLHttpRequest();
// xhr.responseType = 'json';
// xhr.open("POST", url, true);
// xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// xhr.send(new URLSearchParams({
// grant_type: 'authorization_code',
// client_id: 'myclient',
// code_verifier: sessionStorage.getItem("codeVerifier"),
// code: uriAuthCode,
// redirect_uri: 'http://localhost:3000/secured'
// }));
// console.log(xhr.response);
// fetch(url, {
// method: 'POST',
// headers: {
// 'Content-type':'application/x-www-form-urlencoded'
// },
// body: new URLSearchParams({
// grant_type: 'authorization_code',
// client_id: 'myclient',
// code_verifier: sessionStorage.getItem("codeVerifier"),
// code: uriAuthCode,
// redirect_uri: 'http://localhost:3000/secured'
// })
// }).then((response)=> {
// response.json().then((ris) => console.log(ris))
// });
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-type':'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
grant_type: 'authorization_code',
client_id: 'myclient',
code_verifier: sessionStorage.getItem("codeVerifier"),
code: uriAuthCode,
redirect_uri: 'http://localhost:3000/secured'
})
});
const token = await response.json();
console.log(token);
token = await requestToken(uriAuthCode); // post per la richiesta del token
if(token !== null) {
console.log(token);
const myDomains = getMyDomains(token);
const app = new App(myDomains);
}
// DA FARE: capire come richiedere il refresh token
// fare una get /secured/domains per ottenere tutte le informazioni dal domain manager sui miei domini
// DA FARE: capire come richiedere il refresh token
}
}
......@@ -114,4 +47,58 @@ else {
function queryStringGetValue(queryString) {
const arr = queryString.split('=');
return arr[1];
}
/**
* Post per la richiesta del token
* @returns il token ottenuto
*/
async function requestToken(uriAuthCode) {
const url = 'http://localhost:8080/realms/test00/protocol/openid-connect/token';
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-type':'application/x-www-form-urlencoded'
},
body: new URLSearchParams({
grant_type: 'authorization_code',
client_id: 'myclient',
code_verifier: sessionStorage.getItem("codeVerifier"),
code: uriAuthCode,
redirect_uri: 'http://localhost:3000/secured'
})
});
const token = await response.json();
if(response.ok)
return token;
else
return null;
}
/**
* Funzione per ottenenere dal domain manager tutte le informazioni
* sui domini dell'utente che ha fatto il login
* @param {*} token token da inviare al domain manager
*/
async function getMyDomains(token) {
const responseDomain = await fetch('http://localhost:3001/secured/domains', { // DA FARE: controllare che l'uri che ho specificato qui coincida con quello specificato dal domain manager
method: 'GET',
headers: {
// DA FARE: mettere qui il token
}
}) ;
const domainsJson = await response.json();
if(response.ok) {
const domainsArray = domainsJson.response;
const myDomains = domainsArray.map((d) => Domain.from(d));
return myDomains;
}
else
throw domainsJson;
}
export function getToken() {
return token;
}
\ No newline at end of file
webapp/public/js/authentication/secured.js → webapp/public/js/authentication/secure.js
+ 20
− 0
View file @ 6dae2028
'use strict';
class Secure {
// constructor() {
// this.codeVerifier = this.base64URLEncode(crypto.randomBytes(32));
// this.state = this.base64URLEncode(crypto.randomBytes(32));
// this.codeChallenge = this.base64URLEncode(this.sha256(codeVerifier));
// }
// base64URLEncode(str) {
// return str.toString('base64')
// .replace(/\+/g, '-')
// .replace(/\//g, '_')
// .replace(/=/g, '');
// }
// sha256(buffer) {
// return crypto.createHash('sha256').update(buffer).digest();
// }
constructor() {
this.codeVerifier = this.base64URLEncode(CryptoJS.lib.WordArray.random(50));
......
webapp/public/js/templates/domains-template.js
+ 18
− 0
View file @ 6dae2028
'use strict';
function createRowDomain(domain) {
return `
<th scope="row">
<h4 class="d-flex justify-content-center mt-2">${domain.nome}</h4>
</th>
<td class="align-middle">
<div class="switch-container no-box-sizing d-flex justify-content-center">
<div class="toggle-button no-box-sizing ${domain.stato.toLowerCase() === 'on' ? 'active' : ''}">
<div class="inner-circle no-box-sizing"></div>
</div>
</div>
</td>
<td class="d-flex justify-content-center">
${domain.admin == true ? '<i class="fa-solid fa-trash fa-2x py-2">' : ''}
</td>`;
}
export {createRowDomain};
\ No newline at end of file
webapp/public/js/toggles.js
+ 39
− 1
View file @ 6dae2028
......@@ -2,6 +2,7 @@
import Scenari from './scenari.js';
import { showAlert, makeElementBounce } from './alerts.js';
import Api from './mqtt/api.js';
import {getToken} from './authentication/script.js';
/**
* activates all the toggles available
......@@ -90,4 +91,41 @@ function luciToggleCallback(toggle){
toggle.classList.toggle('active');
}
export { setToggleMovement, scenariToggleListener, luciToggleListener };
\ No newline at end of file
async function statoDomainToggle(domain, toggle) {
toggle.addEventListener('click', event => {
event.preventDefault();
const token = getToken();
const stop = toggle.classList.contains('active');
if(stop) {
// toggle attiva
const response = await fetch('http://localhost:3001/stop', {
method: 'POST',
headers: , // DA FARE: inserire il token
body: JSON.stringify({domain: domain.nome})
});
if(response.ok) {
toggle.classList.remove('active');
}
else {
throw new Error('Impossibile fermare il dominio, provare piu\' tardi');
}
}
else {
const response = await fetch('http://localhost:3001/start', {
method: 'POST',
headers: , // DA FARE: inserire il token
body: JSON.stringify({domain: domain.nome})
});
if(response.ok) {
toggle.classList.add('active');
}
else {
throw new Error('Impossibile far partire il dominio, provare piu\' tardi');
}
}
});
}
export { setToggleMovement, scenariToggleListener, luciToggleListener, statoDomainToggle};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment