Added Login system

Otakians/MainLayout.razor

@@ -3,10 +3,12 @@
 @using System.ComponentModel.DataAnnotations
 @inject HttpClient httpClient
 @inject Blazored.LocalStorage.ILocalStorageService localStorage
+@inject NavigationManager NavManager
+@inject ISnackbar Snackbar
 
 <MudLayout Class="overflow-hidden">
     <MudAppBar Elevation="1">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="ClearAllCookies">Clear cookies</MudButton>
+        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="RegisterAccount">Clear cookies</MudButton>
         <MudSpacer />
         @if (!isLoggedIn)
         {
@@ -14,8 +16,12 @@
                 <MudText Style="font-size: 15px;">Log-in or sign-up here</MudText>
                 <MudIcon Class="mr-n1" Icon="@Icons.Material.Filled.ArrowRightAlt" />
             </MudPaper>
+            <MudAvatar @onclick="ToggleDrawer" Style="cursor:pointer;" Variant="Variant.Outlined" Color="Color.Surface" Class="mr-n2">?</MudAvatar>
+        }
+        else
+        {
+            <MudAvatar @onclick="ToggleDrawer" Style="cursor:pointer;" Variant="Variant.Outlined" Color="Color.Success" Class="mr-n2">@(char.ToUpper(Program.LoggedInName[0]))</MudAvatar>
         }
-        <MudAvatar @onclick="ToggleDrawer" Style="cursor:pointer;" Variant="Variant.Outlined" Color="Color.Surface" Class="mr-n2">?</MudAvatar>
     </MudAppBar>
 
     <MudDrawer @bind-Open="@openContentDrawer" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Lg" PreserveOpenState="false" Elevation="1" Variant="@DrawerVariant.Mini" OpenMiniOnHover="true">
@@ -29,17 +35,17 @@
     <MudDrawer Anchor="Anchor.End" @bind-Open="@openProfileDrawer" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.Lg" PreserveOpenState="true" Elevation="1" Variant="@DrawerVariant.Temporary">
         @if (isLoggedIn)
         {
-            <MudNavMenu>
+            <MudPaper Class="ma-2">
-                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Store">Store</MudNavLink>
+                <MudStack Spacing="0" Class="justify-center">
-                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Chat">Library</MudNavLink>
+                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Error" OnClick="Logout">Logout</MudButton>
-                <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Group">Community</MudNavLink>
+                </MudStack>
-            </MudNavMenu>
+            </MudPaper>
         }
         else
         {
             <MudPaper Class="ma-2">
                 <MudStack Spacing="0" Class="justify-center">
-                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Primary" OnClick="ShowLogIn">Log-in</MudButton>
+                    <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Primary" OnClick="ShowLogIn">Sign-in</MudButton>
                     <MudButton Class="ma-4" Variant="Variant.Outlined" Color="Color.Success" OnClick="ShowSignUp">Sign-up</MudButton>
                 </MudStack>
             </MudPaper>
@@ -55,19 +61,19 @@
 <MudOverlay ZIndex="1400" @bind-Visible="isSigningUp" DarkBackground="true" Style="backdrop-filter:blur(5px)">
     <MudPaper Class="pa-4 rounded-lg" @onclick:stopPropagation=true>
         <MudIconButton Style="position: absolute; right: 0; top: 0;" Icon="@Icons.Material.Filled.Close" OnClick="HideOverlays" />
-        
+
         <MudText Typo="Typo.h3">Sign-up</MudText>
         <MudForm @ref="form" @bind-IsValid="@isValid" @bind-Errors="@errors">
-            <MudTextField T="string" Label="Username" Required="true" RequiredError="User name is required!"
+            <MudTextField T="string" Label="Username" Required="true" RequiredError="Username is required!" HelperText="This is case sensitive!"
-                            @bind-Text=tempUser.Username />
+            @bind-Text=tempUser.Username />
             <MudTextField T="string" Label="Email" Required="true" RequiredError="Email is required!"
-                          Validation="@(new EmailAddressAttribute() {ErrorMessage = "The email address is invalid"})" 
+                          Validation="@(new EmailAddressAttribute() {ErrorMessage = "The email address is invalid"})"
-                            @bind-Text=tempUser.Email/>
+            @bind-Text=tempUser.Email />
             <MudTextField T="string" Label="Password" HelperText="(This will not be encrypted)" @ref="pwField1"
                           InputType="InputType.Password"
                           Validation="@(new Func<string, IEnumerable<string>>(PasswordStrength))" Required="true"
-                          RequiredError="Password is required!" 
+                          RequiredError="Password is required!"
-                          @bind-Text=tempUser.Password/>
+            @bind-Text=tempUser.Password />
             <MudTextField T="string"
                           Label="Password" HelperText="Repeat the password" InputType="InputType.Password"
                           Validation="@(new Func<string, string>(PasswordMatch))" />
@@ -75,16 +81,31 @@
                 <MudStack>
                     <MudCheckBox Class="ml-n2" T="bool" Required="true" RequiredError="You must agree"><MudText Style="font-size:10px;">I agree with <MudLink Href="/TOS" OnClick="HideOverlays" Style="font-size:10px;">Terms Of Service</MudLink></MudText></MudCheckBox>
                 </MudStack>
-                <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!isValid)" Class="ml-auto" OnClick="AddUser">Register</MudButton>
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!isValid)" Class="ml-auto" OnClick="RegisterAccount">Register</MudButton>
             </MudStack>
         </MudForm>
     </MudPaper>
 </MudOverlay>
 
 @*Log-in overlay*@
