From f8ff24d8bbd5bd8b187635f2efa1f98ea7695cf3 Mon Sep 17 00:00:00 2001
From: maria <krieg.maria@googlemail.com>
Date: Sat, 17 Oct 2015 14:20:04 +0200
Subject: [PATCH] Issue #14: add missing field validation (ipv4 fields)

add validation for IPv4 fields. for now this is done with regex
patterns. we may change to the ip npm package later.
---
 src/index.html         | 124 +++++++++++++++++++++++++++++++----------
 src/index.js           |   5 ++
 src/nls/locale-de.json |   7 ++-
 src/nls/locale-en.json |   7 ++-
 4 files changed, 113 insertions(+), 30 deletions(-)

diff --git a/src/index.html b/src/index.html
index ec5dbf7..8355032 100644
--- a/src/index.html
+++ b/src/index.html
@@ -428,36 +428,67 @@ <h2>
             </div>
           </div>
 
-          <div data-collapse="state.ip.register">
-            <div class="row">
+          <div class="row" data-collapse="state.ip.register">
 
-              <div class="col-md-5">
-                <div class="form-group">
-                  <label for="ipv6Prefix" class="col-md-6 control-label" translate>
-                    .ipv6.label
-                  </label>
-                  <div class="col-md-6">
-                    <input type="text" class="form-control" id="ipv6Prefix"
-                      placeholder="{{'ip.ipv6.placeholder' | translate}}"
-                      data-ng-model="wizard.ip.v6Prefix">
+            <div class="col-md-5">
+              <div class="form-group has-feedback" ng-class="{
+                'has-error': hasError('ipv6Prefix'),
+                'has-success': wizardForm.ipv6Prefix.$valid,
+              }">
+                <label for="ipv6Prefix" class="col-md-6 control-label" translate>
+                  .ipv6.label
+                </label>
+                <div class="col-md-6">
+                  <input type="text" class="form-control" name="ipv6Prefix" id="ipv6Prefix"
+                    placeholder="{{'ip.ipv6.placeholder' | translate}}"
+                    data-ng-model="wizard.ip.v6Prefix"
+                    data-ng-required="!state.ip.register">
+                  <span style="" class="fa form-control-feedback" ng-class="{
+                      'fa-times': hasError('ipv6Prefix'),
+                      'fa-check': wizardForm.ipv6Prefix.$valid
+                    }"></span>
+                  <div class="help-block" ng-show="hasError('ipv6Prefix')">
+                    <div ng-show="wizardForm.ipv6Prefix.$error.required" translate>
+                      .error.required
+                    </div>
                   </div>
                 </div>
               </div>
-
-              <div class="col-md-offset-1 col-md-5">
-                <div data-ng-repeat="(name, device) in state.wifi.devices" class="form-group">
-                  <label for="ipv4Wifi_{{$index}}" class="col-md-6 control-label"
-                    translate translate-values="{name: name}">
-                      .meship.label
-                    </label>
-                  <div class="col-md-6">
-                    <input type="text" class="form-control" id="ipv4Wifi_{{$index}}" data-ng-model="wizard.ip.v4[name]">
+						</div>
+            <div class="col-md-offset-1 col-md-5">
+              <div data-ng-repeat="(name, device) in state.wifi.devices"
+                class="form-group has-feedback" ng-class="{
+                  'has-error': hasError('ipv4Wifi_'+$index),
+                  'has-success': wizardForm['ipv4Wifi_'+$index].$valid
+                }">
+                <label for="ipv4Wifi_{{$index}}" class="col-md-6 control-label"
+                  translate translate-values="{name: name}">
+                    .meship.label
+                </label>
+                <div class="col-md-6">
+                  <input type="text" class="form-control"
+                    name="ipv4Wifi_{{$index}}"
+                    id="ipv4Wifi_{{$index}}" data-ng-model="wizard.ip.v4[name]"
+                    data-ng-required="!state.ip.register"
+                    data-ng-pattern="{{ipPattern}}">
+                    <!-- TODO use ip npm package for validation -->
+                  <span class="fa form-control-feedback" data-ng-class="{
+                    'fa-times': hasError('ipv4Wifi_'+$index),
+                    'fa-check': wizardForm['ipv4Wifi_'+$index].$valid
+                    }"></span>
+                  <div class="help-block" data-ng-show="hasError('ipv4Wifi_'+$index)">
+                    <div data-ng-show="wizardForm['ipv4Wifi_'+$index].$error.required" translate>
+                      .error.required
+                    </div>
+                    <div data-ng-show="wizardForm['ipv4Wifi_'+$index].$error.pattern" translate>
+                      .error.ipPattern
+                    </div>
                   </div>
                 </div>
               </div>
-
             </div>
-          </div>
+
+          </div> <!-- /row -->
 
 
           <div class="row">
@@ -480,14 +511,32 @@ <h2>
             <div class="col-md-offset-1 col-md-5">
               <div data-collapse="state.ip.register || !wizard.ip.meshLan">
                 <!-- TODO: checkbox "Mesh on LAN" -->
