Skip to content

Commit 1ee257d

Browse files
acoumbacoumb
committed
UI and API integrations.
1 parent 73823ce commit 1ee257d

File tree

16 files changed

+490
-36
lines changed

16 files changed

+490
-36
lines changed

‎src/Umbraco.Cms.Integrations.SEO.GoogleSearchConsole.UrlInspectionTool/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/css/urlInspection.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.w25r { width: 25rem;}

‎src/Umbraco.Cms.Integrations.SEO.GoogleSearchConsole.UrlInspectionTool/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/js/url-inspection-tool.controller.js

Lines changed: 73 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,30 @@
1-
function urlInspectionToolController(notificationsService, umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource) {
1+
function urlInspectionToolController(editorState, notificationsService, umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource) {
22
var vm = this;
33

44
vm.loading = false;
5-
vm.isConnected = false;
5+
vm.showResults = false;
6+
vm.oauthConfiguration = {};
7+
vm.inspectionResult = {};
68

7-
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.getAuthorizationUrl().then(function(response) {
8-
vm.authorizationUrl = response;
9+
// get available cultures for current node
10+
vm.currentCultures = editorState.current.urls.map(p => p.culture);
11+
12+
// build default url inspection object
13+
vm.siteUrl = location.href.slice(0, location.href.indexOf("umbraco") - 1);
14+
vm.urlInspection = {
15+
inspectionUrl: `${vm.siteUrl}${editorState.current.urls.find(p => p.culture === vm.currentCultures[0]).text}`,
16+
siteUrl: vm.siteUrl,
17+
languageCode: vm.currentCultures[0],
18+
enabled: false
19+
};
20+
21+
// get oauth configuration
22+
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.getOAuthConfiguration().then(function(response) {
23+
vm.oauthConfiguration = response;
924
});
1025

1126
vm.onConnectClick = function() {
12-
vm.authorizationWindow = window.open(vm.authorizationUrl,
27+
vm.authorizationWindow = window.open(vm.oauthConfiguration.authorizationUrl,
1328
"GoogleSearchConsole_Authorize",
1429
"width=900,height=700,modal=yes,alwaysRaised=yes");
1530
}
@@ -18,35 +33,80 @@
1833
revokeToken();
1934
}
2035

36+
vm.onInspect = function () {
37+
38+
vm.loading = true;
39+
40+
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.inspect(vm.urlInspection.inspectionUrl, vm.urlInspection.siteUrl, vm.urlInspection.languageCode)
41+
.then(function (response) {
42+
43+
vm.loading = false;
44+
45+
if (response.error !== undefined && response.error !== null) {
46+
47+
notificationsService.warning(response.error.status, response.error.message);
48+
49+
// if token expired -> refresh access token
50+
if (response.error.code === "401") {
51+
vm.isConnected = false;
52+
53+
// refresh access token
54+
notificationsService.warning("Google Search Console Authorization", "Refreshing access token.");
55+
56+
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.refreshAccessToken().then(
57+
function(response) {
58+
if (response.length !== "error") {
59+
vm.isConnected = true;
60+
}
61+
});
62+
}
63+
} else {
64+
vm.showResults = true;
65+
vm.inspectionResult = response.inspectionResult;
66+
}
67+
});
68+
}
69+
70+
vm.onEdit = function() {
71+
vm.urlInspection.enabled = true;
72+
}
73+
74+
vm.onChangeLanguageCode = function() {
75+
vm.urlInspection.inspectionUrl =
76+
`${vm.siteUrl}${editorState.current.urls.find(p => p.culture === vm.urlInspection.languageCode).text}`;
77+
}
78+
2179
// authorization listener
2280
window.addEventListener("message", function (event) {
2381
if (event.data.type === "google:oauth:success") {
2482

2583
var codeParam = "?code=";
84+
var scopeParam = "&scope=";
2685

2786
vm.authorizationWindow.close();
2887

29-
var code = event.data.url.slice(event.data.url.indexOf(codeParam) + codeParam.length);
88+
var code = event.data.url.slice(event.data.url.indexOf(codeParam) + codeParam.length, event.data.url.indexOf(scopeParam));
3089

3190
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.getAccessToken(code).then(function (response) {
3291
if (response !== "error") {
33-
vm.isConnected = true;
34-
notificationsService.success("Google Search Console Authentication", "Access Approved");
92+
vm.oauthConfiguration.isConnected = true;
93+
notificationsService.success("Google Search Console Authorization", "Access Approved");
3594
} else {
36-
notificationsService.error("Google Search Console Authentication", "Access Denied");
95+
notificationsService.error("Google Search Console Authorization", "Access Denied");
3796
}
3897
});
3998
} else if (event.data.type === "google:oauth:denied") {
40-
vm.showError("Google Search Console Authentication", "Access Denied");
41-
42-
vm.authWindow.close();
99+
notificationsService.error("Google Search Console Authorization", "Access Denied");
100+
vm.oauthConfiguration.isConnected = false;
101+
vm.authorizationWindow.close();
43102
}
44103

45104
}, false);
46105

47106
function revokeToken() {
48107
umbracoCmsIntegrationsGoogleSearchConsoleUrlInspectionToolResource.revokeToken().then(function () {
49-
vm.isConnected = false;
108+
vm.oauthConfiguration.isConnected = false;
109+
vm.showResults = false;
50110
});
51111
}
52112
}

‎src/Umbraco.Cms.Integrations.SEO.GoogleSearchConsole.UrlInspectionTool/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/js/url-inspection-tool.resource.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,27 @@
33
const apiEndpoint = "backoffice/UmbracoCmsIntegrationsGoogleSearchConsole/UrlInspectionApi";
44

55
return {
6-
getAuthorizationUrl: function () {
6+
getOAuthConfiguration: function () {
77
return umbRequestHelper.resourcePromise(
8-
$http.get(`${apiEndpoint}/GetAuthorizationUrl`),
8+
$http.get(`${apiEndpoint}/GetOAuthConfiguration`),
99
"Failed to retrieve resource");
1010
},
1111
getAccessToken: function (authorizationCode) {
1212
return umbRequestHelper.resourcePromise(
1313
$http.post(`${apiEndpoint}/GetAccessToken`, { code: authorizationCode }), "Failed to retrieve resource");
1414
},
15+
refreshAccessToken: function () {
16+
return umbRequestHelper.resourcePromise(
17+
$http.post(`${apiEndpoint}/RefreshAccessToken`), "Failed to retrieve resource");
18+
},
1519
revokeToken: function () {
1620
return umbRequestHelper.resourcePromise(
1721
$http.post(`${apiEndpoint}/RevokeToken`), "Failed to retrieve resource");
1822
},
23+
inspect: function (inspectionUrl, siteUrl, languageCode) {
24+
return umbRequestHelper.resourcePromise(
25+
$http.post(`${apiEndpoint}/Inspect`, { inspectionUrl: inspectionUrl, siteUrl: siteUrl, languageCode: languageCode }), "Failed to retrieve resource");
26+
}
1927
};
2028
}
2129

‎src/Umbraco.Cms.Integrations.SEO.GoogleSearchConsole.UrlInspectionTool/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/package.manifest

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@
33
"~/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/js/url-inspection-tool.resource.js",
44
"~/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/js/url-inspection-tool.controller.js"
55
],
6-
"css": []
6+
"css": [
7+
"~/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/css/urlInspection.css"
8+
]
79
}

‎src/Umbraco.Cms.Integrations.SEO.GoogleSearchConsole.UrlInspectionTool/App_Plugins/UmbracoCms.Integrations/SEO/GoogleSearchConsole/URLInspectionTool/urlInspection.html

Lines changed: 104 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,119 @@
77
button-style="primary"
88
state="init"
99
label="Connect"
10-
disabled="vm.isConnected">
10+
disabled="vm.oauthConfiguration.isConnected">
1111
</umb-button>
1212
<umb-button action="vm.onRevokeToken()"
1313
type="button"
1414
button-style="danger"
1515
state="init"
1616
label="Revoke"
17-
disabled="!vm.isConnected">
17+
disabled="!vm.oauthConfiguration.isConnected">
1818
</umb-button>
1919
</umb-box-header>
2020
<umb-box-content>
21-
21+
<div>
22+
<h5>About Google Search Console - URL Inspection API</h5>
23+
<p>
24+
The Search Console APIs are a way to access data outside of Search Console, through external applications and products.
25+
</p>
26+
<p>
27+
You can request the data Search Console has about the indexed version of the current node, and the API will return the indexed information.
28+
</p>
29+
<p>
30+
The request parameters include the URL you'd like to inspect and the URL of the property as defined in Search Console.
31+
</p>
32+
<p>
33+
The response includes analysis results containing information from Search Console, including index status, AMP, rich results and mobile usability.
34+
</p>
35+
<p>
36+
Usage limits - the quote is enforced per Search Console website property: 2000 queries per day / 600 queries per minute.
37+
</p>
38+
</div>
39+
<div class="flex justify-start">
40+
<div class="flx-b2">
41+
<div class="flex justify-start">
42+
<div class="w25r">
43+
<h5>Inspection URL</h5>
44+
<input type="text" class="w-100" ng-model="vm.urlInspection.inspectionUrl" no-dirty-check ng-disabled="!vm.urlInspection.enabled"/>
45+
</div>
46+
<div class="ml3 w25r">
47+
<h5>Site URL</h5>
48+
<input type="text" class="w-100" ng-model="vm.urlInspection.siteUrl" no-dirty-check ng-disabled="!vm.urlInspection.enabled"/>
49+
</div>
50+
<div class="ml3">
51+
<h5>Language Code</h5>
52+
<select ng-model="vm.urlInspection.languageCode" ng-change="vm.onChangeLanguageCode()">
53+
<option ng-repeat="item in vm.currentCultures" value="{{ item }}">{{ item }}</option>
54+
</select>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="flex justify-start">
60+
<div class="flx-b2">
61+
<div class="flex justify-start">
62+
<div>
63+
<umb-button action="vm.onInspect()"
64+
type="button"
65+
button-style="primary"
66+
state="init"
67+
label="Inspect"
68+
disabled="!vm.oauthConfiguration.isConnected">
69+
</umb-button>
70+
</div>
71+
<div>
72+
<umb-button action="vm.onEdit()"
73+
type="button"
74+
button-style="warning"
75+
state="init"
76+
label="Edit"
77+
disabled="!vm.oauthConfiguration.isConnected">
78+
</umb-button>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="mt4" ng-if="vm.showResults">
84+
<umb-box>
85+
<umb-box-header title="Inspection Result Link" description="Link to Search Console URL inspection."></umb-box-header>
86+
<umb-box-content>
87+
<a href="{{ vm.inspectionResult.inspectionResultLink }}">{{ vm.inspectionResult.inspectionResultLink }}</a>
88+
</umb-box-content>
89+
</umb-box>
90+
<umb-box ng-if="vm.inspectionResult.indexStatusResult">
91+
<umb-box-header title="Index Status Result" description="Result of the index status analysis."></umb-box-header>
92+
<umb-box-content>
93+
<p ng-repeat="(key, value) in vm.inspectionResult.indexStatusResult">
94+
<b>{{key}}</b> {{ value }}
95+
</p>
96+
</umb-box-content>
97+
</umb-box>
98+
<umb-box ng-if="vm.inspectionResult.ampResult">
99+
<umb-box-header title="AMP Result" description="Result of the AMP analysis. Absent if the page is not an AMP page."></umb-box-header>
100+
<umb-box-content>
101+
<p ng-repeat="(key, value) in vm.inspectionResult.ampResult">
102+
<b>{{key}}</b> {{ value }}
103+
</p>
104+
</umb-box-content>
105+
</umb-box>
106+
<umb-box ng-if="vm.inspectionResult.mobileUsabilityResult">
107+
<umb-box-header title="Mobile Usability Result" description="Result of the Mobile usability analysis."></umb-box-header>
108+
<umb-box-content>
109+
<p ng-repeat="(key, value) in vm.inspectionResult.mobileUsabilityResult">
110+
<b>{{key}}</b> {{ value }}
111+
</p>
112+
</umb-box-content>
113+
</umb-box>
114+
<umb-box ng-if="vm.inspectionResult.richResultsResult">
115+
<umb-box-header title="Rich Results Result" description="Result of the Rich Results analysis. Absent if there are no rich results found."></umb-box-header>
116+
<umb-box-content>
117+
<p ng-repeat="(key, value) in vm.inspectionResult.richResultsResult">
118+
<b>{{key}}</b> {{ value }}
119+
</p>
120+
</umb-box-content>
121+
</umb-box>
122+
</div>
22123
</umb-box-content>
23124
</umb-box>
24125
</div>

0 commit comments

Comments
 (0)