Validation required :
+ ${notif.processId}
+ `;
+ // this.addSubscription(notifElement, 'click', 'goToProcessPage')
+ notificationBoard.appendChild(notifElement);
+ notifElement.addEventListener('click', async () => {
+ const modalService = await ModalService.getInstance();
+ modalService.injectValidationModal(notif);
+ });
+ }
+ } else {
+ noNotifications.style.display = 'block';
+ }
+}
+
+async function fetchNotifications() {
+ const service = await Services.getInstance();
+ const data = service.getNotifications() || [];
+ await setNotification(data);
+}
+
+async function loadUserProfile() {
+ // Charger les données du profil depuis le localStorage
+ const userName = localStorage.getItem('userName');
+ const userLastName = localStorage.getItem('userLastName');
+ const userAvatar = localStorage.getItem('userAvatar') || 'https://via.placeholder.com/150';
+ const userBanner = localStorage.getItem('userBanner') || 'https://via.placeholder.com/800x200';
+
+ // Mettre à jour les éléments du DOM
+ const nameElement = document.querySelector('.user-name');
+ const lastNameElement = document.querySelector('.user-lastname');
+ const avatarElement = document.querySelector('.avatar');
+ const bannerElement = document.querySelector('.banner-image');
+
+ if (nameElement) nameElement.textContent = userName;
+ if (lastNameElement) lastNameElement.textContent = userLastName;
+ if (avatarElement) (avatarElement as HTMLImageElement).src = userAvatar;
+ if (bannerElement) (bannerElement as HTMLImageElement).src = userBanner;
+}
+
+async function importJSON() {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.json';
+
+ input.onchange = async (e) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = async (e) => {
+ try {
+ const content: BackUp = JSON.parse(e.target?.result as string);
+ const service = await Services.getInstance();
+ await service.importJSON(content);
+ alert('Import réussi');
+ window.location.reload();
+ } catch (error) {
+ alert("Erreur lors de l'import: " + error);
+ }
+ };
+ reader.readAsText(file);
+ }
+ };
+
+ input.click();
+}
+
+(window as any).importJSON = importJSON;
+
+async function createBackUp() {
+ const service = await Services.getInstance();
+ const backUp = await service.createBackUp();
+ if (!backUp) {
+ console.error("No device to backup");
+ return;
+ }
+
+ try {
+ const backUpJson = JSON.stringify(backUp, null, 2)
+ const blob = new Blob([backUpJson], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = '4nk-backup.json';
+ a.click();
+
+ URL.revokeObjectURL(url);
+
+ console.log('Backup successfully prepared for download');
+ } catch (e) {
+ console.error(e);
+ }
+}
+
+(window as any).createBackUp = createBackUp;
+
+async function disconnect() {
+ console.log('Disconnecting...');
+ try {
+ localStorage.clear();
+
+ await new Promise
+
+
diff --git a/ihm_client/src/components/login-modal/login-modal.js b/ihm_client/src/components/login-modal/login-modal.js
new file mode 100755
index 00000000..d9c49d7f
--- /dev/null
+++ b/ihm_client/src/components/login-modal/login-modal.js
@@ -0,0 +1,13 @@
+import Routing from '/src/services/routing.service.ts';
+
+const router = await Routing.getInstance();
+export async function confirmLogin() {
+ router.confirmLogin();
+}
+
+export async function closeLoginModal() {
+ router.closeLoginModal();
+}
+
+window.confirmLogin = confirmLogin;
+window.closeLoginModal = closeLoginModal;
diff --git a/ihm_client/src/components/modal/confirmation-modal.html b/ihm_client/src/components/modal/confirmation-modal.html
new file mode 100755
index 00000000..6c0f6c4e
--- /dev/null
+++ b/ihm_client/src/components/modal/confirmation-modal.html
@@ -0,0 +1,16 @@
+
+
+
diff --git a/ihm_client/src/components/modal/confirmation-modal.ts b/ihm_client/src/components/modal/confirmation-modal.ts
new file mode 100755
index 00000000..292d875d
--- /dev/null
+++ b/ihm_client/src/components/modal/confirmation-modal.ts
@@ -0,0 +1,13 @@
+import ModalService from '../../services/modal.service';
+
+const modalService = await ModalService.getInstance();
+// export async function confirm() {
+// modalService.confirmPairing();
+// }
+
+export async function closeConfirmationModal() {
+ modalService.closeConfirmationModal();
+}
+
+(window as any).confirm = confirm;
+(window as any).closeConfirmationModal = closeConfirmationModal;
diff --git a/ihm_client/src/components/modal/creation-modal.html b/ihm_client/src/components/modal/creation-modal.html
new file mode 100644
index 00000000..231ac877
--- /dev/null
+++ b/ihm_client/src/components/modal/creation-modal.html
@@ -0,0 +1,14 @@
+
+
+
\ No newline at end of file
diff --git a/ihm_client/src/components/modal/waiting-modal.html b/ihm_client/src/components/modal/waiting-modal.html
new file mode 100644
index 00000000..5fb70d43
--- /dev/null
+++ b/ihm_client/src/components/modal/waiting-modal.html
@@ -0,0 +1,8 @@
+
+
+
\ No newline at end of file
diff --git a/ihm_client/src/components/qrcode-scanner/qrcode-scanner-component.ts b/ihm_client/src/components/qrcode-scanner/qrcode-scanner-component.ts
new file mode 100644
index 00000000..1e39d3ba
--- /dev/null
+++ b/ihm_client/src/components/qrcode-scanner/qrcode-scanner-component.ts
@@ -0,0 +1,73 @@
+import QrScanner from 'qr-scanner';
+import Services from '../../services/service';
+import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
+
+export default class QrScannerComponent extends HTMLElement {
+ videoElement: any;
+ wrapper: any;
+ qrScanner: any;
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ this.wrapper = document.createElement('div');
+ this.wrapper.style.position = 'relative';
+ this.wrapper.style.width = '150px';
+ this.wrapper.style.height = '150px';
+
+ this.videoElement = document.createElement('video');
+ this.videoElement.style.width = '100%';
+ document.body?.append(this.wrapper);
+ this.wrapper.prepend(this.videoElement);
+ }
+
+ connectedCallback() {
+ this.initializeScanner();
+ }
+
+ async initializeScanner() {
+ if (!this.videoElement) {
+ console.error('Video element not found!');
+ return;
+ }
+ console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
+ this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
+ highlightScanRegion: true,
+ highlightCodeOutline: true,
+ });
+
+ try {
+ await QrScanner.hasCamera();
+ this.qrScanner.start();
+ this.videoElement.style = 'height: 200px; width: 200px';
+ this.shadowRoot?.appendChild(this.wrapper);
+ } catch (e) {
+ console.error('No camera found or error starting the QR scanner', e);
+ }
+ }
+
+ async onQrCodeScanned(result: any) {
+ console.log(`QR Code detected:`, result);
+ const data = result.data;
+ const scannedUrl = new URL(data);
+
+ // Extract the 'sp_address' parameter
+ const spAddress = scannedUrl.searchParams.get('sp_address');
+ if (spAddress) {
+ // Call the sendPairingTx function with the extracted sp_address
+ try {
+ await prepareAndSendPairingTx();
+ } catch (e) {
+ console.error('Failed to pair:', e);
+ }
+ }
+ this.qrScanner.stop(); // if you want to stop scanning after one code is detected
+ }
+
+ disconnectedCallback() {
+ if (this.qrScanner) {
+ this.qrScanner.destroy();
+ }
+ }
+}
+
+customElements.define('qr-scanner', QrScannerComponent);
diff --git a/ihm_client/src/components/validation-modal/validation-modal.css b/ihm_client/src/components/validation-modal/validation-modal.css
new file mode 100644
index 00000000..b6e93818
--- /dev/null
+++ b/ihm_client/src/components/validation-modal/validation-modal.css
@@ -0,0 +1,70 @@
+.validation-modal {
+ display: block; /* Show the modal for demo purposes */
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+}
+.modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ height: fit-content;
+}
+.modal-title {
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 20px;
+}
+.validation-box {
+ margin-bottom: 15px;
+ width: 100%;
+}
+.expansion-panel-header {
+ background-color: #e0e0e0;
+ padding: 10px;
+ cursor: pointer;
+}
+.expansion-panel-body {
+ display: none;
+ background-color: #fafafa;
+ padding: 10px;
+ border-top: 1px solid #ddd;
+}
+.expansion-panel-body pre {
+ background-color: #f6f8fa;
+ padding: 10px;
+ border-left: 4px solid #d1d5da;
+ overflow-x: auto;
+}
+.diff {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+.diff-side {
+ width: 48%;
+ padding: 10px;
+}
+.diff-old {
+ background-color: #fee;
+ border: 1px solid #f00;
+}
+.diff-new {
+ background-color: #e6ffe6;
+ border: 1px solid #0f0;
+}
+.radio-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
diff --git a/ihm_client/src/components/validation-modal/validation-modal.html b/ihm_client/src/components/validation-modal/validation-modal.html
new file mode 100755
index 00000000..780e489b
--- /dev/null
+++ b/ihm_client/src/components/validation-modal/validation-modal.html
@@ -0,0 +1,11 @@
+
+
+
diff --git a/ihm_client/src/components/validation-modal/validation-modal.ts b/ihm_client/src/components/validation-modal/validation-modal.ts
new file mode 100755
index 00000000..711aff21
--- /dev/null
+++ b/ihm_client/src/components/validation-modal/validation-modal.ts
@@ -0,0 +1,56 @@
+import ModalService from '~/services/modal.service';
+
+async function validate() {
+ console.log('==> VALIDATE');
+ const modalservice = await ModalService.getInstance();
+ modalservice.closeValidationModal();
+}
+
+export async function initValidationModal(processDiffs: any) {
+console.log("🚀 ~ initValidationModal ~ processDiffs:", processDiffs)
+for(const diff of processDiffs.diffs) {
+ let diffs = ''
+ for(const value of diff) {
+ diffs+= `
+
+
+
+ `
+ }
+
+ const state = `
+
+
+ -${value.previous_value}
+
+
+ +${value.new_value}
+
+
+ `
+ const box = document.querySelector('.validation-box')
+ if(box) box.innerHTML += state
+}
+document.querySelectorAll('.expansion-panel-header').forEach((header) => {
+ header.addEventListener('click', function (event) {
+ const target = event.target as HTMLElement;
+ const body = target.nextElementSibling as HTMLElement;
+ if (body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
+ });
+});
+}
+
+(window as any).validate = validate;
diff --git a/ihm_client/src/components/validation-rule-modal/validation-rule-modal.html b/ihm_client/src/components/validation-rule-modal/validation-rule-modal.html
new file mode 100644
index 00000000..75669805
--- /dev/null
+++ b/ihm_client/src/components/validation-rule-modal/validation-rule-modal.html
@@ -0,0 +1,42 @@
+
diff --git a/ihm_client/src/components/validation-rule-modal/validation-rule-modal.ts b/ihm_client/src/components/validation-rule-modal/validation-rule-modal.ts
new file mode 100644
index 00000000..121d954e
--- /dev/null
+++ b/ihm_client/src/components/validation-rule-modal/validation-rule-modal.ts
@@ -0,0 +1,61 @@
+export interface ValidationRule {
+ quorum: number;
+ fields: string[];
+ min_sig_member: number;
+}
+
+/**
+ * Loads and injects the modal HTML into the document if not already loaded.
+ */
+export async function loadValidationRuleModal(templatePath: string = '/src/components/validation-rule-modal/validation-rule-modal.html') {
+ if (document.getElementById('validation-rule-modal')) return;
+
+ const res = await fetch(templatePath);
+ const html = await res.text();
+
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = html;
+
+ const modal = tempDiv.querySelector('#validation-rule-modal');
+ if (!modal) {
+ throw new Error('Modal HTML missing #validation-rule-modal');
+ }
+
+ document.body.appendChild(modal);
+}
+
+/**
+ * Opens the modal and lets the user input a ValidationRule.
+ * Calls the callback with the constructed rule on submit.
+ */
+export function showValidationRuleModal(onSubmit: (rule: ValidationRule) => void) {
+ const modal = document.getElementById('validation-rule-modal')!;
+ const quorumInput = document.getElementById('vr-quorum') as HTMLInputElement;
+ const minsigInput = document.getElementById('vr-minsig') as HTMLInputElement;
+ const fieldsInput = document.getElementById('vr-fields') as HTMLInputElement;
+
+ const cancelBtn = document.getElementById('vr-cancel')!;
+ const submitBtn = document.getElementById('vr-submit')!;
+
+ // Reset values
+ quorumInput.value = '';
+ minsigInput.value = '';
+ fieldsInput.value = '';
+
+ modal.style.display = 'flex';
+
+ cancelBtn.onclick = () => {
+ modal.style.display = 'none';
+ };
+
+ submitBtn.onclick = () => {
+ const rule: ValidationRule = {
+ quorum: parseInt(quorumInput.value),
+ min_sig_member: parseInt(minsigInput.value),
+ fields: fieldsInput.value.split(',').map(f => f.trim()).filter(Boolean),
+ };
+
+ modal.style.display = 'none';
+ onSubmit(rule);
+ };
+}
diff --git a/ihm_client/src/decs.d.ts b/ihm_client/src/decs.d.ts
new file mode 100644
index 00000000..d137c884
--- /dev/null
+++ b/ihm_client/src/decs.d.ts
@@ -0,0 +1,10 @@
+declare class AccountComponent extends HTMLElement {
+ _callback: any;
+ constructor();
+ connectedCallback(): void;
+ fetchData(): PromiseState ${diff[0].new_state_merkle_root}
+
+ ${diffs}
+
+
+
+
+
+
+ ×
+
+ Profile
+
+
+
+ `;
+
+
+ window.showPairing = () => this.showPairing();
+ window.showWallet = () => this.showWallet();
+ window.showProcess = () => this.showProcess();
+ window.showProcessCreation = () => this.showProcessCreation();
+ window.showDocumentValidation = () => this.showDocumentValidation();
+ window.showData = () => this.showData();
+ window.addWalletRow = () => this.addWalletRow();
+ window.confirmWalletRow = () => this.confirmWalletRow();
+ window.cancelWalletRow = () => this.cancelWalletRow();
+ window.editDeviceName = (cell: HTMLTableCellElement) => this.editDeviceName(cell);
+ window.showProcessNotifications = (processName: string) => this.showProcessNotifications(processName);
+ window.handleLogout = () => this.handleLogout();
+ window.confirmDeleteAccount = () => this.confirmDeleteAccount();
+ window.showContractPopup = (contractId: string) => this.showContractPopup(contractId);
+ window.addRowPairing = () => this.addRowPairing();
+ window.deleteRowPairing = (button: HTMLButtonElement) => this.deleteRowPairing(button);
+ window.confirmRowPairing = () => this.confirmRowPairing();
+ window.cancelRowPairing = () => this.cancelRowPairing();
+ window.updateNavbarBanner = (bannerUrl: string) => this.updateNavbarBanner(bannerUrl);
+ window.saveBannerToLocalStorage = (bannerUrl: string) => this.saveBannerToLocalStorage(bannerUrl);
+ window.loadSavedBanner = () => this.loadSavedBanner();
+ window.closeNotificationPopup = (event: Event) => this.closeNotificationPopup(event);
+ window.markAsRead = (processName: string, messageId: number, element: HTMLElement) => this.markAsRead(processName, messageId, element);
+ window.exportRecovery = () => this.exportRecovery();
+ window.generateRecoveryWords = () => this.generateRecoveryWords();
+ window.exportUserData = () => this.exportUserData();
+ window.updateActionButtons = () => this.updateActionButtons();
+ window.openAvatarPopup = () => this.openAvatarPopup();
+ window.closeAvatarPopup = () => this.closeAvatarPopup();
+ window.showQRCodeModal = (pairingId: string) => this.showQRCodeModal(pairingId);
+
+ if (!localStorage.getItem('rows')) {
+ localStorage.setItem('rows', JSON.stringify(defaultRows));
+ }
+ }
+
+ connectedCallback() {
+ this.initializeEventListeners();
+ this.loadSavedBanner();
+ this.loadUserInfo();
+
+ const savedAvatar = localStorage.getItem('userAvatar');
+ const savedBanner = localStorage.getItem('userBanner');
+ const savedName = localStorage.getItem('userName');
+ const savedLastName = localStorage.getItem('userLastName');
+
+ if (savedAvatar) {
+ const navAvatar = this.shadowRoot?.querySelector('.avatar') as HTMLImageElement;
+ if (navAvatar) navAvatar.src = savedAvatar;
+ }
+
+ if (savedBanner) {
+ const navBanner = this.shadowRoot?.querySelector('.banner-image') as HTMLImageElement;
+ if (navBanner) navBanner.src = savedBanner;
+ }
+
+ if (savedName) {
+ this.updateNavbarName(savedName);
+ }
+ if (savedLastName) {
+ this.updateNavbarLastName(savedLastName);
+ }
+ }
+
+ private showAlert(message: string): void {
+ // Créer la popup si elle n'existe pas
+ let alertPopup = this.shadowRoot?.querySelector('.alert-popup');
+ if (!alertPopup) {
+ alertPopup = document.createElement('div');
+ alertPopup.className = 'alert-popup';
+ this.shadowRoot?.appendChild(alertPopup);
+ }
+
+ // Définir le message et afficher la popup
+ alertPopup.textContent = message;
+ (alertPopup as HTMLElement).style.display = 'block';
+
+ // Cacher la popup après 3 secondes
+ setTimeout(() => {
+ (alertPopup as HTMLElement).style.display = 'none';
+ }, 3000);
+ }
+
+
+ // Fonctions de gestion des comptes et de l'interface utilisateur
+ private confirmDeleteAccount(): void {
+ const modal = document.createElement('div');
+ modal.className = 'confirm-delete-modal';
+ modal.innerHTML = `
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+ - Pairing 🔗
- Process ⚙️
- Process Creation
- Document Validation
+
+
+
+
+
+
+
+
+
+ Delete Account
+Are you sure you want to delete your account? This action cannot be undone.
+ + `; + + this.shadowRoot?.appendChild(modal); + modal.style.display = 'block'; + + const cancelBtn = modal.querySelector('.cancel-btn'); + const confirmBtn = modal.querySelector('.confirm-btn'); + + cancelBtn?.addEventListener('click', () => { + modal.remove(); + }); + + confirmBtn?.addEventListener('click', () => { + this.deleteAccount(); + modal.remove(); + }); +} + +private deleteAccount(): void { + localStorage.clear(); + window.location.href = '/login.html'; +} + +private updateNavbarBanner(imageUrl: string): void { + const navbarSection = this.shadowRoot?.querySelector('.nav-wrapper .avatar-section'); + if (!navbarSection) return; + + let bannerImg = navbarSection.querySelector
+ ${recoveryWords.map((word, index) => `
+
+
+ ${index + 1}.
+ ${word}
+
+ `).join('')}
+
+ Please write these words down carefully. They will be needed to recover your account.
+
+ `,
+ showCancelButton: false,
+ confirmButtonText: 'I confirm the export',
+ confirmButtonColor: '#C89666',
+ allowOutsideClick: false,
+ allowEscapeKey: false,
+ customClass: {
+ container: 'recovery-popup-container',
+ popup: 'recovery-popup'
+ }
+ }).then((result) => {
+ if (result.isConfirmed) {
+ // Stocker l'état du bouton dans le localStorage
+ localStorage.setItem('recoveryExported', 'true');
+
+ const exportRecoveryBtn = this.shadowRoot?.querySelector('.recovery-btn') as HTMLButtonElement;
+ if (exportRecoveryBtn) {
+ exportRecoveryBtn.disabled = true;
+ exportRecoveryBtn.style.opacity = '0.5';
+ exportRecoveryBtn.style.cursor = 'not-allowed';
+ }
+ }
+ });
+ }
+ });
+}
+
+private generateRecoveryWords(): string[] {
+ const wordsList = [
+ 'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
+ 'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
+ ];
+ const recoveryWords: string[] = [];
+ while (recoveryWords.length < 4) {
+ const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
+ if (!recoveryWords.includes(randomWord)) {
+ recoveryWords.push(randomWord);
+ }
+ }
+ return recoveryWords;
+}
+
+private exportUserData(): void {
+ const data: { [key: string]: string | null } = {};
+ for (let i = 0; i < localStorage.length; i++) {
+ const key = localStorage.key(i);
+ if (key) {
+ const value = localStorage.getItem(key);
+ data[key] = value;
+ }
+ }
+
+ const jsonData = JSON.stringify(data, null, 2);
+ const blob = new Blob([jsonData], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = 'user_data.json';
+ this.shadowRoot?.appendChild(a);
+ a.click();
+ this.shadowRoot?.removeChild(a);
+ URL.revokeObjectURL(url);
+}
+
+private updateActionButtons(): void {
+ const buttonContainer = this.shadowRoot?.querySelector('.button-container');
+ if (!buttonContainer) return;
+
+ buttonContainer.innerHTML = `
+
+ `;
+}
+
+private getConfirmFunction(): string {
+ switch (currentMode) {
+ case 'wallet':
+ return 'window.confirmWalletRow()';
+ case 'process':
+ return 'window.confirmProcessRow()';
+ default:
+ return 'window.confirmRowPairing()';
+ }
+}
+
+private getCancelFunction(): string {
+ switch (currentMode) {
+ case 'wallet':
+ return 'window.cancelWalletRow()';
+ case 'process':
+ return 'window.cancelProcessRow()';
+ default:
+ return 'window.cancelRowPairing()';
+ }
+}
+
+// Fonctions de gestion des tableaux
+private async addRowPairing(): Promise
+
+ `;
+
+ this.shadowRoot?.appendChild(modal);
+
+ // Gérer les boutons de la modal
+ const confirmBtn = modal.querySelector('.confirm-btn');
+ const cancelBtn = modal.querySelector('.cancel-btn');
+
+ confirmBtn?.addEventListener('click', () => {
+ // Calculer l'index AVANT de supprimer la ligne du DOM
+ const index = Array.from(table.children).indexOf(row);
+ const storageKey = STORAGE_KEYS[currentMode];
+ const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
+
+ // Supprimer du localStorage
+ if (index > -1) {
+ rows.splice(index, 1);
+ localStorage.setItem(storageKey, JSON.stringify(rows));
+ }
+
+ // Animation et suppression du DOM
+ row.style.transition = 'opacity 0.3s, transform 0.3s';
+ row.style.opacity = '0';
+ row.style.transform = 'translateX(-100%)';
+
+ setTimeout(() => {
+ row.remove();
+ }, 300);
+
+ modal.remove();
+ });
+
+ cancelBtn?.addEventListener('click', () => {
+ modal.remove();
+ });
+}
+
+private editDeviceName(cell: HTMLTableCellElement): void {
+ if (cell.classList.contains('editing')) return;
+
+ const currentValue = cell.textContent || '';
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.value = currentValue;
+ input.className = 'edit-input';
+
+ input.addEventListener('blur', () => this.finishEditing(cell, input));
+ input.addEventListener('keypress', (e: KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ this.finishEditing(cell, input);
+ }
+ });
+
+ cell.textContent = '';
+ cell.appendChild(input);
+ cell.classList.add('editing');
+ input.focus();
+}
+
+private async finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): PromiseConfirm Deletion
+Are you sure you want to delete this device?
+ +
+
+ `).join('');
+
+ if (process.notification.messages.length === 0) {
+ notificationsList = '
+ ${msg.read ?
+ `` :
+ ``
+ }
+
+
+ ${msg.message}
+ ${msg.date}
+
+ No notifications
'; + } + + modal.innerHTML = ` +
+
+ `;
+
+ this.shadowRoot?.appendChild(modal);
+
+ // Mettre à jour le compteur de notifications
+ const countElement = this.shadowRoot?.querySelector(`.notification-count[data-process="${processName}"]`);
+ if (countElement) {
+ const notifCount = this.calculateNotifications(process.notification.messages);
+ countElement.textContent = `${notifCount.unread}/${notifCount.total}`;
+ }
+
+ const closeButton = modal.querySelector('.close-notifications');
+ closeButton?.addEventListener('click', () => {
+ modal.remove();
+ this.showProcess(); // Rafraîchir l'affichage pour mettre à jour les compteurs
+ });
+}
+
+
+private handleLogout(): void {
+ localStorage.clear();
+ window.location.href = '../login/login.html';
+}
+
+
+// Fonctions de gestion des contrats
+private showContractPopup(contractId: string, event?: Event) {
+ if (event) {
+ event.preventDefault();
+ }
+
+ // Check if the contract exists in mockContracts
+ const contract = mockContracts[contractId as keyof typeof mockContracts];
+ if (!contract) {
+ console.error('Contract not found:', contractId);
+ return;
+ }
+
+ const popup = document.createElement('div');
+ popup.className = 'contract-popup-overlay';
+ popup.innerHTML = `
+ ${processName} Notifications
+
+ ${notificationsList}
+
+
+
+
+
+ `;
+
+ this.shadowRoot?.appendChild(popup);
+
+ const closeBtn = popup.querySelector('.close-contract-popup');
+ const closePopup = () => popup.remove();
+
+ closeBtn?.addEventListener('click', closePopup);
+ popup.addEventListener('click', (e) => {
+ if (e.target === popup) closePopup();
+ });
+}
+
+// Fonction utilitaire pour cacher tous les contenus
+private hideAllContent(): void {
+ const contents = ['pairing-content', 'wallet-content', 'process-content', 'process-creation-content', 'data-content', 'document-validation-content'];
+ contents.forEach(id => {
+ const element = this.shadowRoot?.getElementById(id);
+ if (element) {
+ element.style.display = 'none';
+ }
+ });
+}
+
+// Fonctions d'affichage des sections
+private async showPairing(): Promise${contract.title}
+
+
+ Date: ${contract.date}
+Parties: ${contract.parties.join(', ')}
+Terms:
+-
+ ${contract.terms.map(term => `
- ${term} `).join('')} +
Content: ${contract.content}
+Pairing
+
+
+
+
+
+
+ `;
+
+ let rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
+
+ const deviceExists = rows.some((row: Row) => row.column1 === spAddress);
+
+ if (!deviceExists && spAddress) {
+ const emojis = await addressToEmoji(spAddress);
+
+ try {
+ // Déboguer le processus de pairing
+ const pairingProcessId = await service.getPairingProcessId();
+ console.log('Pairing Process ID:', pairingProcessId);
+
+ const pairingProcess = await service.getProcess(pairingProcessId);
+ console.log('Pairing Process:', pairingProcess);
+
+ const userName = pairingProcess?.states?.[0]?.public_data?.memberPublicName
+ || localStorage.getItem('userName')
+
+ console.log('Username found:', userName);
+
+ const newRow = {
+ column1: spAddress,
+ column2: userName,
+ column3: emojis
+ };
+ rows = [newRow, ...rows];
+ localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
+ } catch (error) {
+ console.error('Error getting pairing process:', error);
+ const newRow = {
+ column1: spAddress,
+ column2: 'This Device',
+ column3: emojis
+ };
+ rows = [newRow, ...rows];
+ localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
+ }
+ }
+
+ this.updateTableContent(rows);
+ }
+}
+
+private showWallet(): void {
+ isAddingRow = false;
+ currentRow = null;
+
+ currentMode = 'wallet';
+ this.hideAllContent();
+
+ // Mettre à jour le titre
+ const headerTitle = this.shadowRoot?.getElementById('header-title');
+ if (headerTitle) headerTitle.textContent = 'Wallet';
+
+ const walletContent = this.shadowRoot?.getElementById('wallet-content');
+ if (!walletContent) return;
+ walletContent.style.display = 'block';
+ walletContent.innerHTML = `
+ | Device Name | +SP Emojis | +QR Code | +Actions | +
|---|
Wallet
+
+
+
+
+
+
+ `;
+
+ const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
+ this.updateWalletTableContent(rows);
+}
+
+
+private updateWalletTableContent(rows: WalletRow[]): void {
+ const tbody = this.shadowRoot?.querySelector('#wallet-table tbody');
+ if (!tbody) return;
+
+ tbody.innerHTML = rows.map(row => `
+ | Label | +Wallet | +Type | +
|---|
Data
+
+
+
+
+
+ `;
+
+ const rows = mockDataRows || JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
+ this.updateDataTableContent(rows);
+ }
+}
+
+// Fonctions de gestion du wallet
+private addWalletRow(): void {
+ if (isAddingRow) return;
+ isAddingRow = true;
+
+ const table = this.shadowRoot?.getElementById('wallet-table')?.getElementsByTagName('tbody')[0];
+ if (!table) return;
+
+ currentRow = table.insertRow();
+ const placeholders = ['Label', 'Wallet', 'Type'];
+
+ placeholders.forEach(placeholder => {
+ const cell = currentRow!.insertCell();
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.placeholder = placeholder;
+ input.className = 'edit-input';
+ cell.appendChild(input);
+ });
+
+ // Remplacer le bouton "Add a line" par les boutons de confirmation/annulation
+ const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
+ if (!buttonContainer) return;
+
+ buttonContainer.innerHTML = `
+
+ `;
+
+ this.updateActionButtons();
+}
+
+private confirmWalletRow(): void {
+ if (!currentRow) return;
+
+ const inputs = Array.from(currentRow.getElementsByTagName('input'));
+ const allFieldsFilled = inputs.every(input => input.value.trim() !== '');
+
+ if (allFieldsFilled) {
+ const newRow: WalletRow = {
+ column1: inputs[0].value.trim(),
+ column2: inputs[1].value.trim(),
+ column3: inputs[2].value.trim()
+ };
+
+ const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
+ rows.push(newRow);
+ localStorage.setItem(STORAGE_KEYS.wallet, JSON.stringify(rows));
+
+ isAddingRow = false;
+ currentRow = null;
+ this.showWallet();
+ } else {
+ this.showAlert('Please complete all fields before confirming.');
+ }
+}
+
+private cancelWalletRow(): void {
+ if (!currentRow) return;
+
+ currentRow.remove();
+ isAddingRow = false;
+ currentRow = null;
+
+ // Réinitialiser le conteneur de boutons avec le bouton "Add a line"
+ const buttonContainer = this.shadowRoot?.querySelector('#wallet-content .button-container');
+ if (!buttonContainer) return;
+
+ buttonContainer.innerHTML = `
+
+ `;
+
+
+}
+
+private updateDataTableContent(rows: DataRow[]): void {
+ const tbody = this.shadowRoot?.querySelector('#data-table tbody');
+ if (!tbody) return;
+
+ tbody.innerHTML = rows.map(row => `
+ | Name | +Visibility | +Role | +Duration | +Legal | +Contract | +
|---|
+
+ `;
+
+ popup.style.display = 'block';
+ this.setupEventListeners(popup);
+
+ // Ajouter le gestionnaire d'événements pour la bannière
+ const bannerImg = popup.querySelector('#popup-banner-img');
+ const bannerInput = popup.querySelector('#banner-upload') as HTMLInputElement;
+
+ if (bannerImg && bannerInput) {
+ bannerImg.addEventListener('click', () => {
+ bannerInput.click();
+ });
+ }
+
+ const recoveryExported = localStorage.getItem('recoveryExported') === 'true';
+ if (recoveryExported) {
+ const exportRecoveryBtn = popup.querySelector('.recovery-btn') as HTMLButtonElement;
+ if (exportRecoveryBtn) {
+ exportRecoveryBtn.disabled = true;
+ exportRecoveryBtn.style.opacity = '0.5';
+ exportRecoveryBtn.style.cursor = 'not-allowed';
+ }
+ }
+}
+
+private setupEventListeners(popup: HTMLElement): void {
+ // Gestionnaire pour la fermeture
+ const closeBtn = popup.querySelector('.close-popup');
+ if (closeBtn) {
+ closeBtn.addEventListener('click', () => {
+ popup.style.display = 'none';
+ });
+ }
+
+ // Gestionnaire pour l'upload d'avatar
+ const avatarUpload = popup.querySelector('#avatar-upload') as HTMLInputElement;
+ if (avatarUpload) {
+ avatarUpload.addEventListener('change', (e: Event) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e: ProgressEventProfile
+ × + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ Name:
+
+
+
+
+ Address:
+ ${savedAddress}
+
+
+ ×
+ 
+
+ `;
+
+ this.shadowRoot?.appendChild(modal);
+
+ const closeBtn = modal.querySelector('.close-qr-modal');
+ closeBtn?.addEventListener('click', () => modal.remove());
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) modal.remove();
+ });
+}
+}
+
+customElements.define('account-element', AccountElement);
+export { AccountElement };
diff --git a/ihm_client/src/pages/account/document-validation.ts b/ihm_client/src/pages/account/document-validation.ts
new file mode 100644
index 00000000..af45c8db
--- /dev/null
+++ b/ihm_client/src/pages/account/document-validation.ts
@@ -0,0 +1,321 @@
+import type { ProcessState } from '../../../pkg/sdk_client';
+import Services from '../../services/service';
+
+interface State {
+ file: File | null;
+ fileHash: string | null;
+ certificate: ProcessState | null;
+ commitmentHashes: string[];
+}
+
+export interface Vin {
+ txid: string; // The txid of the previous transaction (being spent)
+ vout: number; // The output index in the previous tx
+ prevout: {
+ scriptpubkey: string;
+ scriptpubkey_asm: string;
+ scriptpubkey_type: string;
+ scriptpubkey_address: string;
+ value: number;
+ };
+ scriptsig: string;
+ scriptsig_asm: string;
+ witness: string[];
+ is_coinbase: boolean;
+ sequence: number;
+}
+
+export interface TransactionInfo {
+ txid: string;
+ version: number;
+ locktime: number;
+ vin: Vin[];
+ vout: any[];
+ size: number;
+ weight: number;
+ fee: number;
+ status: {
+ confirmed: boolean;
+ block_height: number;
+ block_hash: string;
+ block_time: number;
+ };
+}
+
+export function getDocumentValidation(container: HTMLElement) {
+ const state: State = {
+ file: null,
+ fileHash: null,
+ certificate: null,
+ commitmentHashes: []
+ }
+
+ container.innerHTML = '';
+ container.style.cssText = `
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ gap: 2rem;
+ `;
+
+ function createDropButton(
+ label: string,
+ onDrop: (file: File, updateVisuals: (file: File) => void) => void,
+ accept: string = '*/*'
+ ): HTMLElement {
+ const wrapper = document.createElement('div');
+ wrapper.style.cssText = `
+ width: 200px;
+ height: 100px;
+ border: 2px dashed #888;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-weight: bold;
+ background: #f8f8f8;
+ text-align: center;
+ padding: 0.5rem;
+ box-sizing: border-box;
+ `;
+
+ const title = document.createElement('div');
+ title.textContent = label;
+
+ const filename = document.createElement('div');
+ filename.style.cssText = `
+ font-size: 0.85rem;
+ margin-top: 0.5rem;
+ color: #444;
+ word-break: break-word;
+ text-align: center;
+ `;
+
+ wrapper.appendChild(title);
+ wrapper.appendChild(filename);
+
+ const updateVisuals = (file: File) => {
+ wrapper.style.borderColor = 'green';
+ wrapper.style.background = '#e6ffed';
+ filename.textContent = file.name;
+ };
+
+ // === Hidden file input ===
+ const fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ fileInput.accept = accept;
+ fileInput.style.display = 'none';
+ document.body.appendChild(fileInput);
+
+ fileInput.onchange = () => {
+ const file = fileInput.files?.[0];
+ if (file) {
+ onDrop(file, updateVisuals);
+ fileInput.value = ''; // reset so same file can be re-selected
+ }
+ };
+
+ // === Handle drag-and-drop ===
+ wrapper.ondragover = e => {
+ e.preventDefault();
+ wrapper.style.background = '#e0e0e0';
+ };
+
+ wrapper.ondragleave = () => {
+ wrapper.style.background = '#f8f8f8';
+ };
+
+ wrapper.ondrop = e => {
+ e.preventDefault();
+ wrapper.style.background = '#f8f8f8';
+
+ const file = e.dataTransfer?.files?.[0];
+ if (file) {
+ onDrop(file, updateVisuals);
+ }
+ };
+
+ // === Handle click to open file manager ===
+ wrapper.onclick = () => {
+ fileInput.click();
+ };
+
+ return wrapper;
+ }
+
+ const fileDropButton = createDropButton('Drop file', async (file, updateVisuals) => {
+ try {
+ state.file = file;
+ updateVisuals(file);
+ console.log('Loaded file:', state.file);
+ checkReady();
+ } catch (err) {
+ alert('Failed to drop the file.');
+ console.error(err);
+ }
+ });
+
+ const certDropButton = createDropButton('Drop certificate', async (file, updateVisuals) => {
+ try {
+ const text = await file.text();
+ const json = JSON.parse(text);
+ if (
+ typeof json === 'object' &&
+ json !== null &&
+ typeof json.pcd_commitment === 'object' &&
+ typeof json.state_id === 'string'
+ ) {
+ state.certificate = json as ProcessState;
+
+ state.commitmentHashes = Object.values(json.pcd_commitment).map((h: any) =>
+ (h as string).toLowerCase()
+ );
+
+ updateVisuals(file);
+ console.log('Loaded certificate, extracted hashes:', state.commitmentHashes);
+ checkReady();
+ } else {
+ alert('Invalid certificate structure.');
+ }
+ } catch (err) {
+ alert('Failed to parse certificate JSON.');
+ console.error(err);
+ }
+ });
+
+ const buttonRow = document.createElement('div');
+ buttonRow.style.display = 'flex';
+ buttonRow.style.gap = '2rem';
+ buttonRow.appendChild(fileDropButton);
+ buttonRow.appendChild(certDropButton);
+
+ container.appendChild(buttonRow);
+
+ async function checkReady() {
+ if (state.file && state.certificate && state.commitmentHashes.length > 0) {
+ // We take the commited_in and all pcd_commitment keys to reconstruct all the possible hash
+ const fileBlob = {
+ type: state.file.type,
+ data: new Uint8Array(await state.file.arrayBuffer())
+ };
+ const service = await Services.getInstance();
+ const commitedIn = state.certificate.commited_in;
+ if (!commitedIn) return;
+ const [prevTxid, prevTxVout] = commitedIn.split(':');
+ const processId = state.certificate.commited_in;
+ const stateId = state.certificate.state_id;
+ const process = await service.getProcess(processId);
+ if (!process) return;
+
+ // Get the transaction that comes right after the commited_in
+ const nextState = service.getNextStateAfterId(process, stateId);
+
+ if (!nextState) {
+ alert(`❌ Validation failed: No next state, is the state you're trying to validate commited?`);
+ return;
+ }
+
+ const [outspentTxId, _] = nextState.commited_in.split(':');
+ console.log(outspentTxId);
+
+ // Check that the commitment transaction exists, and that it commits to the state id
+
+ const txInfo = await fetchTransaction(outspentTxId);
+ if (!txInfo) {
+ console.error(`Validation error: Can't fetch new state commitment transaction`);
+ alert(`❌ Validation failed: invalid or non existent commited_in for state ${stateId}.`);
+ return;
+ }
+
+ // We must check that this transaction indeed spend the commited_in we have in the certificate
+ let found = false;
+ for (const vin of txInfo.vin) {
+ if (vin.txid === prevTxid) {
+ found = true;
+ break;
+ }
+ }
+
+ if (!found) {
+ console.error(`Validation error: new state doesn't spend previous state commitment transaction`);
+ alert('❌ Validation failed: Unconsistent commitment transactions history.');
+ return;
+ }
+
+ // set found back to false for next check
+ found = false;
+
+ // is the state_id commited in the transaction?
+ for (const vout of txInfo.vout) {
+ console.log(vout);
+ if (vout.scriptpubkey_type && vout.scriptpubkey_type === 'op_return') {
+ found = true;
+ } else {
+ continue;
+ }
+
+ if (vout.scriptpubkey_asm) {
+ const hash = extractHexFromScriptAsm(vout.scriptpubkey_asm);
+ if (hash) {
+ if (hash !== stateId) {
+ console.error(`Validation error: expected stateId ${stateId}, got ${hash}`);
+ alert('❌ Validation failed: Transaction does not commit to that state.');
+ return;
+ }
+ }
+ }
+ }
+
+ if (!found) {
+ alert('❌ Validation failed: Transaction does not contain data.');
+ return;
+ }
+
+ // set found back to false for next check
+ found = false;
+
+ for (const label of Object.keys(state.certificate.pcd_commitment)) {
+ // Compute the hash for this label
+ console.log(`Computing hash with label ${label}`)
+ const fileHex = service.getHashForFile(commitedIn, label, fileBlob);
+ console.log(`Found hash ${fileHex}`);
+ found = state.commitmentHashes.includes(fileHex);
+ if (found) break;
+ }
+
+ if (found) {
+ alert('✅ Validation successful: file hash found in pcd_commitment.');
+ } else {
+ alert('❌ Validation failed: file hash NOT found in pcd_commitment.');
+ }
+ }
+ }
+
+ async function fetchTransaction(txid: string): Promise${decodeURIComponent(pairingId)}
+ Process Creation
`;
+ const privateSec = createKeyValueSection('Private Data', 'private-section');
+ const publicSec = createKeyValueSection('Public Data', 'public-section');
+ const rolesSec = createKeyValueSection('Roles', 'roles-section', true);
+
+ container.appendChild(privateSec.element);
+ container.appendChild(publicSec.element);
+ container.appendChild(rolesSec.element);
+
+ const btn = document.createElement('button');
+ btn.textContent = 'Create Process';
+ btn.style.cssText = `
+ display: block;
+ margin: 2rem auto 0;
+ padding: 0.75rem 2rem;
+ font-size: 1rem;
+ font-weight: bold;
+ background-color: #4f46e5;
+ color: white;
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ `;
+
+ btn.onclick = async () => {
+ const privateData = privateSec.getData();
+ const publicData = publicSec.getData();
+ const roles = rolesSec.getData() as Record
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ window.loadMemberChat = async (memberId: string | number) => {
+ if (typeof memberId === 'string') {
+ return await this.loadMemberChat(memberId);
+ } else {
+ console.error('Invalid memberId type. Expected string, got number.');
+ }
+ };
+
+ document.addEventListener('newDataReceived', async (event: CustomEvent) => {
+ const { detail } = event;
+ console.log('New data event received:', JSON.stringify(detail));
+
+ if (detail.processId && detail.processId === this.selectedChatProcessId) {
+ console.log('Detected update to chat');
+ if (this.selectedMember) {
+ await this.loadMemberChat(this.selectedMember);
+ } else {
+ console.error('No selected member?');
+ }
+ } else {
+ console.log('Received an update for another process');
+ }
+ });
+
+
+ document.addEventListener('DOMContentLoaded', () => {
+ this.notificationBadge = document.querySelector('.notification-badge');
+ this.notificationBoard = document.getElementById('notification-board');
+ this.notificationBell = document.getElementById('notification-bell');
+
+ if (!this.notificationBadge || !this.notificationBoard || !this.notificationBell) {
+ console.error('Notification elements not found');
+ }
+ });
+
+ // Initialiser les événements de notification
+ document.addEventListener('click', (event: Event): void => {
+ if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
+ !this.notificationBoard.contains(event.target as Node) &&
+ this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
+ this.notificationBoard.style.display = 'none';
+ }
+ });
+ this.initMessageEvents();
+
+ }
+
+ private initMessageEvents() {
+ const sendButton = this.shadowRoot?.querySelector('#send-button');
+ if (sendButton) {
+ sendButton.addEventListener('click', async () => {
+ await this.sendMessage();
+ setTimeout(async () => await this.reloadMemberChat(this.selectedMember), 600);
+ messageInput.value = '';
+ });
+ }
+
+ const messageInput = this.shadowRoot?.querySelector('#message-input');
+ if (messageInput) {
+ messageInput.addEventListener('keypress', async (event: Event) => {
+ const keyEvent = event as KeyboardEvent;
+ if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
+ event.preventDefault();
+ await this.sendMessage();
+ setTimeout(async () => await this.reloadMemberChat(this.selectedMember), 600);
+ messageInput.value = '';
+ }
+ });
+ }
+
+ const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement;
+ if (fileInput) {
+ fileInput.addEventListener('change', (event: Event) => {
+ const target = event.target as HTMLInputElement;
+ if (target.files && target.files.length > 0) {
+ this.sendFile(target.files[0]);
+ }
+ });
+ }
+ }
+
+ ///////////////////// Notification module /////////////////////
+ // Delete a notification
+ private removeNotification(index: number) {
+ this.notifications?.splice(index, 1); // Ajout de ?.
+ this.renderNotifications();
+ this.updateNotificationBadge();
+ }
+ // Show notifications
+ private renderNotifications() {
+ if (!this.notificationBoard) return;
+
+ // Reset the interface
+ this.notificationBoard.innerHTML = '';
+
+ // Displays "No notifications available" if there are no notifications
+ if (this.notifications.length === 0) {
+ this.notificationBoard.innerHTML = '
+
+ Signature
+ +
+
+
+
+ Description
+
+
+
+
+ Documents
+ +
+
+ No notifications available
';
+ return;
+ }
+
+ // Add each notification to the list
+ this.notifications.forEach((notif, index) => {
+ const notifElement = document.createElement('div');
+ notifElement.className = 'notification-item';
+ notifElement.textContent = `${notif.text} at ${notif.time}`;
+ notifElement.onclick = async () => {
+ await this.loadMemberChat(notif.memberId);
+ await this.removeNotification(index);
+ };
+ this.notificationBoard?.appendChild(notifElement);
+ });
+ }
+ private updateNotificationBadge() {
+ if (!this.notificationBadge) return;
+ const count = this.notifications.length;
+ this.notificationBadge.textContent = count > 99 ? '+99' : count.toString();
+ (this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
+ }
+
+
+ // Add notification
+ private async addNotification(memberId: string, message: any) {
+ try {
+ // Obtenir l'emoji à partir du Pairing Process
+ const pairingProcess = await this.getPairingProcess(memberId);
+ const memberEmoji = await addressToEmoji(pairingProcess);
+
+ // Obtenir le processus et le rôle
+ const processId = this.getAttribute('process-id');
+ const processEmoji = processId ? await addressToEmoji(processId) : '📝';
+
+ // Trouver le rôle du membre
+ const member = this.allMembers.find(m => String(m.id) === memberId);
+ const role = message.metadata?.roleName || 'Member';
+
+ // Déterminer le texte de la notification
+ let notificationText = '';
+ if (message.type === 'file') {
+ notificationText = `${memberEmoji} (${role}) in ${processEmoji}: New file - ${message.fileName}`;
+ } else {
+ notificationText = `${memberEmoji} (${role}) in ${processEmoji}: ${message.metadata.text}`;
+ }
+
+ // Créer la notification
+ const notification = {
+ memberId,
+ text: notificationText,
+ time: new Date(message.metadata.timestamp).toLocaleString('fr-FR')
+ };
+
+ // Ajouter la notification et mettre à jour l'interface
+ this.notifications.push(notification);
+ this.renderNotifications();
+ this.updateNotificationBadge();
+
+ } catch (error) {
+ console.error('Error creating notification:', error);
+ }
+ }
+
+ private async sendMessage() {
+ const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement;
+ if (!messageInput || !this.selectedMember) {
+ console.error('❌ Missing message input or selected member');
+ return;
+ }
+
+ if (!this.selectedChatProcessId) {
+ console.error('no process id set');
+ return;
+ }
+
+ const messageText = messageInput.value.trim();
+ if (messageText === '') {
+ console.error('❌ Empty message');
+ return;
+ }
+
+ try {
+ const service = await Services.getInstance();
+ const myProcessId = await this.getMyProcessId();
+
+ if (!myProcessId) {
+ console.error('No paired member found');
+ return;
+ }
+
+ const timestamp = Date.now();
+ const message = {
+ state: this.messageState,
+ type: 'text',
+ content: messageText,
+ metadata: {
+ createdAt: timestamp,
+ lastModified: timestamp,
+ sender: myProcessId,
+ recipient: this.selectedMember,
+ }
+ };
+
+ console.log("----this.selectedChatProcessId",this.selectedChatProcessId );
+ const process = await service.getProcess(this.selectedChatProcessId);
+
+ if (!process) {
+ console.error('Failed to retrieve process from DB');
+ return;
+ }
+
+ // For a dm process, there are only 2 attributes, description will stay the same, message is the new message
+ // We don't need to get previous values for now, so let's just skip it
+ let newState = {
+ message: message,
+ description: 'dm'
+ };
+
+ // Now we create a new state for the dm process
+ let apiReturn;
+ try {
+ console.log(process);
+ apiReturn = await service.updateProcess(process, newState, null);
+ } catch (e) {
+ console.error('Failed to update process:', e);
+ return;
+ }
+ const updatedProcess = apiReturn.updated_process.current_process;
+ const newStateId = updatedProcess.states[updatedProcess.states.length - 2 ].state_id; // We take the last concurrent state, just before the tip
+ console.log(`newStateId: ${newStateId}`);
+ await service.handleApiReturn(apiReturn);
+
+ const createPrdReturn = service.createPrdUpdate(this.selectedChatProcessId, newStateId);
+ await service.handleApiReturn(createPrdReturn);
+
+ // Now we validate the new state
+ const approveChangeReturn = await service.approveChange(this.selectedChatProcessId, newStateId);
+ await service.handleApiReturn(approveChangeReturn);
+
+ await this.lookForMyDms();
+
+ const groupList = this.shadowRoot?.querySelector('#group-list');
+ const tabs = this.shadowRoot?.querySelectorAll('.tab');
+ const memberList = groupList?.querySelector('.member-list');
+
+ if (memberList) {
+ memberList.innerHTML = '';
+ await this.loadAllMembers();
+ if (tabs) {
+ await this.switchTab('members', tabs);
+ }
+ }
+ } catch (error) {
+ console.error('❌ Error in sendMessage:', error);
+ }
+ }
+
+ private scrollToBottom(container: Element) {
+ (container as HTMLElement).scrollTop = (container as HTMLElement).scrollHeight;
+ }
+
+ // Get the diff by state id
+ async getDiffByStateId(stateId: string) {
+ try {
+ const database = await Database.getInstance();
+ const diff = await database.requestStoreByIndex('diffs', 'byStateId', stateId);
+ return diff;
+ } catch (error) {
+ console.error('Error getting diff by state id:', error);
+ }
+ }
+
+ // TODO rewrite that
+ // private async lookForChildren(): Promise
+ 
+
+ `;
+ } else {
+ const blob = this.base64ToBlob(message.content.data, message.content.type);
+ const url = URL.createObjectURL(blob);
+ fileContent = `
+
+ `;
+ }
+
+ messageContent.innerHTML = `
+
+
+ `;
+ } else {
+ messageContent.innerHTML = `
+
+
+ `;
+ }
+
+ messageElement.appendChild(messageContent);
+ messagesContainer.appendChild(messageElement);
+ }
+
+ this.scrollToBottom(messagesContainer);
+ } else {
+ console.log('No messages found');
+ }
+ this.scrollToBottom(messagesContainer);
+ } catch (error) {
+ console.error('❌ Error in loadMemberChat:', error);
+ } finally {
+ this.isLoading = false;
+ }
+ }
+
+ private async reloadMemberChat(pairingProcess: string) {
+ try {
+ const service = await Services.getInstance();
+ const database = await Database.getInstance();
+ const db = database.db;
+
+ const chatHeader = this.shadowRoot?.querySelector('#chat-header');
+ const messagesContainer = this.shadowRoot?.querySelector('#messages');
+
+ if (!chatHeader || !messagesContainer) return;
+
+ messagesContainer.innerHTML = '';
+
+ const emojis = await addressToEmoji(pairingProcess);
+
+ const transaction = db.transaction("labels", "readonly");
+ const store = transaction.objectStore("labels");
+ const request = store.get(emojis);
+
+ request.onsuccess = () => {
+ const label = request.result;
+ if (this.selectedMember === pairingProcess) {
+ chatHeader.textContent = label ? `Chat with ${label.label} (${emojis})` : `Chat with member (${emojis})`;
+ }
+
+ };
+
+ request.onerror = () => {
+ chatHeader.textContent = `Chat with member (${emojis})`;
+ };
+
+ let dmProcessId = await this.selectedChatProcessId;
+
+ // Récupérer les messages depuis les états du processus
+ const allMessages: any[] = [];
+
+ const dmProcess = await service.getProcess(dmProcessId);
+
+ console.log(dmProcess);
+
+ if (dmProcess?.states) {
+ for (const state of dmProcess.states) {
+ if (!state.state_id) { continue; }
+ const message = await service.decryptAttribute(dmProcessId, state, 'message');
+ if (message === "" || message === undefined || message === null) {
+ continue;
+ }
+ console.log('message', message);
+ allMessages.push(message);
+ }
+ }
+
+ allMessages.sort((a, b) => a.metadata.createdAt - b.metadata.createdAt);
+ if (allMessages.length > 0) {
+ console.log('Messages found:', allMessages);
+ for (const message of allMessages) {
+ const messageElement = document.createElement('div');
+ messageElement.className = 'message-container';
+
+ const myProcessId = await this.getMyProcessId();
+
+ const isCurrentUser = message.metadata.sender === myProcessId;
+ messageElement.style.justifyContent = isCurrentUser ? 'flex-end' : 'flex-start';
+
+ const messageContent = document.createElement('div');
+ messageContent.className = isCurrentUser ? 'message user' : 'message';
+
+
+
+ const myEmoji = await addressToEmoji(myProcessId);
+ const otherEmoji = await addressToEmoji(this.selectedMember);
+
+ const senderEmoji = isCurrentUser ? myEmoji : otherEmoji;
+
+ if (message.type === 'file') {
+ let fileContent = '';
+ if (message.content.type.startsWith('image/')) {
+ fileContent = `
+
+
+
+ `;
+ } else {
+ const blob = this.base64ToBlob(message.content.data, message.content.type);
+ const url = URL.createObjectURL(blob);
+ fileContent = `
+
+ `;
+ }
+
+ messageContent.innerHTML = `
+
+
+ `;
+ } else {
+ messageContent.innerHTML = `
+
+
+ `;
+ }
+
+ messageElement.appendChild(messageContent);
+ messagesContainer.appendChild(messageElement);
+ }
+
+ this.scrollToBottom(messagesContainer);
+ } else {
+ console.log('No messages found');
+ }
+ this.scrollToBottom(messagesContainer);
+ } catch (error) {
+ console.error('❌ Error in reloadMemberChat:', error);
+ }
+ }
+
+ private base64ToBlob(base64: string, type: string): Blob {
+ const byteCharacters = atob(base64.split(',')[1]);
+ const byteArrays = [];
+
+ for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+ const slice = byteCharacters.slice(offset, offset + 512);
+ const byteNumbers = new Array(slice.length);
+
+ for (let i = 0; i < slice.length; i++) {
+ byteNumbers[i] = slice.charCodeAt(i);
+ }
+
+ const byteArray = new Uint8Array(byteNumbers);
+ byteArrays.push(byteArray);
+ }
+
+ return new Blob(byteArrays, { type: type });
+ }
+
+ //To get a map with key: sp address, value: pairing process
+ async getAddressMap() {
+ const service = await Services.getInstance();
+ const allMembers = await service.getAllMembers();
+
+ const addressMap: Record