-                <div class="form-group">
+                <div class="form-group has-feedback" data-ng-class="{
+                  'has-error': hasError('ipv4Lan'),
+                  'has-success': wizardForm.ipv4Lan.$valid
+                }">
                   <label for="ipv4Lan" class="col-md-6 control-label" translate>
                     .meshViaLAN.lanip.label
                   </label>
                   <div class="col-md-6">
-                    <input type="text" class="form-control" id="ipv4Lan"
+                    <input type="text" class="form-control" name="ipv4Lan" id="ipv4Lan"
                       placeholder="{{'ip.meshViaLAN.lanip.placeholder' | translate}}"
-                      data-ng-model="wizard.ip.v4.lan">
+                      data-ng-model="wizard.ip.v4.lan"
+                      data-ng-required="wizard.ip.meshLan && !state.ip.generate"
+                      data-ng-pattern="{{ipPattern}}">
+                      <!-- TODO use ip npm package for validation -->
+                    <span class="fa form-control-feedback" data-ng-class="{
+                        'fa-times': hasError('ipv4Lan'),
+                        'fa-check': wizardForm.ipv4Lan.$valid
+                        }"></span>
+                    <div class="help-block" data-ng-show="hasError('ipv4Lan')">
+                      <div data-ng-show="wizardForm.ipv4Lan.$error.required" translate>
+                        .error.required
+                      </div>
+                      <div data-ng-show="wizardForm.ipv4Lan.$error.pattern" translate>
+                        .error.ipPattern
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -516,14 +565,33 @@ <h2>
               <div data-collapse="!wizard.ip.distribute">
 
                 <div data-collapse="state.ip.register">
-                  <div class="form-group">
+                <div class="form-group has-feedback" data-ng-class="{
+                  'has-error': hasError('ipv4ClientSubnet'),
+                  'has-success': wizardForm.ipv4ClientSubnet.$valid
+                  }">
                     <label for="ipv4ClientSubnet" class="col-md-6 control-label" translate>
                       .distribute.subnet.label
                     </label>
                     <div class="col-md-6">
-                      <input type="text" class="form-control" id="ipv4ClientSubnet"
+                      <input type="text" class="form-control" name="ipv4ClientSubnet"
+                        id="ipv4ClientSubnet"
                         placeholder="{{'ip.distribute.subnet.placeholder' | translate}}"
-                        data-ng-model="wizard.ip.v4ClientSubnet">
+                        data-ng-model="wizard.ip.v4ClientSubnet"
+                        data-ng-required="wizard.ip.distribute && !state.ip.register"
+                        data-ng-pattern="{{ipPattern + '/(25|26|27|28)'}}">
+                        <!-- TODO use ip npm package for validation -->
+                      <span class="fa form-control-feedback" data-ng-class="{
+                        'fa-times': hasError('ipv4ClientSubnet'),
+                        'fa-check': wizardForm.ipv4ClientSubnet.$valid
+                        }"></span>
+                      <div class="help-block" data-ng-show="hasError('ipv4ClientSubnet')">
+                        <div data-ng-show="wizardForm.ipv4ClientSubnet.$error.required" translate>
+                          .error.required
+                        </div>
+                        <div data-ng-show="wizardForm.ipv4ClientSubnet.$error.pattern" translate>
+                          .distribute.subnet.error.pattern
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/index.js b/src/index.js
index 776c19a..7b34d11 100644
--- a/src/index.js
+++ b/src/index.js
@@ -268,6 +268,11 @@ wizard.controller('WizardCtrl', [
       });
     };
 
+    $scope.ipPattern = '(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' +
+      '\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' +
+      '\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' +
+      '\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)';
+
     $scope.hasError = function(field) {
       var form = $scope.wizardForm;
       return (form.$submitted || form[field].$dirty) && form[field].$invalid;
diff --git a/src/nls/locale-de.json b/src/nls/locale-de.json
index 935b035..9b6f696 100644
--- a/src/nls/locale-de.json
+++ b/src/nls/locale-de.json
@@ -91,11 +91,16 @@
       "label": "Client IP Addressen verteilen",
       "subnet": {
         "label": "Client IPv4 subnet",
-        "placeholder" :""
+        "placeholder" :"",
+        "error.pattern": "Das ist keine gültige Subnet Adresse"
       },
       "expectedClients": {
         "label":"Wieviele Benutzer erwartest du an deinem Freifunkknoten?"
       }
+    },
+    "error": {
+      "required": "Dieses Feld wird benötigt, es sei denn du registrierst die IPs autmomatisch.",
+      "ipPattern": "Das ist keine gültige IP Adresse."
     }
   },
   "advancedWifi": {
diff --git a/src/nls/locale-en.json b/src/nls/locale-en.json
index 271501a..ebac392 100644
--- a/src/nls/locale-en.json
+++ b/src/nls/locale-en.json
@@ -91,11 +91,16 @@
       "label": "Distribute client IP addresses",
       "subnet": {
         "label": "Client IPv4 subnet",
-        "placeholder" :""
+        "placeholder" :"",
+        "error.pattern":"This is not a valid subnet."
       },
       "expectedClients": {
         "label":"Expected number of concurrent clients"
       }
+    },
+    "error": {
+      "required": "This field is required unless you register new IPs automatically.",
+      "ipPattern": "This is not a valid IP adress."
     }
   },
   "advancedWifi": {