.eslintrc

@@ -44,7 +44,7 @@ rules:
   ## use single quote, we can use double quote when escape chars
   quotes: [2, "single", "avoid-escape"]
   ## 2 space indentation
-  indent: [2, 2]
+  indent: [2, 2, {"SwitchCase": 1}]
   ## add space after comma
   comma-spacing: 2
   ## put semi-colon

Gruntfile.js

@@ -56,10 +56,15 @@ module.exports = function(grunt) {
     browserify: {
       build: {
         files: fileMaps.browserify,
-        options: { browserifyOptions: {
-          debug: true,  // for source maps
-          standalone: pkg['export-symbol']
-        } }
+        options: {
+          plugin: [
+            [ require('esmify') ]
+          ],
+          browserifyOptions: {
+            debug: true,  // for source maps
+            standalone: pkg['export-symbol']
+          }
+        }
       }
     },
 
@@ -92,7 +97,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-exec');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-uglify-es');
   grunt.loadNpmTasks('grunt-contrib-watch');
 
   //

README.md

@@ -67,7 +67,7 @@ Go6GqViRD01jmnVK8ysd8kyYKQPzKh61DiiwJkERbU7w6in8r483QliQdKH/
 -----END PGP PUBLIC KEY BLOCK-----" | gpg --import -
 ```
 
-You will see something like this, all you need to remember is one thing from this output: the key ID. The ID here is `5AF8663E`. You can also user the longer key ID you can find in the plugin options. In this example it would be A6A041765AF8663E.
+You will see something like this, all you need to remember is one thing from this output: the key ID. The ID here is `5AF8663E`. You can also use the longer key ID you can find in the plugin options. In this example it would be A6A041765AF8663E.
 
 ```Shell
 gpg: /home/me/.gnupg/trustdb.gpg: trustdb created
@@ -90,7 +90,7 @@ Run
 gpg --sign-key 5AF8663E
 ```
 
-Signing requires an existing keypair on your server. A keypair is also required for `pass` to add new secrets.
+Signing requires an existing trusted key on your server. A trusted key is also required for `pass` to add new secrets.
 
 **Tell pass to allow this key**
 
@@ -100,7 +100,7 @@ All that is left is to tell `pass` to encrypt your secrets using this public key
 pass init {KEY ID 1} {KEY ID 2}
 ```
 
-So let's say your existing keypair's ID is AF3D26E5, run
+So let's say your existing trusted key's ID is AF3D26E5, run
 ```Shell
 pass init AF3D26E5 5AF8663E
 ```
