From b678eff484d30087afe4e8cf4a062b75ef406445 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 30 May 2017 11:31:43 +0200
Subject: [PATCH] wire up user state badges + create user confirmation

---
 .../src/views/users/overview.html             |  2 +-
 .../users/views/users/users.controller.js     | 30 +++++++--
 .../src/views/users/views/users/users.html    | 67 +++++++++++++++----
 3 files changed, 81 insertions(+), 18 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/users/overview.html b/src/Umbraco.Web.UI.Client/src/views/users/overview.html
index 6d18dc7f60..b419b7a660 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/overview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/overview.html
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.Editors.Users.OverviewController as vm" class="clearfix">
 
-    <form name="usersForm" novalidate val-form-manager>
+    <form name="usersOverviewForm" novalidate val-form-manager>
 
         <umb-editor-view footer="false">
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
index 0b00297500..1b1f855929 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UsersController($scope, $timeout, $location, usersResource, localizationService, contentEditingHelper) {
+    function UsersController($scope, $timeout, $location, usersResource, localizationService, contentEditingHelper, usersHelper) {
 
         var vm = this;
         var localizeSaving = localizationService.localize("general_saving");
@@ -133,7 +133,7 @@
             vm.selection = [];
         }
 
-        function goToUser(user, event) {
+        function goToUser(user) {
             $location.path('users/users/user/' + user.id);
         }
 
@@ -228,6 +228,9 @@
             }).then(function (saved) {
 
                 vm.page.createButtonState = "success";
+                vm.newUser = saved;
+                setUsersViewState('createUserSuccess');
+                clearAddUserForm();
 
             }, function (err) {
 
@@ -282,6 +285,7 @@
 
                 vm.userStates = getUserStates(vm.users);
                 formatDates(vm.users);
+                setUserDisplayState(vm.users);
 
                 vm.loading = false;
 
@@ -312,6 +316,12 @@
             return userStates;
         }
 
+        function setUserDisplayState(users) {
+            angular.forEach(users, function(user){
+                user.userDisplayState = usersHelper.getUserStateFromValue(user.userState);
+            });
+        }
+
         function formatDates(users) {
             angular.forEach(users, function (user) {
                 if (user.lastLoginDate) {
@@ -333,21 +343,31 @@
                     return;
                 }
 
-                if (user.state === "disabled") {
+                if(user.userDisplayState.alias === "disabled") {
                     vm.allowDisableUser = false;
                 }
 
-                if (user.state === "active") {
+                if(user.userDisplayState.alias === "active") {
                     vm.allowEnableUser = false;
                 }
 
-                if (user.state === "pending") {
+                if(user.userDisplayState.alias === "invited") {
                     vm.allowEnableUser = false;
                 }
 
             });
         }
 
+        function clearAddUserForm() {
+            // clear form data
+            vm.newUser.name = "";
+            vm.newUser.email = "";
+            vm.newUser.userGroups = [];
+            vm.newUser.message = "";
+            // clear button state
+            vm.page.createButtonState = "init";
+        }
+
 
         init();
 
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 527f72666c..7cb43b3208 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
@@ -163,9 +163,9 @@
                         <umb-badge
                             class="umb-user__badge"
                             size="xs"
-                            ng-if="user.state !== 'active'"
-                            color="{{vm.getUserStateType(user.state)}}">
-                            {{ user.state }}
+                            ng-if="user.userDisplayState.alias !== 'active'"
+                            color="{{user.userDisplayState.color}}">
+                            {{ user.userDisplayState.name }}
                         </umb-badge>
                         <div class="umb-user__avatar">
                             <umb-avatar
@@ -232,9 +232,9 @@
                             <td style="text-transform: capitalize;">
                                 <umb-badge
                                     size="xs"
-                                    ng-if="user.state !== 'active'"
-                                    color="{{vm.getUserStateType(user.state)}}">
-                                    {{ user.state }}
+                                    ng-if="user.userDisplayState.alias !== 'active'"
+                                    color="{{user.userDisplayState.color}}">
+                                    {{ user.userDisplayState.name }}
                                 </umb-badge>
                             </td>
                         </tr>
@@ -259,7 +259,7 @@
 
             <umb-editor-sub-header>
                 <umb-editor-sub-header-content-left>
-                    <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; Take me back</a>
+                    <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; Back to users</a>
                 </umb-editor-sub-header-content-left>
             </umb-editor-sub-header>
 
@@ -317,11 +317,14 @@
                     </umb-control-group>
 
                     <umb-control-group label="Message">
-                        <textarea type="text"
+                        <textarea 
+                            type="text"
                             class="input-block-level"
                             localize="placeholder" 
                             placeholder="@placeholders_entername" 
-                            ng-model="vm.newUser.message"></textarea>
+                            ng-model="vm.newUser.message"
+                            rows="4">
+                        </textarea>
                     </umb-control-group>
 
                     <umb-button
@@ -330,7 +333,8 @@
                         state="vm.page.createButtonState"
                         type="button"
                         action="vm.inviteUser()"
-                        label="Send invite">
+                        label="Send invite"
+                        size="m">
                     </umb-button>
 
                     <umb-button
@@ -339,12 +343,51 @@
                         state="vm.page.createButtonState"
                         type="button"
                         action="vm.createUser()"
-                        label="Create user">
+                        label="Create user"
+                        size="m">
                     </umb-button>
 
                 </ng-form>
-            </div>
 
+            </div>
+        </div>
+
+        <!-- Create user success -->
+        <div ng-if="vm.usersViewState === 'createUserSuccess'">
+            <umb-editor-sub-header>
+                <umb-editor-sub-header-content-left>
+                    <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; Back to users</a>
+                </umb-editor-sub-header-content-left>
+            </umb-editor-sub-header>
+
+            <div class="flex justify-center">
+                <div style="max-width: 500px;" class="tc">
+                    <div class="flex justify-center" style="margin-bottom: 15px;">
+                        <umb-checkmark
+                            checked="vm.usersViewState === 'createUserSuccess'"
+                            size="xl">
+                        </umb-checkmark>
+                    </div>
+                    <h3 class="bold" style="margin-bottom: 0;">{{vm.newUser.name | umbWordLimit:1}} has been created</h3>
+                    <p style="line-height: 1.6em; margin-bottom: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non libero vel turpis ultrices pharetra.</p>
+                    <div>
+                        <umb-button
+                            type="button"
+                            button-style="success"
+                            label="Set permissions for {{ vm.newUser.name | umbWordLimit:1 }}"
+                            action="vm.goToUser(vm.newUser);"
+                            size="m">
+                        </umb-button>
+                        <umb-button
+                            type="button"
+                            button-style="info"
+                            label="Create another user"
+                            action="vm.setUsersViewState('createUser');"
+                            size="m">
+                        </umb-button>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <umb-overlay