feat: improved login and register, improved sidebar

Signed-off-by: limited_dev <loginakkisativ@gmail.com>

ImageBoardServerApp/Pages/Accounts/Login.razor

@@ -9,27 +9,16 @@
 <h3 class="headLogin">Login to bulletbroards</h3>
 <div class="login">
     <form>
-        <RadzenTemplateForm TItem="Model" Data="model" Submit=@login>
-                <RadzenStack Gap="1rem" Class="gapeing">
-                    <RadzenFormField Text="Email" Variant="@vari">
-                        <ChildContent>
-                            <RadzenTextBox Name="Email" @bind-Value=@model.Email />
-                        </ChildContent>
-                        <Helper>
-                            <RadzenRequiredValidator Component="Email" Text="First name is required." />
-                        </Helper>
+        <RadzenFormField Text="Email" Variant="Variant.Outlined">
+            <RadzenTextBox @bind-Value="@Email" />
         </RadzenFormField>
-                    <RadzenFormField Text="Password" Variant="@vari">
-                        <ChildContent>
-                            <RadzenTextBox Name="Password" @bind-Value=@model.Password />
-                        </ChildContent>
-                        <Helper>
-                            <RadzenRequiredValidator Component="Password" Text="Your Password" />
-                        </Helper>
+        <br/>
+        <RadzenFormField Text="Password" Variant="Variant.Outlined">
+            <RadzenPassword @bind-Value="@Password" />
         </RadzenFormField>
-                    <RadzenButton ButtonType="ButtonType.Submit" Text="Login" ></RadzenButton>
-                </RadzenStack>
-            </RadzenTemplateForm>
+        <br/>
+        <br/>
+        <RadzenButton Click=@login Text="login" ButtonStyle="ButtonStyle.Secondary" />
     </form>
 </div>
 
@@ -38,25 +27,20 @@
 
     private bool verified;
     
-    class Model
-    {
     public string Email { get; set; }
     public string Password { get; set; }
-    }
-
-    Model model = new Model();
 
     private async Task login()
     {
         Console.WriteLine("loggin you in...");
-        var user = await UsersRepository.getUserByEmailRawAsync(model.Email);
+        var user = await UsersRepository.getUserByEmailRawAsync(Email);
         if (user == null)
         {
             await js.InvokeVoidAsync("alert", "User does not exist");
             verified = false;
             return;
         }
-        verified = BCrypt.Net.BCrypt.Verify(model.Password, user.Password);
+        verified = BCrypt.Net.BCrypt.Verify(Password, user.Password);
         if (verified)
         {
             verified = true;

ImageBoardServerApp/Pages/Accounts/Register.razor

@@ -5,33 +5,38 @@
 @inject AuthenticationStateProvider authStateProvider
 @inject NavigationManager navManager
 
-<h3>Register to bulletbroards</h3>
-<div>
+<div class="login">
     <form>
-        <div>
-            <label for="email">Email:</label>
-            <input type="email" id="email" @bind="Email" />
-        </div>
-        <div>
-            <label for="password">Password:</label>
-            <input type="password" id="password" @bind="Password" />
-        </div>
-        <a @onclick="login" href="javascript:void(0)">[Register]</a>
+        <RadzenFormField Text="Email" Variant="Variant.Outlined">
+            <RadzenTextBox @bind-Value="@Email" />
+        </RadzenFormField>
+        <br/>
+        <RadzenFormField Text="Password" Variant="Variant.Outlined">
+            <RadzenPassword @bind-Value="@Password" />
+        </RadzenFormField>
+        <br/>
+        <RadzenCheckBox @bind-Value=@is18 Name="is_18" />
+        <RadzenLabel Text="I am atleast 18 Years old." Component="is_18" />
+        <br/>
+        <br/>
+        <RadzenButton Click=@login Text="login" ButtonStyle="ButtonStyle.Secondary" />
     </form>
 </div>
-<span>By registering you confirm that you are atleast 18 years of age.</span>
-
-
 
 
 @code {
     private string Email { get; set; }
     private string Password { get; set; }
+    private bool is18 { get; set; }
+    
+    private string msg { get; set; }
 
     private bool verified;
 
     private async Task login()
     {
+        if (!is18)
+            return;
         Console.WriteLine("Registering...");
         UserData userToCreate = new UserData()
         {
@@ -65,6 +70,3 @@
         await js.InvokeVoidAsync("alert", $"Wrong Password");
     }
 }
-@code {
-    
-}

ImageBoardServerApp/Pages/Accounts/Register.razor.css

@@ -0,0 +1,11 @@
+.headLogin{
+    text-align: center;
+    -webkit-text-size-adjust: auto;
+}
+.login{
+    text-align: center;
+    align-items:center;
+    font-style: unset;}
+.gaping{
+    alignment: left;
+}

ImageBoardServerApp/Pages/_Host.cshtml

@@ -15,7 +15,7 @@
     <link href="css/site.css" rel="stylesheet"/>
     <link href="ImageBoardServerApp.styles.css" rel="stylesheet"/>
     <link rel="icon" type="image/png" href="/img/static/logo.png"/>
-    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
+    <link rel="stylesheet" href="_content/Radzen.Blazor/css/dark-base.css">
     <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered"/>
 </head>

ImageBoardServerApp/Shared/Components/Post.razor

@@ -53,7 +53,9 @@
             }
         </div>
         <div class="threadTextContainer">
-            @foreach (string s in @post.Content.Split("\n"))
+            @if (showOpenThread)
+            {
+                @foreach (string s in post.Content.Split("\n").ToList().Take(6))
                 {
                     var className = "";
                     @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
@@ -63,6 +65,25 @@
 
                     <span class='threadText @className'>@s&nbsp;</span>
                 }
+                @if (post.Content.Split("\n").Length > 6)
+                {
+                    <br/>
+                    <span class="greenText">[Open Thread to read more...]</span>
+                }
+            }
+            else
+            {
+                @foreach (string s in post.Content.Split("\n"))
+                {
+                    var className = "";
+                    @if (s.StartsWith(">") && !Regex.IsMatch(s, "^>{2,}"))
+                    {
+                        className = "greenText";
+                    }
+
+                    <span class='threadText @className'>@s&nbsp;</span>
+                } 
+            }
         </div>
     </div>
     <div class="threadFooter">
@@ -117,13 +138,14 @@
     </div>
 }
 
-
-
 @code {
 
     public bool canDel { get; set; }
     public bool isActive { get; set; } = false;
 
+    private int linecnt = 0;
+
+    
     private async void lockMe()
     {
         post.IsLocked = !post.IsLocked;

ImageBoardServerApp/Shared/MainLayout.razor

@@ -1,5 +1,5 @@
-@inherits LayoutComponentBase
-@using ImageBoardServerApp.Auth
+@using ImageBoardServerApp.Auth
+@inherits LayoutComponentBase
 @inject AuthenticationStateProvider authStateProvider 
 @inject NavigationManager navManager
 
@@ -11,12 +11,6 @@
     </div>
 
     <main>
-        
-        <div class="top-row px-4">
-            <a href="/sys/faq">[FAQ]</a>
-            <a href="/sys/rules">[Rules]</a>
-        </div>
-
         <article class="content px-4">
             @Body
         </article>
@@ -37,11 +31,4 @@
             mail = user.User.Identity.Name;
         }
     }
-
-    private async Task logout()
-    {
-        var customAuthStateProvider = (CustomAuthenticationStateProvider) authStateProvider;
-        await customAuthStateProvider.UpdateAuthenticationStateAsync(null);
-        navManager.NavigateTo("/", true);
-    }
 }

