settings

app/scripts/locales/base.json

@@ -524,6 +524,8 @@
     "setFileFormatVersion": "File format",
     "saveFileExportRaw": "Exporting your passwords",
     "saveFileExportRawBody": "The exported file will contain your passwords, they will not be encrypted there. Would you like to proceed?",
+    "setFileYubiKeyIntro": "One-time passwords from this YubiKey will be displayed in the app.",
+    "setFileYubiKeySettings": "Settings",
 
     "setShTitle": "Shortcuts",
     "setShShowAll": "show all items",

app/scripts/models/external/external-device-model.js

@@ -5,10 +5,6 @@ class ExternalDeviceModel extends Model {
     entries = new ExternalEntryCollection();
     groups = [];
 
-    get external() {
-        return true;
-    }
-
     close() {}
 
     forEachEntry(filter, callback) {
@@ -25,6 +21,7 @@ class ExternalDeviceModel extends Model {
 
 ExternalDeviceModel.defineModelProperties({
     id: '',
+    external: true,
     active: false,
     entries: undefined,
     groups: undefined,

app/scripts/models/external/external-otp-device-model.js

@@ -9,6 +9,10 @@ class ExternalOtpDeviceModel extends ExternalDeviceModel {
         throw 'Not implemented';
     }
 
+    close(callback) {
+        throw 'Not implemented';
+    }
+
     getOtp(callback) {
         throw 'Not implemented';
     }

app/scripts/models/external/yubikey-otp-model.js

@@ -83,6 +83,12 @@ class YubiKeyOtpModel extends ExternalOtpDeviceModel {
         }
     }
 
+    close(callback) {
+        this.set({
+            active: false
+        });
+    }
+
     static checkToolStatus() {
         if (ykmanStatus === 'ok') {
             return Promise.resolve();

app/scripts/util/formatting/string-format.js

@@ -25,6 +25,10 @@ const StringFormat = {
 
     camelCase(str) {
         return str.replace(this.camelCaseRegex, match => match[1].toUpperCase());
+    },
+
+    pascalCase(str) {
+        return this.capFirst(str.replace(this.camelCaseRegex, match => match[1].toUpperCase()));
     }
 };
 

app/scripts/views/settings/settings-file-external-view.js

@@ -0,0 +1,28 @@
+import { View } from 'framework/views/view';
+import { Events } from 'framework/events';
+import template from 'templates/settings/settings-file-external.hbs';
+
+class SettingsFileExternalView extends View {
+    template = template;
+
+    events = {
+        'click .settings__file-button-settings': 'openDevicesSettings',
+        'click .settings__file-button-close': 'closeFile'
+    };
+
+    render() {
+        super.render({
+            name: this.model.name
+        });
+    }
+
+    openDevicesSettings() {
+        Events.emit('toggle-settings', 'devices');
+    }
+
+    closeFile() {
+        this.appModel.closeFile(this.model);
+    }
+}
+
+export { SettingsFileExternalView };

app/scripts/views/settings/settings-view.js

@@ -32,17 +32,21 @@ class SettingsView extends View {
     }
 
     setPage(e) {
-        const module = require('./settings-' + e.page + '-view');
-        const viewName = StringFormat.capFirst(e.page);
+        let { page, file } = e;
+        if (page === 'file' && file && file.external) {
+            page = 'file-external';
+        }
+        const module = require('./settings-' + page + '-view');
+        const viewName = StringFormat.pascalCase(page);
         const SettingsPageView = module[`Settings${viewName}View`];
         if (this.views.page) {
             this.views.page.remove();
         }
-        this.views.page = new SettingsPageView(e.file, { parent: this.pageEl[0] });
+        this.views.page = new SettingsPageView(file, { parent: this.pageEl[0] });
         this.views.page.appModel = this.model;
         this.views.page.render();
-        this.file = e.file;
-        this.page = e.page;
+        this.file = file;
+        this.page = page;
         this.pageResized();
     }
 

app/templates/settings/settings-file-external.hbs

@@ -0,0 +1,10 @@
+<div class="settings__content">
+    <h1><i class="fa fa-lock settings__head-icon"></i> {{name}}</h1>
+
+    <p>{{res 'setFileYubiKeyIntro'}}</p>
+
+    <div class="settings__file-buttons">
+        <button class="settings__file-button-settings btn-silent">{{res 'setFileYubiKeySettings'}}</button>
+        <button class="settings__file-button-close btn-silent">{{res 'setFileClose'}}</button>
+    </div>
+</div>

test/src/util/formatting/string-format.js

@@ -25,4 +25,8 @@ describe('StringFormat', () => {
     it('should convert kebab case to camel case', () => {
         expect(StringFormat.camelCase('aa-bbb-c')).to.eql('aaBbbC');
     });
+
+    it('should convert kebab case to pascal case', () => {
+        expect(StringFormat.pascalCase('aa-bbb-c')).to.eql('AaBbbC');
+    });
 });