Save
This commit is contained in:
Eugenio Chiodo
24
Shared/LoginDisplay.razor
Normal file
24
Shared/LoginDisplay.razor
Normal file
@@ -0,0 +1,24 @@
|
||||
@inject NavigationManager Navigation
|
||||
@inject SignOutSessionStateManager SignOutManager
|
||||
|
||||
<AuthorizeView>
|
||||
<Authorized>
|
||||
<button class="button" @onclick="BeginSignOut">
|
||||
@CascadingState.Localizer["Logout"]
|
||||
</button>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="authentication/login">
|
||||
@CascadingState.Localizer["Login"]
|
||||
</NavLink>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>
|
||||
|
||||
@code {
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
private async Task BeginSignOut(MouseEventArgs args)
|
||||
{
|
||||
await SignOutManager.SetSignOutState();
|
||||
Navigation.NavigateTo("authentication/logout");
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,11 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
<div class="relative flex flex-col md:flex-row w-full h-full">
|
||||
<NavMenu />
|
||||
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
<div class="block flex-1 relative w-full h-full">
|
||||
<div class="block absolute overflow-y-auto w-full h-full p-3 md:py-4 md:pl-2 md:pr-4">
|
||||
@Body
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,39 +1,222 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="">decePubClient</a>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex justify-between align-center pt-3 px-3 md:p-0">
|
||||
|
||||
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="oi oi-home" aria-hidden="true"></span> Home
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="counter">
|
||||
<span class="oi oi-plus" aria-hidden="true"></span> Counter
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="fetchdata">
|
||||
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="relative md:w-52">
|
||||
<button class="button is-rounded inline-flex is-small neoBtnSmall relative md:hidden" @onclick="ToggleNavMenu">
|
||||
<i class="ion-md-menu text-lg"></i>
|
||||
</button>
|
||||
<div class="absolute background md:relative top-full md:top-auto mt-2 w-52 md:w-full overflow-y-auto rounded-lg neomorph is-nsmall md:shadow-none z-50 @menuToggle md:block">
|
||||
<div class="flex flex-col space-y-3 p-3 md:p-4">
|
||||
|
||||
<div class="flex space-x-3 p-3 md:p-4 neomorph is-nxsmall rounded-xl bg-cover bg-no-repeat bg-right" style="background-image:linear-gradient(to left, var(--background) 55%, transparent), url('@(CascadingState.User?.BackgroundUrl)');">
|
||||
<a class="block h-8 w-8 md:h-12 md:w-12 flex-none" href="@CascadingState.User?.ProfileUrl" title="@CascadingState.User?.UserName">
|
||||
<img alt="@CascadingState.User?.UserName" class="h-8 w-8 md:h-12 md:w-12 object-cover rounded-full neomorph is-nxxsmall" src="@(CascadingState.User?.PictureUrl ?? "/imgs/icon-192.png")" />
|
||||
</a>
|
||||
<div class="flex flex-col w-full min-w-0 space-y-2">
|
||||
<p class="shrink truncate">
|
||||
<b title="@CascadingState.User?.DisplayName">
|
||||
@CascadingState.User?.DisplayName
|
||||
</b>
|
||||
</p>
|
||||
<p class="flex-1 min-w-6 truncate text-xs">
|
||||
<a class="underline" href="@CascadingState.User?.ProfileUrl" title="@CascadingState.User?.UserName">
|
||||
@CascadingState.User?.UserName
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="/" Match="NavLinkMatch.All">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-home"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Home"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="settings">
|
||||
<span class="icon is-left">
|
||||
<i class="ion-md-settings"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Settings"]</span>
|
||||
</NavLink>
|
||||
@*<AuthorizeView>
|
||||
<Authorized>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="administration">
|
||||
@Localizer["Administration"]
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="logout">
|
||||
@Localizer["Logout"]
|
||||
</NavLink>
|
||||
</Authorized>
|
||||
<NotAuthorized>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="login">
|
||||
@Localizer["Login"]
|
||||
</NavLink>
|
||||
</NotAuthorized>
|
||||
</AuthorizeView>*@
|
||||
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="administration">
|
||||
<span class="icon is-left has-text-danger">
|
||||
<i class="ion-md-switch"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Administration"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="login">
|
||||
<span class="icon is-left has-text-success">
|
||||
<i class="ion-md-log-in"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Login"]</span>
|
||||
</NavLink>
|
||||
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="logout">
|
||||
<span class="icon is-left has-text-danger">
|
||||
<i class="ion-md-log-out"></i>
|
||||
</span>
|
||||
<span>@CascadingState.Localizer["Logout"]</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="field is-grouped is-align-items-center">
|
||||
<div class="control">
|
||||
<button @onclick:stopPropagation @onclick:preventDefault @onclick="ResetToOriginalColour" class="button is-rounded has-icons-left is-small mb-0 ml-0 neoBtn" style="background:hsl(25,84%,88%) !important"
|
||||
type="button">
|
||||
<span class="icon is-left"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="control is-expanded is-flex">
|
||||
<input class="neoRange fullwidth" id="ColourIndex_@(RandomId)"
|
||||
max="359" min="0" @onchange="UpdateThemeColour" step="1" type="range" value="@ThemeIndexColour">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EditForm class="field is-grouped is-grouped-right" Context="DarkModeForm" Model="ThemeIsDarkMode">
|
||||
<div class="control">
|
||||
<label>
|
||||
<InputCheckbox class="toggle-checkbox"
|
||||
Value="ThemeIsDarkMode" ValueChanged="async v => await UpdateThemeDarkMode(v)" ValueExpression="() => ThemeIsDarkMode" />
|
||||
<div class="toggle-slot neomorph is-nxxsmall cursor-pointer">
|
||||
<div class="sun-icon-wrapper">
|
||||
<div class="sun-icon">
|
||||
<i class="ion-md-sunny text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toggle-button"></div>
|
||||
<div class="moon-icon-wrapper">
|
||||
<div class="moon-icon">
|
||||
<i class="ion-md-moon text-xs"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<img alt="" class="h-[30px]" src="imgs/icon-512.png">
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<a class="neomorph is-nxxsmall" href="settings">
|
||||
<img alt="@CascadingState.User?.UserName" class="object-cover w-[30px] h-[30px] rounded-full"
|
||||
src="@CascadingState.User?.PictureUrl">
|
||||
</a>
|
||||
|
||||
@* <button class="button is-rounded is-small has-icons-left neoBtnSmall "> *@
|
||||
@* $1$ <AuthorizeView> #1# *@
|
||||
@* $1$ <Authorized> #1# *@
|
||||
@* $1$ <span class="icon is-left"> #1# *@
|
||||
@* $1$ <img alt="@CascadingState.User.UserName" class="object-cover" src="@CascadingState.User.PictureUrl"> #1# *@
|
||||
@* $1$ </span> #1# *@
|
||||
@* $1$ </Authorized> #1# *@
|
||||
@* $1$ <NotAuthorized> #1# *@
|
||||
@* $1$ <span class="icon is-left"> #1# *@
|
||||
@* $1$ <i class="ion-md-person"></i> #1# *@
|
||||
@* $1$ </span> #1# *@
|
||||
@* $1$ </NotAuthorized> #1# *@
|
||||
@* $1$ </AuthorizeView> #1# *@
|
||||
@* </button> *@
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
string menuToggle = "hidden";
|
||||
bool IsThemeChanging { get; set; } = false;
|
||||
bool ThemeIsDarkMode { get; set; } = false;
|
||||
short ThemeIndexColour { get; set; } = 25;
|
||||
int RandomId { get; set; }
|
||||
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
await Task.Run(() =>
|
||||
{
|
||||
});
|
||||
RandomId = Random.Shared.Next(0, int.MaxValue);
|
||||
if (!CascadingState.Status.IsMobileMedia())
|
||||
menuToggle = default;
|
||||
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
}
|
||||
}
|
||||
ThemeIsDarkMode = CascadingState.PublicCacheData?.ThemeIsDarkMode ?? false;
|
||||
ThemeIndexColour = CascadingState.PublicCacheData?.ThemeIndexColour ?? 25;
|
||||
}
|
||||
|
||||
private void ToggleNavMenu()
|
||||
{
|
||||
menuToggle = menuToggle is { Length: > 0 } ? default : "hidden";
|
||||
}
|
||||
|
||||
protected async Task ResetToOriginalColour()
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
CascadingState.PublicCacheData.ThemeIndexColour =
|
||||
ThemeIndexColour =
|
||||
25;
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
|
||||
protected async Task UpdateThemeColour(ChangeEventArgs eventArgs)
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
var indexColour = short.Parse(eventArgs.Value?.ToString());
|
||||
CascadingState.PublicCacheData.ThemeIndexColour =
|
||||
ThemeIndexColour =
|
||||
indexColour;
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
|
||||
protected async Task UpdateThemeDarkMode(bool isDarkMode)
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
CascadingState.PublicCacheData.ThemeIsDarkMode =
|
||||
ThemeIsDarkMode = isDarkMode;
|
||||
Console.WriteLine("Dark updated {0}", ThemeIsDarkMode);
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIsDarkMode = ThemeIsDarkMode;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
}
|
||||
8
Shared/RedirectToLogin.razor
Normal file
8
Shared/RedirectToLogin.razor
Normal file
@@ -0,0 +1,8 @@
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
@code {
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
Navigation.NavigateTo($"authentication/login?returnUrl={Uri.EscapeDataString(Navigation.Uri)}");
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<div class="alert alert-secondary mt-4">
|
||||
<span class="oi oi-pencil me-2" aria-hidden="true"></span>
|
||||
<strong>@Title</strong>
|
||||
|
||||
<span class="text-nowrap">
|
||||
Please take our
|
||||
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2148851">brief survey</a>
|
||||
</span>
|
||||
and tell us what you think.
|
||||
</div>
|
||||
|
||||
@code {
|
||||
// Demonstrates how a parent component can supply parameters
|
||||
[Parameter]
|
||||
public string? Title { get; set; }
|
||||
}
|
||||
Reference in New Issue
Block a user