From f336a50870ce99877a87e1d6a8ca9c9859c10c47 Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@mcgalaxy.de>
Date: Sat, 25 May 2019 17:54:26 +0200
Subject: [PATCH] Added a invite buddy dialog

---
 shared/css/static/modal-invite.scss | 37 +++++++++++++++++++
 shared/html/templates.html          | 32 +++++++++++++++++
 shared/js/load.ts                   |  2 ++
 shared/js/main.ts                   |  1 +
 shared/js/ui/modal/ModalInvite.ts   | 55 +++++++++++++++++++++++++++++
 shared/js/ui/server.ts              |  9 +----
 shared/js/utils/helpers.ts          |  1 +
 7 files changed, 129 insertions(+), 8 deletions(-)
 create mode 100644 shared/css/static/modal-invite.scss
 create mode 100644 shared/js/ui/modal/ModalInvite.ts

diff --git a/shared/css/static/modal-invite.scss b/shared/css/static/modal-invite.scss
new file mode 100644
index 00000000..e88560a7
--- /dev/null
+++ b/shared/css/static/modal-invite.scss
@@ -0,0 +1,37 @@
+.modal-invite {
+	user-select: none;
+	
+	.general-properties {
+		display: flex;
+		flex-direction: row;
+		justify-content: stretch;
+
+		> .form-group:first-of-type {
+			flex-grow: 1;
+			margin-right: 5px;
+		}
+	}
+
+	.text-output {
+		border-radius: 2px;
+		padding: 5px;
+		background: #00000012;
+		min-height: 120px;
+
+		width: 100%;
+		resize: none;
+	}
+
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		margin-top: 5px;
+
+		.icon {
+			vertical-align: middle;
+			margin-right: 5px;
+		}
+	}
+}
\ No newline at end of file
diff --git a/shared/html/templates.html b/shared/html/templates.html
index 4bdaac3f..a7253e22 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -2595,6 +2595,38 @@
                 <button class="button-close">{{tr "Close" /}}</button>
             </div>
         </script>
