Add share button

Author: liquid207

1.bootstrap.js

@@ -45,15 +45,17 @@ <h1 class="title">
               <textarea class="textarea" name="sql" rows="10" placeholder="Enter Your Sql" id="input"></textarea>
             </div>
           </div>
-          <div class="field">
-            <div class="field-body">
-              <div class="field">
-                <div class="control has-text-centered">
-                  <button class="button is-primary" id="convert-button">
-                    Convert
-                  </button>
-                </div>
-              </div>
+
+          <div class="level-left">
+            <div class="level-item has-text-centered">
+              <button class="button is-primary" id="convert-button">
+                Convert
+              </button>
+            </div>
+            <div class="level-item has-text-centered">
+              <button class="button" id="share-button">
+                Share
+              </button>
             </div>
           </div>
         </div>
@@ -65,11 +67,11 @@ <h1 class="title">
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
 </div>
+<input style="display: none;" id="base64sql"></input>
 <script src="./bootstrap.js"></script>
 </body>
 </html>

index.html

@@ -45,15 +45,17 @@ <h1 class="title">
               <textarea class="textarea" name="sql" rows="10" placeholder="Enter Your Sql" id="input"></textarea>
             </div>
           </div>
-          <div class="field">
-            <div class="field-body">
-              <div class="field">
-                <div class="control has-text-centered">
-                  <button class="button is-primary" id="convert-button">
-                    Convert
-                  </button>
-                </div>
-              </div>
+
+          <div class="level-left">
+            <div class="level-item has-text-centered">
+              <button class="button is-primary" id="convert-button">
+                Convert
+              </button>
+            </div>
+            <div class="level-item has-text-centered">
+              <button class="button" id="share-button">
+                Share
+              </button>
             </div>
           </div>
         </div>
@@ -65,11 +67,11 @@ <h1 class="title">
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
 </div>
+<input style="display: none;" id="base64sql"></input>
 <script src="./bootstrap.js"></script>
 </body>
 </html>

src/index.html

@@ -14,7 +14,7 @@ Sentry.init({
     allowUrls: ['https://sql2builder.github.io/']
 });
 
-document.getElementById('convert-button').addEventListener('click', function () {
+let converter = function () {
     let input = document.getElementById("input").value;
 
     if (input.trim() === '') {
@@ -44,7 +44,24 @@ document.getElementById('convert-button').addEventListener('click', function ()
     } catch (e) {
         console.log(input);
         output_text_area.value = e + ', I will fix this issue as soon as possible';
-        
+
         throw e;
     }
+}
+
+let url_search_params = new URLSearchParams(window.location.search);
+
+if(url_search_params.has('base64sql')) {
+    document.getElementById('input').value = atob(url_search_params.get('base64sql'));
+    converter();
+}
+
+document.getElementById('convert-button').addEventListener('click', converter);
+document.getElementById('share-button').addEventListener('click', function () {
+    let share_link = window.location.origin + '?base64sql=' + btoa(document.getElementById('input').value);
+    navigator.clipboard.writeText(share_link).then(function() {
+        alert('Share link copied.');
+    }, function() {
+        alert('Copy failed.');
+    });
 });