add qr code functionality for inputting addresses/amounts

wowstash/static/css/main.css

@@ -542,3 +542,13 @@ ol li {
   font-size: 1.1em;
   padding-bottom: .75em;
 }
+
+.hidden {
+  display: none;
+}
+
+#startVideo {
+  border: 2px solid white;
+  border-radius: 4px;
+  padding: 6px;
+}

wowstash/templates/scripts.html

@@ -4,6 +4,51 @@
 <script src="/static/js/main.js"></script>
 <script src="/static/js/noty.js"></script>
 
+{% if request.path == '/wallet/dashboard' %}
+<script type="text/javascript" src="/static/js/zxing.js"></script>
+<script type="text/javascript">
+
+  function decodeOnce(codeReader, selectedDeviceId) {
+    codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
+      const url = new URL(result.text);
+      if (url.protocol == 'wownero:'){
+        document.getElementById('address').value = url.pathname;
+        url.searchParams.forEach((value, key) => {
+          if (key == 'tx_amount'){
+            document.getElementById('amount').value = value;
+          };
+        });
+      };
+      codeReader.reset();
+      $('#preview').hide();
+    }).catch((err) => {
+      console.error(err);
+      codeReader.reset();
+      $('#preview').hide();
+    })
+  }
+
+  window.addEventListener('load', function () {
+    let selectedDeviceId;
+    const codeReader = new ZXing.BrowserQRCodeReader();
+    codeReader.getVideoInputDevices()
+      .then((videoInputDevices) => {
+        document.getElementById('startVideo').addEventListener('click', () => {
+          $('#preview').show();
+          decodeOnce(codeReader, videoInputDevices[0].deviceId);
+        })
+        document.getElementById('stopVideo').addEventListener('click', () => {
+          codeReader.reset();
+          $('#preview').hide();
+        })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  })
+</script>
+{% endif %}
+
 {% with messages = get_flashed_messages() %}
   {% if messages %}
   <script type="text/javascript">

wowstash/templates/wallet/dashboard.html

@@ -104,21 +104,27 @@
       <div class="container-slim">
         <div class="section-heading text-center">
           <h2>Send</h2>
+          <i class="fa fa-qrcode fa-2x" id="startVideo"></i><br /><br />
+          <div class="hidden" id="preview">
+            <p>Show me a QR code!</p>
+            <video id="video" width="300" height="200"></video>
+            <br /><button id="stopVideo">Cancel</button>
+          </div>
           <form method="POST" action="{{ url_for('wallet.send') }}" class="send-form">
               {{ send_form.csrf_token }}
-              {% for f in send_form %}
-                {% if f.name != 'csrf_token' %}
-                  <div class="form-group">
-                    {{ f.label }}
-                    {{ f }}
-                  </div>
-                {% endif %}
-              {% endfor %}
+              <div class="form-group">
+                {{ send_form.address.label }}
+                {{ send_form.address }}
+              </div>
+              <div class="form-group">
+                {{ send_form.amount.label }}
+                {{ send_form.amount }}
+              </div>
               <ul>
-              {% for field, errors in send_form.errors.items() %}
-                  <li>{{ send_form[field].label }}: {{ ', '.join(errors) }}</li>
-              {% endfor %}
-            </ul>
+                {% for field, errors in send_form.errors.items() %}
+                    <li>{{ send_form[field].label }}: {{ ', '.join(errors) }}</li>
+                {% endfor %}
+              </ul>
               <input type="submit" value="Send" class="btn btn-link btn-outline btn-xl">
           </form>
         </div>