Pagina profilo e modiche al theme

Template.Shared/Components/Pages/Calendar.razor

@@ -2,7 +2,7 @@
 @attribute [Authorize]
 @using Template.Shared.Components.Layout
 
-<HeaderLayout Title="Agenda" />
+<HeaderLayout Title="Agenda" ShowFilter="true" />
 
 <div class="content">
     <MudButtonGroup Size="Size.Small" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Filled">

Template.Shared/Components/Pages/Home.razor

@@ -1,10 +1,23 @@
 @page "/"
+@using Template.Shared.Core.Interface
+@using Template.Shared.Interfaces
 @attribute [Authorize]
+@inject IFormFactor FormFactor
+@inject INetworkService NetworkService
 
 @code
 {
     protected override Task OnInitializedAsync()
     {
+        var lastSyncDate = DateOnly.FromDateTime(LocalStorage.Get<DateTime>("last-sync"));
+
+        if (!FormFactor.IsWeb() && NetworkService.IsNetworkAvailable() && lastSyncDate < DateOnly.FromDateTime(DateTime.Now))
+        {
+            //NavigationManager.NavigateTo("/sync");
+            NavigationManager.NavigateTo("/Calendar");
+            return base.OnInitializedAsync();
+        }
+
         NavigationManager.NavigateTo("/Calendar");
         return base.OnInitializedAsync();
     }

Template.Shared/Components/Pages/Login.razor

@@ -11,7 +11,7 @@
 else
 {
     <div class="center-box container d-flex justify-content-center align-items-center min-vh-100">
-        <div class="row border rounded-4 bg-white shadow box-area">
+        <div class="row rounded-4 bg-white">
 
             <div class="appName rounded-4 d-flex justify-content-center align-items-center flex-column">
                 <span>Nome App</span>
@@ -23,7 +23,7 @@ else
                         <MudTextField @bind-Value="UserData.Username" Label="Username" Variant="Variant.Text"/>
                     </div>
                     <div class="input-group mb-2">
-                        <MudTextField @bind-Value="UserData.Password" Label="Password" Variant="Variant.Text"/>
+                        <MudTextField InputType="@_passwordInput" @bind-Value="UserData.Password" Label="Password" Variant="Variant.Text" Adornment="Adornment.End" AdornmentIcon="@_passwordInputIcon" OnAdornmentClick="ShowPassword" AdornmentAriaLabel="Show Password" />
                     </div>
                     <div class="input-group mb-4">
                         <MudTextField @bind-Value="UserData.CodHash" Label="Profilo azienda" Variant="Variant.Text"/>
@@ -55,6 +55,26 @@ else
     private string ErrorMessage { get; set; } = "";
     private bool _attemptFailed;
 
+    private bool _isShow;
+    private InputType _passwordInput = InputType.Password;
+    private string _passwordInputIcon = Icons.Material.Rounded.VisibilityOff;
+
+    private void ShowPassword()
+    {
+        @if (_isShow)
+        {
+            _isShow = false;
+            _passwordInputIcon = Icons.Material.Rounded.VisibilityOff;
+            _passwordInput = InputType.Password;
+        }
+        else
+        {
+            _isShow = true;
+            _passwordInputIcon = Icons.Material.Rounded.Visibility;
+            _passwordInput = InputType.Text;
+        }
+    }
+
     protected override void OnInitialized()
     {
         UserData.CodHash = LocalStorage.GetString("codHash");

Template.Shared/Components/Pages/Login.razor.css

@@ -35,9 +35,8 @@
 
 .button-login {
     text-align: center;
-    border: 2px solid var(--mud-palette-primary);
     background-color: var(--mud-palette-primary);
-    border-radius: 25px;
+    border-radius: 6px;
     padding: .3rem 2rem;
     width: 100%;
     font-weight: 700;

Template.Shared/Components/Pages/PersonalInfo.razor

@@ -1,9 +1,113 @@
 @page "/PersonalInfo"
 @attribute [Authorize]
 @using Template.Shared.Components.Layout
+@using Template.Shared.Core.Authorization.Enum
+@using Template.Shared.Core.Interface
+@using Template.Shared.Core.Services
+@using Template.Shared.Core.Utility
+@using Template.Shared.Interfaces
+@inject AppAuthenticationStateProvider AuthenticationStateProvider
+@inject INetworkService NetworkService
+@inject IFormFactor FormFactor
 
 <HeaderLayout Title="Profilo" />
 
+<div class="content">
+    <div class="section-primary-info">
+        <MudAvatar Style="height:85px; width:85px; font-size:2rem;">
+            <MudImage Src="@($"https://ui-avatars.com/api/?name={UserSession.User.Username}&size=80&background={UtilityColor.CalcHexColor(UserSession.User.Username)}&bold=true")"></MudImage>
+        </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="section-info">
+        <div class="section-personal-info">
+            <div>
+                <span class="info-title">Telefono</span>
+                <span class="info-text">000 0000000</span> @*Todo: to implement*@
+            </div>
+            
+            <div>
+                <span class="info-title">Status</span>
+                @if (NetworkService.IsNetworkAvailable())
+                {
+                    <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 class="section-personal-info">
+            <div>
+                <span class="info-title">E-mail</span>
+                <span class="info-text">
+                    @if (string.IsNullOrEmpty(UserSession.User.Email))
+                    {
+                        @("Nessuna mail configurata")
+                    }
+                    else
+                    {
+                        @UserSession.User.Email
+                    }
+                </span>
+            </div>
+            
+            <div>
+                <span class="info-title">Ultima sincronizzazione</span>
+                <span class="info-text">@LastSync.ToString("g")</span>
+            </div>
+        </div>
+    </div>
+    
+    <div class="user-button">
+        <span>Impostazioni account</span>
+    </div>
+    
+    <div class="user-button logout" @onclick="Logout">
+        <span>Esci</span>
+        <i class="ri-logout-box-line"></i>
+    </div>
+</div>
+
 @code {
+    private bool Unavailable { get; set; }
+    private DateTime LastSync { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadData();
+    }
+
+    private void Logout()
+    {
+        AuthenticationStateProvider.SignOut();
+    }
+
+    private async Task LoadData()
+    {
+        await Task.Run(() =>
+        {
+            Unavailable = FormFactor.IsWeb() || !NetworkService.IsNetworkAvailable();
+            LastSync = LocalStorage.Get<DateTime>("last-sync");
+        });
+
+        StateHasChanged();
+    }
 
 }

Template.Shared/Components/Pages/PersonalInfo.razor.css

@@ -0,0 +1,95 @@
+.section-primary-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.personal-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: normal;
+    margin: 2rem 0;
+}
+
+.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 {
+    width: 100%;
+    margin-bottom: 1rem;
+    border-radius: 12px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    padding: .8rem 1.2rem;
+    background: var(--mud-palette-surface);
+}
+
+.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;
+}
+
+.user-button {
+    border: 2px solid var(--mud-palette-overlay-dark);
+    margin-top: 1rem;
+    background: transparent;
+    text-align: center;
+    border-radius: 6px;
+    padding: .45rem 2rem;
+    width: 100%;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.user-button.logout {
+    border: 2px solid var(--mud-palette-error);
+    color: var(--mud-palette-error);
+}
+
+.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);
+}