Enhance user authentication and management: add unverified user check, update error messages, and improve user interface for better usability

FoodsharingSiegen.Server/Pages/Login.razor.cs

@@ -62,7 +62,7 @@ namespace FoodsharingSiegen.Server.Pages
             if (loginR.Success)
                 NavigationManager.NavigateTo("/", true);
             else
-                LoginErrorMessage = "E-Mail-Adresse oder Passwort ist ungültig.";
+                LoginErrorMessage = loginR.ErrorMessage;
         }
 
         #endregion

FoodsharingSiegen.Server/Pages/Users.razor

@@ -6,111 +6,131 @@
 
 @inherits FoodsharingSiegen.Server.BaseClasses.FsBase
 
-@code {
-
-    private RenderFragment PopupTitleTemplate(PopupTitleContext<User> value)
-    {
-        var header = "Benutzer erstellen";
-        if (value.EditState == DataGridEditState.Edit) header = "Benutzer bearbeiten";
-
-        return builder =>
-        {
-            builder.OpenElement(0, "span");
-            builder.AddContent(1, header);
-            builder.CloseElement();
-        };
-    }
-
-}
-
 <PageTitle>Benutzerverwaltung - @AppSettings.Terms.Title</PageTitle>
 
-<h2>Benutzerverwaltung <span style="font-size: .5em; line-height: 0;">Admin</span></h2>
-
-<div class="my-2">
-    <Button Color="Color.Primary" Disabled="@(SelectedUser == null)" Clicked="async () => await PasswordModal?.Show(SelectedUser!)!"><i class="fa-solid fa-key"></i>&nbsp;setzen</Button>
+<div class="d-flex justify-content-between align-items-center mb-3">
+    <h2>Benutzerverwaltung <span style="font-size: .5em; line-height: 0;">Admin</span></h2>
+    <Button Color="Color.Success" Clicked="CreateNewUser">
+        <Icon Name="IconName.Add" /> Benutzer erstellen
+    </Button>
 </div>
 