ImageBoardServerApp/Shared/MainLayout.razor.css

@@ -13,11 +13,10 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-image: linear-gradient(180deg, #0f081b, #0f081b 70%);
 }
 
 .top-row {
-
     border-bottom: 1px solid #f8f8f2;
     justify-content: flex-end;
     height: 3.5rem;

ImageBoardServerApp/Shared/NavMenu.razor

@@ -5,7 +5,8 @@
 
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">BulletBoard v0.2.3</a>
+        <img src="img/static/logo_trans.png" width="32" height="32" alt="Logo"/>
+        <a class="navbar-brand" href="/">BulletBoard</a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -14,30 +15,55 @@
 
 <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>
+        
+        <text class="topicTitle">
+            Boards
+        </text>
+        @foreach (BoardData b in boards)
+        {
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="@b.Tag" Match="NavLinkMatch.All">
+                    <span class="oi oi-chat" aria-hidden="true"></span> /@b.Tag/ - @b.Topic
+                </NavLink>
+            </div>
+        }
+        
+        <div class="account">
+            <text class="topicTitle">
+                Account
+            </text>
             <AuthorizeView>
                 <Authorized>
                     <div class="nav-item px-3">
-                    <NavLink class="nav-link" @onclick="logout" Match="NavLinkMatch.All">
-                        <span class="oi oi-home" aria-hidden="true"></span> >> Logout
+                        <NavLink class="nav-link" href="/sys/you" Match="NavLinkMatch.All">
+                            <span class="oi oi-cog" aria-hidden="true"></span> Account Settings
+                        </NavLink>
+                    </div>
+                    <div class="nav-item px-3">
+                        <NavLink class="nav-link" href="/" @onclick="logout" Match="NavLinkMatch.All">
+                            <span class="oi oi-account-logout" aria-hidden="true"></span> Logout
                         </NavLink>
                     </div>
                 </Authorized>
                 <NotAuthorized>
                     <div class="nav-item px-3">
                         <NavLink class="nav-link" href="/sys/login" Match="NavLinkMatch.All">
-                        <span class="oi oi-home" aria-hidden="true"></span> >> Login
+                            <span class="oi oi-account-login" aria-hidden="true"></span> Login
+                        </NavLink>
+                    </div>
+                    <div class="nav-item px-3">
+                        <NavLink class="nav-link" href="/sys/register" Match="NavLinkMatch.All">
+                            <span class="oi oi-plus" aria-hidden="true"></span> Register
                         </NavLink>
                     </div>
                 </NotAuthorized>
             </AuthorizeView>
-        @foreach (BoardData b in boards)
-        {
-            <div class="nav-item px-3">
-                <NavLink class="nav-link" href="@b.Tag">
-                    <span class="oi oi-list-rich" aria-hidden="true"></span> /@b.Tag/ - @b.Topic
-                </NavLink>
         </div>
-        }
     </nav>
 </div>
 

ImageBoardServerApp/Shared/NavMenu.razor.css

@@ -1,14 +1,15 @@
 .navbar-toggler {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: #0f081b;
 }
 
 .top-row {
     height: 3.5rem;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: #0f081b;
 }
 
 .navbar-brand {
     font-size: 1.1rem;
+    horiz-align: center;
 }
 
 .oi {
@@ -18,6 +19,18 @@
     top: -2px;
 }
 
+.topicTitle{
+    color: white;
+    margin-top: 2rem;
+    margin-left: 1.8rem;
+}
+
+.account{
+    z-index: 1;
+    bottom: 0;
+    background-color: #0f081b;
+}
+
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;
@@ -50,6 +63,8 @@
     color: white;
 }
 
+
+
 @media (min-width: 500px) {
     .navbar-toggler {
         display: none;
@@ -59,4 +74,8 @@
         /* Never collapse the sidebar for wide screens */
         display: block;
     }
+    
+    .account{
+        position: fixed;
+    }
 }