261 lines
9.2 KiB
TypeScript
Executable File
261 lines
9.2 KiB
TypeScript
Executable File
import modalHtml from '../components/login-modal/login-modal.html?raw';
|
|
import modalScript from '../components/login-modal/login-modal.js?raw';
|
|
import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
|
|
import Services from './service';
|
|
import { init, navigate } from '../router';
|
|
import { addressToEmoji } from '../utils/sp-address.utils';
|
|
import { RoleDefinition } from 'pkg/sdk_client';
|
|
import { initValidationModal } from '~/components/validation-modal/validation-modal';
|
|
import { interpolate } from '~/utils/html.utils';
|
|
|
|
export default class ModalService {
|
|
private static instance: ModalService;
|
|
private stateId: string | null = null;
|
|
private processId: string | null = null;
|
|
private constructor() {}
|
|
private paired_addresses: string[] = [];
|
|
private modal: HTMLElement | null = null;
|
|
|
|
// Method to access the singleton instance of Services
|
|
public static async getInstance(): Promise<ModalService> {
|
|
if (!ModalService.instance) {
|
|
ModalService.instance = new ModalService();
|
|
}
|
|
return ModalService.instance;
|
|
}
|
|
|
|
public openLoginModal(myAddress: string, receiverAddress: string) {
|
|
const container = document.querySelector('.page-container');
|
|
let html = modalHtml;
|
|
html = html.replace('{{device1}}', myAddress);
|
|
html = html.replace('{{device2}}', receiverAddress);
|
|
if (container) container.innerHTML += html;
|
|
const modal = document.getElementById('login-modal');
|
|
if (modal) modal.style.display = 'flex';
|
|
const newScript = document.createElement('script');
|
|
|
|
newScript.setAttribute('type', 'module');
|
|
newScript.textContent = modalScript;
|
|
document.head.appendChild(newScript).parentNode?.removeChild(newScript);
|
|
}
|
|
|
|
async injectModal(members: any[]) {
|
|
const container = document.querySelector('#containerId');
|
|
if (container) {
|
|
let html = await fetch('/src/components/modal/confirmation-modal.html').then((res) => res.text());
|
|
html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
|
|
html = html.replace('{{device2}}', await addressToEmoji(members[0]['sp_addresses'][1]));
|
|
container.innerHTML += html;
|
|
|
|
// Dynamically load the header JS
|
|
const script = document.createElement('script');
|
|
script.src = '/src/components/modal/confirmation-modal.ts';
|
|
script.type = 'module';
|
|
document.head.appendChild(script);
|
|
}
|
|
}
|
|
|
|
async injectCreationModal(members: any[]) {
|
|
const container = document.querySelector('#containerId');
|
|
if (container) {
|
|
let html = await fetch('/src/components/modal/creation-modal.html').then((res) => res.text());
|
|
html = html.replace('{{device1}}', await addressToEmoji(members[0]['sp_addresses'][0]));
|
|
container.innerHTML += html;
|
|
|
|
// Dynamically load the header JS
|
|
const script = document.createElement('script');
|
|
script.src = '/src/components/modal/confirmation-modal.ts';
|
|
script.type = 'module';
|
|
document.head.appendChild(script);
|
|
}
|
|
}
|
|
|
|
// Device 1 wait Device 2
|
|
async injectWaitingModal() {
|
|
const container = document.querySelector('#containerId');
|
|
if (container) {
|
|
let html = await fetch('/src/components/modal/waiting-modal.html').then((res) => res.text());
|
|
container.innerHTML += html;
|
|
}
|
|
}
|
|
|
|
async injectValidationModal(processDiff: any) {
|
|
const container = document.querySelector('#containerId');
|
|
if (container) {
|
|
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
|
|
html = interpolate(html, {processId: processDiff.processId})
|
|
container.innerHTML += html;
|
|
|
|
// Dynamically load the header JS
|
|
const script = document.createElement('script');
|
|
script.id = 'validation-modal-script';
|
|
script.src = '/src/components/validation-modal/validation-modal.ts';
|
|
script.type = 'module';
|
|
document.head.appendChild(script);
|
|
const css = document.createElement('style');
|
|
css.id = 'validation-modal-css';
|
|
css.innerText = validationModalStyle;
|
|
document.head.appendChild(css);
|
|
initValidationModal(processDiff)
|
|
}
|
|
}
|
|
|
|
async closeValidationModal() {
|
|
const script = document.querySelector('#validation-modal-script');
|
|
const css = document.querySelector('#validation-modal-css');
|
|
const component = document.querySelector('#validation-modal');
|
|
script?.remove();
|
|
css?.remove();
|
|
component?.remove();
|
|
}
|
|
|
|
public async openPairingConfirmationModal(roleDefinition: Record<string, RoleDefinition>, processId: string, stateId: string) {
|
|
let members;
|
|
if (roleDefinition['pairing']) {
|
|
const owner = roleDefinition['pairing'];
|
|
members = owner.members;
|
|
} else {
|
|
throw new Error('No "pairing" role');
|
|
}
|
|
|
|
if (members.length != 1) {
|
|
throw new Error('Must have exactly 1 member');
|
|
}
|
|
|
|
console.log("MEMBERS:", members);
|
|
// We take all the addresses except our own
|
|
const service = await Services.getInstance();
|
|
const localAddress = await service.getDeviceAddress();
|
|
for (const member of members) {
|
|
for (const address of member['sp_addresses']) {
|
|
if (address !== localAddress) {
|
|
this.paired_addresses.push(address);
|
|
}
|
|
}
|
|
}
|
|
this.processId = processId;
|
|
this.stateId = stateId;
|
|
|
|
|
|
if (members.sp_addresses.length === 1) {
|
|
await this.injectCreationModal(members);
|
|
this.modal = document.getElementById('creation-modal');
|
|
console.log("LENGTH:", members.sp_addresses.length);
|
|
} else {
|
|
await this.injectModal(members);
|
|
this.modal = document.getElementById('modal');
|
|
console.log("LENGTH:", members.sp_addresses.length);
|
|
}
|
|
|
|
|
|
if (this.modal) this.modal.style.display = 'flex';
|
|
|
|
// Close modal when clicking outside of it
|
|
window.onclick = (event) => {
|
|
if (event.target === this.modal) {
|
|
this.closeConfirmationModal();
|
|
}
|
|
};
|
|
}
|
|
confirmLogin() {
|
|
console.log('=============> Confirm Login');
|
|
}
|
|
async closeLoginModal() {
|
|
if (this.modal) this.modal.style.display = 'none';
|
|
}
|
|
|
|
async confirmPairing() {
|
|
const service = await Services.getInstance();
|
|
if (this.modal) this.modal.style.display = 'none';
|
|
|
|
if (service.device1) {
|
|
console.log("Device 1 detected");
|
|
// We send the prd update
|
|
if (this.stateId && this.processId) {
|
|
try {
|
|
// Device B shouldn't do this again
|
|
const createPrdUpdateReturn = service.createPrdUpdate(this.processId, this.stateId);
|
|
await service.handleApiReturn(createPrdUpdateReturn);
|
|
} catch (e) {
|
|
throw e;
|
|
}
|
|
} else {
|
|
throw new Error('No currentPcdCommitment');
|
|
}
|
|
|
|
// We send confirmation that we validate the change
|
|
try {
|
|
const approveChangeReturn = service.approveChange(this.processId!, this.stateId!);
|
|
await service.handleApiReturn(approveChangeReturn);
|
|
|
|
await this.injectWaitingModal();
|
|
const waitingModal = document.getElementById('waiting-modal');
|
|
if (waitingModal) waitingModal.style.display = 'flex';
|
|
|
|
if (!service.device2Ready) {
|
|
while (!service.device2Ready) {
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
}
|
|
console.log("Device 2 is ready - Device 1 can now proceed");
|
|
}
|
|
service.pairDevice(this.paired_addresses, this.processId);
|
|
this.paired_addresses = [];
|
|
this.processId = null;
|
|
this.stateId = null;
|
|
const newDevice = service.dumpDeviceFromMemory();
|
|
console.log(newDevice);
|
|
await service.saveDeviceInDatabase(newDevice);
|
|
navigate('chat');
|
|
service.resetState();
|
|
|
|
} catch (e) {
|
|
throw e;
|
|
}
|
|
|
|
// try {
|
|
// service.pairDevice(this.paired_addresses);
|
|
// } catch (e) {
|
|
// throw e;
|
|
// }
|
|
} else {
|
|
console.log("Device 2 detected");
|
|
|
|
// if (this.stateId && this.processId) {
|
|
// try {
|
|
// // Device B shouldn't do this again
|
|
// const createPrdUpdateReturn = service.createPrdUpdate(this.processId, this.stateId);
|
|
// await service.handleApiReturn(createPrdUpdateReturn);
|
|
// } catch (e) {
|
|
// throw e;
|
|
// }
|
|
// } else {
|
|
// throw new Error('No currentPcdCommitment');
|
|
// }
|
|
|
|
// We send confirmation that we validate the change
|
|
try {
|
|
const approveChangeReturn = service.approveChange(this.processId!, this.stateId!);
|
|
await service.handleApiReturn(approveChangeReturn);
|
|
} catch (e) {
|
|
throw e;
|
|
}
|
|
|
|
service.pairDevice(this.paired_addresses, this.processId!);
|
|
|
|
this.paired_addresses = [];
|
|
this.processId = null;
|
|
this.stateId = null;
|
|
const newDevice = service.dumpDeviceFromMemory();
|
|
console.log(newDevice);
|
|
await service.saveDeviceInDatabase(newDevice);
|
|
navigate('chat');
|
|
}
|
|
}
|
|
|
|
async closeConfirmationModal() {
|
|
const service = await Services.getInstance();
|
|
await service.unpairDevice();
|
|
if (this.modal) this.modal.style.display = 'none';
|
|
}
|
|
}
|