From b1f2750cdba54520e2abd28c815cf5d217a7baef Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@gmail.com>
Date: Mon, 8 Apr 2024 15:40:47 +0100
Subject: [PATCH] Add an error message when login fails because of domain
 misconfiguration

Previously, we just output whatever err.responseText was. However, that
has some downsides:

- If there's no responseText (as for when we can't find the domain) then
  the user gets a blank message.
- If it's a 404 error, the responseText includes the full HTML for
  Puter's 404 page, which we don't want to dump in the error box! This
  is unlikely to happen in practice, but was easy enough to cater for.

So, add a nicer message in those cases.

The misconfiguration message is taken from here:
https://github.com/HeyPuter/puter/issues/185#issuecomment-2037977592

Resolves #235.
---
 src/UI/UIWindowLogin.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/UI/UIWindowLogin.js b/src/UI/UIWindowLogin.js
index 69386350..6cbb9733 100644
--- a/src/UI/UIWindowLogin.js
+++ b/src/UI/UIWindowLogin.js
@@ -162,7 +162,30 @@ async function UIWindowLogin(options){
                     $(el_window).close();
                 },
                 error: function (err){
-                    $(el_window).find('.login-error-msg').html(err.responseText);
+                    const $errorMessage = $(el_window).find('.login-error-msg');
+                    if (err.status === 404) {
+                        // Don't include the whole 404 page
+                        $errorMessage.html(`Error 404: "${gui_origin}/login" not found`);
+                    } else if (err.responseText) {
+                        $errorMessage.html(err.responseText);
+                    } else {
+                        // No message was returned. *Probably* this means we couldn't reach the server.
+                        // If this is a self-hosted instance, it's probably a configuration issue.
+                        if (app_domain !== 'puter.com') {
+                            $errorMessage.html(`<div style="text-align: left;">
+                                <p>Error reaching "${gui_origin}/login". This is likely to be a configuration issue.</p>
+                                <p>Make sure of the following:</p>
+                                <ul style="padding-left: 2em;">
+                                    <li><code>domain</code> in config.json is set to the domain you're using to access puter</li>
+                                    <li>DNS resolves for the domain, and the <code>api.</code> subdomain on that domain</li>
+                                    <li><code>http_port</code> is set to the port Puter is listening on (<code>auto</code> will use <code>4100</code> unless that port is in use)</li>
+                                    <li><code>pub_port</code> is set to the external port (ex: <code>443</code> if you're using a reverse proxy that serves over https)</li>
+                                </ul>
+                            </div>`);
+                        } else {
+                            $errorMessage.html(`Failed to log in: Error ${err.status}`);
+                        }
+                    }
                     $(el_window).find('.login-error-msg').fadeIn();
                 }
             });