Frontend improvements.

src/main/java/rs/in/zivanovic/share/a/secret/api/controllers/SasController.java

@@ -58,8 +58,8 @@ public class SasController {
             return SasResponse.badRequest().withInvalidParameterValueError("threshold", params.getThreshold(),
                     "must not be grater than 'total' (" + String.valueOf(params.getTotal()) + ")").build();
         }
-        List<SecretShare> shares = ShamirSecretSharing.split(params.getSecret(), params.getTotal(), params.
+        List<SecretShare> shares = ShamirSecretSharing.split(params.getSecret(), params.getTotal(),
-                getThreshold());
+                params.getThreshold());
         return SasResponse.ok().withData(new Shares(shares)).build();
     }
 }

src/main/resources/static/index.html

@@ -10,34 +10,41 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-resource.js"></script>
-        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>        <script src="js/app.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
+        <script src="js/app.js"></script>
         <script src="js/controllers.js"></script>
         <script src="js/services.js"></script>
     </head>
     <body ng-controller="MainController">
         <div class="container">
             <div class="page-header">
-                <p class="lead">This is the explanation of what this service does.</p>
+                <h1>What's this all about?</h1>
+                <blockquote>
+                    <p>Secret sharing (also called secret splitting) refers to methods for distributing a secret amongst a group of participants, each of whom is allocated a share of the secret. The secret can be reconstructed only when a sufficient number, of possibly different types, of shares are combined together; individual shares are of no use on their own.</p>
+                    <footer><a href="https://en.wikipedia.org/wiki/Secret_sharing" target="_blank">Wikipedia</a></footer>
+                </blockquote>
             </div>
 
             <form>
                 <div class="row">
-                    <div class="col-md-8">
+                    <div class="col-md-8 form-group">
-                        <label for="secret">Enter the secret you want to split here:</label><br/>
+                        <label for="secret">Enter here the secret you want to share:</label>
-                        <input select-on-click id="secret" type="text" ng-model="secret" size="20" placeholder="Enter your secret here ..." class="form-control" required="true"/>
+                        <input id="secret" type="text" ng-model="secret" size="20" placeholder="Enter your secret here ..." class="form-control input-lg" required="true"/>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-2 form-group">
                         <label for="total">Total shares:</label>
-                        <input id="total" type="number" ng-model="total" min="1" max="100" size="3" class="form-control"/>
+                        <input id="total" type="number" ng-model="total" min="1" max="100" size="3" class="form-control input-lg"/>
                     </div>
-                    <div class="col-md-2">
+                    <div class="col-md-2 form-group">
                         <label for="threshold">Required shares:</label>
-                        <input id="threshold" type="number" ng-model="threshold" min="1" max="100" size="3" class="form-control"/>
+                        <input id="threshold" type="number" ng-model="threshold" min="1" max="100" size="3" class="form-control input-lg"/>
                     </div>
                 </div>
                 <br/>
                 <div class="row">
-                    <div class="col-md-12">
+                    <div class="col-md-12 form-group">
                         <button id="split" ng-click="split()" class="btn btn-lg btn-primary btn-block">Split</button>
                     </div>
                 </div>
@@ -47,18 +54,40 @@
                 <div class="row" ng-show="errors.length">
                     <h1>Whoops, something's wrong ...</h1>
                 </div>
-                <div ng-repeat="err in errors" class="row">
+                <div ng-repeat="err in errors">
                     <div class="alert alert-danger">{{err.message}}</div>
                 </div>
             </div>
 
-            <div class="row">
+            <div class="row" ng-show="shares.length">
-                <div class="row" ng-show="shares.length">
+                <div class="row">
+                    <hr/>
                     <h1>Here are your secret shares ...</h1>
                 </div>
