bbpro
Version:
BrowserBox - remote browser isolation tool
323 lines (322 loc) • 11.3 kB
HTML
<aside class="modals ${viewState.currentModal ? 'active' : ''}" stylist="styleModals" b:click=${click => _host.closeModal(click)}>
<article role=dialog bond=${el => viewState.ModalRef.alert = el} class="alert ${
viewState?.currentModal?.el === viewState.ModalRef.alert ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/alert-octagon.svg">
Alert
</h1>
</legend>
<p class=message value=message>${msg||'You are alerted.'}</p>
<p>
<button type=reset class=ok title="OK, I got it." value=ok>Got it.</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.confirm = el} class="confirm ${
viewState?.currentModal?.el === viewState.ModalRef.confirm ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/help-circle.svg">
Confirm
</h1>
</legend>
<p class=message value=message>${msg||'You are asked to confirm'}</p>
<p>
<button type=reset class=cancel title="Deny" value=cancel>Deny</button>
<button type=submit class=ok title="Confirm" value=ok>Confirm</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.prompt = el} class="prompt ${
viewState?.currentModal?.el === viewState.ModalRef.prompt ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/pencil.svg">
Prompt
</h1>
</legend>
<p class=message value=message><label for=prompt-response>${msg||'You are prompted for information:'}</label></p>
<p>
<input id=prompt-response type=text name=response>
</p>
<p>
<button type=reset class=cancel title="Dismiss" value=cancel>Dismiss</button>
<button type=submit class=ok title="Send" value=ok>Send</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.paste = el} class="paste ${
viewState?.currentModal?.el === viewState.ModalRef.paste ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/clipboard.svg">
Paste into Page
</h1>
</legend>
<p class=message value=message><label for=paste-response>${msg||'Enter information to paste'}</label></p>
<p>
<textarea id=paste-response name=response maxlen=32000 autofocus></textarea>
</p>
<p>
<button type=reset class=cancel title="Dismiss" value=cancel>Dismiss</button>
<button type=submit click=${click => _host.sendPaste(click, state)}>Paste</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.beforeunload = el} class="beforeunload ${
viewState?.currentModal?.el === viewState.ModalRef.beforeunload ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/log-out.svg">
Reload Site?
</h1>
<i>
Your changes may not be saved. The page unloading asks
</i>
</legend>
<p class=message value=message>${msg||'Are you sure you wish to leave?'}</p>
<p>
<button type=reset class=cancel title="Remain" value=cancel>Remain</button>
<button type=submit class=ok title="Leave" value=ok>Leave</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.infobox = el} class="infobox ${
viewState?.currentModal?.el === viewState.ModalRef.infobox ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/info.svg">
${title || 'Info'}
</h1>
</legend>
<p>
<textarea readonly class=message value=message rows=${Math.ceil(msg.length/25)+1}
>${msg}</textarea>
</p>
<p>
<button type=submit class=ok title="Got it" value=ok>Dismiss</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.notice = el} class="notice ${
viewState?.currentModal?.el === viewState.ModalRef.notice ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/bell.svg">
${title || 'Notice'}
</h1>
</legend>
<p>
<p class=message value=message>${msg||'Empty notice'}</p>
<p>
${link ?
F`<a title="${link.title}" target=${link.target} href=${link.href}>${link.title}</a>`
:
F`<!-- link -->`
}
<button type=submit class=ok title=Acknowledge value=ok>OK</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.copy = el} class="copy ${
viewState?.currentModal?.el === viewState.ModalRef.copy ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/bell.svg">
<span onbond=${el => _host.copyBoxTitle = el} class=title>${state.title || 'Copy'}</span>
</h1>
</legend>
<p>
<textarea cols=80 rows=5 onbond=${(el) => {
_host.copyBoxTextarea = el;
}} readonly class=message value=message>${msg||'No text to copy'}</textarea>
<p>
${link ?
F`<a title="${link.title}" target=${link.target} href=${link.href}>${link.title}</a>`
:
F`<!-- link -->`
}
${otherButton ?
Fskip(otherButton)
:
F`<!-- other button -->`
}
<button type=submit class=ok title=Acknowledge value=ok>OK</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.auth = el} class="auth ${
viewState?.currentModal?.el === viewState.ModalRef.auth ? 'open' : ''
}">
<form method=dialog>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/shield-alert.svg">
${title || 'Authentication'}
</h1>
<i>${msg||''}</i>
</legend>
<input type=hidden name=requestid value=${requestId}>
<p>
<input type=text
autocomplete=username
name=username placeholder=username maxlength=140>
<p>
<input type=password
autocomplete=current-password
name=password placeholder=password maxlength=140>
<p>
<button type=reset value=cancel click=${click => _host.respondWithCancel(click, state)}>Cancel</button>
<button type=submit value=ok click=${click => _host.respondWithAuth(click, state)}>Submit</button>
</p>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.filechooser = el} class="filechooser ${
viewState?.currentModal?.el === viewState.ModalRef.filechooser ? 'open' : ''
}">
<form method=POST action=/file enctype=multipart/form-data>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/folder-up.svg">
${title || 'File Upload'}
</h1>
<i>${msg||''}</i>
</legend>
<input type=hidden name=sessionid value=${sessionId}>
<input type=hidden name=_csrf value=${csrfToken}>
<p>
<label>
Select ${multiple?'one or more files':'one file'}.
<input type=file name=files ${multiple?'multiple':''} accept="${accept}">
</label>
<p>
<button
type=reset
value=cancel
${working?'disabled':''}
click=${click => _host.cancelFileChooser(click)}
>${cancelText}</button>
<button
type=submit
value=ok
${working?'disabled':''}
click=${click => _host.chooseFile(click)}
>${submitText}</button>
</fieldset>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.intentPrompt = el} class="intent-prompt ${
viewState?.currentModal?.el === viewState.ModalRef.intentPrompt ? 'open' : ''
}">
<form method=GET action="${url}" target=_top submit=${submission => {
submission.preventDefault();
const target = CONFIG.useBlankWindowForProtocolLaunch ?
window.top.open("about:blank")
:
window.top
;
const url = submission.target.action;
DEBUG.debugIntentPrompts && console.log("intent prompt", {target, url});
setTimeout(() => {
window._voodoo_noUnloadDelay = true;
target.location.href = url;
setTimeout(() => window._voodoo_noUnloadDelay = false, 300);
DEBUG.debugIntentPrompts && console.log(target.location);
}, 300);
}}>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/external-link.svg">
${title || 'Open app'}
</h1>
</legend>
<p class=message value=message>${
`This page is asking to open an external app using URL: ${
url.slice(0,140) + (url.length > 140 ? '...' : '')
}`
}</p>
<p>
<button type=reset value=cancel>Stop it</button>
<button type=submit value=ok>Open external app</button>
</p>
</form>
</article>
<article role=dialog bond=${el => viewState.ModalRef.settings = el} class="settings ${
viewState?.currentModal?.el === viewState.ModalRef.settings ? 'open' : ''
}">
<form method=GET action="${url}" target=_top submit=${submission => {
submission.preventDefault();
alert("Save settings");
}}>
<fieldset>
<legend>
<h1>
<img src="voodoo/assets/icons/cog.svg">
BrowserBox Pro Settings
</h1>
</legend>
<p>
<label>
<span class=legend
>Show audio status</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
<p>
<label>
<span class=legend
>Show WebRTC status</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</label>
<p>
<button type=reset value=cancel click=${() => confirm("Sure?")}>Reset to defaults</button>
<button type=submit value=ok>Save</button>
</p>
</form>
${viewState?.currentModal?.el === viewState.ModalRef.settings ?
Fskip(await fetch('/settings_modal').then(r => r.text())) : F`<!-- settings modal spot -->`
}
</article>
</aside>