Full migration to angular

rferro · May 7, 2016 · ff0601e · ff0601e
1 parent 9bc0f2a
commit ff0601e
Show file tree

Hide file tree

Showing 242 changed files with 75,450 additions and 15,695 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 
 # liskpaperwallet.com
 
-Unofficial paper wallet generator for Lisk cryptocurrency. In development.
+Unofficial paper wallet generator for Lisk cryptocurrency.
 
 ## License
 

diff --git a/bower.json b/bower.json
@@ -1,11 +1,14 @@
 {
   "name": "liskpaperwallet",
   "dependencies": {
-    "bootstrap": "^3.3.6",
     "jquery": "^2.2.3",
     "jquery-qrcode": "jquery.qrcode#^0.12.0",
     "Inconsolata": "inconsolata#^0.0.1",
-    "angular": "1.5.3"
+    "angular": "1.5.5",
+    "angular-animate": "^1.5.5",
+    "bootswatch-dist": "3.3.6-flatly",
+    "lato-font": "^1.1.1",
+    "angular-bootstrap": "angular-ui-bootstrap-bower#^1.3.2"
   },
   "private": true
 }
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -8,7 +8,7 @@ import jade from 'gulp-jade'
 
 gulp.task('babel', () => {
   gulp
-    .src(['src/**/*.js', '!src/liskwallet.js'])
+    .src(['src/**/*.js', '!src/wallet.js'])
     .pipe(watch('src/**/*.js', { verbose: true }))
     .pipe(babel({ presets: ['es2015'] }))
     .pipe(gulp.dest('lib'))
@@ -32,8 +32,8 @@ gulp.task('jade', () => {
 
 gulp.task('bundle', () => {
   gulp
-    .src('src/liskwallet.js')
-    .pipe(watch('src/liskwallet.js', { verbose: true }))
+    .src('src/wallet.js')
+    .pipe(watch('src/wallet.js', { verbose: true }))
     .pipe(babel({ presets: ['es2015'] }))
     .pipe(gulpBrowser.browserify())
     .pipe(gulp.dest('lib'))

diff --git a/index.html b/index.html
@@ -7,124 +7,145 @@
     <meta name="description" content="Paper wallet generator for Lisk cryptocurrency.">
     <meta name="keywords" content="lisk,paperwallet,paper,wallet,cryptocurrency,lisk.io,crypti">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="third-party/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="third-party/bootstrap/dist/css/bootstrap-theme.min.css">
+    <link rel="stylesheet" href="third-party/bootswatch-dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="lib/index.css">
   </head>
-  <body>
+  <body ng-controller="main" ng-cloak>
     <div class="container-fluid">
       <div class="row noprint">
         <div class="col-md-12">
           <div class="page-header text-center">
             <h1><a href="index.html">Lisk Paper Wallet</a> <small>v0.2.5</small>
             </h1>
-            <h5>Unofficial paper wallet generator for <a href="http://lisk.io" target="blank">Lisk</a> cryptocurrency. In development.
+            <h5>Unofficial paper wallet generator for <a href="http://lisk.io" target="blank">Lisk</a> cryptocurrency. Hosted by Github Pages. Source code is available <a href="https://github.com/rferro/liskpaperwallet/tree/gh-pages" target="blank">here</a>.
             </h5>
-            <h5>Hosted by Github Pages. Source code is available <a href="https://github.com/rferro/liskpaperwallet/tree/gh-pages" target="blank">here</a>.
+            <h5>We recommended use this tool offline: <a href="https://github.com/rferro/liskpaperwallet/archive/master.zip" class="alert-link">download</a> the source code and open index.html in your browser without internet access.
             </h5>
             <div class="gh-btns"><a href="https://github.com/rferro/liskpaperwallet" data-icon="octicon-eye" data-style="mega" data-count-href="/rferro/liskpaperwallet/watchers" data-count-api="/repos/rferro/liskpaperwallet#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch rferro/liskpaperwallet on GitHub" class="github-button">Watch</a><a href="https://github.com/rferro/liskpaperwallet" data-icon="octicon-star" data-style="mega" data-count-href="/rferro/liskpaperwallet/stargazers" data-count-api="/repos/rferro/liskpaperwallet#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star rferro/liskpaperwallet on GitHub" class="github-button">Star</a><a href="https://github.com/rferro/liskpaperwallet/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/rferro/liskpaperwallet/network" data-count-api="/repos/rferro/liskpaperwallet#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork rferro/liskpaperwallet on GitHub" class="github-button">Fork</a><a href="https://github.com/rferro/liskpaperwallet/issues" data-icon="octicon-issue-opened" data-style="mega" data-count-api="/repos/rferro/liskpaperwallet#open_issues_count" data-count-aria-label="# issues on GitHub" aria-label="Issue rferro/liskpaperwallet on GitHub" class="github-button">Issue</a><a href="https://github.com/rferro/liskpaperwallet/archive/master.zip" data-icon="octicon-cloud-download" data-style="mega" aria-label="Download rferro/liskpaperwallet on GitHub" class="github-button">Download</a></div>
           </div>
         </div>
       </div>
-      <div class="row noprint">
-        <div class="col-md-12 text-center">
-          <div class="alert alert-warning"><strong>We recommended use this tool offline: </strong><a href="https://github.com/rferro/liskpaperwallet/archive/master.zip" class="alert-link">download</a> the source code and open index.html in your browser without internet access.
-          </div>
-        </div>
-      </div>
+      <entropy></entropy>
+      <wallet></wallet>
+      <div id="preload"></div>
+    </div>
+    <script type="text/ng-template" id="entropy">
       <div class="row noprint btns">
         <div class="col-md-12 text-center">
-          <button type="button" class="btn btn-default btn-lg btn_random">Create a random wallet</button><span class="or"> or </span>
-          <button type="button" class="btn btn-default btn-lg">enter your passphrase</button>
+          <button type="button" ng-click="random.start()" ng-disabled="btn_disabled" class="btn btn-info btn_random">Create a random wallet</button>
+          <button type="button" ng-click="enter.start()" ng-disabled="btn_disabled" class="btn btn-info">Enter your passphrase</button>
         </div>
       </div>
-      <div class="row noprint enter">
+      <div ng-show="enter.started" class="row noprint">
         <div class="col-md-12 text-center">
           <div class="form-group">
-            <input type="text" placeholder="enter your passphrase here" class="form-control input-lg">
+            <input type="text" placeholder="enter your passphrase here" ng-model="enter.value" ng-keyup="enterKeyUp($event)" class="form-control input-lg text-center input_passphrase">
           </div>
-          <button class="btn btn-default btn-lg">Generate</button>
+          <button ng-disabled="!enter.valid" ng-click="enterGenerate()" class="btn btn-default btn_generate">Generate</button>
         </div>
       </div>
-      <div class="row noprint bar">
-        <div class="col-md-12">
-          <h3 class="text-center before mouse_text pulsate">Move your mouse to generate random bytes</h3>
-          <div class="progress">
-            <div class="progress-bar active"></div>
+      <div class="row noprint">
+        <div ng-show="random.started" class="col-md-12">
+          <h4 class="text-center pulsaste">Move your mouse to generate random bytes</h4>
+          <uib-progressbar max="100" value="random.progress"></uib-progressbar>
+          <div class="bytes text-center">
+            <byte ng-repeat="byte in random.tmp track by $index" ng-data="byte" animate-on-change="byte"></byte>
           </div>
-          <h3 class="entropy-tmp text-center hash"></h3>
+        </div>
+      </div>
+    </script>
+    <script type="text/ng-template" id="byte">
+      <div ng-bind="hex" class="hex"></div>
+      <div ng-bind="dec" class="dec"></div>
+    </script>
+    <script type="text/ng-template" id="wallet">
+      <div class="row noprint loading">
+        <div class="col-md-12">
+          <div class="cssload-loader"></div>
         </div>
       </div>
       <div class="row noprint after">
         <div class="col-md-12">
-          <div class="panel panel-success">
+          <div class="panel panel-danger">
             <div class="panel-heading">
-              <h3 class="panel-title text-center">Your Lisk Address: (SHARE)</h3>
+              <h3 class="panel-title text-center">Passphrase (SECRET)</h3>
             </div>
-            <div class="panel-body text-center"><span id="address" class="hash address"></span></div>
+            <div class="panel-body text-center"><span ng-bind="data.passphrase" clipboard class="hash passphrase"></span></div>
           </div>
         </div>
       </div>
       <div class="row noprint after">
         <div class="col-md-12">
-          <div class="panel panel-danger">
+          <div class="panel panel-success">
             <div class="panel-heading">
-              <h3 class="panel-title text-center">Your Passphrase: (SECRET! KEEP SAFE!)</h3>
+              <h3 class="panel-title text-center">Lisk Address (SHARE)</h3>
             </div>
-            <div class="panel-body text-center"><span id="passphrase" class="hash passphrase"></span></div>
+            <div class="panel-body text-center"><span ng-bind="data.address" clipboard class="hash address"></span></div>
           </div>
         </div>
       </div>
-      <div class="row noprint after ppk">
+      <div class="row noprint after">
         <div class="col-md-12">
-          <ul class="list-group">
-            <li class="list-group-item"><span class="badge">entropy</span><span class="hash entropy"></span></li>
-            <li class="list-group-item"><span class="badge">seed</span><span class="hash seed"></span></li>
-            <li class="list-group-item"><span class="badge">passphrase's sha256</span><span class="hash passphraseHash"></span></li>
-            <li class="list-group-item"><span class="badge">public key</span><span class="hash publicKey"></span></li>
-            <li class="list-group-item"><span class="badge">private key</span><span class="hash privateKey"></span></li>
+          <ul class="list-group data">
+            <li class="list-group-item"><span class="badge">entropy</span><span ng-bind="data.entropy" clipboard class="hash"></span></li>
+            <li class="list-group-item"><span class="badge">seed</span><span ng-bind="data.seed" clipboard class="hash"></span></li>
+            <li class="list-group-item"><span class="badge">passphrase sha256</span><span ng-bind="data.hash" clipboard class="hash"></span></li>
+            <li class="list-group-item"><span class="badge">public key</span><span ng-bind="data.publicKey" clipboard class="hash"></span></li>
+            <li class="list-group-item"><span class="badge">private key</span><span ng-bind="data.privateKey" clipboard class="hash"></span></li>
           </ul>
         </div>
       </div>
       <div class="row noprint after">
         <div class="col-md-6 text-center">
-          <h3>Lisk Address (SHARE)</h3>
-          <div class="qr_address"></div>
+          <h3>Address <small>SHARE</small>
+          </h3>
+          <qrcode data="data.address" size="280"></qrcode>
         </div>
         <div class="col-md-6 text-center">
-          <h3>Passphrase (SECRET)</h3>
-          <div class="qr_passphrase"></div>
+          <h3>Passphrase <small>SECRET</small>
+          </h3>
+          <qrcode data="data.passphrase" size="280"></qrcode>
         </div>
       </div>
       <div class="row after">
         <div class="col-md-12 text-center">
           <h2 class="noprint">Paper Wallet</h2>
           <div class="papers noprint">
-            <div class="btn-group btn-group-xs"></div>
-            <input type="checkbox" class="show-amount"><span> Box to write amount</span>
+            <div class="btn-group btn-group-xs">
+              <button ng-repeat="(id, art) in arts" ng-bind="id" ng-click="set_art(id)" ng-class="{ 'btn-warning': id === art_active }" ng-if="id &gt; 0" class="btn"></button>
+            </div>
+            <input type="checkbox" ng-model="amount" class="show-amount"><span> Box to write amount</span>
           </div>
-          <div class="paper-wrapper center-block">
-            <div class="paper"><img>
-              <div class="qr qr_address_paper"></div>
-              <div class="qr qr_passphrase_paper"></div>
-              <div class="address"></div>
-              <div class="address_label">address</div>
-              <div class="passphrase"></div>
-              <div class="passphrase_label">passphrase</div>
-              <div class="amount_label">amount:</div>
+        </div>
+      </div>
+      <div class="row after">
+        <div class="col-md-12 text-center">
+          <div ng-style="{ width: art.width, height: art.height }" class="paper-wrapper center-block">
+            <div ng-style="{ width: art.width, height: art.height }" class="paper"><img ng-src="images/{{ art.image }}{{ amount ? 'a' : '' }}.png">
+              <qrcode data="data.address" size="art.address.qr.size" ng-style="art.address.qr"></qrcode>
+              <qrcode data="data.passphrase" size="art.passphrase.qr.size" ng-style="art.passphrase.qr"></qrcode>
+              <div ng-bind="data.address" ng-style="art.address.text" class="address"></div>
+              <div ng-hide="art.address.label.hide" ng-style="art.address.label" class="address_label">address</div>
+              <div ng-bind="data.passphrase" ng-style="art.passphrase.text" class="passphrase"></div>
+              <div ng-hide="art.passphrase.label.hide" ng-style="art.passphrase.label" class="passphrase_label">passphrase</div>
+              <div ng-show="amount" ng-style="art.amount.label" class="amount_label">amount:</div>
             </div>
           </div>
         </div>
       </div>
       <div class="row noprint after">
         <div class="col-md-12 text-center">
-          <button type="button" class="btn btn-lg btn-success btn-print">Print Paper Wallet</button>
+          <button type="button" ng-click="print()" class="btn btn-warning"><span aria-hidden="true" class="glyphicon glyphicon-print"></span> Print Paper Wallet
+          </button>
         </div>
       </div>
-      <div id="preload"></div>
-    </div>
+    </script>
     <script src="third-party/jquery/dist/jquery.min.js"></script>
     <script src="third-party/jquery-qrcode/dist/jquery.qrcode.min.js"></script>
+    <script src="third-party/angular/angular.min.js"></script>
+    <script src="third-party/angular-animate/angular-animate.min.js"></script>
+    <script src="third-party/bootswatch-dist/js/bootstrap.min.js"></script>
+    <script src="third-party/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="lib/liskwallet.js"></script>
     <script src="lib/index.js"></script>
     <script id="github-bjs" async defer src="https://buttons.github.io/buttons.js"></script>