Переделана главная страница и инструкция по токену ЯМ
This commit is contained in:
FrigaT
@@ -1,91 +1,74 @@
|
||||
@page "/"
|
||||
@using PlaylistShared.Pwa.Services
|
||||
@inject NavigationManager Navigation
|
||||
@inject AuthenticationStateProvider AuthProvider
|
||||
|
||||
<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
|
||||
<MudCard>
|
||||
<MudCardHeader>
|
||||
<CardHeaderContent>
|
||||
<MudText Typo="Typo.h4" GutterBottom>🎵 Playlist share</MudText>
|
||||
<MudText Typo="Typo.body1">Делитесь плейлистами Яндекс.Музыки с друзьями и управляйте треками вместе!</MudText>
|
||||
<MudText Typo="Typo.body1">
|
||||
Делитесь плейлистами Яндекс.Музыки с друзьями и управляйте треками вместе!
|
||||
</MudText>
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
|
||||
<MudCardContent>
|
||||
<MudText Typo="Typo.h6" GutterBottom>🚀 Как начать</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mb-4">
|
||||
Playlist share — это веб-приложение, которое позволяет создавать совместные плейлисты,
|
||||
предоставлять доступ к ним по ссылке и слушать музыку прямо в браузере.
|
||||
Для работы требуется аккаунт Яндекс.Музыки (подписка не обязательна).
|
||||
</MudText>
|
||||
|
||||
<!-- Блок с требованием регистрации для расшаривания -->
|
||||
<MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="my-4">
|
||||
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Share" Size="Size.Medium" />
|
||||
<div style="flex: 1;">
|
||||
<MudText Typo="Typo.body1" FontWeight="FontWeight.Bold">
|
||||
Чтобы расшаривать плейлисты, необходимо зарегистрироваться
|
||||
</MudText>
|
||||
<MudText Typo="Typo.body2">
|
||||
Создайте аккаунт или войдите в существующий — это займёт всего минуту.
|
||||
</MudText>
|
||||
</div>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="/register">
|
||||
Зарегистрироваться
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Href="/login">
|
||||
Войти
|
||||
</MudButton>
|
||||
</div>
|
||||
</MudAlert>
|
||||
|
||||
<!-- Краткие преимущества -->
|
||||
<MudGrid>
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudText Typo="Typo.h6" GutterBottom>1️⃣ Регистрация и вход</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mb-2">
|
||||
• Нажмите <MudLink Href="/register" Style="font-weight:bold;">«Регистрация»</MudLink> и создайте аккаунт.<br />
|
||||
• Или <MudLink Href="/login" Style="font-weight:bold;">войдите</MudLink> в систему, если уже зарегистрированы.
|
||||
</MudText>
|
||||
<MudItem xs="12" sm="4">
|
||||
<MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Link" Size="Size.Medium" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2" Class="mt-2">Создавайте ссылки-приглашения</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudText Typo="Typo.h6" GutterBottom>2️⃣ Получение токена Яндекс.Музыки</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mb-2">
|
||||
Токен нужен для доступа к вашим плейлистам. Получите его один раз:
|
||||
</MudText>
|
||||
<ol style="margin-left: 1.2rem;">
|
||||
<li>Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink></li>
|
||||
<li>Авторизуйтесь в Яндексе (если ещё не вошли)</li>
|
||||
<li>Нажмите «Разрешить»</li>
|
||||
<li>Скопируйте <strong>access_token</strong> из адресной строки после перенаправления</li>
|
||||
</ol>
|
||||
<MudAlert Severity="Severity.Info" Class="mt-2">
|
||||
Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
|
||||
</MudAlert>
|
||||
<MudItem xs="12" sm="4">
|
||||
<MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudIcon Icon="@Icons.Material.Filled.People" Size="Size.Medium" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2" Class="mt-2">Совместное управление треками</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudText Typo="Typo.h6" GutterBottom>3️⃣ Добавление токена в профиле</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mb-2">
|
||||
• Перейдите в <MudLink Href="/profile" Style="font-weight:bold;">Профиль</MudLink><br />
|
||||
• Вставьте скопированный токен в поле «Токен Яндекс.Музыки»<br />
|
||||
• Нажмите «Сохранить»
|
||||
</MudText>
|
||||
<MudAlert Severity="Severity.Success" Class="mt-2">✅ Токен сохраняется в зашифрованном виде.</MudAlert>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6">
|
||||
<MudPaper Class="pa-4" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudText Typo="Typo.h6" GutterBottom>4️⃣ Расшаривание плейлиста</MudText>
|
||||
<MudText Typo="Typo.body2" Class="mb-2">
|
||||
• Откройте <MudLink Href="/my-playlists" Style="font-weight:bold;">Мои плейлисты</MudLink><br />
|
||||
• Нажмите «Поделиться» рядом с нужным плейлистом<br />
|
||||
• Скопируйте полученную ссылку и отправьте друзьям
|
||||
</MudText>
|
||||
<MudAlert Severity="Severity.Info" Class="mt-2">
|
||||
Вы можете настроить права на добавление/удаление треков для гостей.
|
||||
</MudAlert>
|
||||
<MudItem xs="12" sm="4">
|
||||
<MudPaper Class="pa-3 text-center" Elevation="0" Style="background-color: rgba(0,0,0,0.04); border-radius: 8px;">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Security" Size="Size.Medium" Color="Color.Primary" />
|
||||
<MudText Typo="Typo.body2" Class="mt-2">Гибкие настройки доступа</MudText>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
|
||||
<MudDivider Class="my-6" />
|
||||
<MudDivider Class="my-4" />
|
||||
|
||||
<MudText Typo="Typo.h6" GutterBottom>📌 Важно</MudText>
|
||||
<MudGrid>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudAlert Severity="Severity.Warning" Variant="Variant.Outlined">
|
||||
🔐 Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
|
||||
</MudAlert>
|
||||
</MudItem>
|
||||
<MudItem xs="12" sm="6">
|
||||
<MudAlert Severity="Severity.Info" Variant="Variant.Outlined">
|
||||
🎧 Для работы с плейлистами нужна активная подписка Яндекс.Плюс?<br />
|
||||
<MudText Typo="Typo.body2">Нет, достаточно обычного аккаунта.</MudText>
|
||||
</MudAlert>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
<MudText Typo="Typo.body2" Color="Color.Secondary">
|
||||
🔐 Все данные передаются по защищённому соединению, токены хранятся в зашифрованном виде.
|
||||
</MudText>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
</MudContainer>
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
<!-- Локальная форма входа -->
|
||||
<MudTextField @bind-Value="_loginModel.Username" Label="Имя пользователя" Variant="Variant.Outlined" FullWidth="true" Class="mb-3" />
|
||||
<MudTextField @bind-Value="_loginModel.Password" Label="Пароль" Variant="Variant.Outlined" FullWidth="true" InputType="InputType.Password" />
|
||||
<MudTextField @bind-Value="_loginModel.Password" Label="Пароль" Variant="Variant.Outlined" FullWidth="true" InputType="InputType.Password" @onkeypress="@(async (e) => { if (e.Key == "Enter") await LocalLogin(); })" />
|
||||
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="LocalLogin" FullWidth="true" Class="mt-4">
|
||||
Войти (локально)
|
||||
|
||||
@@ -13,17 +13,45 @@
|
||||
</CardHeaderContent>
|
||||
</MudCardHeader>
|
||||
<MudCardContent>
|
||||
<MudText Typo="Typo.body2" Class="mb-4">Здесь вы можете указать токен доступа к Яндекс.Музыке.</MudText>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;">
|
||||
<MudText Typo="Typo.body2">
|
||||
Здесь вы можете указать токен доступа к Яндекс.Музыке.
|
||||
</MudText>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.HelpOutline"
|
||||
Color="Color.Info"
|
||||
OnClick="() => _instructionDrawerOpen = true"
|
||||
Title="Как получить токен?" />
|
||||
</div>
|
||||
|
||||
<MudTextField @bind-Value="_token" Label="Токен Яндекс.Музыки" Variant="Variant.Outlined" FullWidth="true" />
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveToken" Class="mt-4" FullWidth="true">Сохранить токен</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveToken" Class="mt-4" FullWidth="true">
|
||||
Сохранить токен
|
||||
</MudButton>
|
||||
|
||||
<MudText Class="mt-4" Typo="Typo.body2">Статус: @_statusText</MudText>
|
||||
</MudCardContent>
|
||||
</MudCard>
|
||||
</MudContainer>
|
||||
|
||||
<!-- Выдвижная панель с инструкцией -->
|
||||
<MudDrawer @bind-Open="_instructionDrawerOpen"
|
||||
Anchor="Anchor.Right"
|
||||
Variant="DrawerVariant.Temporary"
|
||||
Elevation="3"
|
||||
Width="500px"
|
||||
MiniWidth="0px">
|
||||
<MudDrawerHeader>
|
||||
<MudText Typo="Typo.h6">Как получить токен Яндекс.Музыки</MudText>
|
||||
</MudDrawerHeader>
|
||||
<MudDivider />
|
||||
<YandexTokenInstructions />
|
||||
</MudDrawer>
|
||||
|
||||
@code {
|
||||
private string _token = "";
|
||||
private string _statusText = "Загрузка...";
|
||||
private bool _instructionDrawerOpen = false;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user