Переделана главная страница и инструкция по токену ЯМ

PlaylistShared.Pwa/Components/YandexTokenInstructions.razor

@@ -0,0 +1,75 @@
+@* Компонент с инструкцией по получению токена Яндекс.Музыки *@
+
+<MudContainer Class="pa-4">
+    <MudText Typo="Typo.body2" GutterBottom>
+        Токен нужен для доступа к вашим плейлистам. Получите его один раз:
+    </MudText>
+
+    <!-- Вертикальный список шагов -->
+    <div class="instruction-steps">
+        <div class="step-item">
+            <div class="step-number">1</div>
+            <div class="step-content">
+                Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">2</div>
+            <div class="step-content">
+                Авторизуйтесь в Яндексе (если ещё не вошли)
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">3</div>
+            <div class="step-content">
+                Нажмите «Разрешить»
+            </div>
+        </div>
+        <div class="step-item">
+            <div class="step-number">4</div>
+            <div class="step-content">
+                Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
+            </div>
+        </div>
+    </div>
+
+    <MudAlert Severity="Severity.Info" Class="mt-4">
+        Пример: <code>https://music.yandex.ru/#access_token=ВАШ_ТОКЕН&...</code>
+    </MudAlert>
+
+    <MudAlert Severity="Severity.Warning" Class="mt-2">
+        Токен даёт доступ к вашим плейлистам. Никому его не сообщайте.
+    </MudAlert>
+    
+    <MudAlert Severity="Severity.Success" Class="mt-2" Icon="@Icons.Material.Filled.Security">
+        Ваш токен сохраняется в зашифрованном виде и никому не передаётся.
+    </MudAlert>
+</MudContainer>
+
+<style>
+    .instruction-steps {
+        margin: 16px 0;
+    }
+    .step-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 16px;
+    }
+    .step-number {
+        width: 28px;
+        height: 28px;
+        background-color: var(--mud-palette-primary);
+        color: white;
+        border-radius: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+        flex-shrink: 0;
+    }
+    .step-content {
+        flex: 1;
+        font-size: 0.9rem;
+    }
+</style>

PlaylistShared.Pwa/Pages/Home.razor

@@ -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>

PlaylistShared.Pwa/Pages/Login.razor

@@ -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">
                 Войти (локально)

PlaylistShared.Pwa/Pages/Profile.razor

@@ -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()
     {