Handle tutorial walkthrough

webadmin/src/index.html

@@ -64,6 +64,7 @@
             <h2>Welcome</h2>
             <p>This page is the configuration interface to your Cloudron.</p>
             <br/>
+            <button class="btn btn-default pull-left" ng-click="endTutorial();">Skip</button>
             <button class="btn btn-success pull-right" ng-click="nextWelcomeStep();">Next</button>
         </div>
 

webadmin/src/js/client.js

@@ -777,6 +777,15 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         return (available - needed) >= 0;
     };
 
+    Client.prototype.setShowTutorial = function (show, callback) {
+        var data = { showTutorial: show };
+
+        $http.put(client.apiOrigin + '/api/v1/profile/tutorial', data).success(function (data, status) {
+            if (status !== 204) return callback(new ClientError(status, data));
+            callback(null);
+        }).error(defaultErrorHandler(callback));
+    }
+
     client = new Client();
     return client;
 }]);

webadmin/src/js/main.js

@@ -16,10 +16,25 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
         { title: 'finish', page: '#/apps' }
     ];
 
+    $scope.startTutorial = function () {
+        $scope.welcomeStep = 0;
+        if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
+    };
+
+    $scope.endTutorial = function () {
+        $scope.welcomeStep = -1;
+
+        Client.setShowTutorial(false, function (error) {
+            if (error) console.error(error);
+        });
+    };
+
     $scope.nextWelcomeStep = function () {
         $scope.welcomeStep += 1;
 
         if ($scope.welcomeSteps[$scope.welcomeStep]) window.location.href = $scope.welcomeSteps[$scope.welcomeStep].page;
+
+        if ($scope.welcomeStep >= $scope.welcomeSteps.length) $scope.endTutorial();
     };
 
     $scope.prevWelcomeStep = function () {
@@ -165,7 +180,7 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
                     }
 
                     // welcome screen
-                    if ($scope.user.showTutorial && $scope.user.admin) $scope.nextWelcomeStep();
+                    if ($scope.user.showTutorial && $scope.user.admin) $scope.startTutorial();
                 });
             });
         });

webadmin/src/views/account.html

@@ -130,6 +130,7 @@
                     <tr>
                         <td class="text-right" colspan="2" style="vertical-align: top;">
                         <br/>
+                            <button class="btn btn-outline btn-xs btn-default" ng-click="showTutorial()">Show Tutorial</button>
                             <button class="btn btn-outline btn-xs btn-danger" ng-click="passwordchange.show()">Change Password</button>
                         </td>
                     </tr>

webadmin/src/views/account.js

@@ -173,6 +173,13 @@ angular.module('Application').controller('AccountController', ['$scope', '$locat
         });
     };
 
+    $scope.showTutorial = function () {
+        Client.setShowTutorial(true, function (error) {
+            if (error) return console.error(error);
+            $scope.$parent.startTutorial();
+        });
+    };
+
     Client.onReady(function () {
         $scope.tokenInUse = Client._token;