+        <script class="jsrender-template" id="tmpl_invite" type="text/html">
+            <div class="modal-invite">
+                <div class="general-properties">
+                    <div class="form-group property-type">
+                        <label>{{tr "Link type:" /}}</label>
+                        <select class="form-control">
+                            <option value="0">{{tr "TeaWeb" /}}</option>
+                            <option value="1" disabled>{{tr "TeaClient (Not supported yet)" /}}</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <div class="switch flag-direct-connect">
+                            <label>
+                                <input type="checkbox">
+                                {{tr "Connect directly" /}}
+                            </label>
+                        </div>
+                        <div class="switch flag-resolved-address">
+                            <label>
+                                <input type="checkbox">
+                                {{tr "Use resolved address" /}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <textarea class="text-output" readonly></textarea>
+                <div class="buttons">
+                    <button class="btn btn-primary button-copy"><div class="icon client-copy"></div>{{tr "Copy" /}}</button>
+                    <button class="btn btn-primary button-close">{{tr "Close" /}}</button>
+                </div>
+            </div>
+        </script>
 
         <script class="jsrender-template" id="tmpl_query_create" type="text/html">
             <div class="query-create">
diff --git a/shared/js/load.ts b/shared/js/load.ts
index 7dea73c8..41a59551 100644
--- a/shared/js/load.ts
+++ b/shared/js/load.ts
@@ -568,6 +568,7 @@ const loader_javascript = {
             "js/ui/modal/ModalChangeVolume.js",
             "js/ui/modal/ModalBanClient.js",
             "js/ui/modal/ModalIconSelect.js",
+            "js/ui/modal/ModalInvite.js",
             "js/ui/modal/ModalBanCreate.js",
             "js/ui/modal/ModalBanList.js",
             "js/ui/modal/ModalYesNo.js",
@@ -711,6 +712,7 @@ const loader_style = {
             "css/static/modal-connect.css",
             "css/static/modal-channel.css",
             "css/static/modal-query.css",
+            "css/static/modal-invite.css",
             "css/static/modal-playlist.css",
             "css/static/modal-banlist.css",
             "css/static/modal-bancreate.css",
diff --git a/shared/js/main.ts b/shared/js/main.ts
index 86ec931c..25ff4071 100644
--- a/shared/js/main.ts
+++ b/shared/js/main.ts
@@ -326,6 +326,7 @@ function main() {
                 password: password,
                 hashed: password_hashed
             } : undefined);
+            Modals.spawnInviteEditor(connection);
         } else {
             Modals.spawnConnectModal({
                 url: address,
diff --git a/shared/js/ui/modal/ModalInvite.ts b/shared/js/ui/modal/ModalInvite.ts
new file mode 100644
index 00000000..ba78c038
--- /dev/null
+++ b/shared/js/ui/modal/ModalInvite.ts
@@ -0,0 +1,55 @@
+/// <reference path="../../ui/elements/modal.ts" />
+/// <reference path="../../ConnectionHandler.ts" />
+/// <reference path="../../proto.ts" />
+
+namespace Modals {
+    export function spawnInviteEditor(connection: ConnectionHandler) {
+        let modal: Modal;
+        modal = createModal({
+            header: tr("Invalid URL creator"),
+            body: () => {
+                let template = $("#tmpl_invite").renderTag();
+
+                template.find(".button-close").on('click', event => modal.close());
+                return template;
+            },
+            footer: undefined
+        });
+
+        const container_url = modal.htmlTag.find(".text-output");
+        const button_copy = modal.htmlTag.find(".button-copy");
+        button_copy.on('click', event => {
+            container_url.select();
+            document.execCommand('copy');
+        });
+
+        let flag_direct_connect = true;
+        let flag_resolved_address = false;
+        const update_link = () => {
+            const address = flag_resolved_address ? this.channelTree.client.serverConnection.remote_address() : connection.channelTree.server.remote_address;
+            const parameter = "connect_default=" + (flag_direct_connect ? 1 : 0) + "&connect_address=" + encodeURIComponent(address.host + (address.port === 9987 ? "" : address.port));
+            const url =  document.location.origin +  document.location.pathname + "?" + parameter;
+            container_url.text(url);
+        };
+
+        {
+            const input_direct_connect = modal.htmlTag.find(".flag-direct-connect input") as JQuery<HTMLInputElement>;
+            input_direct_connect.on('change', event => {
+                flag_direct_connect = input_direct_connect[0].checked;
+                update_link();
+            });
+            input_direct_connect[0].checked = flag_direct_connect;
+        }
+        {
+            const input = modal.htmlTag.find(".flag-resolved-address input") as JQuery<HTMLInputElement>;
+            input.on('change', event => {
+                flag_resolved_address = input[0].checked;
+                update_link();
+            });
+            input[0].checked = flag_direct_connect;
+        }
+
+        update_link();
+        modal.open();
+    }
+}
\ No newline at end of file
diff --git a/shared/js/ui/server.ts b/shared/js/ui/server.ts
index b79735ee..398dc8dc 100644
--- a/shared/js/ui/server.ts
+++ b/shared/js/ui/server.ts
@@ -177,14 +177,7 @@ class ServerEntry {
                 type: MenuEntryType.ENTRY,
                 icon: "client-invite_buddy",
                 name: tr("Invite buddy"),
-                callback: () => {
-                    const address = this.channelTree.client.serverConnection.remote_address().host + ":" + this.channelTree.client.serverConnection.remote_address().port;
-                    const parameter = "connect_default=1&connect_address=" + encodeURIComponent(address);
-                    const url =  document.location.origin +  document.location.pathname + "?" + parameter;
-
-                    copy_to_clipboard(url);
-                    createInfoModal(tr("Buddy invite URL"), tr("Your buddy invite URL:<br>") + url + tr("<bt>This has been copied to your clipboard.")).open();
-                }
+                callback: () => Modals.spawnInviteEditor(this.channelTree.client)
             },
             MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
diff --git a/shared/js/utils/helpers.ts b/shared/js/utils/helpers.ts
index f1dbcf1f..1b8cc2d9 100644
--- a/shared/js/utils/helpers.ts
+++ b/shared/js/utils/helpers.ts
@@ -61,6 +61,7 @@ class LaterPromise<T> extends Promise<T> {
 }
 
 const copy_to_clipboard = str => {
+    console.log(tr("Copy text to clipboard: %s"), str);
     const el = document.createElement('textarea');
     el.value = str;
     el.setAttribute('readonly', '');