@@ -411,19 +411,36 @@ function showErrorModal(title, description) {
411411 const modal = document . createElement ( 'div' ) ;
412412 modal . className = 'security-modal error' ;
413413
414- modal . innerHTML = `
415- <div class="security-modal-content">
416- <h3>${ title } </h3>
417- <div class="error-description">${ description } </div>
418- <div class="button-row">
419- <button id="dismiss" class="dismiss-btn">Acknowledge</button>
420- </div>
421- <div class="status-bar"></div>
422- </div>
423- ` ;
414+ const content = document . createElement ( 'div' ) ;
415+ content . className = 'security-modal-content' ;
416+
417+ const h3 = document . createElement ( 'h3' ) ;
418+ h3 . textContent = title ;
419+ content . appendChild ( h3 ) ;
420+
421+ const desc = document . createElement ( 'div' ) ;
422+ desc . className = 'error-description' ;
423+ desc . textContent = description ;
424+ content . appendChild ( desc ) ;
425+
426+ const buttonRow = document . createElement ( 'div' ) ;
427+ buttonRow . className = 'button-row' ;
428+
429+ const dismissBtn = document . createElement ( 'button' ) ;
430+ dismissBtn . id = 'dismiss' ;
431+ dismissBtn . className = 'dismiss-btn' ;
432+ dismissBtn . textContent = 'Acknowledge' ;
433+ buttonRow . appendChild ( dismissBtn ) ;
434+ content . appendChild ( buttonRow ) ;
435+
436+ const statusBar = document . createElement ( 'div' ) ;
437+ statusBar . className = 'status-bar' ;
438+ content . appendChild ( statusBar ) ;
439+
440+ modal . appendChild ( content ) ;
424441
425442 document . body . appendChild ( modal ) ;
426- modal . querySelector ( '#dismiss' ) . focus ( ) ;
443+ dismissBtn . focus ( ) ;
427444
428445 const handleKeydown = ( e ) => {
429446 if ( e . key === 'Enter' || e . key === 'Escape' ) {
@@ -440,7 +457,7 @@ function showErrorModal(title, description) {
440457 resolve ( ) ;
441458 } ;
442459
443- modal . querySelector ( '#dismiss' ) . onclick = cleanup ;
460+ dismissBtn . onclick = cleanup ;
444461
445462 modal . onclick = ( e ) => {
446463 if ( e . target === modal ) {
@@ -459,25 +476,65 @@ function showReconnectionModal(attemptNumber, delaySeconds) {
459476 modal . style . background = 'rgba(28, 28, 28, 0.85)' ; // More transparent to show terminal
460477
461478 const isFirstAttempt = attemptNumber === 1 ;
462- const title = isFirstAttempt ? 'Connection Lost' : 'Reconnection Failed' ;
463- const message = isFirstAttempt
464- ? `Reconnecting in <span id="countdown">${ delaySeconds } </span> second${ delaySeconds > 1 ? 's' : '' } ...`
465- : `Retrying in <span id="countdown">${ delaySeconds } </span> second${ delaySeconds > 1 ? 's' : '' } ... (Attempt ${ attemptNumber } )` ;
466-
467- modal . innerHTML = `
468- <div class="security-modal-content">
469- <h3 id="modal-title">${ title } </h3>
470- <div class="error-description" id="modal-message">${ message } </div>
471- <div class="button-row" id="button-row">
472- <button id="cancel" class="cancel-btn">Cancel</button>
473- <button id="reconnect" class="submit-btn">Reconnect Now</button>
474- </div>
475- <div class="status-bar"></div>
476- </div>
477- ` ;
479+ const titleText = isFirstAttempt ? 'Connection Lost' : 'Reconnection Failed' ;
480+
481+ const contentDiv = document . createElement ( 'div' ) ;
482+ contentDiv . className = 'security-modal-content' ;
483+
484+ const titleEl = document . createElement ( 'h3' ) ;
485+ titleEl . id = 'modal-title' ;
486+ titleEl . textContent = titleText ;
487+ contentDiv . appendChild ( titleEl ) ;
488+
489+ const messageEl = document . createElement ( 'div' ) ;
490+ messageEl . className = 'error-description' ;
491+ messageEl . id = 'modal-message' ;
492+
493+ if ( isFirstAttempt ) {
494+ messageEl . appendChild ( document . createTextNode ( 'Reconnecting in ' ) ) ;
495+ const countdown = document . createElement ( 'span' ) ;
496+ countdown . id = 'countdown' ;
497+ countdown . textContent = delaySeconds ;
498+ messageEl . appendChild ( countdown ) ;
499+ messageEl . appendChild ( document . createTextNode ( delaySeconds > 1 ? ' seconds...' : ' second...' ) ) ;
500+ } else {
501+ messageEl . appendChild ( document . createTextNode ( 'Retrying in ' ) ) ;
502+ const countdown = document . createElement ( 'span' ) ;
503+ countdown . id = 'countdown' ;
504+ countdown . textContent = delaySeconds ;
505+ messageEl . appendChild ( countdown ) ;
506+ messageEl . appendChild ( document . createTextNode (
507+ ( delaySeconds > 1 ? ' seconds' : ' second' ) + '... (Attempt ' + attemptNumber + ')'
508+ ) ) ;
509+ }
510+ contentDiv . appendChild ( messageEl ) ;
511+
512+ const buttonRowEl = document . createElement ( 'div' ) ;
513+ buttonRowEl . className = 'button-row' ;
514+ buttonRowEl . id = 'button-row' ;
515+
516+ const cancelBtn = document . createElement ( 'button' ) ;
517+ cancelBtn . id = 'cancel' ;
518+ cancelBtn . className = 'cancel-btn' ;
519+ cancelBtn . textContent = 'Cancel' ;
520+ buttonRowEl . appendChild ( cancelBtn ) ;
521+
522+ const reconnectBtn = document . createElement ( 'button' ) ;
523+ reconnectBtn . id = 'reconnect' ;
524+ reconnectBtn . className = 'submit-btn' ;
525+ reconnectBtn . textContent = 'Reconnect Now' ;
526+ buttonRowEl . appendChild ( reconnectBtn ) ;
527+
528+ contentDiv . appendChild ( buttonRowEl ) ;
529+
530+ const statusBarEl = document . createElement ( 'div' ) ;
531+ statusBarEl . className = 'status-bar' ;
532+ contentDiv . appendChild ( statusBarEl ) ;
533+
534+ modal . appendChild ( contentDiv ) ;
478535
479536 document . body . appendChild ( modal ) ;
480- modal . querySelector ( '#reconnect' ) . focus ( ) ;
537+ reconnectBtn . focus ( ) ;
481538
482539 let countdownInterval ;
483540 let remainingSeconds = delaySeconds ;
@@ -503,7 +560,7 @@ function showReconnectionModal(attemptNumber, delaySeconds) {
503560 }
504561
505562 const messageElement = modal . querySelector ( '#modal-message' ) ;
506- messageElement . innerHTML = 'Connecting...' ;
563+ messageElement . textContent = 'Connecting...' ;
507564 } ;
508565
509566 countdownInterval = setInterval ( updateCountdown , 1000 ) ;
0 commit comments