https://impro.social/js/modals/externalLinkWarning.modal.7e3df58337.js

1import { html } from "/js/lib/lit-html.js";
2import { Modal } from "/js/modals/modal.js";
3
4export class ExternalLinkWarningModal extends Modal {
5  get className() {
6    return "bottom-sheet text-modal external-link-warning-modal";
7  }
8
9  render({ dismiss, props: { href } }) {
10    const url = new URL(href);
11    return html`
12      <div class="modal-dialog-content">
13        <h2
14          class="modal-dialog-title"
15          data-testid="external-link-warning-title"
16        >
17          Leave this app?
18        </h2>
19        <p
20          class="modal-dialog-message"
21          data-testid="external-link-warning-message"
22        >
23          This link will take you to:
24        </p>
25        <a
26          class="external-link-warning-href"
27          href=${href}
28          target="_blank"
29          rel="noopener noreferrer"
30          data-testid="external-link-warning-href"
31          @click=${(event) => {
32            event.stopPropagation();
33            dismiss(true);
34          }}
35        >
36          <span class="external-link-warning-host">${url.host}</span
37          ><span class="external-link-warning-path"
38            >${url.pathname}${url.search}${url.hash}</span
39          >
40        </a>
41        <div class="modal-dialog-buttons">
42          <button
43            class="modal-dialog-button cancel-button"
44            data-testid="external-link-warning-cancel-button"
45            @click=${() => dismiss(false)}
46          >
47            Cancel
48          </button>
49          <button
50            class="modal-dialog-button confirm-button primary-button"
51            data-testid="external-link-warning-visit-button"
52            @click=${() => {
53              window.open(href, "_blank", "noopener,noreferrer");
54              dismiss(true);
55            }}
56          >
57            Visit site
58          </button>
59        </div>
60      </div>
61    `;
62  }
63}