Nell/eShopOnWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shady nagy/blazor enhance (#429)

Browse Source 
* - Using cdnjs not nuget on bootstrap and signalr.
- Bootstrap modal used for add, edit details and delete.

* EditForm inside modal-content

* Top close button action added

* Removed unused using.

* DeleteCookies moved inside AuthService

* ApplicationCore removed from BlazorAdmin dependencies

* SecureHttpClient removed

* Logout from identity manager added

* last thing to do in logout from admin is LogoutIdentityManager.

* JSRuntime used in AuthService without pass to the functions

* Link fixed when logout from MVC
This commit is contained in:
Shady Nagy
2020-07-25 22:39:21 +02:00
committed by GitHub
parent f582182698
commit 4e886183ce
26 changed files with 524 additions and 508 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/BlazorAdmin/BlazorAdmin.csproj
View File

@@ -18,7 +18,6 @@
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\ApplicationCore\ApplicationCore.csproj" />
<ProjectReference Include="..\Shared\Shared.csproj" />
</ItemGroup>

5
src/BlazorAdmin/Constants.cs
View File

@@ -3,5 +3,10 @@
public class Constants
{
public const string API_URL = "https://localhost:5099/api/";
public static class Roles
{
public const string ADMINISTRATORS = "Administrators";
}
}
}

5
src/BlazorAdmin/CustomAuthStateProvider.cs
View File

@@ -1,13 +1,8 @@
using System;
using System.Net.Http;
using System.Net.Http.Json;
using BlazorAdmin.Services;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.eShopWeb;
using Microsoft.Extensions.Logging;
using Shared.Authorization;

37
src/BlazorAdmin/Network/SecureHttpClient.cs
View File

