From e5269c6a655e34caa83185ce6a339ab75861a8e3 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Tue, 5 Sep 2023 23:49:48 +0200
Subject: [PATCH] [Glitch] Improve interaction modal error handling

Port 548c032dbb90ae9c06b05fc05724c49d0b552fd9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../features/interaction_modal/index.jsx      | 52 ++++++++++++++++---
 1 file changed, 46 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
index bbfa9af8d4..77c0122e22 100644
--- a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
@@ -100,8 +100,41 @@ class LoginForm extends React.PureComponent {
     this.input = c;
   };
 
+  isValueValid = (value) => {
+    let likelyAcct = false;
+    let url = null;
+
+    if (value.startsWith('/')) {
+      return false;
+    }
+
+    if (value.startsWith('@')) {
+      value = value.slice(1);
+      likelyAcct = true;
+    }
+
+    // The user is in the middle of typing something, do not error out
+    if (value === '') {
+      return true;
+    }
+
+    if (/^https?:\/\//.test(value) && !likelyAcct) {
+      url = value;
+    } else {
+      url = `https://${value}`;
+    }
+
+    try {
+      new URL(url);
+      return true;
+    } catch(_) {
+      return false;
+    }
+  };
+
   handleChange = ({ target }) => {
-    this.setState(state => ({ value: target.value, isLoading: true, error: false, options: addInputToOptions(target.value, state.networkOptions) }), () => this._loadOptions());
+    const error = !this.isValueValid(target.value);
+    this.setState(state => ({ error, value: target.value, isLoading: true, options: addInputToOptions(target.value, state.networkOptions) }), () => this._loadOptions());
   };
 
   handleMessage = (event) => {
@@ -115,11 +148,18 @@ class LoginForm extends React.PureComponent {
       this.setState({ isSubmitting: false, error: true });
     } else if (event.data?.type === 'fetchInteractionURL-success') {
       if (/^https?:\/\//.test(event.data.template)) {
-        if (localStorage) {
-          localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
-        }
+        try {
+          const url = new URL(event.data.template.replace('{uri}', encodeURIComponent(resourceUrl)));
 
-        window.location.href = event.data.template.replace('{uri}', encodeURIComponent(resourceUrl));
+          if (localStorage) {
+            localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
+          }
+
+          window.location.href = url;
+        } catch (e) {
+          console.error(e);
+          this.setState({ isSubmitting: false, error: true });
+        }
       } else {
         this.setState({ isSubmitting: false, error: true });
       }
@@ -259,7 +299,7 @@ class LoginForm extends React.PureComponent {
             spellcheck='false'
           />
 
-          <Button onClick={this.handleSubmit} disabled={isSubmitting}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
+          <Button onClick={this.handleSubmit} disabled={isSubmitting || error}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
         </div>
 
         {hasPopOut && (