From 18f37ec2a86a5a23a20bed2d8cc14c15c06e7600 Mon Sep 17 00:00:00 2001
From: bgamard <benjamin.gamard@sword-group.com>
Date: Fri, 3 Nov 2017 11:05:04 +0100
Subject: [PATCH] Closes #131: validate only dirty forms

---
 .../docs/controller/document/DocumentEdit.js  |  3 ++
 docs-web/src/main/webapp/src/locale/fr.json   |  2 +-
 .../src/partial/docs/document.edit.html       |  4 +-
 .../src/partial/docs/settings.account.html    | 12 +++---
 .../src/partial/docs/settings.group.edit.html | 14 ++++---
 .../src/partial/docs/settings.user.edit.html  | 38 ++++++++++---------
 .../src/main/webapp/src/partial/docs/tag.html |  4 +-
 docs-web/src/main/webapp/src/style/main.less  |  3 +-
 8 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentEdit.js b/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentEdit.js
index e00eabf5..b667c2bc 100644
--- a/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentEdit.js
+++ b/docs-web/src/main/webapp/src/app/docs/controller/document/DocumentEdit.js
@@ -54,6 +54,9 @@ angular.module('docs').controller('DocumentEdit', function($rootScope, $scope, $
       language: 'fra'
     };
     $scope.newFiles = [];
+    if ($scope.form) {
+      $scope.form.$setPristine();
+    }
   };
 
   /**
diff --git a/docs-web/src/main/webapp/src/locale/fr.json b/docs-web/src/main/webapp/src/locale/fr.json
index c508ff80..0792f629 100644
--- a/docs-web/src/main/webapp/src/locale/fr.json
+++ b/docs-web/src/main/webapp/src/locale/fr.json
@@ -261,7 +261,7 @@
     "account": {
       "password": "Mot de passe",
       "password_confirm": "Mot de passe (confirmation)",
-      "updated": "Compte mis à jout avec succès"
+      "updated": "Compte mis à jour avec succès"
     },
     "config": {
       "title_guest_access": "<small>Accès</small> invité",
diff --git a/docs-web/src/main/webapp/src/partial/docs/document.edit.html b/docs-web/src/main/webapp/src/partial/docs/document.edit.html
index d60a298a..dacd109d 100644
--- a/docs-web/src/main/webapp/src/partial/docs/document.edit.html
+++ b/docs-web/src/main/webapp/src/partial/docs/document.edit.html
@@ -9,7 +9,7 @@
   <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
 
   <form name="documentForm" class="form-horizontal">
-    <div class="pull-right btn-group">
+    <div class="pull-right btn-group" ng-init="form = documentForm">
       <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">
         <span class="glyphicon glyphicon-floppy-disk"></span>
         {{ 'save' | translate }}
@@ -21,7 +21,7 @@
 
     <fieldset>
       <legend>{{ 'document.edit.primary_metadata' | translate }}</legend>
-      <div class="form-group" ng-class="{ 'has-error': !documentForm.title.$valid }">
+      <div class="form-group" ng-class="{ 'has-error': !documentForm.title.$valid && documentForm.$dirty }">
         <label class="col-sm-2 control-label" for="inputTitle">{{ 'document.title' | translate }}</label>
         <div class="col-sm-10">
           <input required ng-maxlength="100" class="form-control" type="text" id="inputTitle"
diff --git a/docs-web/src/main/webapp/src/partial/docs/settings.account.html b/docs-web/src/main/webapp/src/partial/docs/settings.account.html
index 7bf6e704..013892f8 100644
--- a/docs-web/src/main/webapp/src/partial/docs/settings.account.html
+++ b/docs-web/src/main/webapp/src/partial/docs/settings.account.html
@@ -1,19 +1,19 @@
 <h1>User <small>account</small></h1>
 <form class="form-horizontal" name="editUserForm" novalidate>
-  <div class="form-group" ng-class="{ 'has-error': !editUserForm.password.$valid, success: editUserForm.password.$valid }">
+  <div class="form-group" ng-class="{ 'has-error': !editUserForm.password.$valid && editUserForm.$dirty, success: editUserForm.password.$valid }">
     <label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.account.password' | translate }}</label>
     <div class="col-sm-7">
       <input name="password" type="password" id="inputPassword" required class="form-control"
         ng-minlength="8" ng-maxlength="50" placeholder="{{ 'settings.account.password' | translate }}" ng-model="user.password" />
     </div>
     <div class="col-sm-3">
-      <span class="help-block" ng-show="editUserForm.password.$error.required">{{ 'validation.required' | translate }}</span>
-      <span class="help-block" ng-show="editUserForm.password.$error.minlength">{{ 'validation.too_short' | translate }}</span>
-      <span class="help-block" ng-show="editUserForm.password.$error.maxlength">{{ 'validation.too_long' | translate }}</span>
+      <span class="help-block" ng-show="editUserForm.password.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
+      <span class="help-block" ng-show="editUserForm.password.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
+      <span class="help-block" ng-show="editUserForm.password.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
     </div>
   </div>
 
-  <div class="form-group" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid, success: editUserForm.passwordconfirm.$valid }">
+  <div class="form-group" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid && editUserForm.$dirty, success: editUserForm.passwordconfirm.$valid }">
     <label class="col-sm-2 control-label" for="inputPasswordConfirm">{{ 'settings.account.password_confirm' | translate }}</label>
     <div class="col-sm-7">
       <input name="passwordconfirm" type="password" id="inputPasswordConfirm" required class="form-control"
@@ -21,7 +21,7 @@
         placeholder="{{ 'settings.account.password_confirm' | translate }}" ng-model="user.passwordconfirm" />
     </div>
     <div class="col-sm-3">
-      <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator">{{ 'validation.password_confirm' | translate }}</span>
+      <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator && editUserForm.$dirty">{{ 'validation.password_confirm' | translate }}</span>
     </div>
   </div>
 
diff --git a/docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html b/docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html
index 221dbedc..eacf1aa6 100644
--- a/docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html
+++ b/docs-web/src/main/webapp/src/partial/docs/settings.group.edit.html
@@ -5,7 +5,7 @@
   <h2 ng-show="!isEdit()" translate="settings.group.edit.add_group_title"></h2>
 
   <form class="form-horizontal" name="editGroupForm" novalidate>
-    <div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid, success: editGroupForm.name.$valid }">
+    <div class="form-group" ng-class="{ 'has-error': !editGroupForm.name.$valid && editGroupForm.$dirty, success: editGroupForm.name.$valid }">
       <label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.name' | translate }}</label>
       <div class="col-sm-7">
         <input name="name" type="text" id="inputName" required class="form-control"
@@ -13,21 +13,23 @@
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editGroupForm.name.$error.required">{{ 'validation.required' | translate }}</span>
-        <span class="help-block" ng-show="editGroupForm.name.$error.minlength">{{ 'validation.too_short' | translate }}</span>
-        <span class="help-block" ng-show="editGroupForm.name.$error.maxlength">{{ 'validation.too_long' | translate }}</span>
+        <span class="help-block" ng-show="editGroupForm.name.$error.required && editGroupForm.$dirty">{{ 'validation.required' | translate }}</span>
+        <span class="help-block" ng-show="editGroupForm.name.$error.minlength && editGroupForm.$dirty">{{ 'validation.too_short' | translate }}</span>
+        <span class="help-block" ng-show="editGroupForm.name.$error.maxlength && editGroupForm.$dirty">{{ 'validation.too_long' | translate }}</span>
       </div>
     </div>
+
     <div class="form-group">
-      <label class="col-sm-2 control-label" for="inputName">{{ 'settings.group.edit.parent_group' | translate }}</label>
+      <label class="col-sm-2 control-label" for="inputParent">{{ 'settings.group.edit.parent_group' | translate }}</label>
 
       <div class="col-sm-7">
-        <input name="name" type="text" id="inputParent" class="form-control" autocomplete="off"
+        <input name="parent" type="text" id="inputParent" class="form-control" autocomplete="off"
                placeholder="{{ 'settings.group.edit.search_group' | translate }}" ng-model="group.parent"
                typeahead="group for group in getGroupTypeahead($viewValue)"
                typeahead-wait-ms="200" typeahead-editable="false" />
       </div>
     </div>
+
     <div class="form-group">
       <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-primary" ng-click="edit()" ng-disabled="!editGroupForm.$valid">
diff --git a/docs-web/src/main/webapp/src/partial/docs/settings.user.edit.html b/docs-web/src/main/webapp/src/partial/docs/settings.user.edit.html
index 69d98f96..9482004f 100644
--- a/docs-web/src/main/webapp/src/partial/docs/settings.user.edit.html
+++ b/docs-web/src/main/webapp/src/partial/docs/settings.user.edit.html
@@ -5,7 +5,7 @@
   <h2 ng-show="!isEdit()" translate="settings.user.edit.add_user_title"></h2>
 
   <form class="form-horizontal" name="editUserForm" novalidate>
-    <div class="form-group" ng-class="{ 'has-error': !editUserForm.username.$valid, success: editUserForm.username.$valid }">
+    <div class="form-group" ng-class="{ 'has-error': !editUserForm.username.$valid && editUserForm.$dirty, success: editUserForm.username.$valid }">
       <label class="col-sm-2 control-label" for="inputUsername">{{ 'settings.user.edit.username' | translate }}</label>
       <div class="col-sm-7">
         <input name="username" type="text" id="inputUsername" required ng-disabled="isEdit()" class="form-control"
@@ -13,24 +13,24 @@
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editUserForm.username.$error.required">{{ 'validation.required' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.username.$error.minlength">{{ 'validation.too_short' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.username.$error.maxlength">{{ 'validation.too_long' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.username.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.username.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.username.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
       </div>
     </div>
 
-    <div class="form-group" ng-class="{ 'has-error': !editUserForm.email.$valid, success: editUserForm.email.$valid }">
+    <div class="form-group" ng-class="{ 'has-error': !editUserForm.email.$valid && editUserForm.$dirty, success: editUserForm.email.$valid }">
       <label class="col-sm-2 control-label" for="inputEmail">{{ 'settings.user.edit.email' | translate }}</label>
       <div class="col-sm-7">
         <input name="email" type="email" id="inputEmail" required class="form-control"
-               ng-minlength="1" ng-maxlength="100" placeholder="{{ 'settings.user.edit.username' | translate }}" ng-model="user.email"/>
+               ng-minlength="1" ng-maxlength="100" placeholder="{{ 'settings.user.edit.email' | translate }}" ng-model="user.email"/>
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editUserForm.email.$error.required">{{ 'validation.required' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.email.$error.email">{{ 'validation.email' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.email.$error.minlength">{{ 'validation.too_short' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.email.$error.maxlength">{{ 'validation.too_long' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.email.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.email.$error.email && editUserForm.$dirty">{{ 'validation.email' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.email.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.email.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
       </div>
     </div>
 
@@ -44,7 +44,7 @@
       </div>
     </div>
 
-    <div class="form-group" ng-class="{ 'has-error': !editUserForm.storage_quota.$valid, success: editUserForm.storage_quota.$valid }">
+    <div class="form-group" ng-class="{ 'has-error': !editUserForm.storage_quota.$valid && editUserForm.$dirty, success: editUserForm.storage_quota.$valid }">
       <label class="col-sm-2 control-label" for="inputQuota">{{ 'settings.user.edit.storage_quota' | translate }}</label>
       <div class="col-sm-7">
         <div class="input-group">
@@ -55,11 +55,12 @@
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editUserForm.storage_quota.$error.pattern">{{ 'validation.number' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.storage_quota.$error.pattern && editUserForm.$dirty">{{ 'validation.number' | translate }}</span>
       </div>
     </div>
 
-    <div class="form-group" ng-if="user.username != 'guest'" ng-class="{ 'has-error': !editUserForm.password.$valid, success: editUserForm.password.$valid }">
+    <div class="form-group" ng-if="user.username != 'guest'"
+      ng-class="{ 'has-error': !editUserForm.password.$valid && editUserForm.$dirty, success: editUserForm.password.$valid }">
       <label class="col-sm-2 control-label" for="inputPassword">{{ 'settings.user.edit.password' | translate }}</label>
       <div class="col-sm-7">
         <input name="password" type="password" id="inputPassword" ng-required="!isEdit()" class="form-control"
@@ -67,13 +68,14 @@
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editUserForm.password.$error.required">{{ 'validation.required' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.password.$error.minlength">{{ 'validation.too_short' | translate }}</span>
-        <span class="help-block" ng-show="editUserForm.password.$error.maxlength">{{ 'validation.too_long' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.password.$error.required && editUserForm.$dirty">{{ 'validation.required' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.password.$error.minlength && editUserForm.$dirty">{{ 'validation.too_short' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.password.$error.maxlength && editUserForm.$dirty">{{ 'validation.too_long' | translate }}</span>
       </div>
     </div>
 
-    <div class="form-group" ng-if="user.username != 'guest'" ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid, success: editUserForm.passwordconfirm.$valid }">
+    <div class="form-group" ng-if="user.username != 'guest'"
+      ng-class="{ 'has-error': !editUserForm.passwordconfirm.$valid && editUserForm.$dirty, success: editUserForm.passwordconfirm.$valid }">
       <label class="col-sm-2 -label" for="inputPasswordConfirm">{{ 'settings.user.edit.password_confirm' | translate }}</label>
       <div class="col-sm-7">
         <input name="passwordconfirm" type="password" id="inputPasswordConfirm" ng-required="!isEdit()" class="form-control"
@@ -82,7 +84,7 @@
       </div>
 
       <div class="col-sm-3">
-        <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator">{{ 'validation.password_confirm' | translate }}</span>
+        <span class="help-block" ng-show="editUserForm.passwordconfirm.$error.validator && editUserForm.$dirty">{{ 'validation.password_confirm' | translate }}</span>
       </div>
     </div>
 
diff --git a/docs-web/src/main/webapp/src/partial/docs/tag.html b/docs-web/src/main/webapp/src/partial/docs/tag.html
index f6968136..51f95da4 100644
--- a/docs-web/src/main/webapp/src/partial/docs/tag.html
+++ b/docs-web/src/main/webapp/src/partial/docs/tag.html
@@ -2,13 +2,13 @@
   <div class="col-md-4">
     <div class="well">
       <form name="tagForm" novalidate>
-        <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid }">
+        <p class="input-group" ng-class="{ 'has-error': !tagForm.name.$valid && tagForm.$dirty }">
           <span colorpicker class="input-group-addon btn btn-default" data-color="#3a87ad" ng-model="tag.color" ng-style="{ 'background': tag.color }">&nbsp;</span>
           <input type="text" name="name" placeholder="{{ 'tag.new_tag' | translate }}" class="form-control"
             ng-maxlength="36" required ng-model="tag.name" ui-validate="{ space: '!$value || $value.indexOf(\' \') == -1' }">
           <span class="input-group-addon btn btn-primary" ng-disabled="!tagForm.$valid" ng-click="addTag()">{{ 'add' | translate }}</span>
         </p>
-        <span class="help-block" ng-show="tagForm.name.$error.space">{{ 'validation.no_space' | translate }}</span>
+        <span class="help-block" ng-show="tagForm.name.$error.space && tagForm.$dirty">{{ 'validation.no_space' | translate }}</span>
       </form>
 
       <p class="input-group">
diff --git a/docs-web/src/main/webapp/src/style/main.less b/docs-web/src/main/webapp/src/style/main.less
index 4a8c7a7e..93b88f39 100644
--- a/docs-web/src/main/webapp/src/style/main.less
+++ b/docs-web/src/main/webapp/src/style/main.less
@@ -308,5 +308,4 @@ input[readonly].share-link {
   left: 0;
   right: 0;
   z-index: 99999;
-}
-
+}
\ No newline at end of file