Closes #56 Closes #50

- can now specify message in node's configuration for matrix-send-message
- can now specify reaction in node's configuration for matrix-react
- reason can now be configured on both matrix-room-kick and matrix-room-ban
- icons updated for various nodes
- fix tag for name configuration field for various nodes
- roomId input is now validated to ensure it starts with ! and if not shows an error

src/matrix-create-room.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-create-room">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 

src/matrix-crypt-file.html

@@ -18,7 +18,7 @@
 
 <script type="text/html" data-template-name="matrix-decrypt-file">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 </script>

src/matrix-delete-event.html

@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-reason"><i class="fa fa-sticky-note"></i> Reason</label>

src/matrix-invite-room.html

@@ -20,7 +20,7 @@
 
 <script type="text/html" data-template-name="matrix-invite-room">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 
@@ -32,6 +32,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
 </script>
 

src/matrix-join-room.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-join-room">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">

src/matrix-react.html

@@ -21,7 +21,7 @@
 
 <script type="text/html" data-template-name="matrix-react">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-reaction"><i class="fa fa-thumbs-up"></i> Reaction</label>

src/matrix-receive.html

@@ -36,6 +36,18 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
     </div>
     <div class="form-tips">Enter a single room, comma separated list of rooms, or leave blank to get from all</div>
     <div class="form-row" style="margin-left: 100px;margin-top:10px;font-weight:bold;">

src/matrix-room-ban.html

@@ -21,7 +21,7 @@
 
 <script type="text/html" data-template-name="matrix-room-ban">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-reason"><i class="fa fa-comment"></i> Reason</label>

src/matrix-room-kick.html

@@ -21,7 +21,7 @@
 
 <script type="text/html" data-template-name="matrix-room-kick">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-reason"><i class="fa fa-comment"></i> Reason</label>

src/matrix-room-users.html

@@ -20,7 +20,7 @@
 
 <script type="text/html" data-template-name="matrix-room-users">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -28,8 +28,20 @@
      	<input type="text" id="node-input-server">
  	</div>
     <div class="form-row">
-        <label for="node-input-server"><i class="fa fa-user"></i> Room Id</label>
+        <label for="node-input-server"><i class="fa fa-user"></i> Room Id</label>        <input type="text" id="node-input-roomId" placeholder="msg.topic">
-        <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
 </script>
 

src/matrix-send-file.html

@@ -21,7 +21,7 @@
 
 <script type="text/html" data-template-name="matrix-send-file">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-contentType"><i class="fa fa-user"></i> Content-Type</label>

src/matrix-send-image.html

@@ -21,7 +21,7 @@
 
 <script type="text/html" data-template-name="matrix-send-image">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">
@@ -31,6 +31,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
     <div class="form-row">
         <label for="node-input-contentType"><i class="fa fa-user"></i> Content-Type</label>

src/matrix-send-message.html

@@ -24,7 +24,7 @@
 
 <script type="text/html" data-template-name="matrix-send-message">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 
@@ -36,6 +36,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
 
     <div class="form-row">

src/matrix-synapse-create-edit-user.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-synapse-create-edit-user">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 

src/matrix-synapse-deactivate-user.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-synapse-deactivate-user">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 

src/matrix-synapse-join-room.html

@@ -20,7 +20,7 @@
 
 <script type="text/html" data-template-name="matrix-synapse-join-room">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 
@@ -32,6 +32,19 @@
     <div class="form-row">
         <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
         <input type="text" id="node-input-roomId" placeholder="msg.topic">
+        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
+        <script type="text/javascript">
+            $(function(){
+                $("#node-input-roomId").on("keyup", function() {
+                    if($(this).val() && !$(this).val().startsWith("!")) {
+                        $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
+                    } else {
+                        $("#node-input-roomId-error").hide();
+                    }
+                }).trigger('keyup');
+            });
+        </script>
+    </div>
     </div>
 
     <div class="form-tips" style="margin-bottom: 12px;">

src/matrix-synapse-register.html

@@ -22,7 +22,7 @@
 
 <script type="text/html" data-template-name="matrix-synapse-register">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
 

src/matrix-synapse-users.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-synapse-users">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>
  	 <div class="form-row">

src/matrix-whois-user.html

@@ -19,7 +19,7 @@
 
 <script type="text/html" data-template-name="matrix-whois-user">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa icon-tag"></i> Name</label>
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name" placeholder="Name">
     </div>