Add support for verifying messages

/messages/verify contains a view that utilizes the API method of
verifying Bitcoin messages. A link to the page is also added to the
footer.

public/index.html

@@ -44,15 +44,21 @@
 	</div>
 	<div id="footer" role="navigation">
     <div class="container" data-ng-controller="FooterController">
-      <div class="languages m20t pull-left" ng-show="availableLanguages.0">
+      <div class="links m20t pull-left">
-        [ 
+        <span class="languages" ng-show="availableLanguages.0">
-        <a href="#" 
+          [
-          ng-click="setLanguage(l.isoCode)"
+          <a href="#"
-          ng-class="{'selected': defaultLanguage == l.isoCode}" 
+            ng-click="setLanguage(l.isoCode)"
-          ng-repeat="l in availableLanguages">
+            ng-class="{'selected': defaultLanguage == l.isoCode}"
-          <span ng-show="$last"> &middot; </span> {{l.name}}
+            ng-repeat="l in availableLanguages">
-        </a>
+            <span ng-show="$last"> &middot; </span> {{l.name}}
-         ]
+          </a>
+          ]
+        </span>
+        &nbsp;
+        [
+        <a href="/messages/verify">verify message</a>
+        ]
       </div>
       <a class="insight m10v pull-right" target="_blank" href="http://insight.is">insight <small>API v{{version}}</small></a>
     </div>

public/src/css/common.css

@@ -409,21 +409,21 @@ margin-left: 0;
 #footer a.insight small { font-size: 11px; }
 .line-footer { border-top: 2px dashed #ccc; }
 
-#footer .languages {
+#footer .links {
   color: #ddd;
   font-size: 10px;
 }
 
-#footer .languages a {
+#footer .links a {
   color: #ddd;
 }
 
-#footer .languages a.selected {
+#footer .links a.selected {
   color: #eee;
   font-weight: bold;
 }
 
-#footer .languages a:hover {
+#footer .links a:hover {
   text-decoration: none;
   color: #fffffe;
 }

public/src/js/app.js

@@ -21,7 +21,8 @@ angular.module('insight',[
   'insight.search',
   'insight.status',
   'insight.connection',
-  'insight.currency'
+  'insight.currency',
+  'insight.messages'
 ]);
 
 angular.module('insight.system', []);
@@ -33,3 +34,4 @@ angular.module('insight.search', []);
 angular.module('insight.status', []);
 angular.module('insight.connection', []);
 angular.module('insight.currency', []);
+angular.module('insight.messages', []);

public/src/js/config.js

@@ -34,6 +34,10 @@ angular.module('insight').config(function($routeProvider) {
     when('/status', {
       templateUrl: '/views/status.html',
       title: 'Status'
+    }).
+    when('/messages/verify', {
+      templateUrl: '/views/messages_verify.html',
+      title: 'Verify Message'
     })
     .otherwise({
       templateUrl: '/views/404.html',

public/src/js/controllers/messages.js

@@ -0,0 +1,50 @@
+'use strict';
+
+angular.module('insight.messages').controller('VerifyMessageController',
+  function($scope, $http) {
+  $scope.message = {
+    address: '',
+    signature: '',
+    message: ''
+  };
+  $scope.verification = {
+    status: 'unverified',  // ready|loading|verified|error
+    result: null,
+    error: null,
+    address: ''
+  };
+
+  $scope.verifiable = function() {
+    return ($scope.message.address
+            && $scope.message.signature
+            && $scope.message.message);
+  };
+  $scope.verify = function() {
+    $scope.verification.status = 'loading';
+    $scope.verification.address = $scope.message.address;
+    $http.post('/api/messages/verify', $scope.message)
+      .success(function(data, status, headers, config) {
+        if(typeof(data.result) != 'boolean') {
+          // API returned 200 but result was not true or false
+          $scope.verification.status = 'error';
+          $scope.verification.error = null;
+          return;
+        }
+
+        $scope.verification.status = 'verified';
+        $scope.verification.result = data.result;
+      })
+      .error(function(data, status, headers, config) {
+        $scope.verification.status = 'error';
+        $scope.verification.error = data;
+      });
+  };
+
+  // Hide the verify status message on form change
+  var unverify = function() {
+    $scope.verification.status = 'unverified';
+  };
+  $scope.$watch('message.address', unverify);
+  $scope.$watch('message.signature', unverify);
+  $scope.$watch('message.message', unverify);
+});

public/views/messages_verify.html

@@ -0,0 +1,81 @@
+<section data-ng-controller="VerifyMessageController">
+  <div class="page-header">
+    <h1>
+      <span translate>Verify signed message</span>
+    </h1>
+  </div>
+  <div class="row">
+    <div class="col-xs-12 col-md-8">
+      <form class="form-horizontal" role="form">
+        <div class="form-group">
+          <label for="verify-message-address" class="col-sm-2 control-label" translate>
+            Address
+          </label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control" id="verify-message-address"
+                data-ng-model="message.address">
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="verify-message-signature" class="col-sm-2 control-label" translate>
+            Signature
+          </label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control" id="verify-message-signature"
+                data-ng-model="message.signature">
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="verify-message-message" class="col-sm-2 control-label" translate>
+            Message
+          </label>
+          <div class="col-sm-10">
+            <textarea class="form-control" id="verify-message-message"
+              data-ng-model="message.message" rows="5"></textarea>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-2 col-sm-10">
+            <button class="btn btn-default" translate
+                data-ng-click="verify()" data-ng-disabled="!verifiable()">
+              Verify
+            </button>
+          </div>
+        </div>
+      </form>
+      <div class="row">
+        <div data-ng-hide="verification.status == 'unverified'"
+             class="col-sm-offset-2 col-sm-10">
+          <div ng-show="verification.status == 'loading'" translate>
+            Loading...
+          </div>
+          <div ng-show="verification.status == 'verified' && verification.result"
+               class="alert alert-success" translate>
+            The message is verifiably from {{verification.address}}.
+          </div>
+          <div ng-show="verification.status == 'verified' && !verification.result"
+               class="alert alert-danger" translate>
+            The message failed to verify.
+          </div>
+          <div ng-show="verification.status == 'error'"
+               class="alert alert-warning">
+            <p translate>An error occured in the verification process.</p>
+            <p ng-show="error">
+              <strong translate>Error message:</strong>
+              {{verification.error}}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-md-4 col-gray">
+      <p translate>
+        Bitcoin comes with a way of signing arbitrary messages.
+      </p>
+      <p translate>
+        This form can be used to verify that a message comes from
+        a specific Bitcoin address.
+      </p>
+    </div>
+  </div>
+</section>