Merge branch 'v0.1.0'

.gitignore

@@ -0,0 +1,2 @@
+out/
+node_modules/

README.md

@@ -1 +1,35 @@
-aes-encrypter
+## AES Encrypter to keep your secrets safe
+
+Simple AES Encryption tool to password protect any information. It can encrypt as well as decrypt, render a QR code of the encrypted information and also print a formatted page with all the relevant data to a PDF file or printer.
+
+### Test data
+
+Unencrypted Data: Sometimes I eat peanut butter from the jar with a spoon
+
+Encrypted Data: U2FsdGVkX19NHFbDXgJM23vXHH6JvDT1yVo4lyXwqZwV7CddbX2Yx4m4PaQBreP21JgWjqvQFOsqvk9DzUKdoT5y4fLpT5GY5Xy6uuwUdTg=
+
+Password: 123412341234
+
+![](example/screen1.png)
+
+![](example/screen2.png)
+
+![](example/screen3.png)
+
+<object data="example/output.pdf" type="application/pdf" width="700px" height="700px">
+    <embed src="example/output.pdf">
+        This browser does not support PDFs. Please download the PDF to view it: <a href="example/output.pdf">Download Example PDF</a>.</p>
+    </embed>
+</object>
+
+### Important Notes
+
+Double clicking the output text and using using the copy command results in content_copy being appended to the copied output. Use the copy button instead to copy the output to the clipboard.
+
+The encrypted data written to the PDF is required to wrap on the lines, but this introduces a space character between each line when copying the encrypted data from the PDF. Remove these extra spaces otherwise the decryption won't work.
+
+If you're encrypting a long piece of data, the QR code can sometimes be split over pages 1 and 2 when printing to PDF. You can always bring the QR code up inside the app and take a screen shot or clipping to capture the QR if you have any issues.
+
+Remember to always test the decryption works before destroying any important plain text data.
+
+Never lose your password or your data will be lost.

css/main.css

@@ -0,0 +1,93 @@
+.hidden {
+  display: none;
+}
+
+.wrap {
+  overflow-wrap: break-word;
+}
+
+.full-width {
+  width: 100%;
+}
+
+#qrcode {
+  height: 100%;
+}
+
+#qrcode img {
+  width: 100%;
+  height: auto;
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+#qr-modal {
+  top: 15%;
+  left: 0;
+  z-index: 1000;
+}
+
+#modal-overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  display: none;
+  top: 0;
+  left: 0;
+  background-color: white;
+  opacity: 0.5;
+  z-index: 999;
+}
+
+#encrypt-switch label input[type=checkbox]:checked+.lever {
+  background-color: #3f51b5;
+}
+#encrypt-switch label input[type=checkbox]:checked+.lever:after {
+  background-color: #7986cb;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+    url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
+    url(../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+#print-content {
+  display: none;
+}

css/print.css

@@ -0,0 +1,15 @@
+#screen-content {
+  display: none;
+}
+
+#print-content {
+  display: block;
+}
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+}
+
+.pagebreak {
+  page-break-before: always;
+}

index.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>AES Encrypter</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/print.css" media="print">
+    <script src="js/bundle.js"></script>
+    </script>
+  </head>
+  <body>
+    <div id="screen-content">
+      <div class="container">
+        <div class="row">
+          <div class="col s12">
+            <h4>AES Encrypter</h4>
+          </div>
+          <form class="col s12">
+            <div class="row">
+              <div class="col s12">
+                <div class="switch" id="encrypt-switch">
+                <label>
+                    Encrypt
+                    <input type="checkbox" id="encrypt-decrypt">
+                    <span class="lever"></span>
+                    Decrypt
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col s12">
+                <label id="title-label">Title</label>
+                <input id="title" class="materialize-textarea" type="text" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col s12">
+                <label id="note-label">Note</label>
+                <input id="note" class="materialize-textarea" type="text" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col s12">
+                <label id="textarea-label">Text to encrypt</label>
+                <textarea id="text" class="materialize-textarea"></textarea>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col s12">
+                <label>Password</label>
+                <input id="password" type="password" class="validate">
+              </div>
+            </div>
+            <div class="row">
+              <div class="col s12">
+                <div class="switch">
+                <label>
+                    Hide
+                    <input type="checkbox" id="toggle-password">
+                    <span class="lever"></span>
+                    Show
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="input-field col s6">
+                <button class="btn-large waves-effect waves-light full-width" id="submit">
+                  <span>Encrypt</span>
+                  <i class="material-icons right">lock</i>
+                </button>
+              </div>
+              <div class="input-field col s6">
+                <button class="btn-large waves-effect waves-light blue-grey lighten-5 full-width" id="clear-form">
+                  <span class="black-text">Clear Form</span>
+                  <i class="material-icons right black-text">clear</i>
+                </button>
+              </div>
+            </div>
+          </form>
+          <div class="col s12 hidden" id="output-container">
+            <label id="output-label">Encrypted output</label>
+            <div class="card-panel white">
+              <span class="black-text wrap" id="output-text"></span>
+            </div>
+            <a class="btn-large btn-floating waves-effect waves-light" id="copy-output" data-clipboard-target="#output-text">
+              <i class="material-icons right">content_copy</i>
+            </a>
+            <a class="btn-large btn-floating waves-effect waves-light" id="show-qr">
+              <span>QR</span>
+            </a>
+            <a class="btn-large btn-floating waves-effect waves-light" id="print">
+              <i class="material-icons right">print</i>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div id="qr-modal" class="modal modal-fixed-footer">
+        <div class="modal-content">
+          <div id="qrcode"></div>
+        </div>
+        <div class="modal-footer">
+          <a href="#!" id="close-modal" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
+        </div>
+      </div>
+
+      <div id="modal-overlay"></div>
+    </div><!-- screen -->
+
+    <div id="print-content">
+      <h3 id="print-title" class="overflow-wrap"></h3>
+      <label>Note</label>
+      <p id="print-note" class="overflow-wrap"></p>
+      <label>Encrypted Data</label>
+      <p id="print-output-text" class="overflow-wrap"></p>
+      <label>QR Code</label>
+      <div id="print-qrcode"></div>
+    </div>
+
+    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+    <script type="text/javascript" src="node_modules/clipboard/dist/clipboard.min.js"></script>
+    <script type="text/javascript" src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
+    <script type="text/javascript" src="node_modules/materialize-css/js/modal.js"></script>
+  </body>
+</html>