├── .gitignore
├── README.md
├── package.json
├── app.js
├── lib
    └── app.js
└── dist
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | main.js*
2 | node_modules
3 | bundle.*
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Generate a Paperwallet From a Password
 2 | 
 3 | ### Installation
 4 | #### Ubuntu dependencies
 5 | ```
 6 | sudo apt-get install libcairo2-dev libjpeg-dev libgif-dev
 7 | ```
 8 | 
 9 | Once the dependencies are installed, do:
10 | 
11 |     npm install
12 |     npm run browserify
13 | 
14 | ### Usage
15 | 
16 |     open dist/index.html
17 | 
18 | ### Remark
19 | 
20 | * You need to provide the account name
21 | * Passwords must be at least 16 characters long
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tmp",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "babel app.js --presets babel-preset-es2015 --out-dir lib",
 9 |     "build:watch": "babel --watch app.js --presets babel-preset-es2015 --out-dir lib",
10 |     "prebrowserify": "npm run build",
11 |     "postbrowserify": "uglifyjs --compress --mangle --sequences --drop_console --output dist/bundle.min.js -- dist/bundle.js",
12 |     "browserify": "browserify lib/app.js -o dist/bundle.js -d"
13 |   },
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "graphenejs-lib": "^0.4.10",
18 |     "jquery": "^3.0.0",
19 |     "qrcode": "^0.4.2"
20 |   },
21 |   "devDependencies": {
22 |     "babel-cli": "^6.14.0",
23 |     "babel-preset-es2015": "^6.9.0",
24 |     "browserify": "^13.1.0",
25 |     "uglify-js": "^2.7.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var $ = require('jquery');
 2 | var {Login} = require("graphenejs-lib");
 3 | var $result = $('.result').hide();
 4 | var $pwdlengthwarning = $("#pwdlengthwarning").hide();
 5 | var $pwdmismatchWarning = $("#pwdmismatchhwarning").hide();
 6 | var prefix = "STM";
 7 | 
 8 | import QRCode from 'qrcode';
 9 | let qrcodedraw = new QRCode.QRCodeDraw();
10 | 
11 | function verifyPasswordLength(w) {
12 |  if (w.length >= 16) {
13 |   $pwdlengthwarning.hide();
14 |   return true;
15 |  } else if (w.length > 0){
16 |   $pwdlengthwarning.show();
17 |   $result.hide();
18 |   return false;
19 |  }
20 | }
21 | 
22 | window.$ = $;
23 | function verifyPasswordMatch(password, passwordConfirm) {
24 |  if (password != passwordConfirm) {
25 |   $pwdmismatchWarning.show();
26 |   $result.hide();
27 |   return false;
28 |  } else {
29 |   $pwdmismatchWarning.hide();
30 |   return true;
31 |  }
32 | }
33 | 
34 | function processKey(p, type) {
35 |  $('#' + type + '_key').text(p["pubKeys"][type]);
36 |  $('#' + type + '_pkey').text(p["privKeys"][type].toWif());
37 |  qrcodedraw.draw(document.getElementById(type + "_pub"), p["pubKeys"][type], function(error,canvas){
38 |    if(error){ return console.log('Error =( ', error); }
39 |  });
40 |  qrcodedraw.draw(document.getElementById(type + "_wif"), p["privKeys"][type].toWif(), function(error,canvas){
41 |    if(error){ return console.log('Error =( ', error); }
42 |  });
43 | }
44 | 
45 | function processKeyPress() {
46 |  var name = $('input[name=name]').val();
47 |  var password = $('input[name=password]').val();
48 |  var passwordConfirm = $('input[name=passwordConfirm]').val();
49 |  $('#printplainpassword').text(password);
50 |  $('#printplainusername').text("account: " + name);
51 | 
52 |  if (!verifyPasswordLength(password) || !name) {
53 |   return;
54 |  }
55 |  if (!verifyPasswordMatch(password, passwordConfirm)) {
56 |   return;
57 |  }
58 |  $result.hide();
59 |  var p = Login.generateKeys(name, password, ["owner", "active", "posting", "memo"], prefix);
60 |  processKey(p, "owner");
61 |  processKey(p, "active");
62 |  processKey(p, "posting");
63 |  processKey(p, "memo");
64 |  $result.show();
65 | }
66 | 
67 | $('input[name=name]').keyup(processKeyPress);
68 | $('input[name=password]').keyup(processKeyPress);
69 | $('input[name=passwordConfirm]').keyup(processKeyPress);
70 | 
71 | $(".showpwdicon").click(function(){
72 |  if ($(this).prev().attr('type') == "text") {
73 |   $(this).prev().attr('type','password');
74 |   $(this).addClass('glyphicon-eye-open')
75 |   $(this).removeClass('glyphicon-eye-close')
76 |  } else {
77 |   $(this).prev().attr('type','text');
78 |   $(this).addClass('glyphicon-eye-close')
79 |   $(this).removeClass('glyphicon-eye-open')
80 |  }
81 | });
82 | 
83 | $("#printBtn").click(function() {
84 |  $("#printpassword").hide();
85 |  $("#printpassword").removeClass("visible-print-block");
86 |  javascript:window.print();
87 |  return false;
88 | });
89 | 
90 | $("#printWithPWdBtn").click(function() {
91 |  $("#printpassword").show();
92 |  $("#printpassword").addClass("visible-print-block");
93 |  window.print();
94 |  return false;
95 | });
96 | 


--------------------------------------------------------------------------------
/lib/app.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var _qrcode = require('qrcode');
  4 | 
  5 | var _qrcode2 = _interopRequireDefault(_qrcode);
  6 | 
  7 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  8 | 
  9 | var $ = require('jquery');
 10 | 
 11 | var _require = require("graphenejs-lib");
 12 | 
 13 | var Login = _require.Login;
 14 | 
 15 | var $result = $('.result').hide();
 16 | var $pwdlengthwarning = $("#pwdlengthwarning").hide();
 17 | var $pwdmismatchWarning = $("#pwdmismatchhwarning").hide();
 18 | var prefix = "STM";
 19 | 
 20 | var qrcodedraw = new _qrcode2.default.QRCodeDraw();
 21 | 
 22 | function verifyPasswordLength(w) {
 23 |   if (w.length >= 16) {
 24 |     $pwdlengthwarning.hide();
 25 |     return true;
 26 |   } else if (w.length > 0) {
 27 |     $pwdlengthwarning.show();
 28 |     $result.hide();
 29 |     return false;
 30 |   }
 31 | }
 32 | 
 33 | window.$ = $;
 34 | function verifyPasswordMatch(password, passwordConfirm) {
 35 |   if (password != passwordConfirm) {
 36 |     $pwdmismatchWarning.show();
 37 |     $result.hide();
 38 |     return false;
 39 |   } else {
 40 |     $pwdmismatchWarning.hide();
 41 |     return true;
 42 |   }
 43 | }
 44 | 
 45 | function processKey(p, type) {
 46 |   $('#' + type + '_key').text(p["pubKeys"][type]);
 47 |   $('#' + type + '_pkey').text(p["privKeys"][type].toWif());
 48 |   qrcodedraw.draw(document.getElementById(type + "_pub"), p["pubKeys"][type], function (error, canvas) {
 49 |     if (error) {
 50 |       return console.log('Error =( ', error);
 51 |     }
 52 |   });
 53 |   qrcodedraw.draw(document.getElementById(type + "_wif"), p["privKeys"][type].toWif(), function (error, canvas) {
 54 |     if (error) {
 55 |       return console.log('Error =( ', error);
 56 |     }
 57 |   });
 58 | }
 59 | 
 60 | function processKeyPress() {
 61 |   var name = $('input[name=name]').val();
 62 |   var password = $('input[name=password]').val();
 63 |   var passwordConfirm = $('input[name=passwordConfirm]').val();
 64 |   $('#printplainpassword').text(password);
 65 |   $('#printplainusername').text("account: " + name);
 66 | 
 67 |   if (!verifyPasswordLength(password) || !name) {
 68 |     return;
 69 |   }
 70 |   if (!verifyPasswordMatch(password, passwordConfirm)) {
 71 |     return;
 72 |   }
 73 |   $result.hide();
 74 |   var p = Login.generateKeys(name, password, ["owner", "active", "posting", "memo"], prefix);
 75 |   processKey(p, "owner");
 76 |   processKey(p, "active");
 77 |   processKey(p, "posting");
 78 |   processKey(p, "memo");
 79 |   $result.show();
 80 | }
 81 | 
 82 | $('input[name=name]').keyup(processKeyPress);
 83 | $('input[name=password]').keyup(processKeyPress);
 84 | $('input[name=passwordConfirm]').keyup(processKeyPress);
 85 | 
 86 | $(".showpwdicon").click(function () {
 87 |   if ($(this).prev().attr('type') == "text") {
 88 |     $(this).prev().attr('type', 'password');
 89 |     $(this).addClass('glyphicon-eye-open');
 90 |     $(this).removeClass('glyphicon-eye-close');
 91 |   } else {
 92 |     $(this).prev().attr('type', 'text');
 93 |     $(this).addClass('glyphicon-eye-close');
 94 |     $(this).removeClass('glyphicon-eye-open');
 95 |   }
 96 | });
 97 | 
 98 | $("#printBtn").click(function () {
 99 |   $("#printpassword").hide();
100 |   $("#printpassword").removeClass("visible-print-block");
101 |   javascript: window.print();
102 |   return false;
103 | });
104 | 
105 | $("#printWithPWdBtn").click(function () {
106 |   $("#printpassword").show();
107 |   $("#printpassword").addClass("visible-print-block");
108 |   window.print();
109 |   return false;
110 | });


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |  <head lang="en" charset="utf-8">
  4 |   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  5 |   <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
  6 |   <title>Steem Paperwallet Generator</title>
  7 |   <style>
  8 |     .key {
  9 |      font-family: monospace;
 10 |      font-size: 9pt;
 11 |      border: 1px solid #999;
 12 |      background: #eee;
 13 |      padding:.2em;
 14 |     }
 15 |    .pkey {
 16 |     font-family: monospace;
 17 |     font-size: 9pt;
 18 |     border: 1px solid #999;
 19 |     background: #eee;
 20 |     padding:.2em;
 21 |    }
 22 |    .headline {
 23 |     background: #eee;
 24 |    }
 25 |    .password{
 26 |     position: relative;
 27 |    }
 28 |    .password input[type="password"]{
 29 |     padding-right: 30px;
 30 |    }
 31 |    .password .glyphicon {
 32 |     right: 15px;
 33 |     position: absolute;
 34 |     top: 12px;
 35 |     cursor:pointer;
 36 |    }
 37 |    .pkey-label {
 38 |        padding-top: 40px;
 39 |    }
 40 |    tr > td {
 41 |        padding-top: 0;
 42 |        padding-bottom: 0;
 43 |    }
 44 |    canvas {
 45 |        height: 185px;
 46 |    }
 47 |   </style>
 48 |  </head>
 49 |  <body>
 50 |   <div class="container-fluid">
 51 |    <h2>Steem Permission Keys &nbsp;
 52 |         <small id="printplainusername"></small>
 53 |    </h2>
 54 |    <div id="printpassword" style="display:none">
 55 |     <div class="panel panel-danger">
 56 |      <div class="panel-heading">
 57 |       <h3 class="panel-title">Plaintext Password</h3>
 58 |      </div>
 59 |      <div class="panel-body">
 60 |       <div id="printplainpassword" class="key"></div>
 61 |      </div>
 62 |     </div>
 63 |    </div>
 64 |    <div class="hidden-print">
 65 |     <form>
 66 |      <div class="form-group">
 67 |       <label><i class="fa fa-user"></i> Account Name</label>
 68 |       <input class="form-control" type=text name="name" />
 69 |      </div>
 70 |      <div class="form-group">
 71 |       <label><i class="fa fa-key"></i> Password</label>
 72 |       <div class="password">
 73 |        <input class="form-control" class="form-control" type=password name="password" />
 74 |        <span class="glyphicon glyphicon-eye-open showpwdicon"></span>
 75 |       </div>
 76 |      </div>
 77 |      <div class="form-group">
 78 |       <label><i class="fa fa-key"></i> Confirm Password</label>
 79 |       <div class="password">
 80 |        <input class="form-control" class="form-control" type=password name="passwordConfirm" />
 81 |        <span class="glyphicon glyphicon-eye-open showpwdicon"></span>
 82 |       </div>
 83 |      </div>
 84 |      <div class="form-group hidden-print result">
 85 |       <label></label>
 86 |       <button class="btn btn-primary" id="printBtn" type="button"><i class="fa fa-print"></i> Print</button>
 87 |       <button class="btn btn-primary" id="printWithPWdBtn" type="button"><i class="fa fa-print"></i> Print with Password</button>
 88 |      </div>
 89 |     </form>
 90 |    </div>
 91 |    <p id="pwdlengthwarning" style="color:red;">Keep typing, your password is still too short: at least 16 characters are required.</p>
 92 |    <p id="pwdmismatchhwarning" style="color:red;">Passwords don't match.</p>
 93 |    <div class="result">
 94 |     <table class="table">
 95 |      <tbody>
 96 |       <tr class="headline">
 97 |           <th class="text-center">Public</th>
 98 |           <th class="text-center">Posting Key</th>
 99 |           <th class="text-center">Private</th>
100 |       </tr>
101 |       <tr>
102 |        <td><canvas id="posting_pub"></canvas></td>
103 |        <td>
104 |            <label class="pkey-label">Public key</label>
105 |            <p><span id="posting_key" class="key"></span></p>
106 |            <label>Private key</label>
107 |            <p><span id="posting_pkey" class="pkey"></span></p>
108 |        </td>
109 |        <td><canvas id="posting_wif"></canvas></td>
110 |       </tr>
111 |       <tr class="headline">
112 |           <th class="text-center">Public</th>
113 |           <th class="text-center">Active Key</th>
114 |           <th class="text-center">Private</th>
115 |       </tr>
116 |       <tr>
117 |        <td><canvas id="active_pub"></canvas></td>
118 |        <td>
119 |            <label class="pkey-label">Public key</label>
120 |            <p><span id="active_key" class="key"></span></p>
121 |            <label>Private key</label>
122 |            <p><span id="active_pkey" class="pkey"></span></p>
123 |        </td>
124 |        <td><canvas id="active_wif"></canvas></td>
125 |       </tr>
126 |       <tr class="headline">
127 |           <th class="text-center">Public</th>
128 |           <th class="text-center">Owner Key</th>
129 |           <th class="text-center">Private</th>
130 |       </tr>
131 |       <tr>
132 |        <td><canvas id="owner_pub"></canvas></td>
133 |        <td>
134 |            <label class="pkey-label">Public key</label>
135 |            <p><span id="owner_key" class="key"></span></p>
136 |            <label>Private key</label>
137 |            <p><span id="owner_pkey" class="pkey"></span></p>
138 |        </td>
139 |        <td><canvas id="owner_wif"></canvas></td>
140 |       </tr>
141 |       <tr class="headline">
142 |           <th class="text-center">Public</th>
143 |           <th class="text-center">Memo Key</th>
144 |           <th class="text-center">Private</th>
145 |       </tr>
146 |       <tr>
147 |        <td><canvas id="memo_pub"></canvas></td>
148 |        <td>
149 |            <label class="pkey-label">Public key</label>
150 |            <p><span id="memo_key" class="key"></span></p>
151 |            <label>Private key</label>
152 |            <p><span id="memo_pkey" class="pkey"></span></p>
153 |        </td>
154 |        <td><canvas id="memo_wif"></canvas></td>
155 |       </tr>
156 |      </tbody>
157 |     </table>
158 |    </div>
159 |   </div>
160 |   <script src="bundle.min.js"></script>
161 |  </body>
162 | </html>
163 | 


--------------------------------------------------------------------------------