v1.1.0: Полный редизайн фронтенда, усиление безопасности и обновление версии
Deploy Telegram Bot / build-and-push (push) Successful in 5m19s
Deploy Telegram Bot / deploy (push) Successful in 10s

This commit is contained in:
2026-04-21 15:21:18 +03:00
parent b6af5f047c
commit 176f1105ab
18 changed files with 1392 additions and 413 deletions
@@ -6,57 +6,65 @@
@inject SessionService SessionService
@inject NavigationManager Navigation
<PageTitle>Редактирование сессии - GM-Relay</PageTitle>
<PageTitle>Редактирование сессии GM-Relay</PageTitle>
<div class="container mt-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Главная</a></li>
<li class="breadcrumb-item active">Редактирование сессии</li>
</ol>
</nav>
<div class="page-container">
<ul class="gm-breadcrumb animate-fade-in">
<li><a href="/">Главная</a></li>
<li class="active">Редактирование сессии</li>
</ul>
<h2>Редактирование сессии</h2>
<div class="page-header animate-fade-in">
<h2>✏️ Редактирование сессии</h2>
</div>
@if (session == null)
{
<p>Загрузка деталей сессии...</p>
<div class="glass-card" style="padding: 2rem;">
<div class="skeleton skeleton-text" style="width: 50%; margin-bottom: 1.5rem;"></div>
<div class="skeleton skeleton-text" style="width: 100%; height: 2.5rem; margin-bottom: 1.5rem;"></div>
<div class="skeleton skeleton-text" style="width: 50%; margin-bottom: 1.5rem;"></div>
<div class="skeleton skeleton-text" style="width: 100%; height: 2.5rem; margin-bottom: 1.5rem;"></div>
<div class="skeleton skeleton-text" style="width: 30%; height: 2.5rem;"></div>
</div>
}
else
{
<div class="card shadow-sm mt-4">
<div class="card-body">
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
<div class="mb-3">
<label class="form-label font-weight-bold">Название игры</label>
<InputText @bind-Value="model.Title" class="form-control" placeholder="например, D&D 5e: Dragon's Hoard" />
<div class="form-text">Изменение этого поля обновит все сессии в одной группе.</div>
</div>
<div class="glass-card animate-slide-up" style="max-width: 640px;">
<EditForm Model="@model" OnValidSubmit="HandleSubmit">
<div class="gm-form-group">
<label class="gm-form-label">Название игры</label>
<InputText @bind-Value="model.Title" class="gm-form-control" placeholder="например, D&D 5e: Dragon's Hoard" />
<div class="gm-form-hint">Изменение этого поля обновит все сессии в одной группе.</div>
</div>
<div class="mb-3">
<label class="form-label font-weight-bold">Запланированное время (МСК UTC+3)</label>
<input type="datetime-local" @bind="model.ScheduledAtLocal" class="form-control" />
<div class="form-text">Текущее: @session.ScheduledAt.FormatMoscow()</div>
</div>
<div class="gm-form-group">
<label class="gm-form-label">Запланированное время (МСК, UTC+3)</label>
<input type="datetime-local" @bind="model.ScheduledAtLocal" class="gm-form-control" />
<div class="gm-form-hint">Текущее: @session.ScheduledAt.FormatMoscow()</div>
</div>
<div class="mb-3">
<label class="form-label font-weight-bold">Ссылка для подключения</label>
<InputText @bind-Value="model.JoinLink" class="form-control" placeholder="Ссылка на Discord или VTT" />
</div>
<div class="gm-form-group">
<label class="gm-form-label">Ссылка для подключения</label>
<InputText @bind-Value="model.JoinLink" class="gm-form-control" placeholder="Ссылка на Discord или VTT" />
</div>
<div class="mt-4">
<button type="submit" class="btn btn-success" disabled="@isSubmitting">
@(isSubmitting ? "Сохранение..." : "Сохранить изменения")
</button>
<button type="button" class="btn btn-outline-secondary ms-2" @onclick="GoBack">Отмена</button>
</div>
</EditForm>
</div>
<div style="display: flex; gap: 0.75rem; margin-top: 1.5rem;">
<button type="submit" class="btn-gm btn-gm-success" disabled="@isSubmitting">
@(isSubmitting ? "Сохранение..." : "Сохранить изменения")
</button>
<button type="button" class="btn-gm btn-gm-outline" @onclick="GoBack">
Отмена
</button>
</div>
</EditForm>
</div>
@if (!string.IsNullOrEmpty(errorMessage))
{
<div class="alert alert-danger mt-3">@errorMessage</div>
<div class="gm-alert gm-alert-danger" style="margin-top: 1rem; max-width: 640px;">
⚠️ @errorMessage
</div>
}
}
</div>
+18 -20
View File
@@ -1,28 +1,26 @@
@page "/Error"
@page "/Error"
@using System.Diagnostics
<PageTitle>Ошибка</PageTitle>
<PageTitle>Ошибка — GM-Relay</PageTitle>
<h1 class="text-danger">Ошибка.</h1>
<h2 class="text-danger">Произошла ошибка при обработке вашего запроса.</h2>
<div class="page-container">
<div class="error-page">
<div class="error-page-icon">⚠️</div>
<h1 class="error-page-title">Произошла ошибка</h1>
<p class="error-page-text">При обработке вашего запроса что-то пошло не так. Пожалуйста, попробуйте снова.</p>
@if (ShowRequestId)
{
<p>
<strong>ID запроса:</strong> <code>@RequestId</code>
</p>
}
@if (ShowRequestId)
{
<p style="font-size: 0.75rem; color: var(--text-muted); font-family: monospace;">
ID запроса: @RequestId
</p>
}
<h3>Режим разработки</h3>
<p>
Переключение на среду <strong>Development</strong> отобразит более подробную информацию о произошедшей ошибке.
</p>
<p>
<strong>Среда Development не должна быть включена для развернутых приложений.</strong>
Это может привести к отображению конфиденциальной информации из исключений конечным пользователям.
Для локальной отладки включите среду <strong>Development</strong>, установив переменную среды <strong>ASPNETCORE_ENVIRONMENT</strong> в значение <strong>Development</strong>
и перезапустите приложение.
</p>
<a href="/" class="btn-gm btn-gm-primary" style="margin-top: 0.5rem;">
← На главную
</a>
</div>
</div>
@code{
[CascadingParameter]
@@ -5,60 +5,105 @@
@attribute [Authorize]
@inject SessionService SessionService
<PageTitle>Сессии группы - GM-Relay</PageTitle>
<PageTitle>Сессии группы GM-Relay</PageTitle>
<div class="container mt-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Главная</a></li>
<li class="breadcrumb-item active">Сессии группы</li>
</ol>
</nav>
<div class="page-container">
<ul class="gm-breadcrumb animate-fade-in">
<li><a href="/">Главная</a></li>
<li class="active">Сессии группы</li>
</ul>
<h2>Предстоящие игры</h2>
<div class="mt-4">
@if (sessions == null)
{
<p>Загрузка сессий...</p>
}
else if (sessions.Count == 0)
{
<div class="alert alert-info">Для этой группы не найдено предстоящих сессий.</div>
}
else
{
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th>Название</th>
<th>Время (МСК)</th>
<th>Статус</th>
<th>Ссылка</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
@foreach (var session in sessions)
{
<tr>
<td>@session.Title</td>
<td>@session.ScheduledAt.FormatMoscow()</td>
<td>
<span class="badge @GetStatusClass(session.Status)">@TranslateStatus(session.Status)</span>
</td>
<td><a href="@session.JoinLink" target="_blank" class="text-truncate d-inline-block" style="max-width: 150px;">Ссылка</a></td>
<td>
<a href="/session/edit/@session.Id" class="btn btn-sm btn-outline-secondary">Изменить</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
<div class="page-header animate-fade-in">
<h2>📅 Предстоящие игры</h2>
</div>
@if (sessions == null)
{
<div class="glass-card" style="padding: 2rem;">
<div class="skeleton skeleton-text" style="width: 80%; margin-bottom: 1rem;"></div>
<div class="skeleton skeleton-text" style="width: 60%; margin-bottom: 0.75rem;"></div>
<div class="skeleton skeleton-text" style="width: 70%; margin-bottom: 0.75rem;"></div>
<div class="skeleton skeleton-text" style="width: 50%;"></div>
</div>
}
else if (sessions.Count == 0)
{
<div class="glass-card">
<div class="empty-state">
<div class="empty-state-icon">🎯</div>
<div class="empty-state-title">Нет предстоящих сессий</div>
<p class="empty-state-text">Для этой группы пока не запланировано игровых сессий.</p>
</div>
</div>
}
else
{
@* Desktop table *@
<div class="glass-card session-table-desktop animate-slide-up" style="padding: 0; overflow: hidden;">
<table class="gm-table">
<thead>
<tr>
<th>Название</th>
<th>Время (МСК)</th>
<th>Статус</th>
<th>Ссылка</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
@foreach (var session in sessions)
{
<tr>
<td style="color: var(--text-primary); font-weight: 500;">@session.Title</td>
<td>@session.ScheduledAt.FormatMoscow()</td>
<td>
<span class="status-badge @GetStatusClass(session.Status)">@TranslateStatus(session.Status)</span>
</td>
<td>
<a href="@session.JoinLink" target="_blank" rel="noopener noreferrer"
style="max-width: 150px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
Подключиться ↗
</a>
</td>
<td>
<a href="/session/edit/@session.Id" class="btn-gm btn-gm-outline" style="font-size: 0.8125rem; padding: 0.375rem 0.75rem;">
✏️ Изменить
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
@* Mobile cards *@
<div class="session-card-mobile stagger-children">
@foreach (var session in sessions)
{
<div class="session-card">
<div class="session-card-header">
<span class="session-card-title">@session.Title</span>
<span class="status-badge @GetStatusClass(session.Status)">@TranslateStatus(session.Status)</span>
</div>
<div class="session-card-body">
<div class="session-card-row">
<span>🕐 Время</span>
<span style="color: var(--text-primary);">@session.ScheduledAt.FormatMoscow()</span>
</div>
<div class="session-card-row">
<span>🔗 Ссылка</span>
<a href="@session.JoinLink" target="_blank" rel="noopener noreferrer">Подключиться ↗</a>
</div>
</div>
<div class="session-card-actions">
<a href="/session/edit/@session.Id" class="btn-gm btn-gm-outline" style="flex: 1; justify-content: center; font-size: 0.8125rem; padding: 0.5rem;">
✏️ Изменить
</a>
</div>
</div>
}
</div>
}
</div>
@code {
@@ -72,10 +117,12 @@
private string GetStatusClass(string status) => status switch
{
SessionStatus.Confirmed => "bg-success",
SessionStatus.Cancelled => "bg-danger",
SessionStatus.ConfirmationSent => "bg-warning text-dark",
_ => "bg-secondary"
SessionStatus.Confirmed => "status-success",
SessionStatus.Cancelled => "status-danger",
SessionStatus.ConfirmationSent => "status-warning",
"Recruiting" => "status-info",
"RecruitmentClosed" => "status-info",
_ => "status-neutral"
};
private string TranslateStatus(string status) => status switch
@@ -83,7 +130,7 @@
"Recruiting" => "Набор",
"RecruitmentClosed" => "Набор закрыт",
SessionStatus.Planned => "Запланировано",
SessionStatus.ConfirmationSent => "Ждем подтверждения",
SessionStatus.ConfirmationSent => "Ждём подтверждения",
SessionStatus.Confirmed => "Подтверждено",
SessionStatus.Cancelled => "Отменено",
_ => status
+63 -30
View File
@@ -6,45 +6,78 @@
@inject SessionService SessionService
@inject AuthenticationStateProvider AuthStateProvider
<PageTitle>Панель управления - GM-Relay</PageTitle>
<PageTitle>Панель управления GM-Relay</PageTitle>
<div class="container mt-4">
<h2>Добро пожаловать, @userName!</h2>
<p class="text-muted">Выберите группу для управления играми.</p>
<div class="page-container">
<div class="page-header animate-fade-in">
<h2>Добро пожаловать, @userName! 👋</h2>
<p>Выберите группу для управления игровыми сессиями.</p>
</div>
<div class="row mt-4">
@if (groups == null)
{
<p>Загрузка групп...</p>
}
else if (groups.Count == 0)
{
<div class="col-12">
<div class="card bg-light">
<div class="card-body text-center">
<p class="mb-0">У вас еще нет зарегистрированных групп. Сначала добавьте бота в группу Telegram!</p>
</div>
</div>
@if (groups == null)
{
<div class="card-grid">
@for (int i = 0; i < 3; i++)
{
<div class="skeleton skeleton-card"></div>
}
</div>
}
else if (groups.Count == 0)
{
<div class="glass-card">
<div class="empty-state">
<div class="empty-state-icon">🤖</div>
<div class="empty-state-title">Нет зарегистрированных групп</div>
<p class="empty-state-text">Добавьте бота GM-Relay в свою группу Telegram, чтобы начать управлять игровыми сессиями.</p>
</div>
}
else
{
</div>
}
else
{
<div class="card-grid stagger-children">
@foreach (var group in groups)
{
<div class="col-md-4 mb-3">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">@group.Name</h5>
<p class="card-text text-muted">ID: @group.TelegramChatId</p>
<a href="/group/@group.Id" class="btn btn-primary">Посмотреть игры</a>
</div>
</div>
<div class="glass-card group-card">
<div class="group-card-icon">🎮</div>
<h3 class="group-card-title">@group.Name</h3>
<p class="group-card-id">ID: @group.TelegramChatId</p>
<a href="/group/@group.Id" class="btn-gm btn-gm-primary" style="width: 100%; justify-content: center; margin-top: auto;">
Посмотреть игры
</a>
</div>
}
}
</div>
</div>
}
</div>
<style>
.group-card {
display: flex;
flex-direction: column;
min-height: 180px;
}
.group-card-icon {
font-size: 2rem;
margin-bottom: 0.75rem;
}
.group-card-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.group-card-id {
font-size: 0.75rem;
color: var(--text-muted);
font-family: 'Courier New', monospace;
margin-bottom: 1rem;
}
</style>
@code {
private List<WebGameGroup>? groups;
private string userName = "";
+18 -20
View File
@@ -3,29 +3,27 @@
@inject NavigationManager Navigation
@inject IConfiguration Configuration
<PageTitle>Вход - GM-Relay</PageTitle>
<PageTitle>Вход GM-Relay</PageTitle>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-6 text-center">
<h3>Панель управления GM-Relay</h3>
<p class="text-muted">Пожалуйста, войдите как Мастер Игры для управления сессиями.</p>
<div class="login-page">
<div class="login-card">
<div class="login-logo">🎲</div>
<h1 class="login-title">GM-Relay</h1>
<p class="login-subtitle">Войдите через Telegram для управления игровыми сессиями</p>
<div class="mt-4">
@if (Navigation.Uri.Contains("error=auth_failed"))
{
<div class="alert alert-danger">Ошибка аутентификации. Пожалуйста, попробуйте снова.</div>
}
@* Telegram Login Widget *@
<div id="telegram-login-container">
<script async src="https://telegram.org/js/telegram-widget.js?22"
data-telegram-login="@BotUsername"
data-size="large"
data-auth-url="@AuthUrl"
data-request-access="write"></script>
</div>
@if (Navigation.Uri.Contains("error=auth_failed"))
{
<div class="gm-alert gm-alert-danger" style="margin-bottom: 1.5rem; justify-content: center;">
⚠️ Ошибка аутентификации. Пожалуйста, попробуйте снова.
</div>
}
<div id="telegram-login-container">
<script async src="https://telegram.org/js/telegram-widget.js?22"
data-telegram-login="@BotUsername"
data-size="large"
data-auth-url="@AuthUrl"
data-request-access="write"></script>
</div>
</div>
</div>
@@ -1,5 +1,13 @@
@page "/not-found"
@page "/not-found"
@layout MainLayout
<h3>Не найдено</h3>
<p>Извините, страница, которую вы ищете, не существует.</p>
<PageTitle>404 — GM-Relay</PageTitle>
<div class="error-page">
<div class="error-page-icon">🔍</div>
<h1 class="error-page-title">Страница не найдена</h1>
<p class="error-page-text">Извините, страница, которую вы ищете, не существует или была перемещена.</p>
<a href="/" class="btn-gm btn-gm-primary">
← Вернуться на главную
</a>
</div>