key updates

app/assets/javascripts/app/services/directives/accountKeysSection.js

@@ -12,9 +12,14 @@ class AccountKeysSection {
 
     $scope.newKeyData = {};
     $scope.keys = keyManager.keys;
-    
+
     $scope.submitNewKeyForm = function() {
-      keyManager.addKey($scope.newKeyData.name, $scope.newKeyData.key);
+      var key = keyManager.addKey($scope.newKeyData.name, $scope.newKeyData.key);
+      if(!key) {
+        alert("This key name is already in use. Please use a different name.");
+        return;
+      }
+      
       $scope.newKeyData.showForm = false;
     }
   }

app/assets/javascripts/app/services/keyManager.js

@@ -5,12 +5,21 @@ class KeyManager {
   }
 
   addKey(name, key) {
-    this.keys.push({name: name, key: key});
+    var existing = this.keyForName(name);
+    if(existing) {
+      return null;
+    }
+
+    var newKey = {name: name, key: key};
+    this.keys.push(newKey);
     this.persist();
+    return newKey;
   }
 
   keyForName(name) {
-    return _.find(this.keys, {name: name});
+    return _.find(this.keys, function(key){
+      return key.name.toLowerCase() == name.toLowerCase();
+    });
   }
 
   deleteKey(name) {

app/assets/javascripts/app/services/sync/syncManager.js

@@ -64,7 +64,7 @@ class SyncManager {
   }
 
   addStandardFileSyncProvider(url) {
-    var defaultProvider = new SyncProvider({url: url + "/items/sync", primary: this.enabledProviders.length == 0});
+    var defaultProvider = new SyncProvider({url: url + "/items/sync", primary: !this.primarySyncProvider()});
     defaultProvider.keyName = SNKeyName;
     defaultProvider.enabled = this.syncProviders.length == 0;
     this.syncProviders.push(defaultProvider);

app/assets/stylesheets/app/_directives.scss

@@ -228,6 +228,11 @@ Extensions
 
       > .type {
         font-weight: bold;
+        margin-bottom: 2px;
+      }
+
+      > .key {
+        font-style: italic;
       }
 
       > .url {
@@ -235,7 +240,7 @@ Extensions
         text-overflow: ellipsis;
         overflow: hidden;
         // word-wrap: break-word;
-        margin-top: 4px;
+        margin-top: 2px;
       }
 
       .sync-status {

app/assets/templates/frontend/directives/account-keys-section.html.haml

@@ -1,6 +1,6 @@
 .account-keys-section.account-section-content
   .keys
-    .key.white-bg{"ng-repeat" => "key in keys"}
+    .key.white-bg{"ng-repeat" => "key in keys track by key.name"}
       .name {{key.name}}
       .value {{key.key}}
 

app/assets/templates/frontend/directives/account-sync-section.html.haml

@@ -1,6 +1,6 @@
 .providers.account-section-content
   .provider.white-bg{"ng-repeat" => "provider in syncProviders"}
-    .type {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Primary' : 'Secondary')}}
+    .type {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}}
     .key{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
     .url {{provider.url}}
     .options
@@ -13,8 +13,8 @@
         %button{"ng-click" => "saveKey(provider)"} Set
 
       %div{"ng-if" => "!provider.enabled"}
-        %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Enable as Primary sync provider
+        %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main
-        %button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Enable as Secondary sync provider
+        %button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary
       %button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key
       %button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Provider
       .sync-status{"delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}