added a text about used yubikey

app/scripts/views/open-view.js

@@ -145,7 +145,8 @@ class OpenView extends View {
             keyFilePath: null,
             fileData: null,
             rev: null,
-            opts: null
+            opts: null,
+            chalResp: null
         };
     }
 
@@ -1045,9 +1046,20 @@ class OpenView extends View {
             return;
         }
 
+        if (this.params.chalResp) {
+            this.params.chalResp = null;
+            this.el
+                .querySelector('.open__settings-yubikey')
+                .classList.remove('open__settings-yubikey--active');
+            return;
+        }
+
         const chalRespView = new OpenChalRespView();
         chalRespView.on('select', e => {
-            // console.log('e', e.serial, e.slot);
+            this.params.chalResp = { serial: e.serial, slot: e.slot };
+            this.el
+                .querySelector('.open__settings-yubikey')
+                .classList.add('open__settings-yubikey--active');
         });
 
         Alerts.alert({

app/styles/areas/_open.scss

@@ -253,18 +253,28 @@
         &-yubikey {
             display: none;
             &--present {
-                display: block;
+                display: flex;
+            }
+            &__text {
+                margin-right: 0.4em;
+                display: none;
+                .open__settings-yubikey--active & {
+                    display: block;
+                }
             }
             &-img {
                 fill: var(--muted-color);
                 width: 2em;
                 position: relative;
-                top: -0.4em;
+                top: -0.25em;
                 margin-right: $base-padding-h;
                 cursor: pointer;
                 &:hover {
                     fill: var(--text-color);
                 }
+                .open__settings-yubikey--active & {
+                    fill: var(--text-color);
+                }
             }
         }
     }

app/templates/open.hbs

@@ -92,7 +92,7 @@
             </div>
             <div class="open__settings-yubikey {{#if canUseChalRespYubiKey}}open__settings-yubikey--present{{/if}} hide"
                  tabindex="26" title="YubiKey">
-                {{{svg 'usb-token' 'open__settings-yubikey-img'}}}
+                <div class="open__settings-yubikey__text">YK</div> {{{svg 'usb-token' 'open__settings-yubikey-img'}}}
             </div>
         </div>
         <div class="open__last">