@@ -119,7 +119,22 @@ Password store initialized for AF3D26E5, 5AF8663E
 github.com/cpoppema: reencrypting to 088BAD9F22BD2048 15EF6677CC78CF01
 ```
 
-**Credits**
+**One-Time-Passwords/2FA/Two-Factor-Authentication**
+
+This plugin also supports generating tokens for your 2FA logins. To set this up. You can use this [pass plugin](https://github.com/tadfisher/pass-otp). Note that you're required to run pass >= 1.7.0 for the plugin to work.
+Once installed, the plugin can link two secrets together that have similar usernames, one that is your actual username and one special username with an `-otp` suffix.
+
+```
+ $    tree ~/.password-store | sed 's/├/\+/g; s/─/-/g; s/└/\\/g'
+/home/cornelis/.password-store
++-- github.com
+    +-- rcaldwell.gpg
+    \-- rcaldwell-otp.gpg
+```
+
+The plugin will show new buttons beside an indicator `2FA` for supported secrets to either `Fill`, `Copy` or `Show` the token. *Note*: only "Only Time-based One Time Passwords" (TOTP) are possible at this time, "HMAC-based One Time Password" (HOTP) are _not_ supported.
+
+## Credits
 
 * [salsita](https://github.com/salsita/chrome-extension-skeleton) for providing a chrome extension skeleton
 * [openpgpjs](https://github.com/openpgpjs/openpgpjs) for bringing openpgp to JavaScript in an easy-to-use way

code/css/popup.css

@@ -5,7 +5,7 @@ body {
   width: 330px;
 }
 
-.options-link {
+.links {
   padding-bottom: .9375rem;
 }
 
@@ -63,11 +63,39 @@ body {
   width: 160px;
 }
 
-.fill-form {
+.secrets-list .list-group-item .token,
+.secrets-list .list-group-item .token-expiry,
+.secrets-list .list-group-item .token-copy,
+.secrets-list .list-group-item .token-show,
+.secrets-list .list-group-item .token-fill {
+  display: none;
+}
+
+.secrets-list .list-group-item.otp-enabled .token,
+.secrets-list .list-group-item.otp-enabled .token-expiry {
+  display: block;
+}
+
+.secrets-list .list-group-item.otp-enabled .token-copy,
+.secrets-list .list-group-item.otp-enabled .token-show,
+.secrets-list .list-group-item.otp-enabled .token-fill {
+  display: inline-block;
+}
+
+.secrets-list .list-group-item-text input.token,
+.secrets-list .list-group-item-text .token-expiry {
+  width: 130px;
+}
+
+
+.form-fill {
   margin-top: 2px;
 }
 
-.fill-form,
+.form-fill,
+.token-copy,
+.token-show,
+.token-fill,
 .username-copy,
 .password-show,
 .password-copy {

code/html/options.html

@@ -18,7 +18,7 @@
           </fieldset>
           <fieldset class="form-group">
             <label for="passphrase">Passphrase *</label>
-            <small class="text-muted">This password is required every time you want to access your passwords.</small>
+            <small class="text-muted">This password is required every time you need to unlock your passwords.</small>
              <input type="password" id="passphrase" class="form-control" name="passphrase" required>
           </fieldset>
           <fieldset class="form-group">
@@ -28,17 +28,46 @@
           </fieldset>
           <fieldset class="form-group">
             <label for="passphrase">Public key</label>
-            <textarea id="public-key" name="public-key" class="form-control" disabled></textarea>
+            <textarea id="public-key" name="public-key" class="form-control" readonly></textarea>
           </fieldset>
           <fieldset class="form-group">
             <label for="key-name">Key ID</label>
             <small class="text-muted">This is your public key ID.</small>
             <div class="row">
               <div class="col-xs-6">
-                <input type="text" id="public-key-id" class="form-control" name="key-id" disabled>
+                <input type="text" id="public-key-id" class="form-control" name="key-id" readonly>
               </div>
             </div>
           </fieldset>
+          <fieldset class="form-group">
+            <label for="passphrase">How long do you want your passphrase remembered ?</label>
+            <div id="timeout" class="btn-group" data-toggle="buttons">
+              <label class="btn btn-success-outline">
+                <input type="radio" name="timeout" value="0"> Never
+              </label>
+              <label class="btn btn-primary-outline">
+                <input type="radio" name="timeout" value="60"> 1 min
+              </label>
+              <label class="btn btn-primary-outline">
+                <input type="radio" name="timeout" value="120"> 2 min
+              </label>
+              <label class="btn btn-primary-outline">
+                <input type="radio" name="timeout" value="300"> 5 min
+              </label>
+              <label class="btn btn-warning-outline">
+                <input type="radio" name="timeout" value="600"> 10 min
+              </label>
+              <label class="btn btn-warning-outline">
+                <input type="radio" name="timeout" value="1800"> 30 min
+              </label>
+              <label class="btn btn-danger-outline">
+                <input type="radio" name="timeout" value="3600"> 1 h
+              </label>
+              <label class="btn btn-danger-outline">
+                <input type="radio" name="timeout" value="14400"> 4 h
+              </label>
+            </div>
+          </fieldset>
           <button type="button" id="key-gen" class="btn btn-primary">Generate key</button>
           <button type="button" id="save" class="btn btn-secondary" disabled>Save</button>
           <span id="status"></span>

code/html/popup.html

@@ -10,22 +10,25 @@
   </head>
   <body>
     <div class="container">
-      <div class="options-link text-xs-right">
+      <div class="links text-xs-right">
+        <button id="logout" type="button" class="btn btn-secondary btn-sm" style="display: none;">Logout</button>
         <button id="go-to-options" type="button" class="btn btn-secondary btn-sm">Options</button>
       </div>
 
       <div class="alerts"></div>
 
       <!-- unlock form -->
-      <form id="unlock-form" class="form-signin" autocomplete="off">
-        <input type="password" id="passphrase" class="form-control" placeholder="Passphrase" autofocus>
-        <button id="unlock" class="btn btn-lg btn-primary btn-block"><span>Unlock</span></button>
-      </form>
+      <form id="unlock-form" class="form-signin" autocomplete="off"></form>
 
-      <!-- list of secrets, visible after unlock -->
+      <!-- list of secrets -->
       <div id="secrets"></div>
     </div>
 
+    <template id="unlock-form-template">
+      <input type="password" id="passphrase" class="form-control" placeholder="Passphrase" autofocus="">
+      <button id="unlock" class="btn btn-lg btn-primary btn-block"><span>Unlock</span></button>
+    </template>
+
     <template id="secrets-list-template">
       <form id="search-form" class="form-search" autocomplete="off">
         <input type="text" id="search" class="form-control" placeholder="Search.." autofocus="">
@@ -36,13 +39,24 @@
 
     <template id="secrets-list-item-template">
       <li class="list-group-item secret">
-        <span class="label label-default label-pill pull-xs-right fill-form">Fill</span>
+        <!-- This is rendered to the right of the domain below -->
+        <span class="label label-default label-pill pull-xs-right form-fill">Fill</span>
         <h5 class="list-group-item-heading domain"></h5>
+
+        <!-- This is rendered to the right of the username below -->
         <span class="label label-default label-pill pull-xs-right username-copy copy" data-copied-text="Copied" data-reset-text="Copy">Copy</span>
         <p class="list-group-item-text"><input type="text" class="username" readonly></p>
+
+        <!-- This is rendered to the right of the password below -->
         <span class="label label-default label-pill pull-xs-right password-show">Show</span>
         <span class="label label-default label-pill pull-xs-right password-copy copy" data-copied-text="Copied" data-reset-text="Copy">Copy</span>
         <p class="list-group-item-text password"><input type="text" class="password" readonly value="******"></p>
+
+        <!-- This is rendered to the right of the otp token below -->
+        <span class="label label-default label-pill pull-xs-right token-show">Show</span>
+        <span class="label label-default label-pill pull-xs-right token-copy copy" data-copied-text="Copied" data-reset-text="Copy">Copy</span>
+        <span class="label label-default label-pill pull-xs-right token-fill">Fill</span>
+        <p class="list-group-item-text token"><input type="text" class="token" readonly value="2FA"><span class="token-expiry"></span></p>
       </li>
     </template>