Implement joining functionality. Backend refactoring.

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

@@ -25,6 +25,7 @@
  */
 package rs.in.zivanovic.share.a.secret.api;
 
+import rs.in.zivanovic.share.a.secret.api.dto.SecretShare;
 import java.math.BigInteger;
 import java.util.ArrayList;
 import java.util.List;

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

@@ -25,6 +25,7 @@
  */
 package rs.in.zivanovic.share.a.secret.api;
 
+import rs.in.zivanovic.share.a.secret.api.dto.SecretShare;
 import java.math.BigInteger;
 import java.nio.ByteBuffer;
 import java.nio.charset.StandardCharsets;

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

@@ -23,21 +23,26 @@
  */
 package rs.in.zivanovic.share.a.secret.api.controllers;
 
+import rs.in.zivanovic.share.a.secret.api.dto.JoinParameters;
+import rs.in.zivanovic.share.a.secret.api.dto.JoinResponse;
+import java.util.ArrayList;
+import java.util.Base64;
 import java.util.List;
 import javax.validation.Valid;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.ResponseEntity;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.RequestBody;
-import rs.in.zivanovic.share.a.secret.api.dto.Shares;
+import rs.in.zivanovic.share.a.secret.api.dto.SplitResponse;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;
-import rs.in.zivanovic.share.a.secret.api.SecretShare;
+import rs.in.zivanovic.share.a.secret.api.dto.SecretShare;
 import rs.in.zivanovic.share.a.secret.api.ShamirSecretSharing;
+import rs.in.zivanovic.share.a.secret.api.Utils;
 import rs.in.zivanovic.share.a.secret.api.dto.SasResponse;
 import rs.in.zivanovic.share.a.secret.api.dto.SplitParameters;
-import rs.in.zivanovic.share.a.secret.api.dto.Version;
+import rs.in.zivanovic.share.a.secret.api.dto.VersionResponse;
 
 /**
  *
@@ -52,25 +57,56 @@ public class SasController {
 
     @RequestMapping(method = RequestMethod.POST, value = "/split")
     public ResponseEntity split(@Valid @RequestBody SplitParameters params, BindingResult br) {
+        SasResponse response;
         if (br.hasErrors()) {
-            SasResponse resp = SasResponse.badRequest();
+            response = processValidationErrors(br);
-            br.getFieldErrors().stream().forEach(err -> {
+        } else if (params.getThreshold() > params.getTotal()) {
-                resp.withInvalidParameterValueError(err.getField(), err.getRejectedValue(), err.getDefaultMessage());
+            response = SasResponse.badRequest().withInvalidParameterValueError("threshold", params.getThreshold(),
-            });
+                    "must not be grater than 'total' (" + String.valueOf(params.getTotal()) + ")");
-            return resp.build();
+        } else {
+            List<SecretShare> shares = ShamirSecretSharing.split(params.getSecret(), params.getTotal(),
+                    params.getThreshold());
+            response = SasResponse.ok().withData(new SplitResponse(shares));
         }
-        if (params.getThreshold() > params.getTotal()) {
+        return response.build();
-            return SasResponse.badRequest().withInvalidParameterValueError("threshold", params.getThreshold(),
+    }
-                    "must not be grater than 'total' (" + String.valueOf(params.getTotal()) + ")").build();
+
+    @RequestMapping(method = RequestMethod.POST, value = "/join")
+    public ResponseEntity join(@Valid @RequestBody JoinParameters params, BindingResult br) {
+        SasResponse response;
+        if (br.hasErrors()) {
+            response = processValidationErrors(br);
+        } else {
+            try {
+                String secret = ShamirSecretSharing.joinToUtf8String(makeSecretShares(params));
+                response = SasResponse.ok().withData(new JoinResponse(secret));
+            } catch (RuntimeException ex) {
+                response = SasResponse.badRequest().withInvalidParameterValueError("shares", params.getShares(),
+                        "one or more shares are invalid");
+            }
         }
-        List<SecretShare> shares = ShamirSecretSharing.split(params.getSecret(), params.getTotal(),
+        return response.build();
-                params.getThreshold());
-        return SasResponse.ok().withData(new Shares(shares)).build();
     }
 
     @RequestMapping(method = RequestMethod.GET, value = "/version")
     public ResponseEntity version() {
         String buildTime = "<N/A>";
-        return SasResponse.ok().withData(new Version(version, buildTime)).build();
+        return SasResponse.ok().withData(new VersionResponse(version, buildTime)).build();
+    }
+
+    private SasResponse processValidationErrors(BindingResult br) {
+        SasResponse r = SasResponse.badRequest();
+        br.getFieldErrors().stream().forEach(err -> {
+            r.withInvalidParameterValueError(err.getField(), err.getRejectedValue(), err.getDefaultMessage());
+        });
+        return r;
+    }
+
+    private List<SecretShare> makeSecretShares(JoinParameters params) {
+        List<SecretShare> shares = new ArrayList<>(params.getShares().size());
+        params.getShares().stream().forEach(share -> {
+            shares.add(Utils.decodeFromBinary(Base64.getDecoder().decode(share)));
+        });
+        return shares;
     }
 }

src/main/java/rs/in/zivanovic/share/a/secret/api/dto/JoinParameters.java

@@ -0,0 +1,48 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2014 Marko Zivanovic.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+package rs.in.zivanovic.share.a.secret.api.dto;
+
+import java.util.List;
+import javax.validation.constraints.NotNull;
+import javax.validation.constraints.Size;
+
+/**
+ *
+ * @author Marko Zivanovic <marko@zivanovic.in.rs>
+ */
+public class JoinParameters {
+
+    @NotNull
+    @Size(min = 1)
+    private List<String> shares;
+
+    public List<String> getShares() {
+        return shares;
+    }
+
+    public void setShares(List<String> shares) {
+        this.shares = shares;
+    }
+
+}

