created home and splash pages

src/popup/app/accounts/views/accountsLogin.html

@@ -1,7 +1,7 @@
 <form name="theForm" ng-submit="theForm.$valid && login(model, theForm)" bit-form="loginPromise">
     <div class="header">
         <div class="left">
-            <a ng-click="close()" href="">Cancel</a>
+            <a ui-sref="home({animation: 'out-slide-down'})">Cancel</a>
         </div>
         <div class="right">
             <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">Log In</button>

src/popup/app/config.js

@@ -29,10 +29,25 @@
 
         $urlRouterProvider.otherwise(function ($injector, $location) {
             var $state = $injector.get('$state');
-            $state.go('login');
+            $state.go('splash');
         });
 
         $stateProvider
+            .state('splash', {
+                url: '/splash',
+                controller: 'splashController',
+                templateUrl: 'app/global/splash.html',
+                data: { authorize: false },
+                params: { animation: null }
+            })
+            .state('home', {
+                url: '/home',
+                controller: 'homeController',
+                templateUrl: 'app/global/home.html',
+                data: { authorize: false },
+                params: { animation: null }
+            })
+
             .state('login', {
                 url: '/login',
                 controller: 'accountsLoginController',
@@ -139,7 +154,7 @@
                     if (!isAuthenticated || tokenService.isTokenExpired(token)) {
                         event.preventDefault();
                         loginService.logOut(function () {
-                            $state.go('login');
+                            $state.go('home');
                         });
                     }
                 });

src/popup/app/global/globalModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.global', []);
+    .module('bit.global', ['ngAnimate']);

src/popup/app/global/home.html

@@ -0,0 +1,14 @@
+<div class="content">
+    <div class="home-page">
+        <img src="../../../../images/logo@3x.png" alt="bitwarden" />
+        <p>Log in or create a new account to access your secure vault.</p>
+        <div class="buttons">
+            <a class="btn btn-lg btn-primary btn-block" ui-sref="">
+                <b>Create Account</b>
+            </a>
+            <a class="btn btn-lg btn-link btn-block" ui-sref="login({animation: 'in-slide-up'})">
+                Log In
+            </a>
+        </div>
+    </div>
+</div>

src/popup/app/global/homeController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.global')
+
+    .controller('homeController', function ($scope) {
+
+    });

src/popup/app/global/splash.html

@@ -0,0 +1,5 @@
+<div class="content">
+    <div class="splash-page">
+        <img src="../../../../images/logo@3x.png" alt="bitwarden" />
+    </div>
+</div>

src/popup/app/global/splashController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.global')
+
+    .controller('splashController', function ($scope) {
+
+    });

src/popup/index.html

@@ -47,6 +47,8 @@
     <script src="app/global/globalModule.js"></script>
     <script src="app/global/mainController.js"></script>
     <script src="app/global/tabsController.js"></script>
+    <script src="app/global/splashController.js"></script>
+    <script src="app/global/homeController.js"></script>
 
     <script src="app/accounts/accountsModule.js"></script>
     <script src="app/accounts/accountsLoginController.js"></script>

src/popup/less/components.less

@@ -374,6 +374,12 @@
     }
 }
 
+.btn {
+    border-radius: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+}
+
 .generate-password-block {
     margin: 20px;
     font-size: 19px;
@@ -394,3 +400,39 @@
         display: block;
     }
 }
+
+.home-page {
+    padding: 120px 20px 20px;
+    text-align: center;
+    position: relative;
+    height: 100%;
+
+    img {
+        margin: 0 auto 30px;
+        width: 250px;
+        display: block;
+    }
+
+    p {
+        font-size: 18px;
+    }
+
+    .buttons {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        left: 0;
+        padding: 20px;
+    }
+}
+
+.splash-page {
+    text-align: center;
+    padding: 160px 20px 0;
+
+    img {
+        width: 250px;
+        display: block;
+        margin: 0 auto;
+    }
+}