Creata pagina "user"

SteUp.Shared/Components/Pages/Home.razor

@@ -1,4 +0,0 @@
-@page "/home"
-@attribute [Authorize]
-
-<h3>Home</h3>

SteUp.Shared/Components/Pages/Index.razor

@@ -7,6 +7,6 @@
 @code {
     protected override void OnInitialized()
     {
-        NavigationManager.NavigateTo("/home");
+        NavigationManager.NavigateTo("/ispezioni");
     }
 }

SteUp.Shared/Components/Pages/Ispezioni.razor

@@ -0,0 +1,9 @@
+@page "/ispezioni"
+@attribute [Authorize]
+@using SteUp.Shared.Components.Layout
+
+<HeaderLayout Title="Ispezioni"/>
+
+<div class="container">
+    
+</div>

SteUp.Shared/Components/Pages/User.razor

@@ -0,0 +1,115 @@
+@page "/user"
+@attribute [Authorize]
+@using SteUp.Shared.Components.Layout
+@using SteUp.Shared.Components.SingleElements
+@using SteUp.Shared.Core.Authorization.Enum
+@using SteUp.Shared.Core.Helpers
+@using SteUp.Shared.Core.Interface.System.Network
+@using SteUp.Shared.Core.Services
+@using SteUp.Shared.Core.Utility
+@inject AppAuthenticationStateProvider AuthenticationStateProvider
+@inject INetworkService NetworkService
+
+<HeaderLayout Title="Profilo"/>
+
+@if (IsLoggedIn)
+{
+    <div class="container content pb-safe-area">
+        <div class="container-primary-info">
+            <div class="section-primary-info">
+                <MudAvatar Style="height: 70px; width: 70px; font-size: 2rem; font-weight: bold"
+                           Color="Color.Secondary">
+                    @UtilityString.ExtractInitials(UserSession.User.Fullname)
+                </MudAvatar>
+
+                <div class="personal-info">
+                    <span class="info-nome">@UserSession.User.Fullname</span>
+                    @if (UserSession.User.KeyGroup is not null)
+                    {
+                        <span
+                            class="info-section">@(((KeyGroupEnum)UserSession.User.KeyGroup).ConvertToHumanReadable())</span>
+                    }
+                </div>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="section-info">
+                <div class="section-personal-info">
+                    <div>
+                        <span class="info-title">Profilo azienda</span>
+                        <span class="info-text">@CodHash</span>
+                    </div>
+                </div>
+                
+                <div class="section-personal-info">
+                    <div>
+                        <span class="info-title">Status</span>
+                        @if (NetworkService.ConnectionAvailable)
+                        {
+                            <div class="status online">
+                                <i class="ri-wifi-line"></i>
+                                <span>Online</span>
+                            </div>
+                        }
+                        else
+                        {
+                            <div class="status offline">
+                                <i class="ri-wifi-off-line"></i>
+                                <span>Offline</span>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container-button">
+            <MudButton Class="button-settings green-icon"
+                       FullWidth="true"
+                       StartIcon="@Icons.Material.Outlined.Sync"
+                       Size="Size.Medium"
+                       OnClick="@UpdateDb"
+                       Variant="Variant.Outlined">
+                Sincronizza ispezioni
+            </MudButton>
+        </div>
+
+        <div class="container-button">
+            <MudButton Class="button-settings exit"
+                       FullWidth="true"
+                       Color="Color.Error"
+                       Size="Size.Medium"
+                       OnClick="@Logout"
+                       Variant="Variant.Outlined">
+                Esci
+            </MudButton>
+        </div>
+        
+        <AppVersion/>
+    </div>
+}
+
+@code {
+    private bool IsLoggedIn { get; set; }
+    private string? CodHash { get; set; } = "";
+
+    protected override async Task OnInitializedAsync()
+    {
+        IsLoggedIn = await UserSession.IsLoggedIn();
+        CodHash = LocalStorage.GetString("codHash");
+        StateHasChanged();
+    }
+
+    private void UpdateDb()
+    {
+    }
+
+    private async Task Logout()
+    {
+        await AuthenticationStateProvider.SignOut();
+        IsLoggedIn = await UserSession.IsLoggedIn();
+        StateHasChanged();
+    }
+
+}

SteUp.Shared/Components/Pages/User.razor.css

@@ -0,0 +1,83 @@
+.container-primary-info {
+    background: var(--light-card-background);
+    width: 100%;
+    margin-bottom: 2rem;
+    border-radius: 12px;
+}
+
+.container-primary-info .divider {
+    margin: 0 0 0 7rem;
+    width: unset;
+}
+
+.section-primary-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+    padding: .8rem 1.2rem .4rem;
+}
+
+.personal-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: normal;
+}
+
+.info-nome {
+    color: var(--mud-palette-text-primary);
+    font-weight: 800;
+    font-size: x-large;
+}
+
+.info-section {
+    color: var(--mud-palette-gray-default);
+    font-size: medium;
+    font-weight: 600;
+}
+
+.section-info {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    padding: .4rem 1.2rem .8rem;
+}
+
+.section-personal-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.section-personal-info > div {
+    display: flex;
+    flex-direction: column;
+    line-height: normal;
+    margin: .25rem 0;
+}
+
+.info-title {
+    color: var(--mud-palette-gray-darker);
+    font-weight: 800;
+}
+
+.info-text {
+    color: var(--mud-palette-text-secondary);
+    font-weight: 700;
+    font-size: small;
+}
+
+.content ::deep .user-button { border: 1px solid var(--card-border-color) !important; }
+
+.user-button > i { font-size: large; }
+
+.user-button > span {
+    font-size: medium;
+    font-weight: 600;
+}
+
+.status { font-weight: 700; }
+
+.status.online { color: var(--mud-palette-success); }
+
+.status.offline { color: var(--mud-palette-error); }