Добавьте файлы проекта.

2026-04-13 14:16:44 +03:00
parent b2b5a3945a
commit 37c997dbe0
120 changed files with 5364 additions and 0 deletions
--- a/PlaylistShared.Pwa/.dockerignore
+++ b/PlaylistShared.Pwa/.dockerignore
@@ -0,0 +1,30 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
+!**/.gitignore
+!.git/HEAD
+!.git/config
+!.git/packed-refs
+!.git/refs/heads/**
--- a/PlaylistShared.Pwa/App.razor
+++ b/PlaylistShared.Pwa/App.razor
@@ -0,0 +1,19 @@
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(Pages.NotFound)" >
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <NotAuthorized>
+                    @if (context.User.Identity?.IsAuthenticated != true)
+                    {
+                        <RedirectToLogin />
+                    }
+                    else
+                    {
+                        <p role="alert">You are not authorized to access this resource.</p>
+                    }
+                </NotAuthorized>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+    </Router>
+</CascadingAuthenticationState>
--- a/PlaylistShared.Pwa/Dockerfile
+++ b/PlaylistShared.Pwa/Dockerfile
@@ -0,0 +1,41 @@
+# ---- Stage 1: Build ----
+FROM mcr.microsoft.com/dotnet/sdk:10.0 AS build
+ARG BUILD_CONFIGURATION=Release
+WORKDIR /src
+
+# Устанавливаем Python (необходим для WebAssembly компиляции)
+RUN apt-get update && apt-get install -y python3 && ln -s /usr/bin/python3 /usr/bin/python
+
+# Устанавливаем workload для WebAssembly
+RUN dotnet workload install wasm-tools
+
+# Копируем csproj всех проектов для восстановления зависимостей
+COPY ["PlaylistShared.Pwa/PlaylistShared.Pwa.csproj", "PlaylistShared.Pwa/"]
+COPY ["PlaylistShared.Shared/PlaylistShared.Shared.csproj", "PlaylistShared.Shared/"]
+
+# Восстанавливаем зависимости
+RUN dotnet restore "PlaylistShared.Pwa/PlaylistShared.Pwa.csproj"
+
+# Копируем весь исходный код
+COPY . .
+
+# Переходим в папку проекта и публикуем
+WORKDIR "/src/PlaylistShared.Pwa"
+RUN dotnet publish "./PlaylistShared.Pwa.csproj" -c $BUILD_CONFIGURATION -o /app/publish
+
+RUN ls -la /app/publish/wwwroot
+
+# ---- Stage 2: Nginx ----
+FROM nginx:alpine AS final
+
+# Копируем кастомную конфигурацию Nginx
+COPY PlaylistShared.Pwa/nginx.conf /etc/nginx/nginx.conf
+
+# Удаляем дефолтную статику Nginx
+RUN rm -rf /usr/share/nginx/html/*
+
+# Копируем собранные файлы Blazor (wwwroot) в папку Nginx
+COPY --from=build /app/publish/wwwroot /usr/share/nginx/html
+
+# Открываем порт 80
+EXPOSE 80
--- a/PlaylistShared.Pwa/Layout/LoginDisplay.razor
+++ b/PlaylistShared.Pwa/Layout/LoginDisplay.razor
@@ -0,0 +1,20 @@
+@inject NavigationManager Navigation
+
+<AuthorizeView>
+    <Authorized>
+        <MudText Typo="Typo.body2" Class="d-inline mr-2">Здравствуйте, @context.User.Identity?.Name!</MudText>
+        <MudButton Variant="Variant.Text" Color="Color.Inherit" OnClick="BeginLogOut">Выйти</MudButton>
+    </Authorized>
+    <NotAuthorized>
+        <MudLink Href="/login" Color="Color.Inherit" Underline="Underline.Hover" Typo="Typo.body2">Вход</MudLink>
+        <MudText Class="d-inline mx-1">|</MudText>
+        <MudLink Href="/register" Color="Color.Inherit" Underline="Underline.Hover" Typo="Typo.body2">Регистрация</MudLink>
+    </NotAuthorized>
+</AuthorizeView>
+
+@code {
+    public void BeginLogOut()
+    {
+        Navigation.NavigateTo("/logout");
+    }
+}
--- a/PlaylistShared.Pwa/Layout/MainLayout.razor
+++ b/PlaylistShared.Pwa/Layout/MainLayout.razor
@@ -0,0 +1,100 @@
+@inherits LayoutComponentBase
+
+<MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
+<MudPopoverProvider />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
+<MudLayout>
+    <MudAppBar Elevation="1">
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@DrawerToggle" />
+        <MudText Typo="Typo.h6" Class="ml-2">Application</MudText>
+        <MudSpacer />
+        <LoginDisplay />
+        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" Class="ml-2" />
+        <MudLink Href="https://learn.microsoft.com/aspnet/core/" Target="_blank" Color="Color.Inherit" Underline="Underline.None" Class="ml-4">
+            About
+        </MudLink>
+    </MudAppBar>
+
+    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+        <NavMenu />
+    </MudDrawer>
+
+    <MudMainContent Class="pt-16 pa-4">
+        @Body
+    </MudMainContent>
+</MudLayout>
+
+@code {
+    private bool _drawerOpen = true;
+    private bool _isDarkMode = true;
+    private MudTheme? _theme;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _theme = new()
+        {
+            PaletteLight = _lightPalette,
+            PaletteDark = _darkPalette,
+            LayoutProperties = new LayoutProperties()
+        };
+    }
+
+    private void DrawerToggle()
+    {
+        _drawerOpen = !_drawerOpen;
+    }
+
+    private void DarkModeToggle()
+    {
+        _isDarkMode = !_isDarkMode;
+    }
+
+    private readonly PaletteLight _lightPalette = new()
+    {
+        Black = "#110e2d",
+        AppbarText = "#424242",
+        AppbarBackground = "rgba(255,255,255,0.8)",
+        DrawerBackground = "#ffffff",
+        GrayLight = "#e8e8e8",
+        GrayLighter = "#f9f9f9",
+    };
+
+    private readonly PaletteDark _darkPalette = new()
+    {
+        Primary = "#7e6fff",
+        Surface = "#1e1e2d",
+        Background = "#1a1a27",
+        BackgroundGray = "#151521",
+        AppbarText = "#92929f",
+        AppbarBackground = "rgba(26,26,39,0.8)",
+        DrawerBackground = "#1a1a27",
+        ActionDefault = "#74718e",
+        ActionDisabled = "#9999994d",
+        ActionDisabledBackground = "#605f6d4d",
+        TextPrimary = "#b2b0bf",
+        TextSecondary = "#92929f",
+        TextDisabled = "#ffffff33",
+        DrawerIcon = "#92929f",
+        DrawerText = "#92929f",
+        GrayLight = "#2a2833",
+        GrayLighter = "#1e1e2d",
+        Info = "#4a86ff",
+        Success = "#3dcb6c",
+        Warning = "#ffb545",
+        Error = "#ff3f5f",
+        LinesDefault = "#33323e",
+        TableLines = "#33323e",
+        Divider = "#292838",
+        OverlayLight = "#1e1e2d80",
+    };
+
+    public string DarkLightModeButtonIcon => _isDarkMode switch
+    {
+        true => Icons.Material.Rounded.AutoMode,
+        false => Icons.Material.Outlined.DarkMode,
+    };
+}
--- a/PlaylistShared.Pwa/Layout/MainLayout.razor.css
+++ b/PlaylistShared.Pwa/Layout/MainLayout.razor.css
@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
--- a/PlaylistShared.Pwa/Layout/NavMenu.razor
+++ b/PlaylistShared.Pwa/Layout/NavMenu.razor
@@ -0,0 +1,11 @@
+<MudNavMenu>
+    <MudNavLink Href="/" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Главная</MudNavLink>
+    <AuthorizeView>
+        <Authorized>
+            <MudNavLink Href="/my-playlists" Icon="@Icons.Material.Filled.QueueMusic">Мои плейлисты</MudNavLink>
+            <MudNavLink Href="/profile" Icon="@Icons.Material.Filled.Person">Профиль</MudNavLink>
+            <MudNavLink Href="/create" Icon="@Icons.Material.Filled.Add">Создать плейлист</MudNavLink>
+            <MudNavLink Href="/my" Icon="@Icons.Material.Filled.List">Мои ссылки</MudNavLink>
+        </Authorized>
+    </AuthorizeView>
+</MudNavMenu>
--- a/PlaylistShared.Pwa/Pages/AuthCallback.razor
+++ b/PlaylistShared.Pwa/Pages/AuthCallback.razor
@@ -0,0 +1,24 @@
+@page "/auth-callback"
+@using PlaylistShared.Pwa.Services
+@inject NavigationManager Navigation
+@inject AuthStateProvider AuthProvider
+@inject ISnackbar Snackbar
+
+@code {
+    [Parameter] public string? Token { get; set; }
+    [Parameter] public string? RefreshToken { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (!string.IsNullOrEmpty(Token) && !string.IsNullOrEmpty(RefreshToken))
+        {
+            await AuthProvider.MarkUserAsAuthenticated(Token, RefreshToken);
+            Navigation.NavigateTo("/");
+        }
+        else
+        {
+            Snackbar.Add("Ошибка аутентификации через Яндекс", Severity.Error);
+            Navigation.NavigateTo("/login");
+        }
+    }
+}
--- a/PlaylistShared.Pwa/Pages/Home.razor
+++ b/PlaylistShared.Pwa/Pages/Home.razor
@@ -0,0 +1,18 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
+<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor and the .NET 10 Template!</MudText>
+
+<MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true" Class="mb-6">
+    Before authentication will function correctly, you must configure your provider details in <code>Program.cs</code>.
+</MudAlert>
+
+
+<MudAlert Severity="Severity.Normal" ContentAlignment="HorizontalAlignment.Start">
+    You can find documentation and examples on our website here:
+    <MudLink Href="https://mudblazor.com" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
+        <b>www.mudblazor.com</b>
+    </MudLink>
+</MudAlert>
--- a/PlaylistShared.Pwa/Pages/Login.razor
+++ b/PlaylistShared.Pwa/Pages/Login.razor
@@ -0,0 +1,75 @@
+@page "/login"
+@using PlaylistShared.Shared.DTO
+@using PlaylistShared.Pwa.Services
+@inject HttpClient Http
+@inject AuthStateProvider AuthProvider
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
+
+<MudContainer MaxWidth="MaxWidth.Small" Class="mt-16">
+    <MudCard>
+        <MudCardContent Class="text-center">
+            <MudText Typo="Typo.h5" Class="mb-4">Вход в PlaylistShared</MudText>
+
+            <MudText Typo="Typo.body2" Class="mb-6">
+                Войдите через учётную запись Keycloak или используйте локальный аккаунт.
+            </MudText>
+
+            <!-- Кнопка входа через Keycloak -->
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="LoginWithKeycloak" StartIcon="@Icons.Material.Filled.Login" FullWidth="true" Class="mb-4">
+                Войти через Keycloak
+            </MudButton>
+
+            <MudDivider Class="my-4">или</MudDivider>
+
+            <!-- Локальная форма входа -->
+            <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" Type="InputType.Password" />
+
+            <MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="LocalLogin" FullWidth="true" Class="mt-4">
+                Войти (локально)
+            </MudButton>
+
+            <MudText Class="mt-4" Typo="Typo.body2">
+                Нет аккаунта? <MudLink Href="/register">Зарегистрироваться</MudLink>
+            </MudText>
+        </MudCardContent>
+    </MudCard>
+</MudContainer>
+
+@code {
+    private LoginModel _loginModel = new();
+
+    private void LoginWithKeycloak()
+    {
+        Navigation.NavigateTo("/api/openid/login", true);
+    }
+
+    private async Task LocalLogin()
+    {
+        var response = await Http.PostAsJsonAsync("/api/account/login", _loginModel);
+        if (response.IsSuccessStatusCode)
+        {
+            var result = await response.Content.ReadFromJsonAsync<ApiResponse<LoginResponse>>();
+            if (result?.Success == true && result.Data != null)
+            {
+                await AuthProvider.MarkUserAsAuthenticated(result.Data.Token, result.Data.RefreshToken);
+                Navigation.NavigateTo("/");
+            }
+            else
+            {
+                Snackbar.Add(result?.Error?.Message ?? "Ошибка входа", Severity.Error);
+            }
+        }
+        else
+        {
+            Snackbar.Add("Неверное имя пользователя или пароль", Severity.Error);
+        }
+    }
+
+    public class LoginModel
+    {
+        public string Username { get; set; } = "";
+        public string Password { get; set; } = "";
+    }
+}
--- a/PlaylistShared.Pwa/Pages/Logout.razor
+++ b/PlaylistShared.Pwa/Pages/Logout.razor
@@ -0,0 +1,12 @@
+@page "/logout"
+@using PlaylistShared.Pwa.Services
+@inject AuthStateProvider AuthProvider
+@inject NavigationManager Navigation
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        await AuthProvider.MarkUserAsLoggedOut();
+        Navigation.NavigateTo("/");
+    }
+}
--- a/PlaylistShared.Pwa/Pages/MyPlaylists.razor
+++ b/PlaylistShared.Pwa/Pages/MyPlaylists.razor
@@ -0,0 +1,125 @@
+@page "/my-playlists"
+@attribute [Authorize]
+@using PlaylistShared.Shared.DTO
+@inject HttpClient Http
+@inject ISnackbar Snackbar
+@inject NavigationManager Navigation
+
+<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
+    <MudCard>
+        <MudCardHeader>
+            <CardHeaderContent>
+                <MudText Typo="Typo.h5">Мои плейлисты</MudText>
+            </CardHeaderContent>
+            <CardHeaderActions>
+                <!-- Явно указываем T="bool" для MudSwitch -->
+                <MudSwitch T="bool" @bind-Checked="_showOnlyShared" Color="Color.Primary" Label="Только расшаренные" />
+                <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="LoadPlaylists" />
+            </CardHeaderActions>
+        </MudCardHeader>
+        <MudCardContent>
+            @if (_loading)
+            {
+                <MudProgressCircular Indeterminate />
+            }
+            else if (_playlists == null || !_playlists.Any())
+            {
+                <MudText>Плейлисты не найдены. Убедитесь, что вы сохранили корректный токен Яндекс.Музыки.</MudText>
+            }
+            else
+            {
+                <MudTable Items="@FilteredPlaylists" Hover="true" Breakpoint="Breakpoint.Sm">
+                    <HeaderContent>
+                        <MudTh>Название</MudTh>
+                        <MudTh>Треков</MudTh>
+                        <MudTh>Статус</MudTh>
+                        <MudTh></MudTh>
+                    </HeaderContent>
+                    <RowTemplate>
+                        <MudTd><MudText>@context.Title</MudText></MudTd>
+                        <MudTd>@context.TrackCount</MudTd>
+                        <MudTd>
+                            <!-- Явно указываем T="string" для MudChip -->
+                            @if (context.IsShared)
+                            {
+                                <MudChip T="string" Size="Size.Small" Color="Color.Success">Расшарен</MudChip>
+                            }
+                            else
+                            {
+                                <MudChip T="string" Size="Size.Small" Color="Color.Default">Не расшарен</MudChip>
+                            }
+                        </MudTd>
+                        <MudTd>
+                            @if (!context.IsShared)
+                            {
+                                <MudButton Variant="Variant.Text" Color="Color.Primary" OnClick="() => SharePlaylist(context)">Поделиться</MudButton>
+                            }
+                            else
+                            {
+                                <MudButton Variant="Variant.Text" Color="Color.Secondary" OnClick="() => GoToShared(context)">Управлять</MudButton>
+                            }
+                        </MudTd>
+                    </RowTemplate>
+                </MudTable>
+            }
+        </MudCardContent>
+    </MudCard>
+</MudContainer>
+
+@code {
+    private List<YandexPlaylistInfo> _playlists;
+    private bool _loading = true;
+    private bool _showOnlyShared = false;
+
+    private List<YandexPlaylistInfo> FilteredPlaylists => _showOnlyShared ? _playlists?.Where(p => p.IsShared).ToList() : _playlists;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadPlaylists();
+    }
+
+    private async Task LoadPlaylists()
+    {
+        _loading = true;
+        try
+        {
+            var response = await Http.GetFromJsonAsync<ApiResponse<List<YandexPlaylistInfo>>>("/api/playlist/my");
+            if (response?.Success == true)
+                _playlists = response.Data;
+            else
+                Snackbar.Add("Ошибка загрузки плейлистов", Severity.Error);
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _loading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task SharePlaylist(YandexPlaylistInfo playlist)
+    {
+        var request = new SharePlaylistRequest { Kind = playlist.Kind, OwnerUid = playlist.OwnerUid };
+        var response = await Http.PostAsJsonAsync("/api/playlist/share", request);
+        if (response.IsSuccessStatusCode)
+        {
+            Snackbar.Add("Плейлист расшарен", Severity.Success);
+            await LoadPlaylists();
+        }
+        else
+        {
+            Snackbar.Add("Ошибка расшаривания", Severity.Error);
+        }
+    }
+    
+    private void GoToShared(YandexPlaylistInfo playlist)
+    {
+        if (!string.IsNullOrEmpty(playlist.ShareToken))
+            Navigation.NavigateTo($"/shared/{playlist.ShareToken}");
+        else
+            Snackbar.Add("Ошибка: токен расшаривания не найден", Severity.Error);
+    }
+}
--- a/PlaylistShared.Pwa/Pages/NotFound.razor
+++ b/PlaylistShared.Pwa/Pages/NotFound.razor
@@ -0,0 +1,9 @@
+@page "/not-found"
+@layout MainLayout
+
+<PageTitle>Not Found</PageTitle>
+
+<MudText Typo="Typo.h3" GutterBottom="true">404 - Page Not Found</MudText>
+<MudText Class="mb-8">Sorry, the content you are looking for does not exist.</MudText>
+
+<MudButton Variant="Variant.Filled" Color="Color.Primary" Href="/">Go to Home</MudButton>
--- a/PlaylistShared.Pwa/Pages/Profile.razor
+++ b/PlaylistShared.Pwa/Pages/Profile.razor
@@ -0,0 +1,72 @@
+@page "/profile"
+@using Microsoft.AspNetCore.Authorization
+@using PlaylistShared.Shared.DTO
+@attribute [Authorize]
+@inject HttpClient Http
+@inject ISnackbar Snackbar
+
+<MudContainer MaxWidth="MaxWidth.Small" Class="mt-8">
+    <MudCard>
+        <MudCardHeader>
+            <CardHeaderContent>
+                <MudText Typo="Typo.h5">Личный кабинет</MudText>
+            </CardHeaderContent>
+        </MudCardHeader>
+        <MudCardContent>
+            <MudText Typo="Typo.body2" Class="mb-4">Здесь вы можете указать токен доступа к Яндекс.Музыке.</MudText>
+            <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>
+            <MudText Class="mt-4" Typo="Typo.body2">Статус: @_statusText</MudText>
+        </MudCardContent>
+    </MudCard>
+</MudContainer>
+
+@code {
+    private string _token = "";
+    private string _statusText = "Загрузка...";
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadStatus();
+    }
+
+    private async Task LoadStatus()
+    {
+        try
+        {
+            var response = await Http.GetFromJsonAsync<ApiResponse<YandexTokenStatus>>("/api/yandextoken/status");
+            if (response?.Success == true)
+            {
+                _statusText = response.Data.HasToken
+                    ? $"Токен установлен{(response.Data.IsValid ? "" : " (просрочен)")}"
+                    : "Токен не установлен";
+            }
+        }
+        catch { _statusText = "Не удалось загрузить статус"; }
+    }
+
+    private async Task SaveToken()
+    {
+        if (string.IsNullOrWhiteSpace(_token))
+        {
+            Snackbar.Add("Введите токен", Severity.Warning);
+            return;
+        }
+
+        var request = new SetYandexTokenRequest { Token = _token };
+        var response = await Http.PostAsJsonAsync("/api/yandextoken/set", request);
+        if (response.IsSuccessStatusCode)
+        {
+            Snackbar.Add("Токен сохранён", Severity.Success);
+            await LoadStatus();
+            _token = "";
+        }
+        else
+        {
+            Snackbar.Add("Ошибка сохранения токена", Severity.Error);
+        }
+    }
+
+    public class YandexTokenStatus { public bool HasToken { get; set; } public bool IsValid { get; set; } }
+    public class SetYandexTokenRequest { public string Token { get; set; } }
+}
--- a/PlaylistShared.Pwa/Pages/Register.razor
+++ b/PlaylistShared.Pwa/Pages/Register.razor
@@ -0,0 +1,67 @@
+@page "/register"
+@inject HttpClient Http
+@inject AuthStateProvider AuthProvider
+@inject NavigationManager Navigation
+@inject ISnackbar Snackbar
+
+<MudContainer MaxWidth="MaxWidth.Small" Class="mt-16">
+    <MudCard>
+        <MudCardContent Class="text-center">
+            <MudText Typo="Typo.h5" Class="mb-4">Регистрация</MudText>
+
+            <MudTextField @bind-Value="_model.Username" Label="Имя пользователя" Variant="Variant.Outlined" FullWidth="true" Class="mb-3" />
+            <MudTextField @bind-Value="_model.Email" Label="Email" Variant="Variant.Outlined" FullWidth="true" Class="mb-3" />
+            <MudTextField @bind-Value="_model.Password" Label="Пароль" Variant="Variant.Outlined" FullWidth="true" Type="InputType.Password" />
+            <MudTextField @bind-Value="_model.ConfirmPassword" Label="Подтверждение пароля" Variant="Variant.Outlined" FullWidth="true" Type="InputType.Password" />
+
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OnRegister" FullWidth="true" Class="mt-4">
+                Зарегистрироваться
+            </MudButton>
+
+            <MudText Class="mt-4" Typo="Typo.body2">
+                Уже есть аккаунт? <MudLink Href="/login">Войти</MudLink>
+            </MudText>
+        </MudCardContent>
+    </MudCard>
+</MudContainer>
+
+@code {
+    private RegisterModel _model = new();
+
+    private async Task OnRegister()
+    {
+        if (_model.Password != _model.ConfirmPassword)
+        {
+            Snackbar.Add("Пароли не совпадают", Severity.Error);
+            return;
+        }
+
+        var response = await Http.PostAsJsonAsync("/api/account/register", _model);
+        if (response.IsSuccessStatusCode)
+        {
+            var result = await response.Content.ReadFromJsonAsync<ApiResponse<LoginResponse>>();
+            if (result?.Success == true)
+            {
+                await AuthProvider.MarkUserAsAuthenticated(result.Data.Token, result.Data.RefreshToken);
+                Navigation.NavigateTo("/");
+            }
+            else
+            {
+                Snackbar.Add(result?.Error?.Message ?? "Ошибка регистрации", Severity.Error);
+            }
+        }
+        else
+        {
+            var error = await response.Content.ReadFromJsonAsync<ApiResponse<object>>();
+            Snackbar.Add(error?.Error?.Message ?? "Ошибка регистрации", Severity.Error);
+        }
+    }
+
+    public class RegisterModel
+    {
+        public string Username { get; set; }
+        public string Email { get; set; }
+        public string Password { get; set; }
+        public string ConfirmPassword { get; set; }
+    }
+}
--- a/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
+++ b/PlaylistShared.Pwa/Pages/SharedPlaylistView.razor
@@ -0,0 +1,163 @@
+@page "/shared/{token}"
+@attribute [Authorize]
+@using PlaylistShared.Shared.DTO
+@using PlaylistShared.Shared.Enums
+@using PlaylistShared.Pwa.Services
+@using PlaylistShared.Shared.Models
+@inject HttpClient Http
+@inject ISnackbar Snackbar
+@inject NavigationManager Navigation
+@inject AuthenticationStateProvider AuthProvider
+
+<MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
+    @if (_loading)
+    {
+        <MudProgressCircular Indeterminate />
+    }
+    else if (_playlist == null)
+    {
+        <MudAlert Severity="Severity.Error">Плейлист не найден или у вас нет доступа</MudAlert>
+    }
+    else
+    {
+        <MudCard>
+            <MudCardHeader>
+                <CardHeaderContent>
+                    <MudText Typo="Typo.h5">@_playlist.Title</MudText>
+                    <MudText Typo="Typo.body2" Color="Color.Secondary">Владелец: @_playlist.Creator?.UserName</MudText>
+                </CardHeaderContent>
+            </MudCardHeader>
+            <MudCardContent>
+                @if (_isCreator)
+                {
+                    <MudPaper Class="pa-4 mb-4" Elevation="0" Style="background-color: rgba(0,0,0,0.05); border-radius: 8px;">
+                        <MudText Typo="Typo.h6" GutterBottom>Настройки доступа</MudText>
+                        <MudGrid>
+                            <MudItem xs="12" sm="4">
+                                <MudSelect T="ViewPermission" Label="Просмотр" @bind-Value="_editPermissions.ViewPermission" Variant="Variant.Outlined" FullWidth="true">
+                                    <MudSelectItem Value="ViewPermission.Everyone">Все</MudSelectItem>
+                                    <MudSelectItem Value="ViewPermission.AuthorizedOnly">Только авторизованные</MudSelectItem>
+                                </MudSelect>
+                            </MudItem>
+                            <MudItem xs="12" sm="4">
+                                <MudSelect T="EditPermission" Label="Добавление треков" @bind-Value="_editPermissions.AddPermission" Variant="Variant.Outlined" FullWidth="true">
+                                    <MudSelectItem Value="EditPermission.Everyone">Все</MudSelectItem>
+                                    <MudSelectItem Value="EditPermission.AuthorizedOnly">Только авторизованные</MudSelectItem>
+                                    <MudSelectItem Value="EditPermission.AddedByUserOnly">Только добавивший</MudSelectItem>
+                                </MudSelect>
+                            </MudItem>
+                            <MudItem xs="12" sm="4">
+                                <MudSelect T="EditPermission" Label="Удаление треков" @bind-Value="_editPermissions.RemovePermission" Variant="Variant.Outlined" FullWidth="true">
+                                    <MudSelectItem Value="EditPermission.Everyone">Все</MudSelectItem>
+                                    <MudSelectItem Value="EditPermission.AuthorizedOnly">Только авторизованные</MudSelectItem>
+                                    <MudSelectItem Value="EditPermission.AddedByUserOnly">Только добавивший</MudSelectItem>
+                                </MudSelect>
+                            </MudItem>
+                        </MudGrid>
+                        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SavePermissions" Disabled="_savingPermissions">
+                            @if (_savingPermissions)
+                            {
+                                <MudProgressCircular Size="Size.Small" Indeterminate />
+                            }
+                            else
+                            {
+
+                                <span>Сохранить</span>
+                            }
+                        </MudButton>
+                    </MudPaper>
+                }
+
+                <!-- Здесь будет отображение треков и управление -->
+                <MudText>Функционал управления треками в разработке</MudText>
+            </MudCardContent>
+        </MudCard>
+    }
+</MudContainer>
+
+@code {
+    [Parameter] public string Token { get; set; }
+
+    private SharedPlaylistDto? _playlist;
+    private bool _loading = true;
+    private bool _isCreator;
+    private UpdatePermissionsDto _editPermissions = new();
+    private bool _savingPermissions;
+    private string? _currentUserId;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthProvider.GetAuthenticationStateAsync();
+        _currentUserId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
+        await LoadPlaylist();
+    }
+
+    private async Task LoadPlaylist()
+    {
+        try
+        {
+            var response = await Http.GetFromJsonAsync<ApiResponse<SharedPlaylistDto>>($"/api/sharedplaylist/{Token}");
+            if (response?.Success == true)
+            {
+                _playlist = response.Data;
+                _isCreator = _playlist.CreatorUserId.ToString() == _currentUserId;
+                if (_isCreator)
+                {
+                    _editPermissions = new UpdatePermissionsDto
+                    {
+                        ViewPermission = _playlist.ViewPermission,
+                        AddPermission = _playlist.AddPermission,
+                        RemovePermission = _playlist.RemovePermission
+                    };
+                }
+            }
+            else
+            {
+                Snackbar.Add(response?.Error?.Message ?? "Не удалось загрузить плейлист", Severity.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _loading = false;
+            StateHasChanged();
+        }
+    }
+
+    private async Task SavePermissions()
+    {
+        _savingPermissions = true;
+        try
+        {
+            var response = await Http.PutAsJsonAsync($"/api/sharedplaylist/{Token}/permissions", _editPermissions);
+            if (response.IsSuccessStatusCode)
+            {
+                var result = await response.Content.ReadFromJsonAsync<ApiResponse<SharedPlaylistDto>>();
+                if (result?.Success == true)
+                {
+                    _playlist = result.Data;
+                    Snackbar.Add("Права доступа обновлены", Severity.Success);
+                }
+                else
+                {
+                    Snackbar.Add(result?.Error?.Message ?? "Ошибка обновления", Severity.Error);
+                }
+            }
+            else
+            {
+                Snackbar.Add("Ошибка сохранения прав", Severity.Error);
+            }
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Ошибка: {ex.Message}", Severity.Error);
+        }
+        finally
+        {
+            _savingPermissions = false;
+        }
+    }
+}
--- a/PlaylistShared.Pwa/PlaylistShared.Pwa.csproj
+++ b/PlaylistShared.Pwa/PlaylistShared.Pwa.csproj
@@ -0,0 +1,27 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.*" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.*" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="10.*" />
+    <PackageReference Include="MudBlazor" Version="9.*" />
+    <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="8.17.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\PlaylistShared.Shared\PlaylistShared.Shared.csproj" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ServiceWorker Include="wwwroot\\service-worker.js" PublishedContent="wwwroot\\service-worker.published.js" />
+  </ItemGroup>
+
+</Project>
--- a/PlaylistShared.Pwa/Program.cs
+++ b/PlaylistShared.Pwa/Program.cs
@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components.Authorization;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using MudBlazor.Services;
+using PlaylistShared.Pwa;
+using PlaylistShared.Pwa.Services;
+
+internal class Program
+{
+    private static async global::System.Threading.Tasks.Task Main(string[] args)
+    {
+        var builder = WebAssemblyHostBuilder.CreateDefault(args);
+        builder.RootComponents.Add<App>("#app");
+        builder.RootComponents.Add<HeadOutlet>("head::after");
+
+        builder.Services.AddMudServices();
+        builder.Services.AddScoped(sp =>
+        {
+            var apiUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
+            return new HttpClient { BaseAddress = new Uri(apiUrl) };
+        });
+
+        builder.Services.AddScoped<TokenStorage>();
+        builder.Services.AddScoped<AuthStateProvider>();
+        builder.Services.AddScoped<AuthenticationStateProvider>(sp => sp.GetRequiredService<AuthStateProvider>());
+        builder.Services.AddScoped<ApiClient>();
+
+        /*
+        builder.Services.AddOidcAuthentication(options =>
+        {
+            // Configure your authentication provider options here.
+            // For more information, see https://aka.ms/blazor-standalone-auth
+            builder.Configuration.Bind("Local", options.ProviderOptions);
+        });
+        */
+        builder.Services.AddAuthorizationCore();
+        builder.Services.AddCascadingAuthenticationState();
+
+        await builder.Build().RunAsync();
+    }
+}
--- a/PlaylistShared.Pwa/Properties/launchSettings.json
+++ b/PlaylistShared.Pwa/Properties/launchSettings.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7225;http://localhost:5181",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
--- a/PlaylistShared.Pwa/Services/ApiClient.cs
+++ b/PlaylistShared.Pwa/Services/ApiClient.cs
@@ -0,0 +1,19 @@
+using PlaylistShared.Shared.DTO;
+using System.Net.Http.Json;
+
+namespace PlaylistShared.Pwa.Services;
+
+public class ApiClient
+{
+    private readonly HttpClient _http;
+
+    public ApiClient(HttpClient http) => _http = http;
+
+    public async Task<LoginResponse?> RefreshTokenAsync(string? refreshToken)
+    {
+        var response = await _http.PostAsJsonAsync("/api/account/refresh-token", new RefreshTokenRequest { RefreshToken = refreshToken });
+        if (!response.IsSuccessStatusCode) return null;
+        var apiResponse = await response.Content.ReadFromJsonAsync<ApiResponse<LoginResponse>>();
+        return apiResponse?.Data;
+    }
+}
--- a/PlaylistShared.Pwa/Services/AuthStateProvider.cs
+++ b/PlaylistShared.Pwa/Services/AuthStateProvider.cs
@@ -0,0 +1,101 @@
+using Microsoft.AspNetCore.Components.Authorization;
+using System.IdentityModel.Tokens.Jwt;
+using System.Net.Http.Headers;
+using System.Security.Claims;
+
+namespace PlaylistShared.Pwa.Services;
+
+public class AuthStateProvider : AuthenticationStateProvider, IDisposable
+{
+    private readonly TokenStorage _tokenStorage;
+    private readonly ApiClient _apiClient;
+    private readonly HttpClient _http;
+    private Timer? _refreshTimer;
+    private ClaimsPrincipal _currentUser = new(new ClaimsIdentity());
+
+    public AuthStateProvider(TokenStorage tokenStorage, ApiClient apiClient, HttpClient http)
+    {
+        _tokenStorage = tokenStorage;
+        _apiClient = apiClient;
+        _http = http;
+    }
+
+    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
+    {
+        var (token, refreshToken) = await _tokenStorage.GetTokensAsync();
+        if (string.IsNullOrEmpty(token))
+            return new AuthenticationState(_currentUser);
+
+        var principal = ParseToken(token);
+        if (principal == null)
+            return new AuthenticationState(_currentUser);
+
+        _currentUser = principal;
+        _http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
+        ScheduleTokenRefresh(token, refreshToken);
+        return new AuthenticationState(principal);
+    }
+
+    public async Task MarkUserAsAuthenticated(string token, string refreshToken)
+    {
+        await _tokenStorage.SetTokensAsync(token, refreshToken);
+        var principal = ParseToken(token);
+        _currentUser = principal ?? new ClaimsPrincipal(new ClaimsIdentity());
+        _http.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
+        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
+    }
+
+    public async Task MarkUserAsLoggedOut()
+    {
+        await _tokenStorage.ClearTokensAsync();
+        _currentUser = new ClaimsPrincipal(new ClaimsIdentity());
+        _http.DefaultRequestHeaders.Authorization = null;
+        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
+    }
+
+    private ClaimsPrincipal? ParseToken(string token)
+    {
+        try
+        {
+            var handler = new JwtSecurityTokenHandler();
+            var jwt = handler.ReadJwtToken(token);
+            var identity = new ClaimsIdentity(jwt.Claims, "jwt");
+            return new ClaimsPrincipal(identity);
+        }
+        catch (Exception ex)
+        {
+            return null;
+        }
+    }
+
+    private void ScheduleTokenRefresh(string token, string? refreshToken)
+    {
+        var handler = new JwtSecurityTokenHandler();
+        var jwt = handler.ReadJwtToken(token);
+        var expiresAt = jwt.ValidTo;
+        var timeToExpiry = expiresAt - DateTime.UtcNow;
+        var refreshTime = timeToExpiry - TimeSpan.FromMinutes(5);
+
+        if (refreshTime > TimeSpan.Zero && !string.IsNullOrEmpty(refreshToken))
+        {
+            _refreshTimer?.Dispose();
+            _refreshTimer = new Timer(async _ =>
+            {
+                try
+                {
+                    var newToken = await _apiClient.RefreshTokenAsync(refreshToken);
+                    if (newToken != null)
+                        await MarkUserAsAuthenticated(newToken.Token, newToken.RefreshToken);
+                    else
+                        await MarkUserAsLoggedOut();
+                }
+                catch
+                {
+                    await MarkUserAsLoggedOut();
+                }
+            }, null, (int)refreshTime.TotalMilliseconds, Timeout.Infinite);
+        }
+    }
+
+    public void Dispose() => _refreshTimer?.Dispose();
+}
--- a/PlaylistShared.Pwa/Services/TokenStorage.cs
+++ b/PlaylistShared.Pwa/Services/TokenStorage.cs
@@ -0,0 +1,31 @@
+using Microsoft.JSInterop;
+
+namespace PlaylistShared.Pwa.Services;
+
+public class TokenStorage
+{
+    private readonly IJSRuntime _js;
+    private const string TokenKey = "jwt_token";
+    private const string RefreshTokenKey = "refresh_token";
+
+    public TokenStorage(IJSRuntime js) => _js = js;
+
+    public async Task SetTokensAsync(string token, string refreshToken)
+    {
+        await _js.InvokeVoidAsync("localStorage.setItem", TokenKey, token);
+        await _js.InvokeVoidAsync("localStorage.setItem", RefreshTokenKey, refreshToken);
+    }
+
+    public async Task<(string? token, string? refreshToken)> GetTokensAsync()
+    {
+        var token = await _js.InvokeAsync<string>("localStorage.getItem", TokenKey);
+        var refreshToken = await _js.InvokeAsync<string>("localStorage.getItem", RefreshTokenKey);
+        return (token, refreshToken);
+    }
+
+    public async Task ClearTokensAsync()
+    {
+        await _js.InvokeVoidAsync("localStorage.removeItem", TokenKey);
+        await _js.InvokeVoidAsync("localStorage.removeItem", RefreshTokenKey);
+    }
+}
--- a/PlaylistShared.Pwa/_Imports.razor
+++ b/PlaylistShared.Pwa/_Imports.razor
@@ -0,0 +1,15 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using PlaylistShared.Pwa
+@using PlaylistShared.Pwa.Layout
+@using PlaylistShared.Pwa.Services
+@using MudBlazor
+@using Microsoft.AspNetCore.Authorization
+@using PlaylistShared.Shared.DTO
--- a/PlaylistShared.Pwa/nginx.conf
+++ b/PlaylistShared.Pwa/nginx.conf
@@ -0,0 +1,55 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Сжатие
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/wasm application/json;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Для Service Worker – запрещаем кэширование, чтобы он всегда был свежим
+        location = /service-worker.js {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+            try_files $uri =404;
+        }
+
+        # Для файла манифеста Service Worker assets – тоже не кэшируем
+        location = /service-worker-assets.js {
+            add_header Cache-Control "no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+            try_files $uri =404;
+        }
+
+        # Основной SPA fallback: все неизвестные пути отдаём через index.html
+        location / {
+            try_files $uri $uri/ /index.html?$args;
+        }
+
+        # Кэширование статических ресурсов (css, js, изображения, шрифты)
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Для .wasm файлов – правильный MIME‑тип и кэширование
+        location ~* \.wasm$ {
+            default_type application/wasm;
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+    }
+}
--- a/PlaylistShared.Pwa/wwwroot/appsettings.Development.json
+++ b/PlaylistShared.Pwa/wwwroot/appsettings.Development.json
@@ -0,0 +1,3 @@
+{
+  "ApiBaseUrl": "http://localhost:5053"
+}
--- a/PlaylistShared.Pwa/wwwroot/appsettings.json
+++ b/PlaylistShared.Pwa/wwwroot/appsettings.json
@@ -0,0 +1,3 @@
+{
+  "ApiBaseUrl": ""
+}
--- a/PlaylistShared.Pwa/wwwroot/css/app.css
+++ b/PlaylistShared.Pwa/wwwroot/css/app.css
@@ -0,0 +1,110 @@
+html, body {
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+}
+
+#blazor-error-ui {
+    color-scheme: light;
+    background: rgba(30, 30, 45, 0.95);
+    color: #f5f5f7;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(6px);
+    box-sizing: border-box;
+    display: none;
+    left: 50%;
+    right: auto;
+    bottom: 1rem;
+    width: min(52rem, calc(100vw - 2rem));
+    transform: translateX(-50%);
+    padding: 0.85rem 4rem 0.85rem 1rem;
+    position: fixed;
+    z-index: 2000;
+}
+
+    #blazor-error-ui .reload {
+        color: #594AE2;
+        font-weight: 600;
+        margin-left: 0.5rem;
+        text-decoration: none;
+    }
+
+        #blazor-error-ui .reload:hover {
+            text-decoration: underline;
+        }
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 1rem;
+        top: 0.55rem;
+        width: 1.75rem;
+        height: 1.75rem;
+        line-height: 1.65rem;
+        text-align: center;
+        border-radius: 999px;
+        color: #d7d7df;
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+        #blazor-error-ui .dismiss:hover {
+            background: rgba(255, 255, 255, 0.12);
+        }
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+    .blazor-error-boundary::after {
+        content: "An error has occurred."
+    }
+
+.loading-progress {
+    position: absolute;
+    display: block;
+    width: 8rem;
+    height: 8rem;
+    inset: 20vh 0 auto 0;
+    margin: 0 auto 0 auto;
+}
+
+    .loading-progress circle {
+        fill: none;
+        stroke: #e0e0e0;
+        stroke-width: 0.6rem;
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
+    }
+
+        .loading-progress circle:last-child {
+            stroke: #594AE2;
+            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
+            transition: stroke-dasharray 0.05s ease-in-out;
+        }
+
+.loading-progress-text {
+    position: absolute;
+    text-align: center;
+    font-weight: bold;
+    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+}
+
+    .loading-progress-text:after {
+        content: var(--blazor-load-percentage-text, "Loading");
+    }
+
+code {
+    color: #c02d76;
+}
+
+.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
+    color: var(--bs-secondary-color);
+    text-align: end;
+}
+
+.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
+    text-align: start;
+}
--- a/PlaylistShared.Pwa/wwwroot/favicon.png
+++ b/PlaylistShared.Pwa/wwwroot/favicon.png
--- a/PlaylistShared.Pwa/wwwroot/icon-192.png
+++ b/PlaylistShared.Pwa/wwwroot/icon-192.png
--- a/PlaylistShared.Pwa/wwwroot/icon-512.png
+++ b/PlaylistShared.Pwa/wwwroot/icon-512.png
--- a/PlaylistShared.Pwa/wwwroot/index.html
+++ b/PlaylistShared.Pwa/wwwroot/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PlaylistShared.Pwa</title>
+    <base href="/" />
+    <link rel="preload" id="webassembly" />
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="_content/MudBlazor/MudBlazor.min.css" />
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="PlaylistShared.Pwa.styles.css" rel="stylesheet" />
+    <link href="manifest.webmanifest" rel="manifest" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <script type="importmap"></script>
+</head>
+
+<body>
+    <div id="app">
+        <svg class="loading-progress">
+            <circle r="40%" cx="50%" cy="50%" />
+            <circle r="40%" cx="50%" cy="50%" />
+        </svg>
+        <div class="loading-progress-text"></div>
+    </div>
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="." class="reload">Reload</a>
+        <span class="dismiss">🗙</span>
+    </div>
+    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
+    <script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' });</script>
+</body>
+
+</html>
--- a/PlaylistShared.Pwa/wwwroot/manifest.webmanifest
+++ b/PlaylistShared.Pwa/wwwroot/manifest.webmanifest
@@ -0,0 +1,22 @@
+{
+  "name": "PlaylistShared.Pwa",
+  "short_name": "PlaylistShared.Pwa",
+  "id": "./",
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#03173d",
+  "prefer_related_applications": false,
+  "icons": [
+    {
+      "src": "icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ]
+}
--- a/PlaylistShared.Pwa/wwwroot/service-worker.js
+++ b/PlaylistShared.Pwa/wwwroot/service-worker.js
@@ -0,0 +1,4 @@
+// In development, always fetch from the network and do not enable offline support.
+// This is because caching would make development more difficult (changes would not
+// be reflected on the first load after each change).
+self.addEventListener('fetch', () => { });
--- a/PlaylistShared.Pwa/wwwroot/service-worker.published.js
+++ b/PlaylistShared.Pwa/wwwroot/service-worker.published.js
@@ -0,0 +1,55 @@
+// Caution! Be sure you understand the caveats before publishing an application with
+// offline support. See https://aka.ms/blazor-offline-considerations
+
+self.importScripts('./service-worker-assets.js');
+self.addEventListener('install', event => event.waitUntil(onInstall(event)));
+self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
+self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
+
+const cacheNamePrefix = 'offline-cache-';
+const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
+const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/, /\.webmanifest$/ ];
+const offlineAssetsExclude = [ /^service-worker\.js$/ ];
+
+// Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.
+const base = "/";
+const baseUrl = new URL(base, self.origin);
+const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href);
+
+async function onInstall(event) {
+    console.info('Service worker: Install');
+
+    // Fetch and cache all matching items from the assets manifest
+    const assetsRequests = self.assetsManifest.assets
+        .filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
+        .filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
+        .map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' }));
+    await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
+}
+
+async function onActivate(event) {
+    console.info('Service worker: Activate');
+
+    // Delete unused caches
+    const cacheKeys = await caches.keys();
+    await Promise.all(cacheKeys
+        .filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
+        .map(key => caches.delete(key)));
+}
+
+async function onFetch(event) {
+    let cachedResponse = null;
+    if (event.request.method === 'GET') {
+        // For all navigation requests, try to serve index.html from cache,
+        // unless that request is for an offline resource.
+        // If you need some URLs to be server-rendered, edit the following check to exclude those URLs
+        const shouldServeIndexHtml = event.request.mode === 'navigate'
+            && !manifestUrlList.some(url => url === event.request.url);
+
+        const request = shouldServeIndexHtml ? 'index.html' : event.request;
+        const cache = await caches.open(cacheName);
+        cachedResponse = await cache.match(request);
+    }
+
+    return cachedResponse || fetch(event.request);
+}