PR review updates: readme, styling, form rendering.

Author: acoumb

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/Render/HubspotForm.cshtml

@@ -1,11 +1,12 @@
 @using System.Configuration
 @inherits Umbraco.Web.Mvc.UmbracoViewPage<Umbraco.Cms.Integrations.Crm.Hubspot.Models.ViewModels.HubspotFormViewModel>
 
-<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
+<script charset="utf-8" type="text/javascript" src="https://js-eu1.hsforms.net/forms/shell.js"></script>
 <script>
     hbspt.forms.create({
         region: "eu1",
         portalId: "@Model.PortalId",
         formId: "@Model.Id"
     });
-</script>
+</script>
+

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/css/styles.css

@@ -20,7 +20,7 @@
 
     .hsFormsList a i {
         position: absolute;
-        top: .25rem;
+        top: .5rem;
         left: .25rem;
     }
 

src/Umbraco.Cms.Integrations.Crm.Hubspot/App_Plugins/UmbracoCms.Integrations/Crm/Hubspot/js/settings.controller.js

@@ -4,37 +4,39 @@
 
     const oauthName = "OAuth";
 
+    vm.oauthSetup = {};
     vm.status = {};
 
-    umbracoCmsIntegrationsCrmHubspotResource.checkApiConfiguration().then(function (response) {
+    $scope.$on('formSubmitting', function () {
 
-        vm.status = {
-            isValid: response.isValid === true,
-            type: response.type,
-            description: response.isValid === true ? `${response.type.value} is configured.` : "Invalid configuration",
-            useOAuth: response.isValid === true && response.type.value === oauthName
-        };
+        $scope.model.value.isValid = vm.status.isValid;
+        $scope.model.value.type = vm.status.type;
 
-        if (response.isValid === true) {
-            notificationsService.success("Configuration", `${response.type.value} setup is configured.`);
-        } else {
-            notificationsService.warning("Configuration",
-                "Invalid setup. Please review the API/OAuth settings.");
-        }
     });
 
-    //if (vm.useOAuth) {
-    //    // validate token
-    //    validateOAuthAccessToken();
-    //}
-
-    //$scope.$on('formSubmitting', function () {
+    umbracoCmsIntegrationsCrmHubspotResource.checkApiConfiguration()
+        .then(function(response) {
 
-    //    $scope.model.value.isValid = vm.status.isValid;
-    //    $scope.model.value.type = vm.status.type;
+            vm.status = {
+                isValid: response.isValid === true,
+                type: response.type,
+                description: response.isValid === true
+                    ? `${response.type.value} is configured.`
+                    : "Invalid configuration",
+                useOAuth: response.isValid === true && response.type.value === oauthName
+            };
 
-    //});
+            if (vm.status.useOAuth) {
+                validateOAuthSetup();
+            }
 
+            if (response.isValid === true) {
+                notificationsService.success("Configuration", `${response.type.value} setup is configured.`);
+            } else {
+                notificationsService.warning("Configuration",
+                    "Invalid setup. Please review the API/OAuth settings.");
+            }
+        });
 
     vm.onConnectClick = function () {
 
@@ -48,7 +50,7 @@
     // authorization listener
     window.addEventListener("message", function (event) {
         if (event.data.type === "hubspot:oauth:success") {
-            
+
             umbracoCmsIntegrationsCrmHubspotResource.getAccessToken(event.data.code).then(function (response) {
                 vm.oauthSetup.isConnected = true;
             });
@@ -57,28 +59,7 @@
     }, false);
 
 
-    // custom handlers
-
-    function handleOAuthConfiguration() {
-        umbracoCmsIntegrationsCrmHubspotResource.checkOAuthConfiguration().then(function (response) {
-            handleConfigurationValidation(response);
-            if (vm.settingsValidation.isValid === false) {
-                vm.useOAuth = false;
-                vm.items.find(el => el.name === oAuthName).checked = false;
-            }
-            
-        });
-    }
-
-    function handleConfigurationValidation(result) {
-        if (result === false) {
-            vm.settingsValidation.isValid = false;
-            notificationsService.warning("Settings", vm.settingsValidation.message);
-        } else
-            vm.settingsValidation.isValid = true;
-    }
-
-    function validateOAuthAccessToken() {
+    function validateOAuthSetup() {
         umbracoCmsIntegrationsCrmHubspotResource.validateAccessToken().then(function (response) {
 
             vm.oauthSetup = {

src/Umbraco.Cms.Integrations.Crm.Hubspot/readme.md

@@ -24,18 +24,49 @@ Add this to an app setting in `Web.config`:
 ```
   <appSettings>
     ...
-    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.DefaultLanguage" value="[your API key]" />
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.ApiKey" value="[your API key]" />
     ...
   </appSettings>
 ```
 
 #### OAuth
 
-TBC.
+In order to use HubSpot OAuth authentication, you will need at least one private app registered with your account.
+
+Log into your HubSpot account, go to _Settings > Integrations > Private Apps_ and create a new private app. In the _Scopes_ tab select
+the following two: _oauth_ and _forms_.
+
+Add the following app settings in `Web.config`:
+```
+  <appSettings>
+    ...
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthClientId" value="[your Client ID]" />
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthScopes" value="oauth forms" />
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthRedirectUrl" value="[your website URL]" />
+    <add key="Umbraco.Cms.Integrations.OAuthProxyUrl" value="[Umbraco proxy URL]" /> 
+    ...
+  </appSettings>
+```
+No two set of app settings will work simultaneously.
+
+#### Debug Configuration
+
+While in DEBUG mode use following post build events:
+```
+  set UmbracoCmsIntegrationsTestsiteV8Path=$(SolutionDir)\Umbraco.Cms.Integrations.Testsite.V8
+  set HubspotDir=%UmbracoCmsIntegrationsTestsiteV8Path%\App_Plugins\UmbracoCms.Integrations\Crm\Hubspot
+  if not exist %HubspotDir% mkdir -p %HubspotDir%
+  xcopy "$(ProjectDir)App_Plugins\UmbracoCms.Integrations\Crm\Hubspot" "%HubspotDir%" /e /y
+```
 
 ### Backoffice usage
 
-TBC.
+Property Editor will check the settings in `Web.config`, validate the configuration based on the existing
+app settings and prompt the user a notification. 
+
+If OAuth is available, then the _Connect_ button will be enabled, prompting the user, on clicked, 
+with the HubSpot authorization window. The retrieved access token will be saved into the database and 
+used for future requests.
 
 ### Front-end rendering
 

src/Umbraco.Cms.Integrations.Crm.Hubspot/readme.txt

@@ -52,10 +52,11 @@
     <!-- Hubspot Configuration -->
     <add key="Umbraco.Cms.Integrations.Crm.Hubspot.ApiKey" value=""/>
 
-    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthClientId" value=""/>
-    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthScopes" value="oauth reports forms"/>
+    <!-- OAuth Settings -->
+    <!--<add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthClientId" value=""/>
+    <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthScopes" value="oauth forms"/>
     <add key="Umbraco.Cms.Integrations.Crm.Hubspot.OAuthRedirectUrl" value=""/>
-    <add key="Umbraco.Cms.Integrations.OAuthProxyUrl" value="" />
+    <add key="Umbraco.Cms.Integrations.OAuthProxyUrl" value="" />-->
   </appSettings>
   <!--
         Important: if you're upgrading Umbraco, do not clear the connectionString/providerName during your Web.config merge.