From 6bebc623f98bc2e67f4d7a6d3ea8746081a41692 Mon Sep 17 00:00:00 2001
From: Gero Gerke <hello@gerogerke.de>
Date: Tue, 5 Oct 2021 21:59:58 +0200
Subject: [PATCH] UI polish

---
 server/notification-providers/matrix.js |  2 +-
 src/components/notifications/Matrix.vue | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/server/notification-providers/matrix.js b/server/notification-providers/matrix.js
index cd5c2426a..eeaa9eb91 100644
--- a/server/notification-providers/matrix.js
+++ b/server/notification-providers/matrix.js
@@ -15,7 +15,7 @@ class Matrix extends NotificationProvider {
             .slice(0, size);    
         const roomId = notification
             .internalRoomId
-            .replaceALl(":", "%3A")
+            .replaceAll(":", "%3A")
             .replaceAll("!", "%21");
 
         try {
diff --git a/src/components/notifications/Matrix.vue b/src/components/notifications/Matrix.vue
index 12c7dad80..acce9466e 100644
--- a/src/components/notifications/Matrix.vue
+++ b/src/components/notifications/Matrix.vue
@@ -1,17 +1,26 @@
 <template>
     <div class="mb-3">
-        <label for="homeserver-url" class="form-label">Homeserver URL (with http(s):// and optionally port)</label>
+        <label for="homeserver-url" class="form-label">Homeserver URL (with http(s):// and optionally port)</label><span style="color: red;"><sup>*</sup></span>
         <input id="homeserver-url" v-model="$parent.notification.homeserverUrl" type="text" class="form-control" :required="true">
-        <label for="internal-room-id" class="form-label">Internal Room Id</label>
+    </div>
+    <div class="mb-3">
+        <label for="internal-room-id" class="form-label">Internal Room Id</label><span style="color: red;"><sup>*</sup></span>
         <input id="internal-room-id" v-model="$parent.notification.internalRoomId" type="text" class="form-control" required="true">
-        <label for="access-token" class="form-label">Access Token</label>
+    </div>
+    <div class="mb-3">
+        <label for="access-token" class="form-label">Access Token</label><span style="color: red;"><sup>*</sup></span>
         <HiddenInput id="access-token" v-model="$parent.notification.accessToken" :required="true" autocomplete="one-time-code" :maxlength="500"></HiddenInput>
     </div>
 
-    <p style="margin-top: 8px;">
-        You can find the internal room ID by looking in the advanced section if your Matrix client. It should look like !QMdRCpUIfLwsfjxye6:home.server.<br/>
-        It is highly recommended you create a new user and do not use your Matrix user's access token as it will allow full access to the matrix user. You can get the access token by running curl -XPOST -d '{"type":"m.login.password", "identifier": {"user":"botusername", "type": "m.id.user"}, "password":"passwordforuser"}' "https://home.server.url/_matrix/client/r0/login".
-    </p>
+    <div class="form-text">
+        <span style="color: red;"><sup>*</sup></span>Required
+        <p style="margin-top: 8px;">
+            You can find the internal room ID by looking in the advanced section if your Matrix client. It should look like !QMdRCpUIfLwsfjxye6:home.server.
+        </p>
+        <p style="margin-top: 8px;">
+            It is highly recommended you create a new user and do not use your Matrix user's access token as it will allow full access to the matrix user. You can get the access token by running <code>curl -XPOST -d '{"type":"m.login.password", "identifier": {"user":"botusername", "type": "m.id.user"}, "password":"passwordforuser"}' "https://home.server/_matrix/client/r0/login"</code>.
+        </p>
+    </div>
 </template>
 
 <script>