v1.1.0: Полный редизайн фронтенда, усиление безопасности и обновление версии
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 = "";
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user