Refactor UI: Add margin to play, stop, and copy buttons

Author: davoxpa

src/assets/scss/main.scss

@@ -74,11 +74,29 @@ body {
   .play {
     font-size: 20px;
     cursor: pointer;
+    margin-left: .5rem;
+    margin-right: .5rem;
   }
 
   .stop {
     font-size: 20px;
     cursor: pointer;
+    margin-left: .5rem;
+    margin-right: .5rem;
+  }
+
+  .copy {
+    font-size: 20px;
+    cursor: pointer;
+    margin-left: .5rem;
+    margin-right: .5rem;
+    &-clicked {
+      color: #ff9d00;
+    }
+  }
+
+  .url-prefix{
+    cursor: pointer;
   }
 
   .port {

src/assets/styles/main.css

@@ -60,7 +60,6 @@ function saveMock() {
     jsonUpdated = window.editor.get();
     const recoveryData = addHideFields(jsonUpdated);
     console.log('jsonUpdated', recoveryData);
-    debugger;
     ipcRenderer.send('saveMock', recoveryData);
 }
 ipcRenderer.on('responseSaveMock', (event, data) => {

src/assets/styles/main.css.map

@@ -31,9 +31,10 @@ <h1>Mockingbird Proxy</h1>
         <!-- <input id="path" class="path" type="text" value="/Users/davidesalvato/Downloads/mockbird"> -->
         <span class="led"></span>
         <input id="port" class="port" type="text" value="">
-        <i id="stop" class="stop bi bi-stop-fill d-none" onclick="stopServer()"></i>
-        <i id="play" class="play bi bi-play-fill" onclick="startServer()"></i>
+        <i id="stop" class="ml-5 stop bi bi-stop-fill d-none" onclick="stopServer()"></i>
+        <i id="play" class="ml-5 play bi bi-play-fill" onclick="startServer()"></i>
         <p id="config"></p>
+        <i id="copy" class="copy bi bi-clipboard" onclick="copyPrefixUrl()"></i>
       </div>
       <div class="col-lg-12 col-xl-4 d-flex my-sm-2 justify-content-xl-end align-items-center">
         <div>

src/views/edit.js

@@ -2,6 +2,8 @@ const fs = require('fs');
 const path = require('path');
 const { ipcRenderer } = require('electron');
 
+let prefixUrl = '';
+
 window.addEventListener('load', () => {
     ipcRenderer.send('checkServerRunning');
     ipcRenderer.send('getConfig');
@@ -83,7 +85,20 @@ function startServer() {
   ipcRenderer.send('startServer', port);
 }
 function changeUiToServerStart(){
-  document.querySelector('#config').innerHTML = 'http://localhost:' + document.querySelector('#port').value + '/https://your-real-api-url.com/api/v1/...';
+  prefixUrl = 'http://localhost:' + document.querySelector('#port').value + '/';
+  // create element span 
+  document.querySelector('#config').innerHTML = '';
+  const span = document.createElement('span');
+  span.className = 'url-prefix';
+  span.textContent = prefixUrl;
+  span.onclick = () => copyPrefixUrl();
+  document.querySelector('#config').appendChild(span);
+  const spanExample = document.createElement('span');
+  spanExample.className = 'url-prefix-example';
+  spanExample.textContent = 'https://your-real-api-url.com/api/v1/...';
+  document.querySelector('#config').appendChild(spanExample);
+  
+  // document.querySelector('#config').innerHTML = prefixUrl + 'https://your-real-api-url.com/api/v1/...';
   document.querySelector('#port').disabled = true;
   // document.querySelector('#path').disabled = true;
   document.querySelector('#stop').classList.remove('d-none');
@@ -96,6 +111,22 @@ ipcRenderer.on('responseStartServer', (event, port) => {
   console.log('responseStartServer', port);
 });
 
+async function copyPrefixUrl() {
+  // add effect to button on click
+  document.querySelector('#config .url-prefix').classList.add('copy-clicked');
+  document.querySelector('#copy').classList.add('copy-clicked');
+  setTimeout(() => {
+    document.querySelector('#config .url-prefix').classList.remove('copy-clicked');
+    document.querySelector('#copy').classList.remove('copy-clicked');
+  }, 500);
+  try {
+    await navigator.clipboard.writeText(prefixUrl);
+  }
+  catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+}
+
 function stopServer() {
   ipcRenderer.send('stopServer');
 }