feat: Add the ability to clear an invalid site URL (#305)

* feat: Add the ability to clear an invalid site URL

* fix: formatting issues

* Remove invalid function param

* Make lint happy

Author: amorriscode

src/components/app.js

@@ -63,6 +63,7 @@ class App extends Component {
   handleLogout = () => this.props.store.logout();
   handleSiteURL = (url) => this.props.store.setSiteURL(url);
   clearSiteURL = (url) => this.props.store.clearSiteURL();
+  clearStoreError = () => this.props.store.setError();
   handleExternalLogin = (provider) => this.props.store.externalLogin(provider);
   handleUser = ({ name, email, password }) => {
     const { store } = this.props;
@@ -201,6 +202,9 @@ class App extends Component {
           onClose={this.handleClose}
           logo={store.modal.logo}
           t={store.translate}
+          isLocal={store.isLocal}
+          clearSiteURL={this.clearSiteURL}
+          clearStoreError={this.clearStoreError}
         >
           {this.renderBody()}
           {this.renderProviders()}

src/components/modal/index.js

@@ -34,9 +34,13 @@ export default class Modal extends Component {
       isOpen,
       children,
       logo,
-      t
+      t,
+      isLocal,
+      clearSiteURL,
+      clearStoreError
     } = this.props;
     const hidden = loading || !isOpen;
+    const formattedError = error ? formatError(error) : null;
     return (
       <div
         className="modalContainer"
@@ -86,11 +90,26 @@ export default class Modal extends Component {
                 </button>
               </div>
             )}
-            {error && (
+            {formattedError && (
               <div className="flashMessage error">
-                <span>{t(formatError(error))}</span>
+                <span>{t(formattedError)}</span>
               </div>
             )}
+            {isLocal &&
+              formattedError &&
+              formattedError.includes("Failed to load settings from") && (
+                <div>
+                  <button
+                    onclick={(e) => {
+                      clearSiteURL(e);
+                      clearStoreError();
+                    }}
+                    className="btnLink forgotPasswordLink"
+                  >
+                    {t("site_url_link_text")}
+                  </button>
+                </div>
+              )}
             {children}
           </div>
         </div>