Изменение инструкции получения токена яндекса
This commit is contained in:
FrigaT
@@ -0,0 +1,93 @@
|
||||
@using System.Text.RegularExpressions
|
||||
@using PlaylistShared.Shared.DTO
|
||||
@inject HttpClient Http
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<MudDialog>
|
||||
<TitleContent>
|
||||
<MudText Typo="Typo.h6">Подключение Яндекс.Музыки</MudText>
|
||||
</TitleContent>
|
||||
<DialogContent>
|
||||
<MudStepper @bind-ActiveIndex="_index" Vertical CenterLabels CompletedStepColor="Color.Success" @onwheel="HandleWheel">
|
||||
<ChildContent>
|
||||
<MudStep Title="Вход" Skippable>
|
||||
<MudText Typo="Typo.body2" Class="mb-4">Нажмите на кнопку и разрешите доступ приложению.</MudText>
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
StartIcon="@PlaylistShared.Pwa.CustomIcons.Yandex"
|
||||
Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d"
|
||||
Target="_blank"
|
||||
@onclick="() => {_index++;}"
|
||||
FullWidth>
|
||||
Войти в Яндекс
|
||||
</MudButton>
|
||||
</MudStep>
|
||||
|
||||
<MudStep Title="Добавление токена">
|
||||
Скопируйте значение <code>access_token</code> или <code>весь URL</code> из адресной строки после перенаправления.
|
||||
<MudAlert Severity="Severity.Info" Class="mt-4">
|
||||
https://music.yandex.ru/#access_token=<code>ВАШ_ТОКЕН</code>&...
|
||||
</MudAlert>
|
||||
<MudTextField @bind-Value="_rawInput" @bind-Value:after="Submit" Label="Вставьте скопированную ссылку или токен" Variant="Variant.Outlined" Margin="Margin.Dense" Error="_tokenErr" />
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="Submit" FullWidth Class="mt-4">
|
||||
Сохранить
|
||||
</MudButton>
|
||||
</MudStep>
|
||||
</ChildContent>
|
||||
<ActionContent Context="stepper">
|
||||
<MudIconButton OnClick="@(() => stepper.PreviousStepAsync())" Icon="@Icons.Material.Filled.ArrowBack" Color="Color.Primary" Disabled="@(_index <= 0)" />
|
||||
<MudSpacer />
|
||||
<MudIconButton OnClick="@(() => stepper.NextStepAsync())" Icon="@Icons.Material.Filled.ArrowForward" Color="Color.Primary" Disabled="@(_index >= 1)" />
|
||||
</ActionContent>
|
||||
</MudStepper>
|
||||
</DialogContent>
|
||||
</MudDialog>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] IMudDialogInstance MudDialog { get; set; }
|
||||
private string _rawInput = "";
|
||||
private int _index;
|
||||
private bool _tokenErr = false;
|
||||
|
||||
private async Task HandleWheel(WheelEventArgs e)
|
||||
{
|
||||
|
||||
if (e.DeltaY > 0 && _index < 1) // Прокрутка вниз -> Вперед
|
||||
{
|
||||
_index++;
|
||||
}
|
||||
else if (e.DeltaY < 0 && _index > 0) // Прокрутка вверх -> Назад
|
||||
{
|
||||
_index--;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task Submit()
|
||||
{
|
||||
var token = ExtractToken(_rawInput);
|
||||
if (string.IsNullOrWhiteSpace(token))
|
||||
{
|
||||
_tokenErr = true;
|
||||
Snackbar.Add("Токен не найден", Severity.Error);
|
||||
return;
|
||||
}
|
||||
|
||||
_tokenErr = false;
|
||||
|
||||
var response = await Http.PostAsJsonAsync("/api/yandextoken/set", new SetYandexTokenRequest { Token = token });
|
||||
if (response.IsSuccessStatusCode)
|
||||
{
|
||||
Snackbar.Add("Токен успешно обновлен", Severity.Success);
|
||||
MudDialog.Close(DialogResult.Ok(true));
|
||||
}
|
||||
else
|
||||
{
|
||||
Snackbar.Add("Ошибка обновления токена. Повторите позже.", Severity.Error);
|
||||
}
|
||||
}
|
||||
|
||||
private string ExtractToken(string input) =>
|
||||
input.Contains("access_token=") ? Regex.Match(input, @"access_token=([^&]+)").Groups[1].Value : input.Trim();
|
||||
|
||||
public class SetYandexTokenRequest { public string Token { get; set; } }
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
@* Компонент с инструкцией по получению токена Яндекс.Музыки *@
|
||||
|
||||
<MudContainer Class="pa-4">
|
||||
<MudText Typo="Typo.body2" GutterBottom>
|
||||
Токен нужен для доступа к вашим плейлистам. Получите его один раз:
|
||||
</MudText>
|
||||
|
||||
<!-- Вертикальный список шагов -->
|
||||
<MudStack Class="my-4">
|
||||
<MudStack Row AlignItems="AlignItems.Center">
|
||||
<MudPaper Elevation="0" Style="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;">1</MudPaper>
|
||||
<MudText>
|
||||
Перейдите по <MudLink Href="https://oauth.yandex.ru/authorize?response_type=token&client_id=23cabbbdc6cd418abb4b39c32c41195d" Target="_blank">ссылке</MudLink>
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row AlignItems="AlignItems.Center">
|
||||
<MudPaper Elevation="0" Style="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;">1</MudPaper>
|
||||
<MudText>
|
||||
Авторизуйтесь в Яндексе (если ещё не вошли)
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row AlignItems="AlignItems.Center">
|
||||
<MudPaper Elevation="0" Style="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;">1</MudPaper>
|
||||
<MudText>
|
||||
Нажмите «Разрешить»
|
||||
</MudText>
|
||||
</MudStack>
|
||||
|
||||
<MudStack Row AlignItems="AlignItems.Center">
|
||||
<MudPaper Elevation="0" Style="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;">1</MudPaper>
|
||||
<MudText>
|
||||
Скопируйте <strong>access_token</strong> из адресной строки после перенаправления
|
||||
</MudText>
|
||||
</MudStack>
|
||||
</MudStack>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user