Fixed API Token #2 Dialog not showing

Fixed alert messages not showing

.ignore

@@ -0,0 +1,2 @@
+/node_modules
+/build

main.js

@@ -2,25 +2,22 @@ const { entrypoints } = require("uxp");
 const app = require("photoshop").app;
 const imaging = require("photoshop").imaging
 const Replicate = require("./node_modules/replicate/index.js")
-const getValue = require("./utils.js").getValue
+const {showAbout, customAlert, customPrompt, getValue } = require("./utils.js")
 
 const CODE_FORMER_MODEL = "sczhou/codeformer:7de2ea26c616d5bf2245ad0d5e24f0ff9a6204578a5c876db53142edd9d2cd56";
 
-showAbout = () => {
-  alert("CodeFormerPS by: https://twitter.com/fus3_n");
-}
+
 
 showSettings = async () => {
   try {
     let prevTok = await getValue("API_TOKEN")
-
-    let token = prompt("Your Replicate API Token", prevTok ?? "TOKEN")
+    let token = await customPrompt("Your Replicate API Token", "Please enter your replicate token", prevTok ?? "TOKEN")
     if (token != null && token != "") {
       await require('uxp').storage.secureStorage.setItem("API_TOKEN", token);
     } else {
       // Inform the user that they did not enter a name
       if (!prevTok) {
-        alert("You did not enter a token.");
+        customAlert("You did not enter a token.");
       }
     }
   } catch (err) {
@@ -34,7 +31,7 @@ const deleteCache = async () => {
     for (const path of paths) {
       await fs.unlink("plugin-data:/" + path);
     }
-    alert("Deleted!")
+    customAlert("Deleted!")
   } catch (err) {
     console.error(err);
   }
@@ -100,7 +97,7 @@ async function upscaleImage() {
       const doc = app.activeDocument;
 
       if (doc.activeLayers.length == 0) {
-        alert("Please select the layer you want to upscale");
+        customAlert("Please select the layer you want to upscale");
         return;
       }
 
@@ -119,7 +116,7 @@ async function upscaleImage() {
       try {
         const apiToken = await getValue("API_TOKEN")
         if (!apiToken) {
-          alert("Please enter your Replicate API Token in Settings or Click the Cogwheel icon")
+          customAlert("Please enter your Replicate API Token in Settings or Click the Cogwheel icon")
           return;
         }
         const replicate = new Replicate({
@@ -160,7 +157,7 @@ async function upscaleImage() {
 
         console.log("Finished")
       } catch (error) {
-        alert("Error: " + error.message);
+        customAlert("Error: " + error.message);
       }
 
     }

manifest.json

@@ -1,7 +1,7 @@
 {
-	"id": "code-former-ps-fusen",
+	"id": "8dfa66a4",
 	"name": "CodeFormerPS",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"main": "index.html",
 	"host": [
 		{
@@ -11,6 +11,11 @@
 	],
 	"manifestVersion": 5,
 	"requiredPermissions": {
+		"launchProcess": {
+			"schemes": ["https"],
+			"extensions": [],
+			"domains": ["*"]
+		},
 		"localFileSystem": "plugin",
 		"network": {
 			"domains": [

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "uxp-template-ps-starter",
-  "version": "1.0.0",
-  "description": "Starter template for creating Adobe UXP based-Photoshop plugin.",
+  "name": "codeformer-ps-plugin",
+  "version": "1.1.0",
+  "description": "CodeFormerPS plugin",
   "author": "Adobe Inc",
   "license": "Apache-2.0",
   "dependencies": {

utils.js

@@ -9,7 +9,96 @@ const getValue = async (key) => {
     }
 }
 
+async function customPrompt(title, message, defaultValue = '') {
+    let result = '';
+    const main = document.createElement('dialog');
+    main.innerHTML = `
+        <form method="dialog" style="min-width: 300px; width: 100%;">
+            <sp-heading>${title}</sp-heading>
+            <hr>
+            <p style="color: white">${message}</p>
+            <input type="text" id="userInput" value="${defaultValue}" style="width: 100%;" />
+            <footer>
+                <button id="cancel">Cancel</button>
+                <button type="submit" id="ok" uxp-variant="cta">OK</button>
+            </footer>
+        </form>
+    `;
+
+    document.body.appendChild(main);
+
+    const [form, cancel, ok, userInput] = [
+        main.querySelector('form'),
+        main.querySelector('#cancel'),
+        main.querySelector('#ok'),
+        main.querySelector('#userInput')
+    ];
+
+    cancel.addEventListener('click', () => {
+        result = null;
+        main.close();
+    });
+
+    form.onsubmit = () => {
+        result = userInput.value;
+        main.close();
+    };
+
+    await main.uxpShowModal();
+    main.remove();
+    return result;
+}
+
+async function customAlert(message) {
+    const alertDlg = document.createElement('dialog');
+    alertDlg.innerHTML = `
+        <form method="dialog">
+            <sp-heading>CodeFormerPS</sp-heading>
+            <hr>
+            <sp-detail>${message}<sp-detail>
+            <footer>
+                <button id="ok" type="submit" uxp-variant="cta">OK</button>
+            </footer>
+        </form>
+    `;
+
+    document.body.appendChild(alertDlg);
+
+    const okButton = alertDlg.querySelector('#ok');
+    okButton.onclick = () => alertDlg.close();
+
+    await alertDlg.uxpShowModal();
+    alertDlg.remove();
+}
+
+async function showAbout() {
+    const alertDlg = document.createElement('dialog');
+    alertDlg.innerHTML = `
+        <form method="dialog" style="padding: 0; margin: 0;">
+            <sp-heading>CodeFormerPS</sp-heading>
+            <sp-detail>Socials<sp-detail>
+            <sp-link href="https://twitter.com/fus3_n" id="twitter-link">Twitter</sp-link>
+            <sp-link href="https://github.com/Fus3n/" id="github-link">Github</sp-link>
+            <sp-link href="https://www.youtube.com/@FlinCode" id="github-link">YouTube</sp-link>
+            <footer>
+                <button id="ok" type="submit" uxp-variant="cta">OK</button>
+            </footer>
+        </form>
+    `;
+
+    document.body.appendChild(alertDlg);
+    const okButton = alertDlg.querySelector('#ok');
+    okButton.onclick = () => alertDlg.close();
+
+    await alertDlg.uxpShowModal();
+    alertDlg.remove();
+  }
+
+
 
 module.exports = {
-    getValue
+    getValue,
+    customPrompt,
+    customAlert,
+    showAbout
 };