From 75a4044f12b0a4603656494dcbcdbf53d92144bb Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 2 Aug 2022 12:32:57 +0200 Subject: [PATCH] V10: Show more telemetry info on the installer (#12739) * remove absolute-center class from installer and replace with css grid * replace tooltips for telemetry with columns and a direct view of what eact telemetry level means * ensure that inputs will out entire columns and that buttons are aligned as the rest of the system with the CTA on the right side * update buttons on the database screen to match the user screen * set min-width on installer for views with only text content * add border to preconfigured database field * remove extra headline from telemetry data info text * change telemetry info text to 'small' * remove opacity for database settings * update wording of intro text to the installer * add unordered list to the detailed telemetry description * add helper text to indicate that telemetry can be changed later * change wording from 'analytics' to 'telemetry data' * add smooth-steps-tap to noUiSlider for telemetry data * add short text explaining what telemetry is to the installer --- .../umbraco/UmbracoInstall/Index.cshtml | 2 +- .../EmbeddedResources/Lang/en_us.xml | 19 +- .../src/installer/steps/database.html | 310 ++++++++++-------- .../src/installer/steps/user.controller.js | 36 +- .../src/installer/steps/user.html | 224 ++++++++----- .../src/less/installer.less | 71 ++-- .../settings/analytics.controller.js | 1 + .../views/dashboard/settings/analytics.html | 23 +- 8 files changed, 403 insertions(+), 283 deletions(-) diff --git a/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoInstall/Index.cshtml b/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoInstall/Index.cshtml index 92e458c3b0..406c311312 100644 --- a/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoInstall/Index.cshtml +++ b/src/Umbraco.Cms.StaticAssets/umbraco/UmbracoInstall/Index.cshtml @@ -26,7 +26,7 @@
-
diff --git a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml index 9641fda47f..b971e2c13c 100644 --- a/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml +++ b/src/Umbraco.Core/EmbeddedResources/Lang/en_us.xml @@ -2528,7 +2528,7 @@ To manage your website, simply open the Umbraco backoffice and start adding cont Published Status Models Builder Health Check - Analytics + Telemetry data Profiling Getting Started Install Umbraco Forms @@ -2886,8 +2886,8 @@ To manage your website, simply open the Umbraco backoffice and start adding cont items returned - Consent for analytics - Analytics level saved! + Consent for telemetry data + Telemetry level saved! - Anonymized site ID, umbraco version, and packages installed. -
- Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use. -
- System information: Webserver, server OS, server framework, server OS language, and database provider. -
- Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode. -
-
We might change what we send on the Detailed level in the future. If so, it will be listed above. +
    +
  • Anonymized site ID, umbraco version, and packages installed.
    • +
  • Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.
    • +
  • System information: Webserver, server OS, server framework, server OS language, and database provider.
    • +
  • Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.
    • +
+ We might change what we send on the Detailed level in the future. If so, it will be listed above.
By choosing "Detailed" you agree to current and future anonymized information being collected. ]]> diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/database.html b/src/Umbraco.Web.UI.Client/src/installer/steps/database.html index dc3b972718..e248f3221b 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/steps/database.html +++ b/src/Umbraco.Web.UI.Client/src/installer/steps/database.html @@ -1,144 +1,188 @@
+

Configure your database

+

+ Enter connection and authentication details for the database you want to + install Umbraco on +

-

Configure your database

-

- Enter connection and authentication details for the database you want to install Umbraco on -

