Skip to content

Commit c104dd1

Browse files
shortdivshortdiv
authored
Merge pull request #191 from netlify/development-setting
fix: ensure dev settings for url is only visible on dev
2 parents c2685bf + 5b46e0f commit c104dd1

File tree

3 files changed

+140
-113
lines changed

3 files changed

+140
-113
lines changed

‎src/components/app.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,13 @@ class App extends Component {
9191
const page = pages[store.modal.page] || {};
9292
const pageLinkHandler = () => this.handlePage(page.link);
9393

94-
if (!store.gotrue) {
95-
return <SiteURLForm onSiteURL={this.handleSiteURL} />;
94+
if (store.isLocal && store.siteURL === null) {
95+
return (
96+
<SiteURLForm
97+
devMode={store.siteURL != null}
98+
onSiteURL={store.siteURL ? this.clearSiteURL : this.handleSiteURL}
99+
/>
100+
);
96101
}
97102
if (!store.settings) {
98103
return;
@@ -127,7 +132,14 @@ class App extends Component {
127132
{page.link_text}
128133
</button>
129134
)}
130-
<SiteURLForm devMode="true" onSiteURL={this.clearSiteURL} />
135+
{store.isLocal ? (
136+
<SiteURLForm
137+
devMode={store.siteURL != null}
138+
onSiteURL={store.siteURL ? this.clearSiteURL : this.handleSiteURL}
139+
/>
140+
) : (
141+
<div />
142+
)}
131143
</div>
132144
);
133145
}

‎src/netlify-identity.js‎

Lines changed: 121 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,104 @@
1-
import { h, render } from "preact"
2-
import { observe } from "mobx"
3-
import { Provider } from "mobx-preact"
4-
import GoTrue from "gotrue-js"
5-
import App from "./components/app"
6-
import store from "./state/store"
7-
import Controls from "./components/controls"
8-
import modalCSS from "./components/modal.css"
9-
10-
const callbacks = {}
1+
import { h, render } from "preact";
2+
import { observe } from "mobx";
3+
import { Provider } from "mobx-preact";
4+
import GoTrue from "gotrue-js";
5+
import App from "./components/app";
6+
import store from "./state/store";
7+
import Controls from "./components/controls";
8+
import modalCSS from "./components/modal.css";
9+
10+
const callbacks = {};
1111
function trigger(callback) {
12-
;(callbacks[callback] || []).forEach((cb) => {
13-
cb.apply(cb, Array.prototype.slice.call(arguments, 1))
14-
})
12+
(callbacks[callback] || []).forEach(cb => {
13+
cb.apply(cb, Array.prototype.slice.call(arguments, 1));
14+
});
1515
}
1616

1717
const validActions = {
1818
login: true,
1919
signup: true,
2020
error: true
21-
}
21+
};
2222

2323
const netlifyIdentity = {
2424
on: (event, cb) => {
25-
callbacks[event] = callbacks[event] || []
26-
callbacks[event].push(cb)
25+
callbacks[event] = callbacks[event] || [];
26+
callbacks[event].push(cb);
2727
},
28-
open: (action) => {
29-
action = action || "login"
28+
open: action => {
29+
action = action || "login";
3030
if (!validActions[action]) {
31-
throw new Error(`Invalid action for open: ${action}`)
31+
throw new Error(`Invalid action for open: ${action}`);
3232
}
33-
store.openModal(store.user ? "user" : action)
33+
store.openModal(store.user ? "user" : action);
3434
},
3535
close: () => {
36-
store.closeModal()
36+
store.closeModal();
3737
},
3838
currentUser: () => {
39-
return store.gotrue && store.gotrue.currentUser()
39+
return store.gotrue && store.gotrue.currentUser();
4040
},
4141
logout: () => {
42-
return store.logout()
42+
return store.logout();
4343
},
4444
get gotrue() {
4545
if (!store.gotrue) {
46-
store.openModal("login")
46+
store.openModal("login");
4747
}
48-
return store.gotrue
48+
return store.gotrue;
4949
},
50-
init: (options) => {
51-
init(options)
50+
init: options => {
51+
init(options);
5252
},
5353
store
54-
}
54+
};
5555

56-
let queuedIframeStyle = null
56+
let queuedIframeStyle = null;
5757
function setStyle(el, css) {
58-
let style = ""
58+
let style = "";
5959
for (const key in css) {
60-
style += `${key}: ${css[key]}; `
60+
style += `${key}: ${css[key]}; `;
6161
}
6262
if (el) {
63-
el.setAttribute("style", style)
63+
el.setAttribute("style", style);
6464
} else {
65-
queuedIframeStyle = style
65+
queuedIframeStyle = style;
6666
}
6767
}
6868

6969
const localHosts = {
7070
localhost: true,
7171
"127.0.0.1": true,
72-
"0.0.0.0": true
73-
}
72+
"0.0.0.0": true,
73+
"identity.netlify.com": true
74+
};
7475

