feat(bhFormDefaults): form defaults automatically (#542)

This commit adds a new directive `bhFormDefaults` to automatically add attributes to any form element. These attributes are: 1. `autocomplete` 2. `autocapitalize` 3. `autocorrect` The directive turns them off by setting them to "none". If a browser updates in the future to ignore the "none" directive, they can easily be updated. Closes #502.
IMA-WorldHealth · Jun 28, 2016 · 7441018 · 7441018
1 parent 1244ef0
commit 7441018
Show file tree

Hide file tree

Showing 49 changed files with 511 additions and 531 deletions.
diff --git a/client/src/js/directives/bhFormDefaults.js b/client/src/js/directives/bhFormDefaults.js
@@ -0,0 +1,22 @@
+angular.module('bhima.directives')
+.directive('bhFormDefaults', bhFormDefaults);
+
+/**
+ * @class bhFormDefaults
+ *
+ * @description
+ * The bhFormDefaults directive allows us to set custom attributes on any form
+ * in the application and ensure they all behave the same.  It also creates a
+ * single location for changing any of the attributes on the form in the future.
+ */
+function bhFormDefaults() {
+  return {
+    restrict: 'A',
+    require: 'form',
+    link: function bhFormDefaultsLinkFn($scope, $element, $attrs, $controller) {
+      $attrs.$set('autocomplete', 'none');
+      $attrs.$set('autocapitalize', 'none');
+      $attrs.$set('autocorrect', 'none');
+    }
+  };
+}
diff --git a/client/src/partials/accounts/templates/chart-modal.html b/client/src/partials/accounts/templates/chart-modal.html
@@ -3,11 +3,11 @@
     <h3>New Account</h3>
   </div>
   <div class="modal-body">
-    <form role="form" class="form-horizontal" name="accountForm" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+    <form role="form" class="form-horizontal" name="accountForm" bh-form-defaults novalidate>
       <div class="form-group">
         <label class="col-xs-2 control-label" for="coa-accn">Account Number:</label>
         <div class="col-xs-10">
-          <input 
+          <input
             class="form-control"
             placeholder="e.g. 100000"
             type="number"
@@ -38,7 +38,7 @@ <h3>New Account</h3>
             ng-options="a.id as a.type for a in types"
             id="coa-acctype"
             required
-            > 
+            >
           </select>
         </div>
       </div>
@@ -89,7 +89,7 @@ <h3>New Account</h3>
                 value="0"
                 model="account.fixed"
               >
-              Variable 
+              Variable
             </label>
           </div>
         </div>

diff --git a/client/src/partials/billing_services/modal.html b/client/src/partials/billing_services/modal.html
@@ -1,5 +1,5 @@
 <!-- billing service form -->
-<form name="BillingServicesForm" bh-submit="BillingServicesFormCtrl.submit(BillingServicesForm)" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+<form name="BillingServicesForm" bh-submit="BillingServicesFormCtrl.submit(BillingServicesForm)" bh-form-defaults novalidate>
 
   <div class="modal-header">
     <h4>{{ BillingServicesFormCtrl.title | translate }}<span ng-show="BillingServicesFormCtrl.label">: {{ BillingServicesFormCtrl.label }}</span></h4>

diff --git a/client/src/partials/cash/cash.html b/client/src/partials/cash/cash.html
@@ -32,7 +32,7 @@
           </div>
           <div class="panel-body">
 
-            <form name="CashVoucherForm" bh-submit="CashCtrl.submit(CashVoucherForm)" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+            <form name="CashVoucherForm" bh-submit="CashCtrl.submit(CashVoucherForm)" bh-form-defaults novalidate>
 
               <fieldset ng-disabled="CashVoucherForm.$loading">
 

diff --git a/client/src/partials/cash/cashboxes/cashboxes.html b/client/src/partials/cash/cashboxes/cashboxes.html
@@ -60,9 +60,7 @@ <h4>{{ "CASHBOX.TITLE" | translate }}</h4>
             <form
               name="CreateForm"
               bh-submit="CashCtrl.submit(CreateForm)"
-              autocomplete="off"
-              autocapitalize="off"
-              autocorrect="off"
+              bh-form-defaults
               novalidate>
 
               <div class="form-group" ng-class="{ 'has-error' : CreateForm.$submitted && CreateForm.label.$invalid }">
@@ -135,9 +133,7 @@ <h4>{{ "CASHBOX.TITLE" | translate }}</h4>
               <form
                 name="UpdateForm"
                 bh-submit="CashCtrl.submit(UpdateForm)"
-                autocomplete="off"
-                autocapitalize="off"
-                autocorrect="off"
+                bh-form-defaults
                 novalidate>
                 <div class="form-group" ng-class="{ 'has-error' : UpdateForm.$submitted && UpdateForm.label.$invalid }">
                   <label class="control-label">

diff --git a/client/src/partials/cash/cashboxes/modal.html b/client/src/partials/cash/cashboxes/modal.html
@@ -1,4 +1,4 @@
-<form name="CashboxModalForm" bh-submit="CashboxModalCtrl.submit(CashboxModalForm)" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+<form name="CashboxModalForm" bh-submit="CashboxModalCtrl.submit(CashboxModalForm)" bh-form-defaults novalidate>
   <div class="modal-header">
     <h4>{{ "CASHBOX.CONFIG_ACCOUNTS" | translate }} <small>{{ CashboxModalCtrl.cashbox.text }}</small></h4>
   </div>

diff --git a/client/src/partials/cash/modals/transfer.modal.html b/client/src/partials/cash/modals/transfer.modal.html
@@ -1,4 +1,4 @@
-<form name="TransferForm" ng-submit="CashTransferModalCtrl.submit(TransferForm.$invalid)" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+<form name="TransferForm" ng-submit="CashTransferModalCtrl.submit(TransferForm.$invalid)" bh-form-defaults novalidate>
 
   <div class="modal-header">
     <h4>{{ "CASH.VOUCHER.CASHBOXES.TRANSFER" | translate }}</h4>

diff --git a/client/src/partials/debtors/groups.edit.html b/client/src/partials/debtors/groups.edit.html
@@ -1,4 +1,4 @@
-<div class="container-fluid" ng-form="debtorGroup" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+<div class="container-fluid" ng-form="debtorGroup" bh-form-defaults novalidate>
 
   <div class="row">
     <div class="col-xs-12">
@@ -13,7 +13,7 @@
     <div class="col-md-5">
 
       <!-- Debtor group details form elements -->
-      <div autocomplete="off" autocorrect="off" autocapitalize="off">
+      <div>
         <div
           class="form-group has-feedback"
           ng-class="{'has-error' : debtorGroup.name.$invalid && debtorGroup.$submitted}">

diff --git a/client/src/partials/depots/depots.html b/client/src/partials/depots/depots.html
@@ -58,7 +58,7 @@ <h4>{{ "DEPOT.MAIN.TITLE" | translate }}</h4>
         <div ng-switch-when="action">
           <form class="panel panel-primary"
             ng-class="{ 'panel-danger': DepotCtrl.action === 'remove'}"
-            name="ActionForm" ng-submit="DepotCtrl.submit(ActionForm)" autocomplete="off" autocapitalize="off" autocorrect="off" novalidate>
+            name="ActionForm" ng-submit="DepotCtrl.submit(ActionForm)" bh-form-defaults novalidate>
             <div class="panel-heading">
               {{ DepotCtrl.actionTitle | translate }}
             </div>