From 3d0e95d25df6f327fb089815510091c1feff49d1 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <w.ryan@stelch.com>
Date: Sun, 29 Aug 2021 09:56:20 +1000
Subject: [PATCH 1/2] Add external link warning

---
 src/components/markdown/Renderer.tsx          | 10 ++++++
 src/context/intermediate/Intermediate.tsx     |  1 +
 src/context/intermediate/Modals.tsx           |  3 ++
 .../modals/ExternalLinkPrompt.tsx             | 32 +++++++++++++++++++
 4 files changed, 46 insertions(+)
 create mode 100644 src/context/intermediate/modals/ExternalLinkPrompt.tsx

diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx
index d96ef898..9fe876b4 100644
--- a/src/components/markdown/Renderer.tsx
+++ b/src/components/markdown/Renderer.tsx
@@ -24,6 +24,7 @@ import { generateEmoji } from "../common/Emoji";
 
 import { emojiDictionary } from "../../assets/emojis";
 import { MarkdownProps } from "./Markdown";
+import {useIntermediate} from "../../context/intermediate/Intermediate";
 
 // TODO: global.d.ts file for defining globals
 declare global {
@@ -97,6 +98,8 @@ const RE_CHANNELS = /<#([A-z0-9]{26})>/g;
 
 export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
     const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
+
     if (typeof content === "undefined") return null;
     if (content.length === 0) return null;
 
@@ -198,6 +201,13 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
 
                             if (!internal) {
                                 element.setAttribute("target", "_blank");
+                                element.onclick = (ev) => {
+                                    ev.preventDefault();
+                                    openScreen({
+                                        id: "external_link_prompt",
+                                        link: href
+                                    })
+                                }
                             }
                         },
                     );
diff --git a/src/context/intermediate/Intermediate.tsx b/src/context/intermediate/Intermediate.tsx
index a3d30489..59a3cc1c 100644
--- a/src/context/intermediate/Intermediate.tsx
+++ b/src/context/intermediate/Intermediate.tsx
@@ -24,6 +24,7 @@ export type Screen =
     | { id: "signed_out" }
     | { id: "error"; error: string }
     | { id: "clipboard"; text: string }
+    | { id: "external_link_prompt"; link: string }
     | {
           id: "_prompt";
           question: Children;
diff --git a/src/context/intermediate/Modals.tsx b/src/context/intermediate/Modals.tsx
index fdd3dc6e..8815a16d 100644
--- a/src/context/intermediate/Modals.tsx
+++ b/src/context/intermediate/Modals.tsx
@@ -9,6 +9,7 @@ import { InputModal } from "./modals/Input";
 import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
+import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
 
 export interface Props {
     screen: Screen;
@@ -34,6 +35,8 @@ export default function Modals({ screen, openScreen }: Props) {
             return <ClipboardModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
+        case "external_link_prompt":
+            return <ExternalLinkModal onClose={onClose} {...screen} />;
     }
 
     return null;
diff --git a/src/context/intermediate/modals/ExternalLinkPrompt.tsx b/src/context/intermediate/modals/ExternalLinkPrompt.tsx
new file mode 100644
index 00000000..da73327c
--- /dev/null
+++ b/src/context/intermediate/modals/ExternalLinkPrompt.tsx
@@ -0,0 +1,32 @@
+import { Text } from "preact-i18n";
+
+import Modal from "../../../components/ui/Modal";
+
+interface Props {
+    onClose: () => void;
+    link: string;
+}
+
+export function ExternalLinkModal({ onClose, link }: Props) {
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={<Text id={"app.special.modals.external_links.title"} />}
+            actions={[
+                {
+                    onClick: ()=>{window.open(link, "_blank");},
+                    confirmation: true,
+                    children: "Continue",
+                },
+                {
+                    onClick: onClose,
+                    confirmation: false,
+                    children: "Cancel",
+                },
+            ]}>
+            <Text id={"app.special.modals.external_links.short"} /> <br />
+            <a>{link}</a>
+        </Modal>
+    );
+}

From fe04951bcffa6e6f83bb0c9a0ef2a7bcf9e99c78 Mon Sep 17 00:00:00 2001
From: Ryan Alexander <w.ryan@stelch.com>
Date: Sun, 29 Aug 2021 10:00:23 +1000
Subject: [PATCH 2/2] Make continue button use accent colour

---
 src/context/intermediate/modals/ExternalLinkPrompt.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/context/intermediate/modals/ExternalLinkPrompt.tsx b/src/context/intermediate/modals/ExternalLinkPrompt.tsx
index da73327c..04fecfcf 100644
--- a/src/context/intermediate/modals/ExternalLinkPrompt.tsx
+++ b/src/context/intermediate/modals/ExternalLinkPrompt.tsx
@@ -17,6 +17,8 @@ export function ExternalLinkModal({ onClose, link }: Props) {
                 {
                     onClick: ()=>{window.open(link, "_blank");},
                     confirmation: true,
+                    contrast: true,
+                    accent: true,
                     children: "Continue",
                 },
                 {