7576
function instantiateGotrue(APIUrl) {
76-
const isLocal = localHosts[document.location.host.split(":").shift()]
77-
const siteURL = isLocal && localStorage.getItem("netlifySiteURL")
77+
const isLocal = localHosts[document.location.host.split(":").shift()];
78+
const siteURL = isLocal && localStorage.getItem("netlifySiteURL");
7879
if (APIUrl) {
79-
return new GoTrue({ APIUrl, setCookie: !isLocal })
80+
return new GoTrue({ APIUrl, setCookie: !isLocal });
8081
}
8182
if (isLocal && siteURL) {
82-
const parts = [siteURL]
83+
const parts = [siteURL];
8384
if (!siteURL.match(/\/$/)) {
84-
parts.push("/")
85+
parts.push("/");
8586
}
86-
parts.push(".netlify/identity")
87-
return new GoTrue({ APIUrl: parts.join(""), setCookie: !isLocal })
87+
parts.push(".netlify/identity");
88+
store.setIsLocal(isLocal);
89+
store.setSiteURL(siteURL);
90+
return new GoTrue({ APIUrl: parts.join(""), setCookie: !isLocal });
8891
}
8992
if (isLocal) {
90-
return null
93+
store.setIsLocal(isLocal);
94+
return null;
9195
}
9296

93-
return new GoTrue({ setCookie: !isLocal })
97+
return new GoTrue({ setCookie: !isLocal });
9498
}
9599

96-
let root
97-
let iframe
100+
let root;
101+
let iframe;
98102
const iframeStyle = {
99103
position: "fixed",
100104
top: 0,
@@ -106,129 +110,136 @@ const iframeStyle = {
106110
background: "transparent",
107111
display: "none",
108112
"z-index": 99
109-
}
113+
};
110114

111115
observe(store.modal, "isOpen", () => {
112116
if (!store.settings) {
113-
store.loadSettings()
117+
store.loadSettings();
114118
}
115119
setStyle(iframe, {
116120
...iframeStyle,
117121
display: store.modal.isOpen ? "block !important" : "none"
118-
})
122+
});
119123
if (store.modal.isOpen) {
120-
trigger("open", store.modal.page)
124+
trigger("open", store.modal.page);
121125
} else {
122-
trigger("close")
126+
trigger("close");
123127
}
124-
})
128+
});
125129

126130
observe(store, "siteURL", () => {
127131
if (store.siteURL === null || store.siteURL === undefined) {
128-
localStorage.removeItem("netlifySiteURL")
132+
localStorage.removeItem("netlifySiteURL");
129133
} else {
130-
localStorage.setItem("netlifySiteURL", store.siteURL)
134+
localStorage.setItem("netlifySiteURL", store.siteURL);
131135
}
132-
store.init(instantiateGotrue(), true)
133-
})
136+
store.init(instantiateGotrue(), true);
137+
});
134138

135139
observe(store, "user", () => {
136140
if (store.user) {
137-
trigger("login", store.user)
141+
trigger("login", store.user);
138142
} else {
139-
trigger("logout")
143+
trigger("logout");
140144
}
141-
})
145+
});
142146

143147
observe(store, "gotrue", () => {
144-
store.gotrue && trigger("init", store.gotrue.currentUser())
145-
})
148+
store.gotrue && trigger("init", store.gotrue.currentUser());
149+
});
146150

147151
observe(store, "error", () => {
148-
trigger("error", store.error)
149-
})
152+
trigger("error", store.error);
153+
});
150154

151-
const routes = /(confirmation|invite|recovery|email_change)_token=([^&]+)/
152-
const errorRoute = /error=access_denied&error_description=403/
153-
const accessTokenRoute = /access_token=/
155+
const routes = /(confirmation|invite|recovery|email_change)_token=([^&]+)/;
156+
const errorRoute = /error=access_denied&error_description=403/;
157+
const accessTokenRoute = /access_token=/;
154158

