From f426e3c50048b349d1a7bb1f2e223ebc216836e2 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Fri, 11 Aug 2017 12:14:10 +0200
Subject: [PATCH] U4-10280 Add markers to required fields in user section

---
 .../components/html/umbcontrolgroup.directive.js       |  7 ++++---
 .../src/views/components/html/umb-control-group.html   |  3 +++
 .../src/views/components/users/change-password.html    |  6 +++---
 src/Umbraco.Web.UI.Client/src/views/users/user.html    |  6 +++---
 .../src/views/users/views/users/users.html             | 10 +++++-----
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbcontrolgroup.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbcontrolgroup.directive.js
index 94ab5537dc..c4382240c0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbcontrolgroup.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/html/umbcontrolgroup.directive.js
@@ -10,8 +10,9 @@ angular.module("umbraco.directives.html")
         label: "@label",
         description: "@",
         hideLabel: "@",
-        alias: "@",
-        labelFor: "@"
+        alias: "@",
+        labelFor: "@",
+        required: "@?"
       },
       require: '?^form',
       transclude: true,
@@ -21,7 +22,7 @@ angular.module("umbraco.directives.html")
       link: function (scope, element, attr, formCtrl) {
 
         scope.formValid = function () {
-          if (formCtrl && scope.labelFor) {
+          if (formCtrl && scope.labelFor) {
             //if a label-for has been set, use that for the validation
             return formCtrl[scope.labelFor].$valid;
           }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
index 06cb444cd5..d1356066c2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-control-group.html
@@ -3,6 +3,9 @@
         <div class="umb-el-wrap">
             <label ng-if="hideLabel!=='true'" class="control-label" for="{{alias}}">
                 <span ng-bind-html="labelstring"></span>
+                <span ng-if="required">
+                    <strong class="umb-control-required">*</strong>
+                </span>
                 <small ng-if="descriptionstring">{{descriptionstring}}</small>
             </label>
             <div class="controls controls-row" ng-transclude></div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
index a4e99546fa..790f2d1df6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/change-password.html
@@ -22,7 +22,7 @@
                 </umb-control-group>
 
                 <!-- we need to show the old pass field when the provider cannot retrieve the password -->
-                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="$parent.showOldPass()">
+                <umb-control-group alias="oldPassword" label="@user_oldPassword" ng-if="$parent.showOldPass()" required="true">
                     <input type="password" name="oldPassword" ng-model="$parent.passwordValues.oldPassword"
                            class="input-block-level umb-textstring textstring"
                            required
@@ -33,7 +33,7 @@
                     <span class="help-inline" val-msg-for="oldPassword" val-toggle-msg="valServerField"></span>
                 </umb-control-group>
 
-                <umb-control-group alias="password" label="@user_newPassword" ng-if="$parent.showNewPass()">
+                <umb-control-group alias="password" label="@user_newPassword" ng-if="$parent.showNewPass()" required="true">
                     <input type="password" name="password" ng-model="$parent.passwordValues.newPassword"
                            class="input-block-level umb-textstring textstring"
                            required
@@ -46,7 +46,7 @@
                     <span class="help-inline" val-msg-for="password" val-toggle-msg="valServerField"></span>
                 </umb-control-group>
 
-                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="$parent.showConfirmPass()">
+                <umb-control-group alias="confirmpassword" label="@user_confirmNewPassword" ng-if="$parent.showConfirmPass()" required="true">
                     <input type="password" name="confirmpassword" ng-model="$parent.confirm"
                            class="input-block-level umb-textstring textstring"                           
                            val-compare="password" 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 94c8360346..a87f6eac76 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -29,7 +29,7 @@
                                 </div>
                                 <div class="umb-box-content block-form">
 
-                                    <umb-control-group label="@general_email">
+                                    <umb-control-group label="@general_email" required="true">
                                         <input 
                                             type="email" 
                                             localize="placeholder" 
@@ -43,7 +43,7 @@
                                         <span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
                                     </umb-control-group>
 
-                                    <umb-control-group label="@general_username" ng-if="!vm.emailIsUsername">
+                                    <umb-control-group label="@general_username" ng-if="!vm.emailIsUsername" required="true">
                                         <input 
                                             type="text" 
                                             localize="placeholder" 
@@ -80,7 +80,7 @@
                                 </div>
                                 <div class="umb-box-content block-form">
 
-                                    <umb-control-group style="margin-bottom: 25px;" label="@general_groups" description="@user_groupsHelp">
+                                    <umb-control-group style="margin-bottom: 25px;" label="@general_groups" description="@user_groupsHelp" required="true">
 
                                         <umb-user-group-preview
                                             ng-repeat="userGroup in vm.user.userGroups"
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index c938329926..54179033ff 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -307,22 +307,22 @@
                     </div>
                 </div>
 
-                <umb-control-group label="@general_name" label-for="name">
+                <umb-control-group label="@general_name" label-for="name" required="true">
                     <input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
                         umb-auto-focus required val-server-field="Name" />
                     <span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                     <span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
                 </umb-control-group>
 
-                <umb-control-group label="@general_email" label-for="email">
+                <umb-control-group label="@general_email" label-for="email" required="true">
                     <input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
                         ng-model="vm.newUser.email" required val-email val-server-field="Email" />
                     <span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                     <span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
                 </umb-control-group>
 
-                <umb-control-group label="@user_usergroup" description="@user_groupsHelp">
-
+                <umb-control-group label="@user_usergroup" description="@user_groupsHelp" required="true">
+                    
                     <umb-user-group-preview
                         ng-repeat="group in vm.newUser.userGroups"
                         icon="group.icon"
@@ -340,7 +340,7 @@
 
                 </umb-control-group>
 
-                <umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message">
+                <umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message" required="true">
                     <textarea
                         name="message"
                         type="text"