Add separator symbol support (#14)

src/generator.js

@@ -1,6 +1,7 @@
 const words = require('./words')
 const digits = '0123456789'
-const symbols = '`~!@#$%^&*()_+-=,./<>?;:|'
+const symbols = '`~!@#$%^&*()_+-=,./<>?;:|[]{} '
+const defaultSymbol = '-'
 
 function getWordList (name) {
   if (['small', 'medium', 'large'].includes(name)) {
@@ -41,30 +42,31 @@ function generate (options) {
     words = words.map(capitalize)
   }
 
-  if (options.symbol) {
-    words.push(pickChar(symbols))
-  }
-
   if (options.digit) {
     words.push(pickChar(digits))
   }
 
-  return words.join('')
+  return words.join(options.symbol ? options.separator : '')
 }
 
 function lengthBits (list) {
   return Math.log2(list.length)
 }
 
+function bitsForSymbol (symbol) {
+  return symbol === defaultSymbol ? 1 : lengthBits(symbols)
+}
+
 function computeBits (options) {
   const wordBits = lengthBits(getWordList(options.list))
   const capsBits = options.capitalize ? 1 : 0
-  const symbolBits = options.symbol ? lengthBits(symbols) : 0
+  const symbolBits = options.symbol ? bitsForSymbol(options.separator) : 0
   const digitBits = options.digit ? lengthBits(digits) : 0
 
   return wordBits * options.count + capsBits + symbolBits + digitBits
 }
 
 module.exports = {
-  getWordList, getWords, capitalize, generate, getChar, lengthBits, computeBits
+  getWordList, getWords, capitalize, generate, getChar, lengthBits, computeBits,
+  symbols, defaultSymbol,
 }

src/index.ejs

@@ -81,8 +81,14 @@
             <label for="use-capitalize">Capitalize the first letter</label>
           </div>
           <div class="form-check">
-            <input class="form-check-input" type="checkbox" id="use-symbol" name="symbol">
-            <label for="use-symbol">Add a symbol</label>
+            <input class="form-check-input" type="checkbox" id="use-symbol" name="symbol" checked>
+            <label for="use-symbol">Use separator symbol:</label>
+            <select id="separator-symbol" name="separator">
+              <% [...require('./generator').symbols].forEach(symbol => { %>
+                <option<% if (symbol === require('./generator').defaultSymbol) { %> selected<% }
+                          else if (symbol === ' ') { %> value=" "<% } %>><%= _.escape(symbol) %></option>
+              <% }) %>
+            </select>
           </div>
           <div class="form-check">
             <input class="form-check-input" type="checkbox" id="use-digit" name="digit">

src/ui.js

@@ -1,7 +1,7 @@
 import $ from 'jquery/dist/jquery'
 import 'form-serializer/jquery.serialize-object'
 
-import { generate, computeBits } from './generator'
+import { generate, computeBits, defaultSymbol } from './generator'
 
 $(() => {
   const $options = $('#options-form')
@@ -9,8 +9,10 @@ $(() => {
   const $bits = $('#password-bits').find('div')
   const classes = 'bg-danger bg-warning bg-info bg-success'
   const defaults = {
-    list: 'small',
+    list: 'large',
     count: 4,
+    symbol: true,
+    separator: defaultSymbol,
   }
 
   function bitClass (bits) {
@@ -49,6 +51,7 @@ $(() => {
     $options.find(':checkbox').each(function () {
       $(this).prop('checked', !!settings[this.name])
     })
+    $('#separator-symbol').val(settings.separator || defaultSymbol)
     updateBitMeter()
   }