From 8fa6ff48cf844c097ab803fc02b9303b6c8406fc Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 21 Sep 2017 13:53:54 -0400
Subject: [PATCH] touch-ups on custom field layout

---
 src/app/vault/vaultEditLoginController.js |   4 +
 src/app/vault/views/vaultEditLogin.html   | 106 ++++++++++++----------
 2 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/src/app/vault/vaultEditLoginController.js b/src/app/vault/vaultEditLoginController.js
index 741b438126..01b96856b4 100644
--- a/src/app/vault/vaultEditLoginController.js
+++ b/src/app/vault/vaultEditLoginController.js
@@ -69,6 +69,10 @@
             }
         }
 
+        $scope.toggleFavorite = function () {
+            $scope.login.favorite = !$scope.login.favorite;
+        }
+
         $scope.clipboardSuccess = function (e) {
             e.clearSelection();
             selectPassword(e);
diff --git a/src/app/vault/views/vaultEditLogin.html b/src/app/vault/views/vaultEditLogin.html
index bfcb6ff239..2f8a1474d8 100644
--- a/src/app/vault/views/vaultEditLogin.html
+++ b/src/app/vault/views/vaultEditLogin.html
@@ -112,57 +112,63 @@
             <textarea id="notes" name="Notes" class="form-control" ng-model="login.notes"
                       ng-readonly="readOnly" api-field></textarea>
         </div>
-        <h4>
-            <i class="fa fa-list-ul"></i> Custom Fields
-            <a class="btn btn-link" href="#" ng-click="addField()">
-                <i class="fa fa-lg fa-plus-circle"></i> Add
-            </a>
-        </h4>
-        <div class="row" ng-repeat="field in login.fields">
-            <div class="col-sm-3">
-                <div class="form-group">
-                    <label for="field_name{{$index}}">Name</label>
-                    <input type="text" id="field_name{{$index}}" name="Field.Name{{$index}}" class="form-control" ng-model="field.name" />
-                </div>
-            </div>
-            <div class="col-sm-3">
-                <div class="form-group">
-                    <label for="field_type{{$index}}">Type</label>
-                    <select id="field_type{{$index}}" name="Field.Type{{$index}}" class="form-control" ng-model="field.type">
-                        <option value="0">Text</option>
-                        <option value="1">Hidden</option>
-                        <option value="2">Boolean</option>
-                    </select>
-                </div>
-            </div>
-            <div class="col-sm-5">
-                <div class="form-group">
-                    <div class="pull-right password-options" ng-if="field.type === '1'">
-                        <i class="fa fa-lg fa-eye" uib-tooltip="Toggle Visibility" tooltip-placement="left"
-                           password-viewer="#field_value{{$index}}"></i>
-                    </div>
-                    <label for="field_value{{$index}}">Value</label>
-                    <input ng-attr-type="{{field.type === '0' ? 'text' : 'password'}}" id="field_value{{$index}}"
-                           name="Field.Value{{$index}}" class="form-control" ng-model="field.value" ng-if="field.type !== '2'" />
-                    <div ng-if="field.type === '2'">
-                        <input type="checkbox" id="field_value{{$index}}" name="Field.Value{{$index}}" ng-model="field.value"
-                               data-ng-true-value="'true'" />
+        <hr />
+        <h4><i class="fa fa-list-ul"></i> Custom Fields</h4>
+        <div ng-repeat="field in login.fields">
+            <div class="row">
+                <div class="col-sm-3">
+                    <div class="form-group">
+                        <label for="field_name{{$index}}">Name</label>
+                        <input type="text" id="field_name{{$index}}" name="Field.Name{{$index}}" class="form-control" ng-model="field.name" />
                     </div>
                 </div>
+                <div class="col-sm-3">
+                    <div class="form-group">
+                        <label for="field_type{{$index}}">Type</label>
+                        <select id="field_type{{$index}}" name="Field.Type{{$index}}" class="form-control" ng-model="field.type">
+                            <option value="0">Text</option>
+                            <option value="1">Hidden</option>
+                            <option value="2">Boolean</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-sm-5">
+                    <div class="form-group">
+                        <div class="pull-right password-options" ng-if="field.type === '1'">
+                            <i class="fa fa-lg fa-eye" uib-tooltip="Toggle Visibility" tooltip-placement="left"
+                               password-viewer="#field_value{{$index}}"></i>
+                        </div>
+                        <label for="field_value{{$index}}">Value</label>
+                        <div class="input-group" ng-if="field.type !== '2'">
+                            <input ng-attr-type="{{field.type === '0' ? 'text' : 'password'}}" id="field_value{{$index}}"
+                                   name="Field.Value{{$index}}" class="form-control" ng-model="field.value" />
+                            <span class="input-group-btn" uib-tooltip="Copy Value" tooltip-placement="left">
+                                <button class="btn btn-default btn-flat" type="button" ngclipboard
+                                        ngclipboard-success="clipboardSuccess(e)" ngclipboard-error="clipboardError(e, true)"
+                                        data-clipboard-text="{{field.value}}">
+                                    <i class="fa fa-clipboard"></i>
+                                </button>
+                            </span>
+                        </div>
+                        <div ng-if="field.type === '2'">
+                            <input type="checkbox" id="field_value{{$index}}" name="Field.Value{{$index}}" ng-model="field.value"
+                                   data-ng-true-value="'true'" />
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-1">
+                    <br class="hidden-xs" />
+                    <a href="#" ng-click="removeField(field)">
+                        <i class="fa fa-remove"></i>
+                        <span class="visible-xs-inline">Remove Custom Field</span>
+                    </a>
+                </div>
             </div>
-            <div class="col-md-1">
-                <a href="#" ng-click="removeField(field)">
-                    <i class="fa fa-remove fa-lg"></i>
-                    <span class="sr-only">Remove</span>
-                </a>
-            </div>
-        </div>
-        <div class="checkbox" ng-if="!hideFavorite">
-            <label>
-                <input type="checkbox" ng-model="login.favorite" name="Favorite" />
-                Favorite
-            </label>
+            <hr class="visible-xs-block" />
         </div>
+        <a href="#" ng-click="addField()">
+            <i class="fa fa-plus-circle"></i> New Custom Field
+        </a>
     </div>
     <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-flat" ng-disabled="editLoginForm.$loading">
@@ -171,6 +177,12 @@
         <button type="button" class="btn btn-default btn-flat" ng-click="close()">Close</button>
         <button type="button" class="btn btn-link pull-right" ng-click="delete()" uib-tooltip="Delete" ng-disabled="readOnly">
             <i class="fa fa-trash fa-lg"></i>
+            <span class="sr-only">Delete</span>
+        </button>
+        <button type="button" ng-if="!hideFavorite" class="btn btn-link pull-right" ng-click="toggleFavorite()"
+                uib-tooltip="Toggle Favorite">
+            <i class="fa fa-lg" ng-class="login.favorite ? 'fa-star' : 'fa-star-o'"></i>
+            <span class="sr-only">Toggle Favorite</span>
         </button>
     </div>
 </form>