From 50ad7732ac5632c0e6bb327a154152b92d8be60d Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Tue, 9 Oct 2018 09:13:22 -0400
Subject: [PATCH] add passphrase generator options

---
 jslib                                         |   2 +-
 .../vault/password-generator.component.html   | 104 +++++++++++-------
 src/locales/en/messages.json                  |   9 ++
 3 files changed, 76 insertions(+), 39 deletions(-)

diff --git a/jslib b/jslib
index c3f67dbe26d..a867c14b2a8 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit c3f67dbe26d7d5b30645a2857fd9f316fce7b6bc
+Subproject commit a867c14b2a8bb5f75cd495018e6c86eff22651b9
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index a27d41376ad..695604b19ab 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -24,54 +24,82 @@
                         </button>
                     </div>
                     <div class="box-content condensed" [hidden]="!showOptions">
-                        <div class="box-content-row box-content-row-slider" appBoxRow>
-                            <label for="length">{{'length' | i18n}}</label>
-                            <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
-                                   (blur)="saveOptions()">
-                            <input id="lengthRange" type="range" min="5" max="128" step="1"
-                                   [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
-                        </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="uppercase">A-Z</label>
-                            <input id="uppercase" type="checkbox" (change)="saveOptions()"
-                                   [(ngModel)]="options.uppercase">
-                        </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="lowercase">a-z</label>
-                            <input id="lowercase" type="checkbox" (change)="saveOptions()"
-                                   [(ngModel)]="options.lowercase">
-                        </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="numbers">0-9</label>
-                            <input id="numbers" type="checkbox" (change)="saveOptions()"
-                                   [(ngModel)]="options.number">
-                        </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="special">!@#$%^&*</label>
-                            <input id="special" type="checkbox" (change)="saveOptions()"
-                                   [(ngModel)]="options.special">
+                        <div class="box-content-row" appBoxRow>
+                            <label for="type" class="sr-only">{{'type' | i18n}}</label>
+                            <select id="type" [(ngModel)]="options.type" (change)="saveOptions()">
+                                <option value="password">{{'password' | i18n}}</option>
+                                <option value="passphrase">{{'passphrase' | i18n}}</option>
+                            </select>
                         </div>
                     </div>
                 </div>
-                <div class="box" [hidden]="!showOptions">
+                <div class="box" [hidden]="!showOptions" *ngIf="options.type === 'passphrase'">
                     <div class="box-content condensed">
                         <div class="box-content-row box-content-row-input" appBoxRow>
-                            <label for="min-number">{{'minNumbers' | i18n}}</label>
-                            <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
-                                   [(ngModel)]="options.minNumber">
+                            <label for="num-words">{{'numWords' | i18n}}</label>
+                            <input id="num-words" type="number" min="3" max="20" (input)="saveOptions()"
+                                    [(ngModel)]="options.numWords">
                         </div>
                         <div class="box-content-row box-content-row-input" appBoxRow>
-                            <label for="min-special">{{'minSpecial' | i18n}}</label>
-                            <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
-                                   [(ngModel)]="options.minSpecial">
-                        </div>
-                        <div class="box-content-row box-content-row-checkbox" appBoxRow>
-                            <label for="ambiguous">{{'ambiguous' | i18n}}</label>
-                            <input id="ambiguous" type="checkbox" (change)="saveOptions()"
-                                   [(ngModel)]="avoidAmbiguous">
+                            <label for="word-separator">{{'wordSeparator' | i18n}}</label>
+                            <input id="word-separator" type="text" maxlength="1" (input)="saveOptions()"
+                                    [(ngModel)]="options.wordSeparator">
                         </div>
                     </div>
                 </div>
+                <ng-container *ngIf="options.type === 'password'">
+                    <div class="box" [hidden]="!showOptions">
+                        <div class="box-content condensed">
+                            <div class="box-content-row box-content-row-slider" appBoxRow>
+                                <label for="length">{{'length' | i18n}}</label>
+                                <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
+                                        (blur)="saveOptions()">
+                                <input id="lengthRange" type="range" min="5" max="128" step="1"
+                                        [(ngModel)]="options.length" (change)="sliderChanged()"
+                                        (input)="sliderInput()">
+                            </div>
+                            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                                <label for="uppercase">A-Z</label>
+                                <input id="uppercase" type="checkbox" (change)="saveOptions()"
+                                        [(ngModel)]="options.uppercase">
+                            </div>
+                            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                                <label for="lowercase">a-z</label>
+                                <input id="lowercase" type="checkbox" (change)="saveOptions()"
+                                        [(ngModel)]="options.lowercase">
+                            </div>
+                            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                                <label for="numbers">0-9</label>
+                                <input id="numbers" type="checkbox" (change)="saveOptions()"
+                                        [(ngModel)]="options.number">
+                            </div>
+                            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                                <label for="special">!@#$%^&*</label>
+                                <input id="special" type="checkbox" (change)="saveOptions()"
+                                        [(ngModel)]="options.special">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box" [hidden]="!showOptions">
+                        <div class="box-content condensed">
+                            <div class="box-content-row box-content-row-input" appBoxRow>
+                                <label for="min-number">{{'minNumbers' | i18n}}</label>
+                                <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
+                                        [(ngModel)]="options.minNumber">
+                            </div>
+                            <div class="box-content-row box-content-row-input" appBoxRow>
+                                <label for="min-special">{{'minSpecial' | i18n}}</label>
+                                <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
+                                        [(ngModel)]="options.minSpecial">
+                            </div>
+                            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                                <label for="ambiguous">{{'ambiguous' | i18n}}</label>
+                                <input id="ambiguous" type="checkbox" (change)="saveOptions()"
+                                        [(ngModel)]="avoidAmbiguous">
+                            </div>
+                        </div>
+                    </div>
+                </ng-container>
             </div>
             <div class="modal-footer">
                 <button type="button" class="primary" appBlurClick *ngIf="showSelect" (click)="select()"
diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
index 7278c440b8f..311249b1a81 100644
--- a/src/locales/en/messages.json
+++ b/src/locales/en/messages.json
@@ -69,6 +69,9 @@
   "password": {
     "message": "Password"
   },
+  "passphrase": {
+    "message": "Passphrase"
+  },
   "editItem": {
     "message": "Edit Item"
   },
@@ -339,6 +342,12 @@
   "length": {
     "message": "Length"
   },
+  "numWords": {
+    "message": "Number of Words"
+  },
+  "wordSeparator": {
+    "message": "Word Separator"
+  },
   "close": {
     "message": "Close"
   },