-                <div ng-repeat="share in shares" class="row">
+
-                    <div class="alert" ng-class="{'alert-info': !isShareClicked(share), 'alert-success': isShareClicked(share)}" ng-click="shareClicked(share)" select-on-click>{{share}}</div>
+                <tabset>
-                </div>
+                    <tab>
+                        <tab-heading><i class="glyphicon glyphicon-list"></i> List</tab-heading>
+                        <div class="panel panel-default">
+                            <div class="panel-body">
+                                <p class="text-muted">Click on a share to select it for easy copying to clipboard.
+                                    After clicking it, the share will change color to indicate the ones you have already copied.</p>
+                                <div ng-repeat="share in shares">
+                                    <div class="text-nowrap alert" ng-class="{'alert-info': !isShareClicked(share), 'alert-success': isShareClicked(share)}" ng-click="shareClicked(share)" select-on-click>{{share}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </tab>
+                    <tab>
+                        <tab-heading><i class="glyphicon glyphicon-align-left"></i> Text</tab-heading>
+                        <div class="panel panel-default">
+                            <div class="panel-body">
+                                <p class="text-muted">Use this panel to easily copy all shares at once.</p>
+                                <textarea class="form-control" rows="{{total < 20 ? total : 20}}" readonly="true" wrap="off">{{sharesAsText}}</textarea>
+                            </div>
+                        </div>
+                    </tab>
+                </tabset>
             </div>
 
         </div>

src/main/resources/static/js/app.js

@@ -24,6 +24,7 @@
 
 angular.module('sasApp', [
     'ngResource',
+    'ui.bootstrap',
     'sasControllers',
     'sasServices'
 ]).directive('selectOnClick', function ($window) {
@@ -37,5 +38,5 @@ angular.module('sasApp', [
                 selection.addRange(range);
             });
         }
-    }
+    };
 });

src/main/resources/static/js/controllers.js

@@ -32,18 +32,19 @@ angular.module('sasControllers', []).
                 var clickedShares = {};
 
                 $scope.isShareClicked = function (share) {
-                    console.log('iA: ' + JSON.stringify(clickedShares));
-                    console.log('iO: ' + clickedShares[share]);
                     return clickedShares[share] !== undefined;
                 };
 
                 $scope.shareClicked = function (share) {
-                    console.log('cA: ' + JSON.stringify(clickedShares));
-                    console.log('cO: ' + clickedShares[share]);
                     clickedShares[share] = true;
                 };
 
                 $scope.split = function () {
+                    if ($scope.secret === undefined || $scope.secret.length === 0 ||
+                            $scope.total === undefined || Number($scope.total) > 100 ||
+                            $scope.threshold === undefined || Number($scope.threshold) > 99) {
+                        return;
+                    }
                     $scope.errors = [];
                     $scope.shares = [];
                     clickedShares = {};
@@ -52,17 +53,23 @@ angular.module('sasControllers', []).
                         total: $scope.total,
                         threshold: $scope.threshold},
                     function (response) {
-                        console.log(JSON.stringify(response));
                         if (response.status === 'OK') {
                             $scope.shares = response.data.shares;
+                            $scope.sharesAsText = mergeSharesToString(response.data.shares);
                         } else {
                             $scope.errors = response.errors;
-                            console.log("Errors: " + JSON.stringify(response.errors));
                         }
                     }, function (response) {
-                        console.log(JSON.stringify(response));
                         $scope.errors = response.data.errors;
-                        console.log("Errors: " + JSON.stringify(response.data.errors));
                     });
                 };
-            }]);
+            }]);
+
+function mergeSharesToString(shares) {
+    var res = "";
+    for (var i in shares) {
+        res = res + shares[i] + (i < shares.length - 1 ? "\n" : "");
+    }
+    return res;
+}
+

src/main/resources/static/sas.css

@@ -1,18 +1 @@
-/* Sticky footer styles
+.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
--------------------------------------------------- */
-html {
-    position: relative;
-    min-height: 100%;
-}
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
-}
-.footer {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    /* Set the fixed height of the footer here */
-    height: 60px;
-    background-color: #f5f5f5;
-}