src/main/java/rs/in/zivanovic/share/a/secret/api/dto/JoinResponse.java

@@ -0,0 +1,46 @@
+/*
+ * The MIT License
+ *
+ * Copyright 2014 Marko Zivanovic.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+package rs.in.zivanovic.share.a.secret.api.dto;
+
+/**
+ *
+ * @author Marko Zivanovic <marko@zivanovic.in.rs>
+ */
+public class JoinResponse {
+
+    private String secret;
+
+    public JoinResponse(String secret) {
+        this.secret = secret;
+    }
+
+    public String getSecret() {
+        return secret;
+    }
+
+    public void setSecret(String secret) {
+        this.secret = secret;
+    }
+
+}

src/main/java/rs/in/zivanovic/share/a/secret/api/dto/SecretShare.java

@@ -23,7 +23,7 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  * POSSIBILITY OF SUCH DAMAGE.
  */
-package rs.in.zivanovic.share.a.secret.api;
+package rs.in.zivanovic.share.a.secret.api.dto;
 
 import java.math.BigInteger;
 import java.util.Objects;

src/main/java/rs/in/zivanovic/share/a/secret/api/dto/SplitResponse.java

@@ -26,25 +26,24 @@ package rs.in.zivanovic.share.a.secret.api.dto;
 import java.util.ArrayList;
 import java.util.List;
 import org.apache.tomcat.util.codec.binary.Base64;
-import rs.in.zivanovic.share.a.secret.api.SecretShare;
 import rs.in.zivanovic.share.a.secret.api.Utils;
 
 /**
  *
  * @author Marko Zivanovic <marko@zivanovic.in.rs>
  */