155159
function runRoutes() {
156-
const hash = (document.location.hash || "").replace(/^#\/?/, "")
160+
const hash = (document.location.hash || "").replace(/^#\/?/, "");
157161
if (!hash) {
158-
return
162+
return;
159163
}
160164

161-
const m = hash.match(routes)
165+
const m = hash.match(routes);
162166
if (m) {
163-
store.verifyToken(m[1], m[2])
164-
document.location.hash = ""
167+
store.verifyToken(m[1], m[2]);
168+
document.location.hash = "";
165169
}
166170

167-
const em = hash.match(errorRoute)
171+
const em = hash.match(errorRoute);
168172
if (em) {
169-
store.openModal("signup")
170-
document.location.hash = ""
173+
store.openModal("signup");
174+
document.location.hash = "";
171175
}
172176

173-
const am = hash.match(accessTokenRoute)
177+
const am = hash.match(accessTokenRoute);
174178
if (am) {
175-
const params = {}
176-
hash.split("&").forEach((pair) => {
177-
const [key, value] = pair.split("=")
178-
params[key] = value
179-
})
179+
const params = {};
180+
hash.split("&").forEach(pair => {
181+
const [key, value] = pair.split("=");
182+
params[key] = value;
183+
});
180184
if (!!document && params["access_token"]) {
181-
document.cookie = `nf_jwt=${params["access_token"]}`
185+
document.cookie = `nf_jwt=${params["access_token"]}`;
182186
}
183-
document.location.hash = ""
184-
store.openModal("login")
185-
store.completeExternalLogin(params)
187+
document.location.hash = "";
188+
store.openModal("login");
189+
store.completeExternalLogin(params);
186190
}
187191
}
188192

189193
function init(options = {}) {
190-
const { APIUrl, logo = true, namePlaceholder } = options
191-
const controlEls = document.querySelectorAll("[data-netlify-identity-menu],[data-netlify-identity-button]")
192-
Array.prototype.slice.call(controlEls).forEach((el) => {
193-
let controls = null
194-
const mode = el.getAttribute("data-netlify-identity-menu") === null ? "button" : "menu"
194+
const { APIUrl, logo = true, namePlaceholder } = options;
195+
const controlEls = document.querySelectorAll(
196+
"[data-netlify-identity-menu],[data-netlify-identity-button]"
197+
);
198+
Array.prototype.slice.call(controlEls).forEach(el => {
199+
let controls = null;
200+
const mode =
201+
el.getAttribute("data-netlify-identity-menu") === null
202+
? "button"
203+
: "menu";
195204
render(
196205
<Provider store={store}>
197206
<Controls mode={mode} text={el.innerText.trim()} />
198207
</Provider>,
199208
el,
200209
controls
201-
)
202-
})
203-
204-
store.init(instantiateGotrue(APIUrl))
205-
store.modal.logo = logo
206-
store.setNamePlaceholder(namePlaceholder)
207-
iframe = document.createElement("iframe")
208-
iframe.id = "netlify-identity-widget"
210+
);
211+
});
212+
213+
store.init(instantiateGotrue(APIUrl));
214+
store.modal.logo = logo;
215+
store.setNamePlaceholder(namePlaceholder);
216+
iframe = document.createElement("iframe");
217+
iframe.id = "netlify-identity-widget";
209218
iframe.onload = () => {
210-
const styles = iframe.contentDocument.createElement("style")
211-
styles.innerHTML = modalCSS.toString()
212-
iframe.contentDocument.head.appendChild(styles)
219+
const styles = iframe.contentDocument.createElement("style");
220+
styles.innerHTML = modalCSS.toString();
221+
iframe.contentDocument.head.appendChild(styles);
213222
root = render(
214223
<Provider store={store}>
215224
<App />
216225
</Provider>,
217226
iframe.contentDocument.body,
218227
root
219-
)
220-
runRoutes()
221-
}
222-
setStyle(iframe, iframeStyle)
223-
iframe.src = "about:blank"
224-
const container = options.container ? document.querySelector(options.container) : document.body
225-
container.appendChild(iframe)
228+
);
229+
runRoutes();
230+
};
231+
setStyle(iframe, iframeStyle);
232+
iframe.src = "about:blank";
233+
const container = options.container
234+
? document.querySelector(options.container)
235+
: document.body;
236+
container.appendChild(iframe);
226237
/* There's a certain case where we might have called setStyle before the iframe was ready.
227238
Make sure we take the last style and apply it */
228239
if (queuedIframeStyle) {
229-
iframe.setAttribute("style", queuedIframeStyle)
230-
queuedIframeStyle = null
240+
iframe.setAttribute("style", queuedIframeStyle);
241+
queuedIframeStyle = null;
231242
}
232243
}
233244

234-
export default netlifyIdentity
245+
export default netlifyIdentity;

‎src/state/store.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@ store.loadSettings = action(function loadSettings() {
6868
);
6969
});
7070

71+
store.setIsLocal = action(function setIsLocal(isLocal) {
72+
store.isLocal = isLocal;
73+
});
74+
7175
store.setSiteURL = action(function setSiteURL(url) {
7276
store.siteURL = url;
7377
});

0 commit comments

Comments
 (0)