feat(demo): disable features on demo env [EE-1874] (#6040)

app/portainer/components/demo-feature-indicator/demo-feature-indicator.controller.js

@@ -0,0 +1,16 @@
+class DemoFeatureIndicatorController {
+  /* @ngInject */
+  constructor(StateManager) {
+    Object.assign(this, { StateManager });
+
+    this.isDemo = false;
+  }
+
+  $onInit() {
+    const state = this.StateManager.getState();
+
+    this.isDemo = state.application.demoEnvironment.enabled;
+  }
+}
+
+export default DemoFeatureIndicatorController;

app/portainer/components/demo-feature-indicator/demo-feature-indicator.html

@@ -0,0 +1,10 @@
+<div class="row" ng-if="$ctrl.isDemo">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-exclamation-triangle" title-text="Feature not available"> </rd-widget-header>
+      <rd-widget-body>
+        <span class="small text-muted">{{ $ctrl.content }}</span>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/components/demo-feature-indicator/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+import controller from './demo-feature-indicator.controller.js';
+
+export const demoFeatureIndicator = {
+  templateUrl: './demo-feature-indicator.html',
+  controller,
+  bindings: {
+    content: '<',
+  },
+};
+
+angular.module('portainer.app').component('demoFeatureIndicator', demoFeatureIndicator);

app/portainer/components/theme/theme-settings.controller.js

@@ -20,8 +20,12 @@ export default class ThemeSettingsController {
       } else {
         this.ThemeManager.setTheme(theme);
       }
+
       this.state.userTheme = theme;
-      await this.UserService.updateUserTheme(this.state.userId, this.state.userTheme);
+      if (!this.state.isDemo) {
+        await this.UserService.updateUserTheme(this.state.userId, this.state.userTheme);
+      }
+
       this.Notifications.success('Success', 'User theme successfully updated');
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to update user theme');
@@ -30,10 +34,13 @@ export default class ThemeSettingsController {
 
   $onInit() {
     return this.$async(async () => {
+      const state = this.StateManager.getState();
+
       this.state = {
         userId: null,
         userTheme: '',
         defaultTheme: 'auto',
+        isDemo: state.application.demoEnvironment.enabled,
       };
 
       this.state.availableThemes = [

app/portainer/models/status.js

@@ -4,6 +4,7 @@ export function StatusViewModel(data) {
   this.Version = data.Version;
   this.Edition = data.Edition;
   this.InstanceID = data.InstanceID;
+  this.DemoEnvironment = data.DemoEnvironment;
 }
 
 export function StatusVersionViewModel(data) {

app/portainer/rest/backup.js

@@ -9,12 +9,20 @@ angular.module('portainer.app').factory('Backup', [
       {
         download: {
           method: 'POST',
-          responseType: 'blob',
+          responseType: 'arraybuffer',
           ignoreLoadingBar: true,
-          transformResponse: (data, headersGetter) => ({
-            file: data,
-            name: headersGetter('Content-Disposition').replace('attachment; filename=', ''),
-          }),
+          transformResponse: (data, headersGetter, status) => {
+            if (status !== 200) {
+              const decoder = new TextDecoder('utf-8');
+              const str = decoder.decode(data);
+              return JSON.parse(str);
+            }
+
+            return {
+              file: data,
+              name: headersGetter('Content-Disposition').replace('attachment; filename=', ''),
+            };
+          },
         },
         getS3Settings: { method: 'GET', params: { subResource: 's3', action: 'settings' } },
         saveS3Settings: { method: 'POST', params: { subResource: 's3', action: 'settings' } },

app/portainer/services/authentication.js

@@ -101,7 +101,8 @@ angular.module('portainer.app').factory('Authentication', [
 
     async function setUserTheme() {
       const data = await UserService.user(user.ID);
-      // Initialize user theme base on Usertheme from database
+
+      // Initialize user theme base on UserTheme from database
       const userTheme = data.UserTheme;
       if (userTheme === 'auto' || !userTheme) {
         ThemeManager.autoTheme();

app/portainer/services/stateManager.js

@@ -87,6 +87,7 @@ function StateManagerFactory(
     state.application.version = status.Version;
     state.application.edition = status.Edition;
     state.application.instanceId = status.InstanceID;
+    state.application.demoEnvironment = status.DemoEnvironment;
 
     state.application.enableTelemetry = settings.EnableTelemetry;
     state.application.logo = settings.LogoURL;

app/portainer/views/account/account.html

@@ -3,6 +3,8 @@
   <rd-header-content>User settings</rd-header-content>
 </rd-header>
 
+<demo-feature-indicator ng-if="isDemoUser" content="'You cannot change the password of this account in the demo version of Portainer.'"> </demo-feature-indicator>
+
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
@@ -56,15 +58,16 @@
               <button
                 type="submit"
                 class="btn btn-primary btn-sm"
-                ng-disabled="(AuthenticationMethod !== 1 && userID !== 1) || !formValues.currentPassword || !passwordStrength || formValues.newPassword !== formValues.confirmPassword"
+                ng-disabled="isDemoUser || (AuthenticationMethod !== 1 && !initialUser) || !formValues.currentPassword || !passwordStrength || formValues.newPassword !== formValues.confirmPassword"
                 ng-click="updatePassword()"
-                >Update password</button
               >
-              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && userID !== 1">
+                Update password
+              </button>
+              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 2 && !initialUser">
                 <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                 You cannot change your password when using LDAP authentication.
               </span>
-              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && userID !== 1">
+              <span class="text-muted small" style="margin-left: 5px" ng-if="AuthenticationMethod === 3 && !initialUser">
                 <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                 You cannot change your password when using OAuth authentication.
               </span>

app/portainer/views/account/accountController.js

@@ -97,12 +97,19 @@ angular.module('portainer.app').controller('AccountController', [
     };
 
     async function initView() {
-      $scope.userID = Authentication.getUserDetails().ID;
-      $scope.forceChangePassword = Authentication.getUserDetails().forceChangePassword;
+      const state = StateManager.getState();
+      const userDetails = Authentication.getUserDetails();
+      $scope.userID = userDetails.ID;
+      $scope.forceChangePassword = userDetails.forceChangePassword;
+
+      if (state.application.demoEnvironment.enabled) {
+        $scope.isDemoUser = state.application.demoEnvironment.users.includes($scope.userID);
+      }
 
       const data = await UserService.user($scope.userID);
 
-      $scope.formValues.userTheme = data.Usertheme;
+      $scope.formValues.userTheme = data.UserTheme;
+
       SettingsService.publicSettings()
         .then(function success(data) {
           $scope.AuthenticationMethod = data.AuthenticationMethod;

app/portainer/views/settings/settings.html

@@ -20,13 +20,19 @@
           <!-- logo -->
           <div class="form-group">
             <div class="col-sm-12">
-              <label for="toggle_logo" class="control-label text-left"> Use custom logo </label>
-              <label class="switch" style="margin-left: 20px">
-                <input type="checkbox" name="toggle_logo" ng-model="formValues.customLogo" />
-                <i></i>
-              </label>
+              <por-switch-field
+                label="'Use custom logo'"
+                value="formValues.customLogo"
+                name="'toggle_logo'"
+                disabled="state.isDemo"
+                on-change="(onToggleCustomLogo)"
+              ></por-switch-field>
+            </div>
+            <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
+              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
             </div>
           </div>
+
           <div ng-if="formValues.customLogo">
             <div class="form-group">
               <span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
@@ -39,21 +45,25 @@
             </div>
           </div>
           <!-- !logo -->
-          <!-- analytics -->
+
           <div class="form-group">
             <div class="col-sm-12">
-              <label for="toggle_enableTelemetry" class="control-label text-left"> Allow the collection of anonymous statistics </label>
-              <label class="switch" style="margin-left: 20px">
-                <input type="checkbox" name="toggle_enableTelemetry" ng-model="formValues.enableTelemetry" />
-                <i></i>
-              </label>
+              <por-switch-field
+                label="'Allow the collection of anonymous statistics'"
+                value="formValues.enableTelemetry"
+                name="'toggle_enableTelemetry'"
+                on-change="(onToggleEnableTelemetry)"
+                disabled="state.isDemo"
+              ></por-switch-field>
+            </div>
+            <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
+              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
             </div>
             <div class="col-sm-12 text-muted small" style="margin-top: 10px">
               You can find more information about this in our
               <a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.
             </div>
           </div>
-          <!-- !analytics -->
           <!-- templates -->
           <div class="col-sm-12 form-section-title"> App Templates </div>
           <div>

app/portainer/views/settings/settingsController.js

@@ -20,6 +20,7 @@ angular.module('portainer.app').controller('SettingsController', [
     ];
 
     $scope.state = {
+      isDemo: false,
       actionInProgress: false,
       availableKubeconfigExpiryOptions: [
         {
@@ -60,6 +61,18 @@ angular.module('portainer.app').controller('SettingsController', [
       backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
     };
 
+    $scope.onToggleEnableTelemetry = function onToggleEnableTelemetry(checked) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.enableTelemetry = checked;
+      });
+    };
+
+    $scope.onToggleCustomLogo = function onToggleCustomLogo(checked) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.customLogo = checked;
+      });
+    };
+
     $scope.onToggleAutoBackups = function onToggleAutoBackups(checked) {
       $scope.$evalAsync(() => {
         $scope.formValues.scheduleAutomaticBackups = checked;
@@ -142,6 +155,9 @@ angular.module('portainer.app').controller('SettingsController', [
     }
 
     function initView() {
+      const state = StateManager.getState();
+      $scope.state.isDemo = state.application.demoEnvironment.enabled;
+
       SettingsService.settings()
         .then(function success(data) {
           var settings = data;