Allow user-defined separator and fix docker-compose process

.gitignore

@@ -1,2 +1,3 @@
+package-lock.json
 node_modules/
 dist/

Dockerfile

@@ -1,8 +1,6 @@
 FROM node
 
-ADD . /code
 WORKDIR /code
 
 RUN npm install -g grunt-cli
-RUN npm install
-
+CMD npm install; grunt

css/styles.css

@@ -24,6 +24,16 @@ input {
   text-align: center;
   padding: 1%;
 }
+input.separator {
+  display: inline;
+  border: 1px solid #ccc;
+  margin: 0 auto;
+  font-size: 14px;
+  height: 30px;
+  width: 15px;
+  text-align: center;
+  padding: 0 10px;
+}
 select {
   font-size: 16px;
   -webkit-appearance: none;
@@ -103,6 +113,11 @@ li {
   margin-top: 1%;
   text-align: center;
 }
+.passphrase-separator {
+  display: inline;
+  margin-top: 1%;
+  text-align: center;
+}
 .crack-time-label {
   text-align: center;
   margin: 0 auto;

docker-compose.yml

@@ -2,4 +2,3 @@ nodebuild:
   build: .
   volumes:
    - .:/code
-  command: grunt

index.html

@@ -19,10 +19,12 @@ <h1 class="title">Use A <span>Passphrase</span></h1>
   <p class="crack-time-label">Approximate Crack Time: <span class="crack-time">0 seconds</span></p>
   <div class="passphrase-options">
     <select id="passphrase_select">
-      <option value="4" selected>Four-word passphrase, with spaces</option>
-      <option value="5">Five-word passphrase, with spaces</option>
-      <option value="12">Twelve-word passphrase, with spaces</option>
+      <option value="4" selected>Four-word passphrase</option>
+      <option value="5">Five-word passphrase</option>
+      <option value="12">Twelve-word passphrase</option>
     </select>
+    <p class="passphrase-separator"> with separator: </p>
+    <input class="separator" id="separator" type="text" value=" " onmouseover="this.select()"/>
     <button class="btn-generate">Generate New Passphrase</button>
   </div>
   <div class="social-buttons">

js/script.js

@@ -19,7 +19,7 @@ function generatePassword(numberOfWords) {
       generatedPasswordArray.push(wordlist[index]);
   }
 
-  return generatedPasswordArray.join(' ');
+  return generatedPasswordArray;
 }
 
 function setStyleFromWordNumber(passwordField, numberOfWords) {
@@ -68,16 +68,19 @@ function calculateAndSetCrackTime() {
 
 var selectField = document.getElementById('passphrase_select');
 var passwordField = document.getElementById('passphrase');
+var separatorField = document.getElementById('separator');
 var button = document.querySelector('.btn-generate');
 
 // Initially run it upon load
-passwordField.setAttribute('value', generatePassword(4));
+var passArray = generatePassword(4); // Save array to easily change separator
+passwordField.setAttribute('value', passArray.join(' '));
 calculateAndSetCrackTime();
 
 // Listen for a button click
 button.addEventListener('click', function() {
   var numberOfWords = selectField.options[selectField.selectedIndex].value;
-  passwordField.value = generatePassword(numberOfWords);
+  passArray = generatePassword(numberOfWords);
+  passwordField.value = passArray.join(separatorField.value);
   setStyleFromWordNumber(passwordField, numberOfWords);
   calculateAndSetCrackTime();
 });
@@ -86,3 +89,9 @@ button.addEventListener('click', function() {
 passwordField.addEventListener('input', function (evt) {
   calculateAndSetCrackTime();
 });
+
+// Listen for separator value change
+separatorField.addEventListener('input', function (evt) {
+  passwordField.value = passArray.join(separatorField.value);
+  calculateAndSetCrackTime();
+});