T210 link operational

src/main/resources/static/css/main.css

@@ -105,9 +105,17 @@
 #messageLink {
     width: 630px;
     padding: 10px;
-    font-size: 18px;
+    font-size: 16px;
     background: #f0f0f0;
-    pointer-events: none;
+}
+
+#messageLink a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+#messageLink a:hover {
+    color: #d6860d !important;
 }
 
 .fieldDefault {

src/main/resources/static/js/datatransfer.js

@@ -157,7 +157,8 @@ function initializeMock(index){
 }
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
-    $('#messageLink').val(createLink(uuid,id));
+    let link = createLink(uuid,id);
+    $('#messageLink').html('<a href="' + link + '" target="_blank">' + link + '</a>');
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
@@ -166,7 +167,7 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
 }
 
 function createLink(uuid, id){
-    var link = host + '/klaus/v1/get/'+uuid+'/'+id;
+    var link =  host + '/klaus/v1/get/'+uuid+'/'+id;
     return link;
 }
 

src/main/resources/templates/mock.html

@@ -19,7 +19,7 @@
                 <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
                 <div id="link">
                     <label for="messageLink">Link</label>
-                    <input id="messageLink" type="text" class="field"/>
+                    <div id="messageLink" class="field"></div>
                 </div>
                 <div id="msgBody">
                     <div id="typeSelection">