feat: polished admin UI styles + email channels admin CRUD

- Extract inline styles to wwwroot/css/admin.css
- Bootstrap Icons for nav and buttons
- Styled page headers, table, empty state, readonly fields
- Email Channels admin: list, create, edit, delete
- GetAllEmailChannelsQuery + handler
- AdminChannelsController with full CRUD
- form id + form= attribute pattern for EditorLayout footer buttons

Ref: IT-628

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Anatolii Grynchuk
2026-05-02 02:43:59 +03:00
parent 855d0862f9
commit c90b07386d
13 changed files with 706 additions and 30 deletions
@@ -0,0 +1,141 @@
@using HrynCo.NotificationService.DAL.Abstract.Providers
@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
@model EmailChannelEditViewModel
@{
Layout = "~/Views/Shared/_EditorLayout.cshtml";
ViewData["Title"] = Model.PageTitle;
ViewData["EditorTitle"] = Model.PageTitle;
}
<form id="channelForm" asp-action="Save" asp-controller="AdminChannels" method="post">
@Html.AntiForgeryToken()
<input asp-for="Id" type="hidden" />
@if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger mb-3">
@foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
{
<div>@error.ErrorMessage</div>
}
</div>
}
@* Channel Settings section *@
<div class="form-section-title"><i class="bi bi-sliders me-1"></i> Channel Settings</div>
<div class="mb-4">
<label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
<input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
<span asp-validation-for="ServiceName" class="text-danger small"></span>
</div>
<div class="row mb-4">
<div class="col-md-4">
<label asp-for="Priority" class="form-label fw-semibold">Priority</label>
<input asp-for="Priority" class="form-control" type="number" min="1" />
<span asp-validation-for="Priority" class="text-danger small"></span>
</div>
<div class="col-md-4">
<label asp-for="EmailChannelType" class="form-label fw-semibold">Channel Type</label>
<select asp-for="EmailChannelType" class="form-select"
asp-items="Html.GetEnumSelectList<EmailChannelType>()">
</select>
</div>
<div class="col-md-4 d-flex align-items-end">
<div class="form-check mb-2">
<input asp-for="IsActive" class="form-check-input" type="checkbox" />
<label asp-for="IsActive" class="form-check-label fw-semibold">Active</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-4">
<label asp-for="DailyLimit" class="form-label fw-semibold">Daily Limit</label>
<input asp-for="DailyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
<span asp-validation-for="DailyLimit" class="text-danger small"></span>
</div>
<div class="col-md-4">
<label asp-for="MonthlyLimit" class="form-label fw-semibold">Monthly Limit</label>
<input asp-for="MonthlyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
<span asp-validation-for="MonthlyLimit" class="text-danger small"></span>
</div>
<div class="col-md-4">
<label asp-for="WarnThresholdPercent" class="form-label fw-semibold">Warn Threshold (%)</label>
<input asp-for="WarnThresholdPercent" class="form-control" type="number" min="1" max="100" />
<span asp-validation-for="WarnThresholdPercent" class="text-danger small"></span>
</div>
</div>
@* SMTP Settings section *@
<div class="form-section-title mt-4"><i class="bi bi-envelope-at me-1"></i> SMTP Settings</div>
<div class="row mb-4">
<div class="col-md-9">
<label asp-for="Host" class="form-label fw-semibold">Host</label>
<input asp-for="Host" class="form-control" placeholder="smtp.example.com" />
<span asp-validation-for="Host" class="text-danger small"></span>
</div>
<div class="col-md-3">
<label asp-for="Port" class="form-label fw-semibold">Port</label>
<input asp-for="Port" class="form-control" type="number" min="1" max="65535" />
<span asp-validation-for="Port" class="text-danger small"></span>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label asp-for="Username" class="form-label fw-semibold">Username</label>
<input asp-for="Username" class="form-control" autocomplete="off" />
<span asp-validation-for="Username" class="text-danger small"></span>
</div>
<div class="col-md-6">
<label asp-for="Password" class="form-label fw-semibold">Password</label>
<input asp-for="Password" class="form-control" type="password" autocomplete="new-password" />
<span asp-validation-for="Password" class="text-danger small"></span>
</div>
</div>
<div class="mb-4">
<div class="form-check">
<input asp-for="UseSsl" class="form-check-input" type="checkbox" />
<label asp-for="UseSsl" class="form-check-label fw-semibold">Use SSL/TLS</label>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label asp-for="FromEmail" class="form-label fw-semibold">From Email</label>
<input asp-for="FromEmail" class="form-control" type="email" placeholder="noreply@example.com" />
<span asp-validation-for="FromEmail" class="text-danger small"></span>
</div>
<div class="col-md-6">
<label asp-for="FromName" class="form-label fw-semibold">From Name</label>
<input asp-for="FromName" class="form-control" placeholder="My Service" />
<span asp-validation-for="FromName" class="text-danger small"></span>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<label asp-for="AppDisplayName" class="form-label fw-semibold">App Display Name</label>
<input asp-for="AppDisplayName" class="form-control" />
<span asp-validation-for="AppDisplayName" class="text-danger small"></span>
</div>
<div class="col-md-6">
<label asp-for="AppBaseUrl" class="form-label fw-semibold">App Base URL</label>
<input asp-for="AppBaseUrl" class="form-control" placeholder="https://example.com" />
<span asp-validation-for="AppBaseUrl" class="text-danger small"></span>
</div>
</div>
@section FormActions {
<button type="submit" form="channelForm" class="btn btn-primary">
<i class="bi bi-floppy me-1"></i> Save
</button>
<a href="/admin/channels" class="btn btn-secondary">
<i class="bi bi-x-lg me-1"></i> Cancel
</a>
}
</form>