Skip to content

Commit 7326c64

Browse files
georgehgeorgeh
authored
Merge pull request #46 from Automattic/add/json-api-help
Add a custom JSON API template
2 parents 333da00 + 078fca3 commit 7326c64

File tree

2 files changed

+156
-1
lines changed

2 files changed

+156
-1
lines changed

‎dist/wp-die-json-api.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4+
<meta name="viewport" content="width=device-width">
5+
<meta name='robots' content='noindex,follow' />
6+
<title>WordPress &rsaquo; Error</title>
7+
<style type="text/css">
8+
html {
9+
background: #f1f1f1;
10+
}
11+
body {
12+
background: #fff;
13+
color: #444;
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
15+
margin: 2em auto;
16+
padding: 1em 2em;
17+
max-width: 700px;
18+
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
19+
box-shadow: 0 1px 3px rgba(0,0,0,0.13);
20+
}
21+
h1 {
22+
border-bottom: 1px solid #dadada;
23+
clear: both;
24+
color: #666;
25+
font-size: 24px;
26+
margin: 30px 0 0 0;
27+
padding: 0;
28+
padding-bottom: 7px;
29+
}
30+
31+
h2 {
32+
color: #666;
33+
font-size: 20px;
34+
}
35+
#error-page {
36+
margin-top: 50px;
37+
}
38+
#error-page p {
39+
font-size: 14px;
40+
line-height: 1.5;
41+
margin: 25px 0 20px;
42+
}
43+
#error-page code {
44+
font-family: Consolas, Monaco, monospace;
45+
}
46+
ul li {
47+
margin-bottom: 10px;
48+
font-size: 14px ;
49+
}
50+
a {
51+
color: #0073aa;
52+
}
53+
a:hover,
54+
a:active {
55+
color: #00a0d2;
56+
}
57+
a:focus {
58+
color: #124964;
59+
-webkit-box-shadow:
60+
0 0 0 1px #5b9dd9,
61+
0 0 2px 1px rgba(30, 140, 190, .8);
62+
box-shadow:
63+
0 0 0 1px #5b9dd9,
64+
0 0 2px 1px rgba(30, 140, 190, .8);
65+
outline: none;
66+
}
67+
.button {
68+
background: #f7f7f7;
69+
border: 1px solid #ccc;
70+
color: #555;
71+
display: inline-block;
72+
text-decoration: none;
73+
font-size: 13px;
74+
line-height: 26px;
75+
height: 28px;
76+
margin: 0;
77+
padding: 0 10px 1px;
78+
cursor: pointer;
79+
-webkit-border-radius: 3px;
80+
-webkit-appearance: none;
81+
border-radius: 3px;
82+
white-space: nowrap;
83+
-webkit-box-sizing: border-box;
84+
-moz-box-sizing: border-box;
85+
box-sizing: border-box;
86+
87+
-webkit-box-shadow: 0 1px 0 #ccc;
88+
box-shadow: 0 1px 0 #ccc;
89+
vertical-align: top;
90+
}
91+
92+
.button.button-large {
93+
height: 30px;
94+
line-height: 28px;
95+
padding: 0 12px 2px;
96+
}
97+
98+
.button:hover,
99+
.button:focus {
100+
background: #fafafa;
101+
border-color: #999;
102+
color: #23282d;
103+
}
104+
105+
.button:focus {
106+
border-color: #5b9dd9;
107+
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
108+
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
109+
outline: none;
110+
}
111+
112+
.button:active {
113+
background: #eee;
114+
border-color: #999;
115+
-webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
116+
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
117+
-webkit-transform: translateY(1px);
118+
-ms-transform: translateY(1px);
119+
transform: translateY(1px);
120+
}
121+
122+
img {
123+
display: block;
124+
margin: 0 auto;
125+
}
126+
127+
.error {
128+
background-color: #eee;
129+
padding: 3px;
130+
font-size: 11px;
131+
line-height: 1.2;
132+
}
133+
134+
</style>
135+
</head>
136+
<body id="error-page">
137+
<h1>Unable to connect to your site</h1>
138+
<p>You authorized a connection between WordPress.com and the Google Docs Add On, but we are unable to connect to your site.</p>
139+
<p><code class="error"><?!= error ?></code></p>
140+
141+
<h2>What do I do now?</h2>
142+
<p>The most likely cause is that you do not have the <a href="https://jetpack.com/support/json-api/">Jetpack JSON API</a> enabled. You can check this from the <code>Jetpack > Settings</code> menu on your site.</p>
143+
<p><img src="https://apps.files.wordpress.com/2017/03/enable-json-api_png.png" width="600" /></p>
144+
<p>After enabling it close this window and try adding your site again.</p>
145+
146+
<h2>It's still not working!</h2>
147+
<p><a href="https://support.wordpress.com/">Contact support</a> if you need more help.</p>
148+
</body>
149+
</html>

‎src/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,12 @@ function wpDie( message = '' ) {
9494
return out.evaluate();
9595
}
9696

97+
function wpDieTemplate( template, error ) {
98+
const out = HtmlService.createTemplateFromFile( 'wp-die-' + template );
99+
out.error = error.message;
100+
return out.evaluate();
101+
}
102+
97103
export function authCallback( request ) {
98104
let isAuthorized;
99105
try {
@@ -107,7 +113,7 @@ export function authCallback( request ) {
107113
try {
108114
site.info = wpClient.getSiteInfo( site )
109115
} catch ( e ) {
110-
return wpDie( 'There was a problem getting your site\'s information. Please make sure you have the <a href="https://jetpack.com/support/json-api/">Jetpack JSON API</a> enabled, and try re-adding it. <a href="https://support.wordpress.com/">Contact support</a> if you need more help. <pre>' + e );
116+
return wpDieTemplate( 'json-api', e );
111117
}
112118
store.addSite( site )
113119
const template = HtmlService.createTemplateFromFile( 'oauthSuccess' );

0 commit comments

Comments
 (0)