diff --git a/src/puter-js/src/modules/PuterDialog.js b/src/puter-js/src/modules/PuterDialog.js index b1e039a4..1c179031 100644 --- a/src/puter-js/src/modules/PuterDialog.js +++ b/src/puter-js/src/modules/PuterDialog.js @@ -1,4 +1,13 @@ class PuterDialog extends HTMLElement { + /** + * Detects if the current page is loaded using the file:// protocol. + * @returns {boolean} True if using file:// protocol, false otherwise. + */ + isUsingFileProtocol = ()=>{ + return window.location.protocol === 'file:'; + } + + constructor(resolve, reject) { super(); this.attachShadow({ mode: 'open' }); @@ -6,8 +15,9 @@ class PuterDialog extends HTMLElement { this.reject = reject; this.resolve = resolve; + let h; // Dialog - this.shadowRoot.innerHTML = ` + h = ` - -
- ✕ - -

This website uses Puter to bring you safe, secure, and private AI and Cloud features.

-
- - + .error-container h1 { + color: #e74c3c; + font-size: 20px; + text-align: center; + } + + .puter-dialog-content a:focus{ + outline: none; + } + `; + // Error message for unsupported protocol + if(window.location.protocol === 'file:'){ + h += ` +
+ ✕ +
+

Puter.js Error: Unsupported Protocol

+

It looks like you've opened this file directly in your browser (using the file:/// protocol) which is not supported by Puter.js for security reasons.

+

To view this content properly, you need to serve it through a web server. Here are some options:

+
    +
  • Use a local development server (e.g., Python's built-in server or Node.js http-server)
    • +
  • Upload the files to a web hosting service
    • +
  • Use a local server application like XAMPP or MAMP
    • +
+

If you're not familiar with these options, consider reaching out to your development team or IT support for assistance.

+
+

+ Docs| + Github| + Discord +

+
+ `; + }else{ + h += ` +
+ ✕ + +

This website uses Puter to bring you safe, secure, and private AI and Cloud features.

+
+ + +
+

Powered by Puter.js

+

By clicking 'Continue' you agree to Puter's Terms of Service and Privacy Policy.

-

Powered by Puter.js

-

By clicking 'Continue' you agree to Puter's Terms of Service and Privacy Policy.

-
-
`; + `; + } + + + this.shadowRoot.innerHTML = h; // Event listener for the 'message' event this.messageListener = async (event) => { @@ -341,7 +388,7 @@ class PuterDialog extends HTMLElement { connectedCallback() { // Add event listener to the button - this.shadowRoot.querySelector('#launch-auth-popup').addEventListener('click', ()=>{ + this.shadowRoot.querySelector('#launch-auth-popup')?.addEventListener('click', ()=>{ let w = 600; let h = 400; let title = 'Puter'; @@ -356,8 +403,8 @@ class PuterDialog extends HTMLElement { window.addEventListener('message', this.messageListener); // Add event listeners for cancel and close buttons - this.shadowRoot.querySelector('#launch-auth-popup-cancel').addEventListener('click', this.cancelListener); - this.shadowRoot.querySelector('.close-btn').addEventListener('click',this.cancelListener); + this.shadowRoot.querySelector('#launch-auth-popup-cancel')?.addEventListener('click', this.cancelListener); + this.shadowRoot.querySelector('.close-btn')?.addEventListener('click',this.cancelListener); } open() {