4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Add an account creation modal

Browse Source
This commit is contained in:
NicolasCantu 2025-03-07 16:44:11 +01:00
parent 4d0c3e3f56
commit 4ff2965b49
2 changed files with 48 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/modal/creation-modal.html Normal file
View File

@ -0,0 +1,14 @@
<div id="creation-modal" class="modal">
<div class="modal-content">
<div class="modal-title">Login</div>
<div class="message">
Do you want to create a 4NK member?<br />
Attempting to create a member with address <br />
<strong>{{device1}}</strong> <br />
</div>
<div class="confirmation-box">
<a class="btn confirmation-btn" onclick="confirm()">Confirm</a>
<a class="btn refusal-btn" onclick="closeConfirmationModal()">Refuse</a>
</div>
</div>
</div>

50
src/services/modal.service.ts
View File

@ -14,6 +14,7 @@ export default class ModalService {
private processId: string | null = null; private processId: string | null = null;
private constructor() {} private constructor() {}
private paired_addresses: string[] = []; private paired_addresses: string[] = [];
private modal: HTMLElement | null = null;
// Method to access the singleton instance of Services // Method to access the singleton instance of Services
public static async getInstance(): Promise<ModalService> { public static async getInstance(): Promise<ModalService> {
@ -54,6 +55,21 @@ export default class ModalService {
} }
} }
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 // Device 1 wait Device 2
async injectWaitingModal() { async injectWaitingModal() {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
@ -106,6 +122,7 @@ export default class ModalService {
throw new Error('Must have exactly 1 member'); throw new Error('Must have exactly 1 member');
} }
console.log("MEMBERS:", members);
// We take all the addresses except our own // We take all the addresses except our own
const service = await Services.getInstance(); const service = await Services.getInstance();
const localAddress = await service.getDeviceAddress(); const localAddress = await service.getDeviceAddress();
@ -118,20 +135,24 @@ export default class ModalService {
} }
this.processId = processId; this.processId = processId;
this.stateId = stateId; this.stateId = stateId;
await this.injectModal(members);
const modal = document.getElementById('modal');
if (modal) modal.style.display = 'flex';
// const newScript = document.createElement('script');
// newScript.setAttribute('type', 'module');
// newScript.textContent = confirmationModalScript;
// document.head.appendChild(newScript).parentNode?.removeChild(newScript);
// Add correct text
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 // Close modal when clicking outside of it
window.onclick = (event) => { window.onclick = (event) => {
const modal = document.getElementById('modal'); if (event.target === this.modal) {
if (event.target === modal) {
this.closeConfirmationModal(); this.closeConfirmationModal();
} }
}; };
@ -140,14 +161,12 @@ export default class ModalService {
console.log('=============> Confirm Login'); console.log('=============> Confirm Login');
} }
async closeLoginModal() { async closeLoginModal() {
const modal = document.getElementById('login-modal'); if (this.modal) this.modal.style.display = 'none';
if (modal) modal.style.display = 'none';
} }
async confirmPairing() { async confirmPairing() {
const service = await Services.getInstance(); const service = await Services.getInstance();
const modal = document.getElementById('modal'); if (this.modal) this.modal.style.display = 'none';
if (modal) modal.style.display = 'none';
if (service.device1) { if (service.device1) {
console.log("Device 1 detected"); console.log("Device 1 detected");
@ -236,7 +255,6 @@ export default class ModalService {
async closeConfirmationModal() { async closeConfirmationModal() {
const service = await Services.getInstance(); const service = await Services.getInstance();
await service.unpairDevice(); await service.unpairDevice();
const modal = document.getElementById('modal'); if (this.modal) this.modal.style.display = 'none';
if (modal) modal.style.display = 'none';
} }
} }