plugin search

app/scripts/locales/base.json

@@ -474,6 +474,7 @@
   "setPlInstallUrlTitle": "Add plugin from URL",
   "setPlInstallUrlDesc": "If the plugin is not in the gallery, you can install it manually from URL",
   "setPlOfficial": "Official KeeWeb plugin",
+  "setPlSearch": "Search for plugins",
 
   "setAboutTitle": "About",
   "setAboutBuilt": "This app is built with these awesome tools",

app/scripts/util/signature-verifier.js

@@ -13,11 +13,12 @@ const SignatureVerifier = {
                 }
                 pk = kdbxweb.ByteUtils.base64ToBytes(pk);
                 signature = kdbxweb.ByteUtils.base64ToBytes(signature);
-                crypto.subtle.importKey('spki', pk,
+                const subtle = window.crypto.subtle || window.crypto.webkitSubtle;
+                subtle.importKey('spki', pk,
                     {name: 'RSASSA-PKCS1-v1_5', hash: {name: 'SHA-256'}},
                     false, ['verify']
                 ).then(cryptoKey => {
-                    crypto.subtle.verify({name: 'RSASSA-PKCS1-v1_5'}, cryptoKey,
+                    subtle.verify({name: 'RSASSA-PKCS1-v1_5'}, cryptoKey,
                         kdbxweb.ByteUtils.arrayToBuffer(signature),
                         kdbxweb.ByteUtils.arrayToBuffer(data)
                     ).then(isValid => {

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

@@ -18,9 +18,12 @@ const SettingsPluginsView = Backbone.View.extend({
         'click .settings_plugins-update-btn': 'updateClick',
         'click .settings_plugins-use-locale-btn': 'useLocaleClick',
         'click .settings_plugins-use-theme-btn': 'useThemeClick',
-        'click .settings__plugins-gallery-plugin-install-btn': 'galleryInstallClick'
+        'click .settings__plugins-gallery-plugin-install-btn': 'galleryInstallClick',
+        'input .settings__plugins-gallery-search': 'gallerySearchInput'
     },
 
+    searchStr: null,
+
     initialize() {
         this.listenTo(PluginManager, 'change', this.render.bind(this));
         this.listenTo(Backbone, 'plugin-gallery-load-complete', this.render.bind(this));
@@ -43,8 +46,12 @@ const SettingsPluginsView = Backbone.View.extend({
             lastInstallError: lastInstall.error,
             galleryLoading: PluginGallery.loading,
             galleryLoadError: PluginGallery.loadError,
-            galleryPlugins: this.getGalleryPlugins()
+            galleryPlugins: this.getGalleryPlugins(),
+            searchStr: this.searchStr
         });
+        if (this.searchStr) {
+            this.showFilterResults();
+        }
         return this;
     },
 
@@ -129,6 +136,34 @@ const SettingsPluginsView = Backbone.View.extend({
             .then(() => {
                 installBtn.prop('disabled', true);
             });
+    },
+
+    gallerySearchInput(e) {
+        this.searchStr = e.target.value.toLowerCase();
+        this.showFilterResults();
+    },
+
+    showFilterResults() {
+        const pluginsById = {};
+        for (const plugin of PluginGallery.gallery.plugins) {
+            pluginsById[plugin.manifest.name] = plugin;
+        }
+        for (const pluginEl of $('.settings__plugins-gallery-plugin', this.$el)) {
+            const pluginId = pluginEl.dataset.plugin;
+            const visible = this.pluginMatchesFilter(pluginsById[pluginId]);
+            $(pluginEl).toggle(visible);
+        }
+    },
+
+    pluginMatchesFilter(plugin) {
+        const searchStr = this.searchStr;
+        const manifest = plugin.manifest;
+        return !searchStr ||
+            manifest.name.toLowerCase().indexOf(searchStr) >= 0 ||
+            manifest.description && manifest.description.toLowerCase().indexOf(searchStr) >= 0 ||
+            manifest.locale &&
+                (manifest.locale.name.toLowerCase().indexOf(searchStr) >= 0 ||
+                manifest.locale.title.toLowerCase().indexOf(searchStr) >= 0);
     }
 });
 

app/styles/areas/_settings.scss

@@ -209,6 +209,16 @@
         right: 0;
         bottom: 0;
       }
+      &-country-flag {
+        position: absolute;
+        right: 10px;
+        top: 6px;
+        font-size: 1.5em;
+      }
+    }
+    &-gallery-search {
+      margin-top: $medium-padding-v;
+      width: calc(100% - 74px);
     }
   }
 }

app/styles/base/_variables.scss

@@ -20,7 +20,9 @@ $base-padding-v: .5em;
 $base-padding-h: 1em;
 $mobile-back-button-height: 3em;
 $base-padding: $base-padding-v $base-padding-h;
-$medium-padding: 1em 1.2em;
+$medium-padding-v: 1em;
+$medium-padding-h: 1.2em;
+$medium-padding: $medium-padding-v $medium-padding-h;
 $base-padding-px: 5px 10px;
 $modal-icon-size: 6em;
 $large-padding: 2em;

app/templates/settings/settings-plugins.hbs

@@ -9,7 +9,9 @@
                 <ul class="settings__plugins-plugin-files">
                     {{#if plugin.manifest.resources.js}}<li class="settings__plugins-plugin-file"><i class="fa fa-code"></i> {{res 'setPlJs'}}</li>{{/if}}
                     {{#if plugin.manifest.resources.css}}<li class="settings__plugins-plugin-file"><i class="fa fa-paint-brush"></i> {{res 'setPlCss'}}</li>{{/if}}
-                    {{#if plugin.manifest.resources.loc}}<li class="settings__plugins-plugin-file"><i class="fa fa-language"></i> {{res 'setPlLoc'}}: {{plugin.manifest.locale.title}}</li>{{/if}}
+                    {{#if plugin.manifest.resources.loc}}<li class="settings__plugins-plugin-file"><i class="fa fa-language"></i>&nbsp;
+                        {{res 'setPlLoc'}}: {{plugin.manifest.locale.title}} {{#if plugin.manifest.locale}}{{#if plugin.manifest.locale.flag}}&nbsp;{{plugin.manifest.locale.flag}}{{/if}}{{/if}}</li>
+                    {{/if}}
                 </ul>
             </div>
             <div class="settings__plugins-plugin-desc">
@@ -50,10 +52,16 @@
         <div>{{res 'setPlInstallDesc'}}</div>
         {{#if galleryLoadError}}<div class="error-color">{{res 'setPlGalleryLoadError'}}</div>{{/if}}
         {{#if galleryPlugins}}
+            <input type="text" class="input-base settings__plugins-gallery-search" placeholder="{{res 'setPlSearch'}}" value="{{searchStr}}" />
             <div class="settings__plugins-gallery">
             {{#each galleryPlugins as |plugin|}}
-                <div class="settings__plugins-gallery-plugin">
+                <div class="settings__plugins-gallery-plugin" data-plugin="{{plugin.manifest.name}}">
                     <h4 class="settings__plugins-gallery-plugin-title">{{plugin.manifest.name}}</h4>
+                    {{#if plugin.manifest.locale}}
+                        {{#if plugin.manifest.locale.flag}}
+                            <div class="settings__plugins-gallery-plugin-country-flag">{{plugin.manifest.locale.flag}}</div>
+                        {{/if}}
+                    {{/if}}
                     <div class="settings__plugins-gallery-plugin-desc">{{plugin.manifest.description}}</div>
                     <ul class="settings__plugins-plugin-files">
                         {{#if plugin.manifest.resources.js}}<li class="settings__plugins-plugin-file"><i class="fa fa-code"></i> {{res 'setPlJs'}}</li>{{/if}}