Files
PlaylistShared/PlaylistShared.Pwa/Components/YandexTokenInstructions.razor

75 lines
2.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@* Компонент с инструкцией по получению токена Яндекс.Музыки *@
<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>