Implemented REST Mock tool

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #231
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/mock/RestMockMessageComponent.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {ref, type Ref} from 'vue';
+import HeadersComponent from './HeadersComponent.vue';
+import SaveComponent from './SaveComponent.vue';
+
+const clientUUID = ref('');
+const host = window.location.protocol + "//" + window.location.hostname + "/mock";
+const mockMessageLink = ref("www.google.com");
+
+interface mockedMessageData {
+  clientUUID: string;
+  contentType: string;
+  messageBody: string;
+  httpHeaders: object;
+  httpStatus: number;
+}
+
+const exampleData : mockedMessageData = {
+  clientUUID : "exampleUUID",
+  contentType: "application/json",
+  messageBody: "hello",
+  httpHeaders: {Connection:"keep-alive"},
+  httpStatus: 200,
+}
+
+let messageData : Ref<mockedMessageData> = ref(exampleData);
+if ( localStorage.clientUUID != undefined ){
+    clientUUID.value = localStorage.clientUUID;
+}
+fetch(host + '/api/mock/' + clientUUID.value).then( response => response.json() ).then(data => {putDataInFields(data);  });
+
+function putDataInFields(data: mockedMessageData){
+  clientUUID.value = data.clientUUID;
+  localStorage.clientUUID = clientUUID.value
+  mockMessageLink.value = host.replace("/mock","/api/mock")+"/r/"+clientUUID.value
+  messageData = ref( data )
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6">
+    <div>
+      <label for="link">Link</label><br/>
+      <div class="flex gap-4">
+        <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
+          <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
+        </div>
+        <SaveComponent v-bind:message-data="messageData"></SaveComponent>
+      </div>
+    </div>
+    <div class="flex flex-row w-full gap-64">
+      <div class="w-full">
+        <label for="contentType">Content Type</label><br/>
+        <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
+      </div>
+      
+      <div class="w-full">
+        <label for="httpStatus">HttpStatus</label><br/>
+        <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
+      </div>
+      
+    </div>
+    <div class="flex flex-col">
+      <label for="messageBody">Body</label>
+      <textarea class="text-field h-64" id="messageBody" v-model="messageData.messageBody"></textarea>
+    </div>
+    <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
+  </div>
+</template>
+
+<style scoped></style>