-<MudOverlay @bind-Visible="isLoggingIn" DarkBackground="true" AutoClose=true Style="backdrop-filter:blur(5px)">
+<MudOverlay ZIndex="1400" @bind-Visible="isLoggingIn" DarkBackground="true" Style="backdrop-filter:blur(5px)">
-    <MudPaper @onclick:stopPropagation=true>
+    <MudPaper Class="pa-4 rounded-lg" @onclick:stopPropagation=true>
-        <MudText>Login</MudText>
+        <MudIconButton Style="position: absolute; right: 0; top: 0;" Icon="@Icons.Material.Filled.Close" OnClick="HideOverlays" />
+
+        <MudText Typo="Typo.h3">Sign-in</MudText>
+        <MudText>Welcome back!</MudText>
+        <MudForm @ref="form" @bind-IsValid="@isValid" @bind-Errors="@errors">
+            <MudTextField T="string" Label="Username" Variant="Variant.Filled" Required="true" RequiredError="Username is empty?" HelperText="This is case sensitive!"
+            @bind-Text=tempUser.Username />
+            <MudTextField T="string" Label="Password" Variant="Variant.Filled" HelperText="(This will not be encrypted)" @ref="pwField1"
+                          InputType="InputType.Password"
+                          Required="true"
+                          RequiredError="Password is empty?"
+            @bind-Text=tempUser.Password />
+            <MudStack Row=true Class="d-flex align-center mt-6">
+                <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!isValid)" Class="ml-auto" OnClick="StartLoggingIn">Login!</MudButton>
+            </MudStack>
+        </MudForm>
     </MudPaper>
 </MudOverlay>
 
@@ -96,6 +117,7 @@
     bool isSigningUp = false;
     bool isLoggingIn = false;
     bool isValid = false;
+    User[]? allUsers;
 
     User tempUser = new User();
 
@@ -105,27 +127,89 @@
         openProfileDrawer = !openProfileDrawer;
     }
 
