Merge pull request #12137 from abpframework/EngincanV/issue-11839

Some enhancements for MVC UI

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/CreateModal.cshtml

@@ -7,6 +7,7 @@
 @using Volo.Abp.Localization
 @using Volo.Abp.ObjectExtending
 @using Volo.Abp.Data
+@using Volo.Abp.Identity
 @model CreateModalModel
 @inject IHtmlLocalizer<IdentityResource> L
 @inject IStringLocalizerFactory StringLocalizerFactory
@@ -25,7 +26,14 @@
                         <abp-input asp-for="UserInfo.UserName" />
                         <abp-input asp-for="UserInfo.Name" />
                         <abp-input asp-for="UserInfo.Surname" />
-                        <abp-input asp-for="UserInfo.Password" />
+                        <div class="mb-3">
+                            <label asp-for="UserInfo.Password" class="form-label">@L["Password"] *</label>
+                            <div class="input-group">
+                                <input type="password" class="form-control" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="UserInfo.Password" />
+                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                            </div>
+                            <span asp-validation-for="UserInfo.Password"></span>
+                        </div>
                         <abp-input asp-for="UserInfo.Email" />
                         <abp-input asp-for="UserInfo.PhoneNumber" />
                         <abp-input asp-for="UserInfo.IsActive" />

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml

@@ -7,6 +7,7 @@
 @using Volo.Abp.Localization
 @using Volo.Abp.ObjectExtending
 @using Volo.Abp.Data
+@using Volo.Abp.Identity
 @model EditModalModel
 @inject IHtmlLocalizer<IdentityResource> L
 @inject IStringLocalizerFactory StringLocalizerFactory
@@ -25,7 +26,16 @@
                         <abp-input asp-for="UserInfo.UserName" />
                         <abp-input asp-for="UserInfo.Name" />
                         <abp-input asp-for="UserInfo.Surname" />
-                        <abp-input asp-for="UserInfo.Password" />
+                        <div class="mb-3">
+                            <label asp-for="UserInfo.Password" class="form-label">@L["Password"]</label>
+                            <div class="input-group">
+                                <input type="password" class="form-control" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="UserInfo.Password"/>
+                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton">
+                                    <i class="fa fa-eye-slash" aria-hidden="true"></i>
+                                </button>
+                            </div>
+                            <span asp-validation-for="UserInfo.Password"></span>
+                        </div>
                         <abp-input asp-for="UserInfo.Email" />
                         <abp-input asp-for="UserInfo.PhoneNumber" />
                         <abp-input asp-for="UserInfo.IsActive" />

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/Index.cshtml

@@ -19,6 +19,7 @@
 @section styles {
     <abp-style-bundle name="@typeof(IndexModel).FullName">
         <abp-style src="/Pages/AbpPermissionManagement/permission-management-modal.css" />
+        <abp-style src="/Pages/identity/users/index.css"/>
     </abp-style-bundle>
 }
 @section scripts {

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/index.css

@@ -0,0 +1,7 @@
+/* 
+    By default Microsoft Edge, adds password reveal button inside the password input.
+    https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
+ */
+::-ms-reveal {
+    display: none;
+}

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/index.js

@@ -2,12 +2,51 @@
     var l = abp.localization.getResource('AbpIdentity');
 
     var _identityUserAppService = volo.abp.identity.identityUser;
-    var _editModal = new abp.ModalManager(
-        abp.appPath + 'Identity/Users/EditModal'
-    );
-    var _createModal = new abp.ModalManager(
-        abp.appPath + 'Identity/Users/CreateModal'
-    );
+
+    var togglePasswordVisibility = function () {
+        $("#PasswordVisibilityButton").click(function (e) {
+            var button = $(this);
+            var passwordInput = button.parent().find("input");
+            if(!passwordInput) {
+                return;
+            }
+
+            if(passwordInput.attr("type") === "password") {
+                passwordInput.attr("type", "text");
+            }
+            else {
+                passwordInput.attr("type", "password");
+            }
+
+            var icon = button.find("i");
+            if(icon) {
+                icon.toggleClass("fa-eye-slash").toggleClass("fa-eye");
+            }
+        });
+    }
+    
+    abp.modals.createUser = function () {
+        var initModal = function (publicApi, args) {
+            togglePasswordVisibility();
+        };
+        return { initModal: initModal };
+    }
+    
+    abp.modals.editUser = function () {
+        var initModal = function (publicApi, args) {
+            togglePasswordVisibility();
+        };
+        return { initModal: initModal };
+    }
+    
+    var _editModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Users/EditModal',
+        modalClass: "editUser"
+    });
+    var _createModal = new abp.ModalManager({
+        viewUrl: abp.appPath + 'Identity/Users/CreateModal',
+        modalClass: "createUser"
+    });
     var _permissionsModal = new abp.ModalManager(
         abp.appPath + 'AbpPermissionManagement/PermissionManagementModal'
     );
