feat(ui): Replace all browser native alert calls with approriate toas…

…ts to avoid cross platform design changes + fixes #96

packages/ui/src/components/ImportModal.vue

@@ -218,20 +218,20 @@ export default {
                 this.showImportModal = false
 
                 if(this.importFrom.endsWith(' URL')) {
-                    alert('URL imported successfully')
+                    this.$toast.success('URL imported successfully')
                 } else {
                     if(importedFileCount === 1) {
-                        alert('File imported successfully')
+                        this.$toast.success('File imported successfully')
                     } else {
-                        alert(`${importedFileCount} files imported successfully`)
+                        this.$toast.success(`${importedFileCount} files imported successfully`)
                     }
                 }
             } catch(e) {
                 console.log(e)
                 if(this.importFrom === 'Postman URL') {
-                    alert(`Invalid import url given: ${this.urlToImport}`)
+                    this.$toast.error(`Invalid import url given: ${this.urlToImport}`)
                 } else {
-                    alert(`Invalid import file given: ${fileBeingImported}`)
+                    this.$toast.error(`Invalid import file given: ${fileBeingImported}`)
                 }
             }
         }

packages/ui/src/components/ResponsePanel.vue

@@ -353,7 +353,7 @@ export default {
         },
         async copyResponseToClipboard() {
             if(!window.isSecureContext) {
-                alert('Copy to clipboard needs Restfox running under a https url')
+                this.$toast.error('Copy to clipboard needs Restfox running under a https url')
                 return
             }
             await navigator.clipboard.writeText(this.bufferToJSONString(this.response.buffer))

packages/ui/src/components/SocketPanel.vue

@@ -268,7 +268,7 @@ const activeWorkspace = computed(() => store.state.activeWorkspace)
 const activeTab = computed(() => store.state.activeTab)
 const activeTabEnvironmentResolved = computed(() => store.state.activeTabEnvironmentResolved)
 const sockets = store.state.sockets
-const $toast: { success: (message: string) => void } = inject('$toast')
+const $toast: { success: (message: string) => void, error: (message: string) => void } = inject('$toast')
 
 // Methods
 
@@ -350,7 +350,7 @@ async function connect(client: Client) {
         }
     } catch(e) {
         console.log(e)
-        alert(`Invalid WebSocket URL: ${clientUrlWithEnvironmentVariablesSubtituted}`)
+        $toast.error(`Invalid WebSocket URL: ${clientUrlWithEnvironmentVariablesSubtituted}`)
         return
     }
 
@@ -458,7 +458,7 @@ function beautifyJSON(client: Client) {
         client.message = JSON.stringify(parsedMessage, null, 4)
         client.payloads.find(payload => payload.id === client.currentPayloadId)!.payload = client.message
     } catch {
-        alert('Invalid JSON')
+        $toast.error('Invalid JSON')
     }
 }
 
@@ -618,7 +618,7 @@ function changePayloadTab(client: Client, tab: ClientPayload) {
 
 async function closePayloadTab(client: Client, event: { tabToClose: ClientPayload, tabToOpen: ClientPayload }) {
     if(client.payloads.length === 1) {
-        alert('Cannot delete payload as there\'s only one payload left')
+        $toast.error('Cannot delete payload as there\'s only one payload left')
         return
     }
 

packages/ui/src/components/modals/BackupAndRestoreModal.vue

@@ -63,10 +63,10 @@ export default {
 
             try {
                 await importDB(this.fileToRestore)
-                alert('Backup restored successfully')
+                this.$toast.success('Backup restored successfully')
             } catch(e) {
                 console.log(e)
-                alert('Invalid backup file given')
+                this.$toast.error('Invalid backup file given')
             }
         }
     }

packages/ui/src/components/modals/EnvironmentModal.vue

@@ -189,7 +189,7 @@ export default {
 
             if(this.environments.some(environment => environment.name === newEnvironmentName)) {
                 if(!isImport) {
-                    alert(`Given environment name already exists: ${newEnvironmentName}`)
+                    this.$toast.error(`Given environment name already exists: ${newEnvironmentName}`)
                     return
                 } else {
                     if(!await window.createConfirm(`Given environment name already exists: ${newEnvironmentName}\nDo you want to merge with the existing one?`)) {
@@ -341,7 +341,7 @@ export default {
             }
 
             if(this.clickedContextMenuEnvironment.name !== newEnvironmentName && this.environments.some(environment => environment.name === newEnvironmentName)) {
-                alert('Given environment name already exists')
+                this.$toast.error('Given environment name already exists')
                 this.hideEnvironmentContextMenu()
                 return
             }
@@ -374,7 +374,7 @@ export default {
         },
         async deleteEnvironment() {
             if(this.environments.length === 1) {
-                alert('Cannot delete environment as there\'s only one environment left')
+                this.$toast.error('Cannot delete environment as there\'s only one environment left')
                 this.hideEnvironmentContextMenu()
                 return
             }
@@ -427,7 +427,7 @@ export default {
 
                     this.addEnvironment(parsedJSON.name, environment)
                 } catch(e) {
-                    alert('Invalid JSON file')
+                    this.$toast.error('Invalid JSON file')
                 } finally {
                     document.body.removeChild(fileInput)
                 }

packages/ui/src/web-components/alert-confirm-prompt.js

@@ -20,18 +20,14 @@ class AlertConfirmPrompt extends HTMLElement {
             `
         }
 
-        if (type === 'confirm') {
-            inputHtml = '<div style="width: 20rem;"></div>'
-        }
-
         div.innerHTML = `
         <div class="dialog-container">
-            <div class="dialog">
+            <div class="dialog dialog-${type}">
                 <div>${title}</div>
                 ${inputHtml}
                 <div style="margin-top: 1rem; text-align: right; user-select: none;">
                     <button class="dialog-primary-button" id="dialog-confirm">OK</button>
-                    <button class="dialog-secondary-button" id="dialog-cancel">Cancel</button>
+                    ${type !== 'alert' ? '<button class="dialog-secondary-button" id="dialog-cancel">Cancel</button>' : ''}
                 </div>
             </div>
         </div>
@@ -131,6 +127,10 @@ class AlertConfirmPrompt extends HTMLElement {
         return this.createDialog('confirm', title)
     }
 
+    createAlert = (message) => {
+        return this.createDialog('alert', message)
+    }
+
     connectedCallback() {
         this.shadowRoot.innerHTML = /* html */ `
         <div id="root"></div>
@@ -157,6 +157,11 @@ class AlertConfirmPrompt extends HTMLElement {
             border: 1px solid #c6c6c6;
         }
 
+        .dialog-confirm, .dialog-alert {
+            width: 20rem;
+            padding: 1.5rem;
+        }
+
         .dialog *::selection {
             background: #9cc3f5;
         }
@@ -205,6 +210,7 @@ class AlertConfirmPrompt extends HTMLElement {
 
         window.createPrompt = this.createPrompt
         window.createConfirm = this.createConfirm
+        window.createAlert = this.createAlert
     }
 }