@@ -1,37 +0,0 @@
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using System.Collections.Generic;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
using BlazorAdmin.Services.CatalogBrandService;
namespace BlazorAdmin.Network
{
public class SecureHttpClient
{
private readonly HttpClient client;
public SecureHttpClient(HttpClient client)
{
this.client = client;
this.client.DefaultRequestHeaders.Add("Authorization", $"Bearer ");
}
public async Task<List<CatalogBrand>> GetCatalogBrandsAsync()
{
var brands = new List<CatalogBrand>();
try
{
brands = (await client.GetFromJsonAsync<CatalogBrandResult>($"{Constants.API_URL}catalog-brands")).CatalogBrands;
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
return brands;
}
}
}

178
src/BlazorAdmin/Pages/CatalogItemPage/Create.razor
View File

@@ -5,82 +5,102 @@
@namespace BlazorAdmin.Pages.CatalogItemPage
<h2 class="esh-body-title">Create</h2>
<div>
<EditForm Model="_item" OnValidSubmit="@CreateClick">
<DataAnnotationsValidator />
<div class="form-group">
<label class="control-label col-md-2">Name</label>
<div class="col-md-3">
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Description</label>
<div class="col-md-3">
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Brand</label>
<div class="col-md-3">
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<EditForm Model="_item" OnValidSubmit="@CreateClick">
<DataAnnotationsValidator />
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@if (_item == null)
{
<option value="@brand.Id">@brand.Name</option>
<Spinner></Spinner>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Type</label>
<div class="col-md-3">
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
else
{
<option value="@type.Id">@type.Name</option>
<div class="form-group">
<label class="control-label col-md-2">Name</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Description</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Brand</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
{
<option value="@brand.Id">@brand.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Type</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
{
<option value="@type.Id">@type.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Price</label>
<div class="col-md-12">
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Picture name</label>
<div class="col-md-12 esh-form-information">
Uploading images not allowed for this version.
</div>
</div>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Cancel</button>
<button type="submit" class="btn btn-primary">
Create
</button>
</div>
</EditForm>
</div>
<div class="form-group">
<label class="control-label col-md-2">Price</label>
<div class="col-md-3">
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Picture name</label>
<div class="col-md-4 esh-form-information">
Uploading images not allowed for this version.
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-3 text-right esh-button-actions">
<a href="" @onclick="@(() => OnCloseClick.InvokeAsync(null))" @onclick:preventDefault class="btn btn-secondary">
Cancel
</a>
<button type="submit" class="btn esh-button btn-primary">
Create
</button>
</div>
</div>
</EditForm>
</div>
</div>
@if (_showCreateModal)
{
<div class="modal-backdrop fade show"></div>
}
@code {
[Parameter]
@@ -91,21 +111,35 @@
[Parameter]
public EventCallback<string> OnCloseClick { get; set; }
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showCreateModal = false;
private readonly CreateCatalogItemRequest _item = new CreateCatalogItemRequest();
protected override async Task OnAfterRenderAsync(bool firstRender)
private async Task CreateClick()
{
await new BlazorAdmin.Services.CatalogItemService.Create(Auth).HandleAsync(_item);
await OnCloseClick.InvokeAsync(null);
Close();
}
public void Open()
{
Logger.LogInformation("Now loading... /Catalog/Create");
_item.CatalogTypeId = Types.First().Id;
_item.CatalogBrandId = Brands.First().Id;
await base.OnAfterRenderAsync(firstRender);
_modalDisplay = "block;";
_modalClass = "Show";
_showCreateModal = true;
}
private async Task CreateClick()
public void Close()
{
await new BlazorAdmin.Services.CatalogItemService.Create(Auth).HandleAsync(_item);
await OnCloseClick.InvokeAsync(null);
_modalDisplay = "none";
_modalClass = "";
_showCreateModal = false;
OnCloseClick.InvokeAsync(null);
}
}

153
src/BlazorAdmin/Pages/CatalogItemPage/Delete.razor
View File

@@ -5,66 +5,89 @@
@namespace BlazorAdmin.Pages.CatalogItemPage
<div class="container">
<div class="row">
<img class="col-md-6 esh-picture" src="@($"https://localhost:44315/{_item.PictureUri}")">
<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete @_item.Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@if (_item == null)
{
<Spinner></Spinner>
}
else
{
<div class="container">
<div class="row">
<img class="col-md-6 esh-picture" src="@($"https://localhost:44315/{_item.PictureUri}")">
<dl class="col-md-6 dl-horizontal">
<dt>
Name
</dt>
<dl class="col-md-6 dl-horizontal">
<dt>
Name
</dt>
<dd>
@_item.Name
</dd>
<dd>
@_item.Name
</dd>
<dt>
Description
</dt>
<dt>
Description
</dt>
<dd>
@_item.Description
</dd>
<dd>
@_item.Description
</dd>
<dt>
Brand
</dt>
<dt>
Brand
</dt>
<dd>
@Services.CatalogBrandService.List.GetBrandName(Brands, _item.CatalogBrandId)
</dd>
<dd>
@Services.CatalogBrandService.List.GetBrandName(Brands, _item.CatalogBrandId)
</dd>
<dt>
Type
</dt>
<dt>
Type
</dt>
<dd>
@Services.CatalogTypeService.List.GetTypeName(Types, _item.CatalogTypeId)
</dd>
<dt>
Price
</dt>
<dd>
@Services.CatalogTypeService.List.GetTypeName(Types, _item.CatalogTypeId)
</dd>
<dt>
Price
</dt>
<dd>
@_item.Price
</dd>
</dl>
<dd>
@_item.Price
</dd>
</dl>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Cancel</button>
<button class="btn btn-danger" @onclick="() => DeleteClick(_item.Id)">
Delete
</button>
</div>
</div>
<div class="form-actions no-color">
<a href="" @onclick="@(() => OnCloseClick.InvokeAsync(null))" @onclick:preventDefault class="btn btn-secondary">
Cancel
</a>
<button class="btn btn-danger" @onclick="DeleteClick">
Delete
</button>
</div>
</div>
</div>
@if (_showDeleteModal)
{
<div class="modal-backdrop fade show"></div>
}
@code {
[Parameter]
public int Id { get; set; }
[Parameter]
public IEnumerable<CatalogBrand> Brands { get; set; }
[Parameter]
@@ -73,23 +96,37 @@
[Parameter]
public EventCallback<string> OnCloseClick { get; set; }
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showDeleteModal = false;
private CatalogItem _item = new CatalogItem();
protected override async Task OnInitializedAsync()
{
Logger.LogInformation("Now loading... /Catalog/Delete/{Id}", Id);
_item = await new GetById(Auth).HandleAsync(Id);
await base.OnInitializedAsync();
}
private async Task DeleteClick()
private async Task DeleteClick(int id)
{
// TODO: Add some kind of "are you sure" check before this
await new BlazorAdmin.Services.CatalogItemService.Delete(Auth).HandleAsync(Id);
await new BlazorAdmin.Services.CatalogItemService.Delete(Auth).HandleAsync(id);
await OnCloseClick.InvokeAsync(null);
Close();
}
public async Task Open(int id)
{
Logger.LogInformation("Now loading... /Catalog/Delete/{Id}", id);
_item = await new GetById(Auth).HandleAsync(id);
_modalDisplay = "block;";
_modalClass = "Show";
_showDeleteModal = true;
}
public void Close()
{
_modalDisplay = "none";
_modalClass = "";
_showDeleteModal = false;
OnCloseClick.InvokeAsync(null);
}
}

154
src/BlazorAdmin/Pages/CatalogItemPage/Details.razor
View File

@@ -5,95 +5,127 @@
@namespace BlazorAdmin.Pages.CatalogItemPage
@if (_item == null)
{
<p><em>Loading...</em></p>
}
else
{
<h2 class="esh-body-title">Details</h2>
<div class="container">
<div class="row">
<img class="col-md-6 esh-picture" src="@($"https://localhost:44315/{_item.PictureUri}")">
<dl class="col-md-6 dl-horizontal">
<dt>
Name
</dt>
<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Details @_item.Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<dd>
@_item.Name
</dd>
@if (_item == null)
{
<Spinner></Spinner>
}
else
{
<div class="container">
<div class="row">
<img class="col-md-6 esh-picture" src="@($"https://localhost:44315/{_item.PictureUri}")">
<dt>
Description
</dt>
<dl class="col-md-6 dl-horizontal">
<dt>
Name
</dt>
<dd>
@_item.Description
</dd>
<dd>
@_item.Name
</dd>
<dt>
Brand
</dt>
<dt>
Description
</dt>
<dd>
@Services.CatalogBrandService.List.GetBrandName(Brands, _item.CatalogBrandId)
</dd>
<dd>
@_item.Description
</dd>
<dt>
Type
</dt>
<dt>
Brand
</dt>
<dd>
@Services.CatalogTypeService.List.GetTypeName(Types, _item.CatalogTypeId)
</dd>
<dt>
Price
</dt>
<dd>
@Services.CatalogBrandService.List.GetBrandName(Brands, _item.CatalogBrandId)
</dd>
<dd>
@_item.Price
</dd>
<dt>
Type
</dt>
</dl>
<dd>
@Services.CatalogTypeService.List.GetTypeName(Types, _item.CatalogTypeId)
</dd>
<dt>
Price
</dt>
<dd>
@_item.Price
</dd>
</dl>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Close</button>
<button class="btn btn-danger" @onclick="EditClick">
Edit
</button>
</div>
</div>
<div class="form-actions no-color">
<a href="" @onclick="@(() => OnCloseClick.InvokeAsync(null))" @onclick:preventDefault class="btn btn-secondary">
Cancel
</a>
<a href="" @onclick="@(() => OnEditClick.InvokeAsync(_item.Id))" @onclick:preventDefault class="btn btn-secondary">
Edit
</a>
</div>
</div>
</div>
@if (_showDetailsModal)
{
<div class="modal-backdrop fade show"></div>
}
@code {
[Parameter]
public int Id { get; set; }
[Parameter]
public IEnumerable<CatalogBrand> Brands { get; set; }
[Parameter]
public IEnumerable<CatalogType> Types { get; set; }
[Parameter]
public EventCallback<string> OnCloseClick { get; set; }
[Parameter]
public EventCallback<int> OnEditClick { get; set; }
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showDetailsModal = false;
private CatalogItem _item = new CatalogItem();
protected override async Task OnInitializedAsync()
public void EditClick()
{
Logger.LogInformation("Now loading... /Catalog/Details/{Id}", Id);
OnEditClick.InvokeAsync(_item.Id);
Close();
}
_item = await new GetById(Auth).HandleAsync(Id);
StateHasChanged();
public async Task Open(int id)
{
Logger.LogInformation("Now loading... /Catalog/Details/{Id}", id);
await base.OnInitializedAsync();
_item = await new GetById(Auth).HandleAsync(id);
_modalDisplay = "block;";
_modalClass = "Show";
_showDetailsModal = true;
}
public void Close()
{
_modalDisplay = "none";
_modalClass = "";
_showDetailsModal = false;
}
}

187
src/BlazorAdmin/Pages/CatalogItemPage/Edit.razor
View File

@@ -5,85 +5,104 @@
@namespace BlazorAdmin.Pages.CatalogItemPage
<h2 class="esh-body-title">Edit</h2>
<div>
<EditForm Model="_item" OnValidSubmit="@SaveClick">
<DataAnnotationsValidator />
<div class="form-group">
<label class="control-label col-md-2">Name</label>
<div class="col-md-3">
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>
</div>
<div class="modal @_modalClass" tabindex="-1" role="dialog" style="display:@_modalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<EditForm Model="_item" OnValidSubmit="@SaveClick">
<DataAnnotationsValidator />
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit @_item.Name</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-md-2">Description</label>
<div class="col-md-3">
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Brand</label>
<div class="col-md-3">
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
@if (_item == null)
{
<option value="@brand.Id">@brand.Name</option>
<Spinner></Spinner>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Type</label>
<div class="col-md-3">
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
else
{
<option value="@type.Id">@type.Name</option>
<div class="form-group">
<label class="control-label col-md-2">Name</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Name" />
<ValidationMessage For="(() => _item.Name)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Description</label>
<div class="col-md-12">
<InputText class="form-control" @bind-Value="_item.Description" />
<ValidationMessage For="(() => _item.Description)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Brand</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogBrandId" class="form-control">
@foreach (var brand in Brands)
{
<option value="@brand.Id">@brand.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogBrandId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Type</label>
<div class="col-md-12">
<InputSelect @bind-Value="_item.CatalogTypeId" class="form-control">
@foreach (var type in Types)
{
<option value="@type.Id">@type.Name</option>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Price</label>
<div class="col-md-12">
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Picture name</label>
<div class="col-md-12 esh-form-information">
Uploading images not allowed for this version.
</div>
</div>
}
</InputSelect>
<ValidationMessage For="(() => _item.CatalogTypeId)" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Cancel</button>
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</EditForm>
</div>
<div class="form-group">
<label class="control-label col-md-2">Price</label>
<div class="col-md-3">
<InputNumber @bind-Value="_item.Price" class="form-control" />
<ValidationMessage For="(() => _item.Price)" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Picture name</label>
<div class="col-md-4 esh-form-information">
Uploading images not allowed for this version.
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-3 text-right esh-button-actions">
<a href="" @onclick="@(() => OnCloseClick.InvokeAsync(null))" @onclick:preventDefault class="btn btn-secondary">
Cancel
</a>
<button type="submit" class="btn btn-primary">
Save
</button>
</div>
</div>
</EditForm>
</div>
</div>
@if (_showEditModal)
{
<div class="modal-backdrop fade show"></div>
}
@code {
[Parameter]
public int Id { get; set; }
[Parameter]
public IEnumerable<CatalogBrand> Brands { get; set; }
[Parameter]
@@ -92,19 +111,33 @@
[Parameter]
public EventCallback<string> OnCloseClick { get; set; }
private string _modalDisplay = "none;";
private string _modalClass = "";
private bool _showEditModal = false;
private CatalogItem _item = new CatalogItem();
protected override async Task OnInitializedAsync()
{
Logger.LogInformation("Now loading... /Catalog/Edit/{Id}", Id);
_item = await new GetById(Auth).HandleAsync(Id);
await base.OnInitializedAsync();
}
private async Task SaveClick()
{
await new BlazorAdmin.Services.CatalogItemService.Edit(Auth).HandleAsync(_item);
Close();
}
public async Task Open(int id)
{
Logger.LogInformation("Now loading... /Catalog/Edit/{Id}", id);
_item = await new GetById(Auth).HandleAsync(id);
_modalDisplay = "block;";
_modalClass = "Show";
_showEditModal = true;
}
public void Close()
{
_modalDisplay = "none";
_modalClass = "";
_showEditModal = false;
OnCloseClick.InvokeAsync(null);
}
}

117
src/BlazorAdmin/Pages/CatalogItemPage/List.razor
View File

@@ -1,6 +1,7 @@
@page "/admin"
@attribute [Authorize(Roles = Microsoft.eShopWeb.ApplicationCore.Constants.AuthorizationConstants.Roles.ADMINISTRATORS)]
@attribute [Authorize(Roles = Constants.Roles.ADMINISTRATORS)]
@inject AuthService Auth
@using global::Shared.Authorization
@inherits BlazorAdmin.Helpers.BlazorComponent
@namespace BlazorAdmin.Pages.CatalogItemPage
@@ -8,75 +9,59 @@
@if (catalogItems == null)
{
<p><em>Loading...</em></p>
<Spinner></Spinner>
}
else
{
@if (!showCreate && !showDetails && !showEdit && !showDelete)
{
<p class="esh-link-wrapper">
<button class="btn btn-primary" @onclick="@(() => CreateClick())">
Create New
</button>
</p>
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Item Type</th>
<th>Brand</th>
<th>Id</th>
<th>Name</th>
<th>@nameof(CatalogItem.Description)</th>
<th>@nameof(CatalogItem.Price)</th>
<th>Actions</th>
<p class="esh-link-wrapper">
<button class="btn btn-primary" @onclick="@(CreateClick)">
Create New
</button>
</p>
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Item Type</th>
<th>Brand</th>
<th>Id</th>
<th>Name</th>
<th>@nameof(CatalogItem.Description)</th>
<th>@nameof(CatalogItem.Price)</th>
<th>Actions</th>
</tr>
</thead>
<tbody class="cursor-pointer">
@foreach (var item in catalogItems)
{
<tr @onclick="@(() => DetailsClick(item.Id))">
<td>
<img class="img-thumbnail" src="@($"https://localhost:44315/{item.PictureUri}")">
</td>
<td>@Services.CatalogTypeService.List.GetTypeName(catalogTypes, item.CatalogTypeId)</td>
<td>@Services.CatalogBrandService.List.GetBrandName(catalogBrands, item.CatalogBrandId)</td>
<td>@item.Id</td>
<td>@item.Name</td>
<td>@item.Description</td>
<td>@item.Price</td>
<td>
<button @onclick="@(() => EditClick(item.Id))" @onclick:stopPropagation="true" class="btn btn-primary">
Edit
</button>
<button @onclick="@(() => DeleteClick(item.Id))" @onclick:stopPropagation="true" class="btn btn-primary">
Delete
</button>
</td>
</tr>
</thead>
<tbody class="cursor-pointer">
@foreach (var item in catalogItems)
{
<tr @onclick="@(() => DetailsClick(item.Id))">
<td>
<img class="img-thumbnail" src="@($"https://localhost:44315/{item.PictureUri}")">
</td>
<td>@Services.CatalogTypeService.List.GetTypeName(catalogTypes, item.CatalogTypeId)</td>
<td>@Services.CatalogBrandService.List.GetBrandName(catalogBrands, item.CatalogBrandId)</td>
<td>@item.Id</td>
<td>@item.Name</td>
<td>@item.Description</td>
<td>@item.Price</td>
<td>
<a href="" @onclick="@(() => EditClick(item.Id))" @onclick:preventDefault class="btn btn-primary">
Edit
</a>
}
</tbody>
</table>
<a href="" @onclick="@(() => DeleteClick(item.Id))" @onclick:preventDefault class="btn btn-primary">
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
}
@if (showDetails)
{
<Details Id="@selectedId" Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="CloseDetailsHandler" OnEditClick="EditDetailsHandler"></Details>
}
@if (showEdit)
{
<Edit Id="@selectedId" Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="CloseEditHandler"></Edit>
}
@if (showCreate)
{
<Create Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="CloseCreateHandler"></Create>
}
@if (showDelete)
{
<Delete Id="@selectedId" Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="CloseDeleteHandler"></Delete>
}
<Details Brands="@catalogBrands" Types="@catalogTypes" @ref="DetailsComponent" OnEditClick="EditClick"></Details>
<Edit Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="ReloadCatalogItems" @ref="EditComponent"></Edit>
<Create Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="ReloadCatalogItems" @ref="CreateComponent"></Create>
<Delete Brands="@catalogBrands" Types="@catalogTypes" OnCloseClick="ReloadCatalogItems" @ref="DeleteComponent"></Delete>
}

58
src/BlazorAdmin/Pages/CatalogItemPage/List.razor.cs
View File

@@ -12,11 +12,11 @@ namespace BlazorAdmin.Pages.CatalogItemPage
private List<CatalogItem> catalogItems = new List<CatalogItem>();
private List<CatalogType> catalogTypes = new List<CatalogType>();
private List<CatalogBrand> catalogBrands = new List<CatalogBrand>();
private bool showCreate = false;
private bool showDetails = false;
private bool showEdit = false;
private bool showDelete = false;
private int selectedId = 0;
private Edit EditComponent { get; set; }
private Delete DeleteComponent { get; set; }
private Details DetailsComponent { get; set; }
private Create CreateComponent { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
@@ -32,58 +32,24 @@ namespace BlazorAdmin.Pages.CatalogItemPage
await base.OnAfterRenderAsync(firstRender);
}
private void DetailsClick(int id)
private async void DetailsClick(int id)
{
selectedId = id;
showDetails = true;
await DetailsComponent.Open(id);
}
private void CreateClick()
{
showCreate = true;
CreateComponent.Open();
}
private void EditClick(int id)
private async Task EditClick(int id)
{
selectedId = id;
showEdit = true;
await EditComponent.Open(id);
}
private void DeleteClick(int id)
private async Task DeleteClick(int id)
{
selectedId = id;
showDelete = true;
}
private async Task CloseDetailsHandler(string action)
{
showDetails = false;
await ReloadCatalogItems();
}
private void EditDetailsHandler(int id)
{
showDetails = false;
selectedId = id;
showEdit = true;
}
private async Task CloseEditHandler(string action)
{
showEdit = false;
await ReloadCatalogItems();
}
private async Task CloseDeleteHandler(string action)
{
showDelete = false;
await ReloadCatalogItems();
}
private async Task CloseCreateHandler(string action)
{
showCreate = false;
await ReloadCatalogItems();
await DeleteComponent.Open(id);
}
private async Task ReloadCatalogItems()

12
src/BlazorAdmin/Pages/Logout.razor
View File

@@ -1,27 +1,15 @@
@page "/logout"
@inject AuthService AuthService
@inject NavigationManager NavigationManager
@inject IJSRuntime JSRuntime
@inherits BlazorAdmin.Helpers.BlazorComponent
@code {
protected override async Task OnInitializedAsync()
{
await AuthService.Logout();
await DeleteCookies();
CallRequestRefresh();
await new Route(JSRuntime).RouteOutside("/Identity/Account/Login");
}
private async Task DeleteCookies()
{
await new Cookies(JSRuntime).DeleteCookie("token");
await new Cookies(JSRuntime).DeleteCookie("username");
}
}

3
src/BlazorAdmin/Program.cs
View File

@@ -3,11 +3,9 @@ using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using BlazorAdmin.Network;
using BlazorAdmin.Services;
using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Authorization;
namespace BlazorAdmin
{
@@ -19,7 +17,6 @@ namespace BlazorAdmin
builder.RootComponents.Add<App>("admin");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTransient(sp => new SecureHttpClient(sp.GetRequiredService<HttpClient>()));
builder.Services.AddSingleton<ILocalStorageService, LocalStorageService>();
builder.Services.AddSingleton<AuthService>();

24
src/BlazorAdmin/Services/AuthService.cs
View File

@@ -9,7 +9,6 @@ using System.Text;
using System.Threading.Tasks;
using BlazorAdmin.JavaScript;
using Blazored.LocalStorage;
using Microsoft.AspNetCore.Identity;
using Microsoft.JSInterop;
using Newtonsoft.Json;
using Shared.Authorization;
@@ -20,13 +19,15 @@ namespace BlazorAdmin.Services
{
private readonly HttpClient _httpClient;
private readonly ILocalStorageService _localStorage;
private readonly IJSRuntime _jSRuntime;
public bool IsLoggedIn { get; set; }
public string UserName { get; set; }
public AuthService(HttpClient httpClient, ILocalStorageService localStorage)
public AuthService(HttpClient httpClient, ILocalStorageService localStorage, IJSRuntime jSRuntime)
{
_httpClient = httpClient;
_localStorage = localStorage;
_jSRuntime = jSRuntime;
}
public HttpClient GetHttpClient()
@@ -74,10 +75,11 @@ namespace BlazorAdmin.Services
{
await _localStorage.RemoveItemAsync("authToken");
await _localStorage.RemoveItemAsync("username");
await DeleteCookies();
RemoveAuthorizationHeader();
UserName = null;
IsLoggedIn = false;
await LogoutIdentityManager();
}
public async Task RefreshLoginInfo()
@@ -85,16 +87,26 @@ namespace BlazorAdmin.Services
await SetLoginData();
}
public async Task RefreshLoginInfoFromCookie(IJSRuntime jSRuntime)
public async Task RefreshLoginInfoFromCookie()
{
var token = await new Cookies(jSRuntime).GetCookie("token");
var token = await new Cookies(_jSRuntime).GetCookie("token");
await SaveTokenInLocalStorage(token);
var username = await new Cookies(jSRuntime).GetCookie("username");
var username = await new Cookies(_jSRuntime).GetCookie("username");
await SaveUsernameInLocalStorage(username);
await RefreshLoginInfo();
}
private async Task LogoutIdentityManager()
{
await _httpClient.PostAsync("Identity/Account/Logout", null);
}
private async Task DeleteCookies()
{
await new Cookies(_jSRuntime).DeleteCookie("token");
await new Cookies(_jSRuntime).DeleteCookie("username");
}
private async Task SetLoginData()
{

5
src/BlazorAdmin/Services/CatalogItemService/Create.cs
View File

@@ -1,7 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

7
src/BlazorAdmin/Services/CatalogItemService/Delete.DeleteCatalogItemResult.cs
View File

@@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorAdmin.Services.CatalogItemService
namespace BlazorAdmin.Services.CatalogItemService
{
public class DeleteCatalogItemResult
{

7
src/BlazorAdmin/Services/CatalogItemService/Delete.cs
View File

@@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Net;
using System.Threading.Tasks;
using Newtonsoft.Json;

7
src/BlazorAdmin/Services/CatalogItemService/Edit.EditCatalogItemResult.cs
View File

@@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorAdmin.Services.CatalogItemService
namespace BlazorAdmin.Services.CatalogItemService
{
public class EditCatalogItemResult
{

5
src/BlazorAdmin/Services/CatalogItemService/Edit.cs
View File

@@ -1,7 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

7
src/BlazorAdmin/Services/CatalogItemService/GetById.GetByIdCatalogItemResult.cs
View File

@@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace BlazorAdmin.Services.CatalogItemService
namespace BlazorAdmin.Services.CatalogItemService
{
public class GetByIdCatalogItemResult
{

7
src/BlazorAdmin/Services/CatalogItemService/GetById.cs
View File

@@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Text;
using System.Net;
using System.Threading.Tasks;
using Newtonsoft.Json;

9
src/BlazorAdmin/Shared/MainLayout.razor
View File

@@ -1,12 +1,9 @@
@using BlazorAdmin.Services
@using BlazorAdmin.JavaScript
@inject AuthService Auth
@inject AuthService Auth
@inject IJSRuntime JSRuntime
@inherits BlazorAdmin.Helpers.BlazorLayoutComponent
<AuthorizeView Roles=@Microsoft.eShopWeb.ApplicationCore.Constants.AuthorizationConstants.Roles.ADMINISTRATORS>
<AuthorizeView Roles=@Constants.Roles.ADMINISTRATORS>
<div class="sidebar">
<NavMenu />
</div>
@@ -28,7 +25,7 @@
{
if (firstRender)
{
await Auth.RefreshLoginInfoFromCookie(JSRuntime);
await Auth.RefreshLoginInfoFromCookie();
if (!Auth.IsLoggedIn)
{
await new Route(JSRuntime).RouteOutside("/Identity/Account/Login");

2
src/BlazorAdmin/Shared/NavMenu.razor
View File

@@ -1,7 +1,5 @@
@inject AuthService Auth
@inherits BlazorAdmin.Helpers.BlazorComponent
@using BlazorAdmin.Services
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">eShopOnWeb Admin</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">

4
src/BlazorAdmin/Shared/RedirectToLogin.razor
View File

@@ -1,9 +1,9 @@
@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
protected override void OnInitialized()
{
Navigation.NavigateTo($"authentication/login?returnUrl=" +
Navigation.NavigateTo($"Identity/Account/Login?returnUrl=" +
Uri.EscapeDataString(Navigation.Uri));
}
}

9
src/BlazorAdmin/Shared/Spinner.razor Normal file
View File

@@ -0,0 +1,9 @@

@inherits BlazorAdmin.Helpers.BlazorComponent
@namespace BlazorAdmin.Shared
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>

1
src/BlazorAdmin/_Imports.razor
View File

@@ -9,7 +9,6 @@
@using Microsoft.JSInterop
@using BlazorAdmin
@using BlazorAdmin.Shared
@using BlazorAdmin.Network
@using BlazorAdmin.Services
@using BlazorAdmin.Services.CatalogBrandService
@using BlazorAdmin.Services.CatalogItemService

28
src/Web/libman.json
View File

@@ -7,17 +7,16 @@
"destination": "wwwroot/lib/jquery/"
},
{
"provider": "unpkg",
"library": "bootstrap@3.3.7",
"library": "twitter-bootstrap@3.3.7",
"files": [
"dist/css/bootstrap.css",
"dist/css/bootstrap.css.map",
"dist/css/bootstrap.min.css",
"dist/css/bootstrap.min.css.map",
"dist/js/bootstrap.js",
"dist/js/bootstrap.min.js"
"css/bootstrap.css",
"css/bootstrap.css.map",
"css/bootstrap.min.css",
"css/bootstrap.min.css.map",
"js/bootstrap.js",
"js/bootstrap.min.js"
],
"destination": "wwwroot/lib/bootstrap/"
"destination": "wwwroot/lib/bootstrap/dist/"
},
{
"library": "jquery-validation-unobtrusive@3.2.10",
@@ -36,13 +35,12 @@
"destination": "wwwroot/lib/toastr/"
},
{
"provider": "unpkg",
"library": "@aspnet/signalr@1.0.3",
"files": [
"dist/browser/signalr.js",
"dist/browser/signalr.min.js"
"library": "aspnet-signalr@1.0.3",
"files": [
"signalr.js",
"signalr.min.js"
],
"destination": "wwwroot/lib/@aspnet/signalr/"
"destination": "wwwroot/lib/@aspnet/signalr/dist/browser/"
}
]
}