-    void ShowSignUp() 
+    void ShowSignUp()
-    { 
+    {
         isSigningUp = true;
         openContentDrawer = openProfileDrawer = false;
     }
 
-    void ShowLogIn() 
+    void ShowLogIn()
-    { 
+    {
-        isLoggingIn = true; 
+        isLoggingIn = true;
         openContentDrawer = openProfileDrawer = false;
     }
 
     void HideOverlays() => isSigningUp = isLoggingIn = false;
-#endregion
+    #endregion
 
-    async void AddUser()
+    async void RegisterAccount()
     {
-        //await httpClient.PostAsJsonAsync("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Users.json", new User());
+        if (await GetUserFromName(tempUser) == null)
-        Console.WriteLine(tempUser.Username);
+        {
-        Console.WriteLine(tempUser.Email);
+            Console.WriteLine("Creating username");
-        Console.WriteLine(tempUser.Password);
+            await httpClient.PostAsJsonAsync("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Users.json", tempUser);
+            LoginAs(tempUser);
+        }
+        else
+        {
+            Console.WriteLine("Username already exists!");
+            Snackbar.Add("Username already exists!", Severity.Warning);
+        }
+    }
+
+    async void StartLoggingIn()
+    {
+        User? serverSideUser = await GetUserFromName(tempUser);
+        if (serverSideUser == null)
+        {
+            Console.WriteLine("User not found");
+            Snackbar.Add("User not found", Severity.Warning);
+            return;
+        }
+
+        if (serverSideUser.Password != tempUser.Password)
+        {
+            Console.WriteLine("Wrong password!");
+            Snackbar.Add("Wrong password! Hackerman!", Severity.Error);
+            return;
+        }
+
+        Console.WriteLine("Login success!");
+        LoginAs(tempUser);
+    }
+
+    async Task<User?> GetUserFromName(User user)
+    {
+        allUsers = await GetAllUsers();
+        if (allUsers == null) return null;
+
+        User? selectedUser = allUsers.FirstOrDefault(x => x.Username == user.Username);
+        if (selectedUser == null) return null;
+
+        return selectedUser;
+    }
+
+    async void LoginAs(User user)
+    {
+        await localStorage.SetItemAsStringAsync("User", user.Username);
+        RefreshPage();
+    }
+
+    async void Logout()
+    {
+        await localStorage.RemoveItemAsync("User");
+        RefreshPage();
+    }
+
+    async Task<User[]?> GetAllUsers()
+    {
+        var allUsers = await httpClient.GetFromJsonAsync<Dictionary<string, User>>("https://globalchat-4a89f-default-rtdb.europe-west1.firebasedatabase.app/Database/Users.json");
+
+        if (allUsers == null) 
+            return null;
+
+        User[] users = allUsers.Values.ToArray();
+        return users;
     }
 
     #region Signup
@@ -161,17 +245,19 @@
 
     protected override async Task OnInitializedAsync()
     {
-        // Reads "cookie"
+        CheckLoggedin();
-        var cookieContent = await localStorage.GetItemAsync<User>("cookieName");
+    }
 
-        if (cookieContent == null)
+    async void CheckLoggedin()
-        {
+    {
-            Console.WriteLine("Cookie is blank");
+        string? name = await localStorage.GetItemAsStringAsync("User");
-        }
+        if (name == null) return;
-        else
+
-        {
+        Snackbar.Add("Successfully logged in!", Severity.Success);
-            Console.WriteLine("We have a cookie with contents: " + cookieContent);
+
-        }
+        Program.LoggedInName = name;
+        isLoggedIn = true;
+        StateHasChanged();
     }
 
     async void ClearAllCookies()
@@ -179,6 +265,11 @@
         await localStorage.ClearAsync();
     }
 
+    private void RefreshPage()
+    {
+        NavManager.NavigateTo(NavManager.Uri, forceLoad: true);
+    }
+
     public class User
     {
         public string? Username { get; set; }

Otakians/Program.cs

@@ -6,9 +6,12 @@ using Otakians;
 using System;
 using System.Security.Cryptography;
 using System.Text;
+using MudBlazor;
 
 internal class Program
 {
+    public static string? LoggedInName;
+
     private static async Task Main(string[] args)
     {
         var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -16,8 +19,8 @@ internal class Program
         builder.RootComponents.Add<HeadOutlet>("head::after");
 
         builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-        builder.Services.AddMudServices();
+        builder.Services.AddMudServices(config => 
-        builder.Services.AddBlazoredLocalStorage();   // local storage
+            config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.TopCenter);
         builder.Services.AddBlazoredLocalStorage(config =>
             config.JsonSerializerOptions.WriteIndented = true);  // local storage
 

Otakians/_Imports.razor

@@ -6,4 +6,5 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using Otakians
-@using MudBlazor
+@using MudBlazor
+@using System.Text.Json;