help and about settings pages

src/popup/app/config.js

@@ -105,6 +105,22 @@
                 controller: 'toolsPasswordGeneratorController',
                 data: { authorize: true },
                 params: { animation: null, addState: null, editState: null }
+            })
+
+            .state('about', {
+                url: '/about',
+                templateUrl: 'app/settings/views/settingsAbout.html',
+                controller: 'settingsAboutController',
+                data: { authorize: true },
+                params: { animation: null }
+            })
+
+            .state('help', {
+                url: '/help',
+                templateUrl: 'app/settings/views/settingsHelp.html',
+                controller: 'settingsHelpController',
+                data: { authorize: true },
+                params: { animation: null }
             });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {

src/popup/app/settings/settingsAboutController.js

@@ -0,0 +1,6 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsAboutController', function ($scope) {
+        $scope.year = (new Date()).getFullYear();
+    });

src/popup/app/settings/settingsHelpController.js

@@ -0,0 +1,16 @@
+angular
+    .module('bit.settings')
+
+    .controller('settingsHelpController', function ($scope) {
+        $scope.email = function () {
+            chrome.tabs.create({ url: 'mailto:hello@bitwarden.com' });
+        };
+
+        $scope.website = function () {
+            chrome.tabs.create({ url: 'https://vault.bitwarden.com' });
+        };
+
+        $scope.bug = function () {
+            chrome.tabs.create({ url: 'https://github.com/bitwarden/browser' });
+        };
+    });

src/popup/app/settings/views/settings.html

@@ -45,11 +45,11 @@
                 Other
             </div>
             <div class="list-section-items">
-                <a class="list-section-item" href="#">
+                <a class="list-section-item" ui-sref="about({animation: 'in-slide-left'})">
                     About
                     <i class="fa fa-chevron-right fa-lg"></i>
                 </a>
-                <a class="list-section-item" href="#">
+                <a class="list-section-item" ui-sref="help({animation: 'in-slide-left'})">
                     Help &amp; Feedback
                     <i class="fa fa-chevron-right fa-lg"></i>
                 </a>

src/popup/app/settings/views/settingsAbout.html

@@ -0,0 +1,13 @@
+<div class="header">
+    <div class="left">
+        <a ui-sref="tabs.settings({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> Settings</a>
+    </div>
+    <div class="title">About</div>
+</div>
+<div class="content">
+    <div class="about-page">
+        <img src="../../../../images/logo@3x.png" alt="bitwarden" />
+        Version 0.0.1<br />
+        &copy; 8bit Solutions LLC 2015-{{year}}
+    </div>
+</div>

src/popup/app/settings/views/settingsHelp.html

@@ -0,0 +1,43 @@
+<div class="header">
+    <div class="left">
+        <a ui-sref="tabs.settings({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> Settings</a>
+    </div>
+    <div class="title">Help and Feedback</div>
+</div>
+<div class="content">
+    <div class="list">
+        <div class="list-section">
+            <div class="list-section-items">
+                <a class="list-section-item" href="" ng-click="email()">
+                    Email Us
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+            <div class="list-section-footer">
+                Email us directly to get help or leave feedback.
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-items">
+                <a class="list-section-item" href="" ng-click="website()">
+                    Visit Our Website
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+            <div class="list-section-footer">
+                Visit our website to get help, news, email us, and/or learn more about how to use bitwarden.
+            </div>
+        </div>
+        <div class="list-section">
+            <div class="list-section-items">
+                <a class="list-section-item" href="" ng-click="bug()">
+                    File a Bug Report
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+            <div class="list-section-footer">
+                Open an issue at our GitHub repository.
+            </div>
+        </div>
+    </div>
+</div>

src/popup/index.html

@@ -63,6 +63,8 @@
 
     <script src="app/settings/settingsModule.js"></script>
     <script src="app/settings/settingsController.js"></script>
+    <script src="app/settings/settingsHelpController.js"></script>
+    <script src="app/settings/settingsAboutController.js"></script>
 
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>

src/popup/less/components.less

@@ -368,3 +368,14 @@
     text-overflow: ellipsis;
     font-family: @font-family-monospace;
 }
+
+.about-page {
+    padding-top: 50px;
+    text-align: center;
+
+    img {
+        margin: 0 auto 20px;
+        width: 220px;
+        display: block;
+    }
+}