Merge pull request #174 from netlify/dev-mode-tweaks

chore: Add feature to switch out identity url

Author: bcomnes

src/components/app.js

@@ -62,6 +62,7 @@ class App extends Component {
   handlePage = page => this.props.store.openModal(page);
   handleLogout = () => this.props.store.logout();
   handleSiteURL = url => this.props.store.setSiteURL(url);
+  clearSiteURL = url => this.props.store.clearSiteURL();
   handleExternalLogin = provider => this.props.store.externalLogin(provider);
   handleUser = ({ name, email, password }) => {
     const { store } = this.props;
@@ -87,6 +88,8 @@ class App extends Component {
 
   renderBody() {
     const { store } = this.props;
+    const page = pages[store.modal.page] || {};
+    const pageLinkHandler = () => this.handlePage(page.link);
 
     if (!store.gotrue) {
       return <SiteURLForm onSiteURL={this.handleSiteURL} />;
@@ -108,12 +111,23 @@ class App extends Component {
     }
 
     return (
-      <UserForm
-        page={pages[store.modal.page] || {}}
-        message={store.message}
-        saving={store.saving}
-        onSubmit={this.handleUser}
-      />
+      <div>
+        <UserForm
+          page={pages[store.modal.page] || {}}
+          message={store.message}
+          saving={store.saving}
+          onSubmit={this.handleUser}
+        />
+        {!store.user && page.link && store.gotrue && (
+          <button
+            onclick={pageLinkHandler}
+            className="btnLink forgotPasswordLink"
+          >
+            {page.link_text}
+          </button>
+        )}
+        <SiteURLForm devMode="true" onSiteURL={this.clearSiteURL} />
+      </div>
     );
   }
 
@@ -154,7 +168,6 @@ class App extends Component {
     const showHeader = pagesWithHeader[store.modal.page];
     const showSignup = store.settings && !store.settings.disable_signup;
     const page = pages[store.modal.page] || {};
-    const pageLinkHandler = () => this.handlePage(page.link);
 
     return (
       <div>
@@ -172,14 +185,6 @@ class App extends Component {
         >
           {this.renderBody()}
           {this.renderProviders()}
-          {!store.user && page.link && store.gotrue && (
-            <button
-              onclick={pageLinkHandler}
-              className="btnLink forgotPasswordLink"
-            >
-              {page.link_text}
-            </button>
-          )}
         </Modal>
       </div>
     );

src/components/forms/siteurl.js

@@ -3,48 +3,69 @@ import { h, Component } from "preact";
 export default class SiteURLForm extends Component {
   constructor(props) {
     super(props);
-    this.state = { url: "" };
+    this.state = { url: "", development: props.devMode || false };
   }
 
   handleInput = e => {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  handleSiteURL = e => {
+  addSiteURL = e => {
     e.preventDefault();
     this.props.onSiteURL(this.state.url);
   };
 
+  clearSiteURL = e => {
+    e.preventDefault;
+    this.props.onSiteURL();
+  };
+
   render() {
-    const { url } = this.state;
+    const { url, development } = this.state;
 
     return (
-      <form onsubmit={this.handleSiteURL} className="form">
-        <div className="flashMessage">
-          {
-            "Looks like you're running a local server. Please let us know the URL of your Netlify site."
-          }
-        </div>
-        <div className="formGroup">
-          <label>
-            <span className="visuallyHidden">Enter your Netlify Site URL</span>
-            <input
-              className="formControl"
-              type="url"
-              name="url"
-              value={url}
-              placeholder="URL of your Netlify site"
-              autocapitalize="off"
-              required
-              oninput={this.handleInput}
-            />
-            <div className="inputFieldIcon inputFieldUrl" />
-          </label>
-        </div>
-        <button type="submit" className="btn">
-          Set site's URL
-        </button>
-      </form>
+      <div>
+        {development ? (
+          <div class="subheader">
+            <h3>Development Settings</h3>
+            <button
+              onclick={e => this.clearSiteURL(e)}
+              className="btnLink forgotPasswordLink"
+            >
+              Clear localhost URL
+            </button>
+          </div>
+        ) : (
+          <form onsubmit={this.addSiteURL} className="form">
+            <div className="flashMessage">
+              {
+                "Looks like you're running a local server. Please let us know the URL of your Netlify site."
+              }
+            </div>
+            <div className="formGroup">
+              <label>
+                <span className="visuallyHidden">
+                  Enter your Netlify Site URL
+                </span>
+                <input
+                  className="formControl"
+                  type="url"
+                  name="url"
+                  value={url}
+                  placeholder="URL of your Netlify site"
+                  autocapitalize="off"
+                  required
+                  oninput={this.handleInput}
+                />
+                <div className="inputFieldIcon inputFieldUrl" />
+              </label>
+            </div>
+            <button type="submit" className="btn">
+              Set site's URL
+            </button>
+          </form>
+        )}
+      </div>
     );
   }
 }

src/components/modal.css

@@ -520,3 +520,13 @@
   width: 1px;
   #fff-space: nowrap;
 }
+
+.subheader {
+  margin-top: 2em;
+  border-top: 1px solid rgb(14, 30, 37);
+
+  h3 {
+    padding-top: 1em;
+    text-align: center;
+  }
+}

src/netlify-identity.js

@@ -124,7 +124,11 @@ observe(store.modal, "isOpen", () => {
 });
 
 observe(store, "siteURL", () => {
-  localStorage.setItem("netlifySiteURL", store.siteURL);
+  if (store.siteURL === null || store.siteURL === undefined) {
+    localStorage.removeItem("netlifySiteURL");
+  } else {
+    localStorage.setItem("netlifySiteURL", store.siteURL);
+  }
   store.init(instantiateGotrue(), true);
 });
 

src/state/store.js

@@ -67,6 +67,12 @@ store.setSiteURL = action(function setSiteURL(url) {
   store.siteURL = url;
 });
 
+store.clearSiteURL = action(function clearSiteURL() {
+  store.gotrue = null;
+  store.siteURL = null;
+  store.settings = null;
+});
+
 store.login = action(function login(email, password) {
   store.startAction();
   return store.gotrue