@@ -44,9 +83,9 @@
                     },
                     {
                         text: l('Delete'),
-                        visible: abp.auth.isGranted(
-                            'AbpIdentity.Users.Delete'
-                        ),
+                        visible: function(data) {
+                            return abp.auth.isGranted('AbpIdentity.Users.Delete') && abp.currentUser.id !== data.id;
+                        },
                         confirmMessage: function (data) {
                             return l(
                                 'UserDeletionConfirmationMessage',

modules/permission-management/src/Volo.Abp.PermissionManagement.Domain.Shared/Volo/Abp/PermissionManagement/Localization/Domain/en.json

@@ -5,6 +5,7 @@
     "OnlyProviderPermissons": "Only this provider",
     "All": "All",
     "SelectAllInAllTabs": "Grant all permissions",
-    "SelectAllInThisTab": "Select all"
+    "SelectAllInThisTab": "Select all",
+    "RemoveAllPermissionsWarningMessage": "Are you sure you want to remove all permissions?"
   }
 }

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/PermissionManagementModal.cshtml

@@ -9,7 +9,7 @@
     Layout = null;
 }
 
-<form method="post" asp-page="/AbpPermissionManagement/PermissionManagementModal" data-script-class="abp.modals.PermissionManagement">
+<form method="post" asp-page="/AbpPermissionManagement/PermissionManagementModal" data-script-class="abp.modals.PermissionManagement" id="PermissionManagementForm">
     <abp-modal size="Large">
         <abp-modal-header title="@(L["Permissions"].Value) - @Model.EntityDisplayName"></abp-modal-header>
         <abp-modal-body class="custom-scroll-container">

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js

@@ -3,6 +3,8 @@ var abp = abp || {};
     abp.modals = abp.modals || {};
 
     abp.modals.PermissionManagement = function () {
+        var l = abp.localization.getResource("AbpPermissionManagement");
+        
         function checkParents($tab, $checkBox) {
             var parentName = $checkBox
                 .closest('.custom-checkbox')
@@ -255,6 +257,27 @@ var abp = abp || {};
 
             initSelectAllInThisTab();
             setSelectAllInAllTabs();
+
+            var $form = $("#PermissionManagementForm");
+            var $submitButton = $form.find("button[type='submit']");
+            if($submitButton) {
+                $submitButton.click(function (e) {
+                    e.preventDefault();
+                    
+                    if(!$form.find("input:checked").length > 0) {
+                        abp.message.confirm(l("RemoveAllPermissionsWarningMessage"))
+                            .then(function (confirmed) {
+                                if(confirmed) {
+                                    $form.submit();
+                                }
+                            });
+                    }
+                    else {
+                        $form.submit();
+                    }
+                });
+            }
+            
         };
     };
 })(jQuery);

modules/setting-management/src/Volo.Abp.SettingManagement.Web/AbpSettingManagementWebModule.cs

@@ -2,6 +2,7 @@
 using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared;
+using Volo.Abp.AutoMapper;
 using Volo.Abp.Http.ProxyScripting.Generators.JQuery;
 using Volo.Abp.Modularity;
 using Volo.Abp.SettingManagement.Web.Navigation;
@@ -14,6 +15,7 @@ namespace Volo.Abp.SettingManagement.Web;
 
 [DependsOn(
     typeof(AbpSettingManagementApplicationContractsModule),
+    typeof(AbpAutoMapperModule),
     typeof(AbpAspNetCoreMvcUiThemeSharedModule),
     typeof(AbpSettingManagementDomainSharedModule)
     )]