-public class Shares {
+public class SplitResponse {
 
     private List<String> shares = new ArrayList<>();
 
-    public Shares(List<SecretShare> shares) {
+    public SplitResponse(List<SecretShare> shares) {
         this.shares.clear();
         shares.stream().forEachOrdered(share -> {
             this.shares.add(Base64.encodeBase64String(Utils.encodeToBinary(share)));
         });
     }
 
-    public Shares() {
+    public SplitResponse() {
     }
 
     public List<String> getShares() {

src/main/java/rs/in/zivanovic/share/a/secret/api/dto/VersionResponse.java

@@ -27,12 +27,12 @@ package rs.in.zivanovic.share.a.secret.api.dto;
  *
  * @author Marko Zivanovic <marko@zivanovic.in.rs>
  */
-public class Version {
+public class VersionResponse {
 
     private String frontendVersion;
     private String buildTime;
 
-    public Version(String frontendVersion, String buildTime) {
+    public VersionResponse(String frontendVersion, String buildTime) {
         this.frontendVersion = frontendVersion;
         this.buildTime = buildTime;
     }

src/main/resources/static/about.html

@@ -0,0 +1,17 @@
+<div class="container-fluid">
+    <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><cite title="Wikipedia"><a href="https://en.wikipedia.org/wiki/Secret_sharing">Wikipedia</a></cite></footer>
+    </blockquote>
+
+    <div class="row">
+        <div class="col-md-6">
+            <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="goSplit()">Split</button>
+        </div>
+        <div class="col-md-6">
+            <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="goJoin()">Join</button>
+        </div>
+    </div>
+</div>

src/main/resources/static/index.html

@@ -1,15 +1,17 @@
 <!DOCTYPE html>
-<html ng-app="sasApp">
+<html lang="en" ng-app="sasApp">
     <head>
         <title>Share-a-Secret</title>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <link rel="stylesheet" href="sas.css">
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/spacelab/bootstrap.min.css">
         <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://code.jquery.com/jquery-2.1.1.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-resource.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-resource.min.js"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.min.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>
@@ -17,91 +19,41 @@
         <script src="js/controllers.js"></script>
         <script src="js/services.js"></script>
     </head>
-    <body ng-controller="MainController">
+    <body>
-        <div class="container">
-            <div class="page-header">
-                <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>
+        <header>
-                <div class="row">
+            <nav class="navbar navbar-inverse" role="navigation">
-                    <div class="col-md-8 form-group">
+                <div class="container-fluid">
-                        <label for="secret">Enter here the secret you want to share:</label>
+                    <div class="navbar-header">
-                        <input id="secret" type="text" ng-model="secret" size="20" placeholder="Enter your secret here ..." class="form-control input-lg" required="true"/>
+                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                            <span class="sr-only">Toggle navigation</span>
+                        </button>
+                        <a class="navbar-brand" href="#/">Share-a-secret</a>
                     </div>
-                    <div class="col-md-2 form-group">
+
-                        <label for="total">Total shares:</label>
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                        <input id="total" type="number" ng-model="total" min="1" max="100" size="3" class="form-control input-lg"/>
+                        <ul class="nav navbar-nav">
-                    </div>
+                            <li><a href="#/split">Split</a></li>
-                    <div class="col-md-2 form-group">
+                            <li><a href="#/join">Join</a></li>
-                        <label for="threshold">Required shares:</label>
+                        </ul>
-                        <input id="threshold" type="number" ng-model="threshold" min="1" max="100" size="3" class="form-control input-lg"/>
                     </div>
                 </div>
-                <br/>
+            </nav>
-                <div class="row">
+        </header>
-                    <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>
-            </form>
 
-            <div class="row">
+        <div ng-view></div>
-                <div class="row" ng-show="errors.length">
-                    <h1>Whoops, something's wrong ...</h1>
-                </div>
-                <div ng-repeat="err in errors">
-                    <div class="alert alert-danger">{{err.message}}</div>
-                </div>
-            </div>
 
-            <div class="row" ng-show="shares.length">
+        <footer role="contentinfo">
-                <div class="row">
+            <hr/>
-                    <hr/>
+            <div class="container-fluid">
-                    <h1>Here are your secret shares ...</h1>
-                </div>
-
-                <tabset>
-                    <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>
-
-            <footer>
-                <hr/>
                 <small class="text-muted">
                     Share-a-secret service version {{version.frontendVersion}}.<br/>
                     Full source code available under <a href="http://opensource.org/licenses/MIT">MIT license</a> at <a href="https://github.com/zmarko/share-a-secret-api">GitHub</a>.<br/>
                     Copyright &copy; 2014 Marko Zivanovic.<br/>
                     This web site uses material from the Wikipedia article <a href="https://en.wikipedia.org/wiki/Secret_sharing">"Secret sharing"</a>, which is released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share-Alike License 3.0</a>.
                 </small>
-            </footer>
+            </div>
-
+        </footer>
-        </div>
-
 
     </body>
 </html>

src/main/resources/static/join.html

@@ -0,0 +1,36 @@
+<div class="container-fluid">
+    <form>
+
+        <div class="row" ng-show="secret">
+            <div class="col-md-12">
+                <p>Your secret, based on the shares you provided, is:</p>
+                <p class="text-success bg-success h1 center-block">
+                    {{secret}}
+                </p>
+                <hr/>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12 form-group">
+                <label for="shares">Enter the shares you want to join here, one per line.</label>
+                <textarea id="shares" class="form-control" wrap="soft" ng-model="sharesAsText" rows="10"></textarea>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 form-group">
+                <button id="join" ng-click="join()" class="btn btn-lg btn-primary btn-block">Join</button>
+            </div>
+        </div>
+    </form>
+
+    <div class="row">
+        <div class="col-md-12" ng-show="errors.length">
+            <h1>Whoops, something's wrong ...</h1>
+            <div ng-repeat="err in errors">
+                <div class="alert alert-danger">{{err.message}}</div>
+            </div>
+        </div>
+    </div>
+
+</div>

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

@@ -24,6 +24,7 @@
 
 angular.module('sasApp', [
     'ngResource',
+    'ngRoute',
     'ui.bootstrap',
     'sasControllers',
     'sasServices'
@@ -43,4 +44,22 @@ angular.module('sasApp', [
     SasService.version({}, function (response) {
         $rootScope.version = response.data;
     });
-});
+}).config(['$routeProvider',
+    function ($routeProvider) {
+        $routeProvider.
+                when('/split', {
+                    templateUrl: 'split.html',
+                    controller: 'SplitController'
+                }).
+                when('/join', {
+                    templateUrl: 'join.html',
+                    controller: 'JoinController'
+                }).
+                when('/', {
+                    templateUrl: 'about.html',
+                    controller: 'AboutController'
+                }).
+                otherwise({
+                    redirectTo: '/'
+                });
+    }]);

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

@@ -23,7 +23,7 @@
  */
 
 angular.module('sasControllers', []).
-        controller('MainController', ['$scope', 'SasService',
+        controller('SplitController', ['$scope', 'SasService',
             function ($scope, SasService) {
 
                 $scope.total = 10;
@@ -63,6 +63,34 @@ angular.module('sasControllers', []).
                         $scope.errors = response.data.errors;
                     });
                 };
+            }]).
+        controller('JoinController', ['$scope', 'SasService',
+            function ($scope, SasService) {
+                $scope.join = function () {
+                    $scope.errors = [];
+                    $scope.secret = "";
+                    var shares = [];
+                    var text = $scope.sharesAsText.split("\n");
+                    for (var i in text) {
+                        var share = text[i];
+                        shares.push(share);
+                    }
+                    SasService.join({shares: shares}, function (response) {
+                        $scope.secret = response.data.secret;
+                    }, function (response) {
+                        $scope.errors = response.data.errors;
+                    });
+                };
+            }]).
+        controller('AboutController', ['$scope', '$location',
+            function ($scope, $location) {
+                $scope.goJoin = function () {
+                    $location.path("/join");
+                };
+
+                $scope.goSplit = function () {
+                    $location.path("/split");
+                };
             }]);
 
 function mergeSharesToString(shares) {

src/main/resources/static/js/services.js

@@ -29,6 +29,10 @@ angular.module('sasServices', []).
                         url: "/sas/split",
                         method: "POST"
                     },
+                    join: {
+                        url: "/sas/join",
+                        method: "POST"
+                    },
                     version: {
                         url: "/sas/version",
                         method: "GET"

src/main/resources/static/split.html

@@ -0,0 +1,64 @@
+<div class="container-fluid">
+    <form>
+        <div class="row">
+            <div class="col-md-8 form-group">
+                <label for="secret">Enter here the secret you want to share:</label>
+                <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 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-lg"/>
+            </div>
+            <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-lg"/>
+            </div>
+        </div>
+        <br/>
+        <div class="row">
+            <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>
+    </form>
+
+    <div class="row">
+        <div class="col-md-12" ng-show="errors.length">
+            <h1>Whoops, something's wrong ...</h1>
+            <div ng-repeat="err in errors">
+                <div class="alert alert-danger">{{err.message}}</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row" ng-show="shares.length">
+        <div class="row">
+            <hr/>
+            <h1>Here are your secret shares ...</h1>
+        </div>
+
+        <tabset>
+            <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>