+
+
+ What type of database do you use? + +
+ +
+
- -
- What type of database do you use? - +
+ What is the exact connection string we should use? +
+ +
+ + Enter a valid database connection string. +
+
+ +
+ +
+ +
+
+
+ +
+
+ Where do we find your database? + +
+
+
+ +
+ + Enter server domain or IP +
+
+
+
+ +
+
+
- + + Enter the name of the database
+
+
-
- What is the exact connection string we should use? -
- -
- - Enter a valid database connection string. -
-
- -
- -
- -
-
-
- - - -
-
- Where do we find your database? - -
-
-
- -
- - Enter server domain or IP -
-
-
-
- -
-
- -
- - Enter the name of the database -
-
-
-
- -
-
- What credentials are used to access the database? -
-
- -
- - Enter the database user name -
-
-
- -
-
- -
- - Enter the database password -
-
-
- -
-
- -
-
-
-
-
- - +
-
-
- - - - - - Validating your database connection... - - - - Could not connect to database - -
+ What credentials are used to access the database? +
+
+ +
+ + Enter the database user name +
+
+ +
+
+ +
+ + Enter the database password +
+
+
+ +
+
+ +
+
- +
+
+ +
+
+ + +
+
+ + Validating your database connection... + + + + Could not connect to database + +
+
+
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js index b4aa8eedf5..dab3f1beaf 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js +++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js @@ -3,7 +3,7 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f $scope.majorVersion = Umbraco.Sys.ServerVariables.application.version; $scope.passwordPattern = /.*/; $scope.installer.current.model.subscribeToNewsLetter = $scope.installer.current.model.subscribeToNewsLetter || false; - $scope.installer.current.model.telemetryLevel = $scope.installer.current.model.telemetryLevel || $scope.installer.current.model.consentLevels[1].level; + setTelemetryLevelAndDescription($scope.installer.current.model.telemetryIndex ?? 1); if ($scope.installer.current.model.minNonAlphaNumericLength > 0) { var exp = ""; @@ -15,11 +15,6 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f $scope.passwordPattern = new RegExp(exp); } - $scope.consentTooltip = { - show: false, - event: null - }; - if ('noUiSlider' in window) { let consentSliderStartLevel = 2; const initialConsentLevel = $scope.installer.current.model.consentLevels.findIndex(x => x.level === $scope.installer.current.model.telemetryLevel); @@ -36,6 +31,7 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f "min": 1, "max": 3 }, + behaviour: 'smooth-steps-tap', pips: { mode: 'values', density: 50, @@ -63,22 +59,6 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f }); pips.forEach(function (pip) { - pip.addEventListener('mouseenter', function (e) { - $scope.$apply(function () { - const value = pip.getAttribute('data-value'); - $scope.consentTooltip.show = true; - $scope.consentTooltip.event = e; - $scope.consentTooltip.description = $sce.trustAsHtml($scope.installer.current.model.consentLevels[value - 1].description); - }); - }); - - pip.addEventListener('mouseleave', function () { - $scope.$apply(function () { - $scope.consentTooltip.show = false; - $scope.consentTooltip.event = null; - $scope.consentTooltip.description = ''; - }); - }); pip.addEventListener('click', function () { const value = pip.getAttribute('data-value'); @@ -99,8 +79,16 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f }; function onChangeConsent(values) { - const result = Number(values[0]); - $scope.installer.current.model.telemetryLevel = $scope.installer.current.model.consentLevels[result - 1].level; + const result = Number(values[0]) - 1; + $scope.$apply(() => { + setTelemetryLevelAndDescription(result); + }); }; + function setTelemetryLevelAndDescription(idx) { + $scope.telemetryDescription = $sce.trustAsHtml($scope.installer.current.model.consentLevels[idx].description); + $scope.installer.current.model.telemetryIndex = idx; + $scope.installer.current.model.telemetryLevel = $scope.installer.current.model.consentLevels[idx].level; + } + }); diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html index f0cb8ec1db..225d1feda5 100644 --- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html +++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html @@ -1,102 +1,168 @@

Install Umbraco

-

Enter your name, email and password to install Umbraco with its default settings, alternatively you can customize - your installation

+

+ Enter credentials for the default administrator user and choose the level of + consent for telemetry data of your Umbraco installation. +

-
- -
-
-
-
- -
- -
+ +
+
+
+ +
+
+
-
- -
- - Your email will be used as your login -
+
+ +
+ + Your email will be used as your login
+
-
- -
- - - At least {{installer.current.model.minCharLength}} characters long +
+ +
+ + + At least {{installer.current.model.minCharLength}} characters + long - - At least {{installer.current.model.minNonAlphaNumericLength}} - symbol{{installer.current.model.minNonAlphaNumericLength > 1 ? 's' : ''}} - -
+ + At least {{installer.current.model.minNonAlphaNumericLength}} + symbol{{installer.current.model.minNonAlphaNumericLength > 1 ? 's' + : ''}} +
+
+
+
+ +
+
+ +
- -
-
-
- - -
- + +
+
+ Provider: + {{installer.current.model.quickInstallSettings.displayName}} +
Name: + {{installer.current.model.quickInstallSettings.defaultDatabaseName}}
+
+
-
-
- +
+
+ +
+
+
- -
-
- -
-
- Provider: {{installer.current.model.quickInstallSettings.displayName}} -
Name: {{installer.current.model.quickInstallSettings.defaultDatabaseName}}
-
-
-
- -
-
-
- - -
- - -
-
- +

+ + In order to improve Umbraco and add new functionality based on as + relevant information as possible, we would like to collect system- + and usage information from your installation. + +

+

- +
+
+ + + +
+ + +
+
diff --git a/src/Umbraco.Web.UI.Client/src/less/installer.less b/src/Umbraco.Web.UI.Client/src/less/installer.less index 61895ff793..29ea8f4276 100644 --- a/src/Umbraco.Web.UI.Client/src/less/installer.less +++ b/src/Umbraco.Web.UI.Client/src/less/installer.less @@ -29,27 +29,25 @@ display: none !important; } - -html { +body { background: url('../img/installer.svg') no-repeat center center fixed; background-size: cover; -} - -body { margin: 0; padding: 0; - height: 100%; + height: 100vh; width: 100%; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; color: @textColor; - vertical-align: middle; text-align: center; // better font rendering -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + // center items + display: grid; + place-items: center center; } #logo { @@ -61,16 +59,14 @@ body { } #installer { - margin: auto; background: @white; - width: 80%; - max-width: 750px; - height: 640px; + width: min-content; + min-width: 500px; text-align: left; - padding: 30px; + padding: 3rem; z-index: 667; border-radius: 6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); + box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.16); } #overlay { @@ -144,6 +140,14 @@ legend { font-weight: bold } +#installer input { + width: 100%; + + &[type=checkbox] { + width: auto; + } +} + input.ng-dirty.ng-invalid { border-color: @pink; color: @pink; @@ -153,6 +157,21 @@ input.ng-dirty.ng-invalid { opacity: 0.6; } +.installer-cols { + display: grid; + grid-template-columns: repeat(2, minmax(300px, 1fr)); + gap: 120px; +} + +.user-col { + display: flex; + flex-direction: column; +} + +.telemetry-col { + min-height: 500px +} + #installer label.control-label, #installer .constrol-label { @@ -166,6 +185,19 @@ input.ng-dirty.ng-invalid { display: block; color: @gray-3; } + + &.-with-border { + border: 1px solid @inputBorder; + } +} + +.control-actions { + margin-top: 2rem; +} + +.controls-space-between { + display: flex; + justify-content: space-between;; } #installer .input-readonly-text { @@ -176,15 +208,6 @@ input.ng-dirty.ng-invalid { clear: both; } -.absolute-center { - margin: auto; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; -} - .fade-hide, .fade-show { transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; @@ -282,10 +305,12 @@ select { } #consentSliderWrapper { - margin-bottom: 40px; + margin-bottom: 60px; } #consentSlider { + width: 300px; + .noUi-target { background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%); box-shadow: none; diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js index 094941b63a..19fcfc3c2f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.controller.js @@ -24,6 +24,7 @@ "min": 1, "max": 3 }, + behaviour: 'smooth-steps-tap', pips: { mode: 'values', density: 50, diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.html index 10438a4565..d7fed23d8c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.html +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/analytics.html @@ -2,7 +2,7 @@

- Consent for analytics + Consent for telemetry data

@@ -23,29 +23,24 @@
- {{vm.sliderVal}} -
We'll only send an anonymous site ID to let us know that the site exists.
- {{vm.sliderVal}} -
We'll send site ID, umbraco version and packages installed
- {{vm.sliderVal}} -
- We will send: -
- Anonymized site ID, umbraco version, and packages installed. -
- Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use. -
- System information: Webserver, server OS, server framework, server OS language, and database provider. -
- Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode. -
-
We might change what we send on the Detailed level in the future. If so, it will be listed above. + We will send: +
    +
  • Anonymized site ID, umbraco version, and packages installed.
    • +
  • Number of: Root nodes, Content nodes, Macros, Media, Document Types, Templates, Languages, Domains, User Group, Users, Members, and Property Editors in use.
    • +
  • System information: Webserver, server OS, server framework, server OS language, and database provider.
    • +
  • Configuration settings: Modelsbuilder mode, if custom Umbraco path exists, ASP environment, and if you are in debug mode.
    • +
+ We might change what we send on the Detailed level in the future. If so, it will be listed above.
By choosing "Detailed" you agree to current and future anonymized information being collected.