Add modal dialog to share note

templates/default/home.html.twig

@@ -13,6 +13,9 @@
 #notePreview {
     font-size: {{ meta.noteTextSize }}pt;
 }
+button.button i {
+    font-size: 1.5em;
+}
 </style>
 {% endblock %}
 
@@ -80,10 +83,12 @@ let saveFailureCount = {{ meta.saveFailureCount }};
                     </select>&nbsp;
                     <button id="previewBtn" class='button' onclick='previewNote()'>
                         <i class='fa fa-eye'></i>
-                    </button>
+                    </button>&nbsp;
-                    &nbsp;
                     <button id='show-hide-btn' class='button' onclick='toggleFields()'>
                         <i class='fa fa-table'></i>
+                    </button>&nbsp;
+                    <button id='shareBtn' class='button'>
+                        <i class='fas fa-share-alt'></i>
                     </button>
                 </div>
 
@@ -152,4 +157,25 @@ let saveFailureCount = {{ meta.saveFailureCount }};
 
 <div id='passage-popup'>
 </div>
+
+<!-- The modal background -->
+<div id='modal-backdrop' class="modal-backdrop fade in" style='display:none;'></div>
+
+<!-- The modal container -->
+<div id='modal-container' class="modal-container" style='display:none;'>
+  <!-- The modal header -->
+  <header class="modal-header">Share Note</header>
+
+  <!-- The modal body -->
+  <form id="emailForm" class="modal-body">
+    <label for="email">Enter Friends Email:</label>
+    <input type="email" id="shareEmail" name="email" required />
+    <button type='button' id="submit" class="btn btn-primary" onclick='shareNote()'>Submit</button>
+  </form>
+
+  <!-- The modal footer -->
+  <footer class="modal-footer">
+    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='closeShareNote()'>Close</button>
+  </footer>
+</div>
 {% endblock %}