add in new user onboarding screens which show up when user first enters the...

add in new user onboarding screens which show up when user first enters the application for the first time.

resources/frontend_client/app/auth/partials/password_reset.html

@@ -37,7 +37,10 @@
                         <mb-icon name="check"></mb-icon>
                     </div>
                     <p>Your password has been reset.</p>
-                    <p><a href="/" class="Button Button--primary">Sign in with your new password</a></p>
+                    <p>
+                        <a ng-if="newUserJoining" href="/?new" class="Button Button--primary">Sign in with your new password</a>
+                        <a ng-if="!newUserJoining" href="/" class="Button Button--primary">Sign in with your new password</a>
+                    </p>
                 </div>
             </div>
         </div>

resources/frontend_client/app/home/home.controllers.js

 'use strict';
 
-var HomeControllers = angular.module('corvus.home.controllers', []);
+var HomeControllers = angular.module('corvus.home.controllers', ['corvus.home.directives']);
 
 HomeControllers.controller('Home', ['$scope', '$location',  function($scope, $location) {
     $scope.currentView = 'data';
+    $scope.showOnboarding = false;
+
+    if('new' in $location.search()) {
+        $scope.showOnboarding = true;
+    }
 }]);
 
 HomeControllers.controller('HomeGreeting', ['$scope', '$location',  function($scope, $location) {
@@ -33,5 +38,5 @@ HomeControllers.controller('HomeGreeting', ['$scope', '$location',  function($sc
     }
 
     $scope.greeting = buildGreeting(greetingPrefixes, $scope.user.first_name);
-    $scope.subheading = "What do you want to know?"
+    $scope.subheading = "What do you want to know?";
 }]);

resources/frontend_client/app/home/home.directives.js

+'use strict';
+
+var HomeDirectives = angular.module('corvus.home.directives', []);
+
+HomeDirectives.directive('mbNewUserOnboarding', ['$modal',
+    function($modal) {
+        function link(scope, element, attrs) {
+
+            function openModal() {
+                var modalInstance = $modal.open({
+                    templateUrl: '/app/home/partials/modal_user_onboarding.html',
+                    controller: ['$scope', '$modalInstance',
+                        function($scope, $modalInstance) {
+
+                            $scope.firstStep = true;
+                            $scope.user = scope.user;
+
+                            $scope.next = function() {
+                                $scope.firstStep = false;
+                            };
+
+                            $scope.close = function() {
+                                $modalInstance.dismiss('cancel');
+                            };
+                        }
+                    ]
+                });
+            }
+
+            // always start with the modal open
+            openModal();
+        }
+
+        return {
+            restrict: 'E',
+            link: link
+        };
+    }
+]);

resources/frontend_client/app/home/home.html

@@ -8,17 +8,16 @@
                         <h2 class="text-light text-brand-light">{{subheading}}</h2>
                     </div>
                 </div>
-
-
             </div>
         </div>
         <div class="wrapper">
             <a class="HomeTab inline-block" ng-class="{'HomeTab--active text-dark' : currentView === 'data' }" ng-click="currentView = 'data'">A new question</a>
             <a class="HomeTab inline-block" ng-class="{'HomeTab--active text-dark' : currentView === 'questions'}" ng-click="currentView = 'questions'">Start from a saved question</a>
         </div>
-
     </div>
 
+    <div ng-if="showOnboarding"><mb-new-user-onboarding></mb-new-user-onboarding></div>
+
 
     <div ng-controller="CardList" ng-if="currentView != 'data'">
 

resources/frontend_client/app/home/partials/modal_user_onboarding.html

+<div class="ModalContent">
+    <div class="bordered rounded shadowed" ng-show="firstStep">
+        <div class="pl4 pr4 pt4 pb1 border-bottom">
+            <h2>{{user.first_name}}, welcome to Metabase!</h2>
+            <h2>Analytics you can use by yourself.</h2>
+
+            <p>Metabase lets you find answers to your questions from data your company already has.</p>
+
+            <p>It’s easy to use, because it’s designed so you don’t need any analytics knowledge to get started.</p>
+        </div>
+        <div class="pl4 pr4 pt2 pb2 clearfix Grid">
+            <span class="Grid-cell Grid-cell--center text-grey-2">
+                STEP 1 of 2
+            </span>
+            <span class="Grid-cell Grid-cell--center text-right">
+                <button class="Button Button--primary" ng-click="next()">Continue</button>
+            </span>
+        </div>
+    </div>
+
+    <div class="bordered rounded shadowed" ng-show="!firstStep">
+        <div class="pl4 pr4 pt4 pb1 border-bottom">
+            <h2>Just 3 things worth knowing</h2>
+
+            <p>All of your data is organized in Tables.
Think of them in terms of Excel spreadsheets
 with columns and rows.</p>
+
+            <p>To get answers, you Ask Questions by picking a table and a few other parameters. You can visualize the answer in many ways, including cool charts.</p>
+
+            <p>You (and anyone on your team) can save answers in Dashboards, so you can check them often. It's a great way to quickly see a snapshot of your business.</p>
+        </div>
+        <div class="pl4 pr4 pt2 pb2 clearfix Grid">
+            <span class="Grid-cell Grid-cell--center text-grey-2">
+                STEP 2 of 2
+            </span>
+            <span class="Grid-cell Grid-cell--center text-right">
+                <button class="Button Button--primary" ng-click="close()">Continue</button>
+            </span>
+        </div>
+    </div>
+</div>