@@ -58,5 +60,11 @@ public class AbpSettingManagementWebModule : AbpModule
         {
             options.DisableModule(SettingManagementRemoteServiceConsts.ModuleName);
         });
+        
+        context.Services.AddAutoMapperObjectMapper<AbpSettingManagementWebModule>();
+        Configure<AbpAutoMapperOptions>(options =>
+        {
+            options.AddProfile<SettingManagementWebAutoMapperProfile>(validate: true);
+        });
     }
 }

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.cshtml

@@ -1,14 +1,14 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.Abp.SettingManagement.Localization
 @inject IHtmlLocalizer<AbpSettingManagementResource> L
-@model Volo.Abp.SettingManagement.EmailSettingsDto
+@model Volo.Abp.SettingManagement.UpdateEmailSettingsDto
 
-<form id="EmailSettingsForm">
+<form id="EmailSettingsForm" method="post">
     <abp-row>
         <abp-column size-md="_12">
             <div>
-                <abp-input asp-for="DefaultFromDisplayName" label="@L["DefaultFromDisplayName"].Value" />
-                <abp-input asp-for="DefaultFromAddress" label="@L["DefaultFromAddress"].Value" />
+                <abp-input asp-for="DefaultFromDisplayName" label="@(L["DefaultFromDisplayName"].Value + " * ")" />
+                <abp-input asp-for="DefaultFromAddress" label="@(L["DefaultFromAddress"].Value + " * ")" />
                 <abp-input asp-for="SmtpHost" label="@L["SmtpHost"].Value" />
                 <abp-input asp-for="SmtpPort" label="@L["SmtpPort"].Value" />
                 <abp-input asp-for="SmtpEnableSsl" label="@L["SmtpEnableSsl"].Value" />

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/Default.js

@@ -6,8 +6,12 @@
 
         $("#EmailSettingsForm").on('submit', function (event) {
             event.preventDefault();
+            
+            if(!$(this).valid()) {
+                return;
+            }
+            
             var form = $(this).serializeFormToObject();
-
             volo.abp.settingManagement.emailSettings.update(form).then(function (result) {
                 $(document).trigger("AbpSettingSaved");
             });

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Pages/SettingManagement/Components/EmailSettingGroup/EmailSettingGroupViewComponent.cs

@@ -16,8 +16,8 @@ public class EmailSettingGroupViewComponent : AbpViewComponent
 
     public virtual async Task<IViewComponentResult> InvokeAsync()
     {
-        var model = await EmailSettingsAppService.GetAsync();
-
+        var emailSettings = await EmailSettingsAppService.GetAsync();
+        var model = ObjectMapper.Map<EmailSettingsDto, UpdateEmailSettingsDto>(emailSettings);
         return View("~/Pages/SettingManagement/Components/EmailSettingGroup/Default.cshtml", model);
     }
 }

modules/setting-management/src/Volo.Abp.SettingManagement.Web/SettingManagementWebAutoMapperProfile.cs

@@ -0,0 +1,11 @@
+using AutoMapper;
+
+namespace Volo.Abp.SettingManagement.Web;
+
+public class SettingManagementWebAutoMapperProfile : Profile
+{
+    public SettingManagementWebAutoMapperProfile()
+    {
+        CreateMap<EmailSettingsDto, UpdateEmailSettingsDto>();
+    }
+}

modules/setting-management/src/Volo.Abp.SettingManagement.Web/Volo.Abp.SettingManagement.Web.csproj

@@ -15,6 +15,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <ProjectReference Include="..\..\..\..\framework\src\Volo.Abp.AutoMapper\Volo.Abp.AutoMapper.csproj" />
     <ProjectReference Include="..\..\..\..\framework\src\Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared\Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.csproj" />
     <ProjectReference Include="..\..\..\..\framework\src\Volo.Abp.Localization\Volo.Abp.Localization.csproj" />
     <ProjectReference Include="..\Volo.Abp.SettingManagement.Domain.Shared\Volo.Abp.SettingManagement.Domain.Shared.csproj" />