-<DataGrid TItem="User"
-          @ref="UserDataGrid"
-          Data="@UserList"
-          CommandMode="DataGridCommandMode.Commands"
-          EditMode="DataGridEditMode.Popup"
-          PopupTitleTemplate="PopupTitleTemplate"
-          RowInserted="RowInserted"
-          RowUpdated="RowUpdated"
-          PageSize="50"
-          @bind-SelectedRow="SelectedUser"
-          RowDoubleClicked="arg => UserDataGrid?.Edit(arg.Item)!"
-          Editable
-          Responsive="true">
-    <DataGridColumns>
-        <DataGridCommandColumn TItem="User" Width="100px" CellClass="@(_ => "px-0 d-flex align-items-center justify-content-center")">
-            <NewCommandTemplate>
-                <Button Size="Size.ExtraSmall" Color="Color.Success" Clicked="@context.Clicked" Class="mr-1" Style="min-width: auto;">
-                    <i class="oi oi-plus"></i>
-                </Button>
-            </NewCommandTemplate>
-            <EditCommandTemplate>
-                <Button Size="Size.ExtraSmall" Color="Color.Secondary" Clicked="@context.Clicked" Class="mr-1" Style="min-width: auto;">
-                    <i class="oi oi-pencil"></i>
-                </Button>
-            </EditCommandTemplate>
-            <DeleteCommandTemplate>
-                <Button Size="Size.ExtraSmall" Color="Color.Danger" Clicked="() => RemoveUserAsync(context.Item)" Class="mr-1" Style="min-width: auto;">
-                    <i class="oi oi-trash"></i>
-                </Button>
-            </DeleteCommandTemplate>
-            <ClearFilterCommandTemplate>
-                <Button Size="Size.ExtraSmall" Color="Color.Danger" Clicked="@context.Clicked" Style="min-width: auto;">
-                    <i class="o"></i> <i class="fas fa-trash"></i>
-                </Button>
-            </ClearFilterCommandTemplate>
-        </DataGridCommandColumn>
-        <DataGridCheckColumn TItem="User" Field="@nameof(User.Verified)" Caption="Verifiziert" Editable="true" Width="100px">
-            <DisplayTemplate>
-                <Check TValue="bool" Checked="context.Verified" Disabled="true" ReadOnly="true"/>
-            </DisplayTemplate>
-        </DataGridCheckColumn>
-        <DataGridColumn TItem="User" Field="@nameof(User.Type)" Caption="Typ" Editable="true" Width="200px">
-            <EditTemplate>
-                <Select TValue="UserType" SelectedValue="@((UserType)context.CellValue)" SelectedValueChanged="@(v => context.CellValue = v)">
-                    @foreach (var enumValue in Enum.GetValues<UserType>())
-                    {
-                        <SelectItem TValue="UserType" Value="enumValue">@enumValue</SelectItem>
-                    }
-                </Select>
-            </EditTemplate>
-        </DataGridColumn>
-        <DataGridColumn TItem="User" Field="@nameof(User.Name)" Caption="Name" Editable="true" Width="250px"></DataGridColumn>
-        <DataGridColumn TItem="User" Field="@nameof(User.Mail)" Caption="E-Mail" Editable="true"></DataGridColumn>
-        <DataGridColumn TItem="User" Field="@nameof(User.GroupsList)" Caption="Gruppen" Editable="true">
-            <EditTemplate>
-                <Autocomplete TItem="UserGroup"
-                              TValue="UserGroup"
-                              Size="Size.ExtraSmall"
-                              Data="@UserGroups"
-                              TextField="@(( item ) => item.ToString())"
-                              ValueField="@(( item ) => item)"
-                              SelectionMode="AutocompleteSelectionMode.Multiple"
-                              SelectedValues="@((List<UserGroup>) context.CellValue)"
-                              SelectedValuesChanged="@(v => { context.CellValue = v.ToList(); })"
-                              @bind-SelectedTexts="SelectedCompanyTexts">
-                </Autocomplete>
-                <small>Verfügbar: @string.Join(", ", Enum.GetValues<UserGroup>())</small>
-            </EditTemplate>
-            <DisplayTemplate>
-                @if (string.IsNullOrWhiteSpace(context.Groups))
-                {
-                    <span style="font-style: italic;">Keine Gruppen</span>
-                }
-                else
-                {
-                    <span>@string.Join(", ", context.GroupsList)</span>
-                }
-            </DisplayTemplate>
-        </DataGridColumn>
-    </DataGridColumns>
-</DataGrid>
+<div class="user-grid" style="max-width: 1000px;">
+    @if (SortedUsers != null)
+    {
+        @foreach (var user in SortedUsers)
+        {
+            <Card Class="user-card">
+                <CardBody>
+                    <CardTitle Size="4">@user.Name</CardTitle>
+                    <CardSubtitle Class="mb-2 text-muted">@user.Mail</CardSubtitle>
+                    <CardText>
+                        Typ: 
+                        @if (user.Type == UserType.Unverified)
+                        {
+                            <span style="color: red" class="fw-bold">@user.Type</span>
+                        }
+                        else if (user.Type == UserType.Admin)
+                        {
+                            <span style="color: blue" class="fw-bold">@user.Type</span>
+                        }
+                        else
+                        {
+                            @user.Type
+                        }
+                    </CardText>
+                    
+                    <div class="mb-3">
+                        @if (user.GroupsList != null && user.GroupsList.Any())
+                        {
+                            @foreach(var group in user.GroupsList)
+                            {
+                                <Badge Color="Color.Primary" Class="me-1" Style="font-size: 0.8em;">@group.ToString()</Badge>
+                            }
+                        }
+                        else
+                        {
+                            <span class="text-muted" style="font-style: italic; font-size: 0.8em;">Keine Gruppen</span>
+                        }
+                    </div>
+                </CardBody>
+                <CardFooter Class="d-flex justify-content-between">
+                    <div>
+                        <Button Color="Color.Primary" Size="Size.Small" Class="me-2" Clicked="() => EditUser(user)"><Icon Name="IconName.Edit" /></Button>
+                        <Button Color="Color.Info" Size="Size.Small" Clicked="() => SetPassword(user)"><i class="fa-solid fa-key"></i></Button>
+                    </div>
+                    <Button Color="Color.Danger" Size="Size.Small" Clicked="() => RemoveUserAsync(user)"><Icon Name="IconName.Delete" /></Button>
+                </CardFooter>
+            </Card>
+        }
+    }
+</div>
+
+<style>
+    .user-grid {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        gap: 1rem;
+    }
+    @@media (min-width: 700px) {
+        .user-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+    @@media (min-width: 1070px) {
+        .user-grid {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+</style>
+
+<Modal @ref="editUserModal">
+    <ModalContent Centered>
+        <ModalHeader>
+            <ModalTitle>@(IsEditing ? "Benutzer bearbeiten" : "Benutzer erstellen")</ModalTitle>
+            <CloseButton />
+        </ModalHeader>
+        <ModalBody>
+            @if (EditModel != null)
+            {
+                <Field>
+                    <FieldLabel>Name</FieldLabel>
+                    <TextEdit @bind-Text="EditModel.Name" />
+                </Field>
+                <Field>
+                    <FieldLabel>E-Mail</FieldLabel>
+                    <TextEdit @bind-Text="EditModel.Mail" />
+                </Field>
+                <Field>
+                    <FieldLabel>Typ</FieldLabel>
+                    <Select TValue="UserType" SelectedValue="EditModel.Type" SelectedValueChanged="@(v => EditModel.Type = v)">
+                        @foreach (var enumValue in Enum.GetValues<UserType>())
+                        {
+                            <SelectItem TValue="UserType" Value="enumValue">@enumValue</SelectItem>
+                        }
+                    </Select>
+                </Field>
+                <Field>
+                    <FieldLabel>Gruppen</FieldLabel>
+                    <Autocomplete TItem="UserGroup"
+                                  TValue="UserGroup"
+                                  Data="@UserGroups"
+                                  TextField="@(( item ) => item.ToString())"
+                                  ValueField="@(( item ) => item)"
+                                  SelectionMode="AutocompleteSelectionMode.Multiple"
+                                  SelectedValues="@EditModel.GroupsList"
+                                  SelectedValuesChanged="@(v => { EditModel.GroupsList = v.ToList(); })"
+                                  @bind-SelectedTexts="SelectedGroupTexts">
+                    </Autocomplete>
+                    <small>Verfügbar: @string.Join(", ", Enum.GetValues<UserGroup>())</small>
+                </Field>
+            }
+        </ModalBody>
+        <ModalFooter>
+            <Button Color="Color.Secondary" Clicked="() => editUserModal?.Hide()">Abbrechen</Button>
+            <Button Color="Color.Primary" Clicked="SaveUser">Speichern</Button>
+        </ModalFooter>
+    </ModalContent>
+</Modal>
 
 <SetPasswordModal @ref="PasswordModal" OnPasswortSet="OnPasswordSet"></SetPasswordModal>

FoodsharingSiegen.Server/Pages/Users.razor.cs

@@ -1,4 +1,4 @@
-using Blazorise.DataGrid;
+using Blazorise;
 using FoodsharingSiegen.Contracts.Entity;
 using FoodsharingSiegen.Contracts.Enums;
 using FoodsharingSiegen.Contracts.Helper;
@@ -32,19 +32,24 @@ namespace FoodsharingSiegen.Server.Pages
         private SetPasswordModal? PasswordModal { get; set; }
 
         /// <summary>
-        ///     Gets or sets the value of the selected company texts (ab)
+        ///     Gets or sets the edit user modal
         /// </summary>
-        private List<string> SelectedCompanyTexts { get; set; } = new();
+        private Modal? editUserModal { get; set; }
 
         /// <summary>
-        ///     Gets or sets the value of the selected user (ab)
+        ///     Gets or sets the selected group texts
         /// </summary>
-        private User? SelectedUser { get; set; }
+        private List<string> SelectedGroupTexts { get; set; } = new();
 
         /// <summary>
-        ///     Gets or sets the value of the user data grid (ab)
+        ///     Gets or sets the edit model
         /// </summary>
-        private DataGrid<User>? UserDataGrid { get; set; }
+        private User? EditModel { get; set; }
+
+        /// <summary>
+        ///     Gets or sets a value indicating whether we are editing an existing user
+        /// </summary>
+        private bool IsEditing { get; set; }
 
         /// <summary>
         ///     Gets the value of the user groups (ab)
@@ -56,6 +61,11 @@ namespace FoodsharingSiegen.Server.Pages
         /// </summary>
         private List<User>? UserList { get; set; }
 
+        /// <summary>
+        ///     Gets the sorted users list
+        /// </summary>
+        private IEnumerable<User> SortedUsers => UserList?.OrderByDescending(x => x.Type).ThenBy(x => x.Name) ?? Enumerable.Empty<User>();
+
         #endregion
 
         #region Override InitializeDataAsync
@@ -84,6 +94,54 @@ namespace FoodsharingSiegen.Server.Pages
 
         #endregion
 
+        #region Actions
+
+        private void CreateNewUser()
+        {
+            EditModel = new User();
+            IsEditing = false;
+            editUserModal?.Show();
+        }
+
+        private void EditUser(User user)
+        {
+            EditModel = user.Clone();
+            IsEditing = true;
+            editUserModal?.Show();
+        }
+
+        private void SetPassword(User user)
+        {
+            PasswordModal?.Show(user);
+        }
+
+        private async Task SaveUser()
+        {
+            if (EditModel == null) return;
+
+            if (IsEditing)
+            {
+                var updateR = await UserService.Update(EditModel);
+                if (!updateR.Success)
+                    await Notification.Error($"Fehler beim Speichern: {updateR.ErrorMessage}")!;
+                else
+                    await Notification.Success("Benutzer aktualisiert");
+            }
+            else
+            {
+                var addUserR = await UserService.AddUserAsync(EditModel);
+                if (!addUserR.Success)
+                    await Notification.Error($"Fehler beim Anlegen: {addUserR.ErrorMessage}")!;
+                else
+                    await Notification.Success("Benutzer erstellt");
+            }
+
+            await editUserModal?.Hide()!;
+            await LoadUsers();
+        }
+
+        #endregion
+
         #region Private Method OnPasswordSet
 
         /// <summary>
@@ -125,39 +183,5 @@ namespace FoodsharingSiegen.Server.Pages
         }
 
         #endregion
-
-        #region Private Method RowInserted
-
-        /// <summary>
-        ///     Rows the inserted using the specified arg (a. beging, 01.04.2022)
-        /// </summary>
-        /// <param name="arg">The arg</param>
-        private async Task RowInserted(SavedRowItem<User, Dictionary<string, object>> arg)
-        {
-            var addUserR = await UserService.AddUserAsync(arg.OldItem);
-            if (!addUserR.Success)
-                await Notification.Error($"Fehler beim Anlegen: {addUserR.ErrorMessage}")!;
-            else
-                await LoadUsers();
-        }
-
-        #endregion
-
-        #region Private Method RowUpdated
-
-        /// <summary>
-        ///     Rows the updated using the specified arg (a. beging, 01.04.2022)
-        /// </summary>
-        /// <param name="arg">The arg</param>
-        private async Task RowUpdated(SavedRowItem<User, Dictionary<string, object>> arg)
-        {
-            if (arg.OldItem?.Id == null || arg.OldItem.Id.Equals(Guid.Empty) || arg.Values?.Any() != true) return;
-
-            var updateR = await UserService.Update(arg.OldItem);
-            if (!updateR.Success)
-                await Notification.Error($"Fehler beim Speichern: {updateR.ErrorMessage}")!;
-        }
-
-        #endregion
     }
 }