start of the Ui intigrating

ImageBoardServerApp/Pages/Accounts/Login.razor

@@ -5,39 +5,58 @@
 @inject AuthenticationStateProvider authStateProvider
 @inject NavigationManager navManager
 
-<h3>Login to bulletbroards</h3>
-<div>
+
+<h3 class="headLogin">Login to bulletbroards</h3>
+<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)">[Login]</a>
+        <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>
+                    <RadzenFormField Text="Password" Variant="@vari">
+                        <ChildContent>
+                            <RadzenTextBox Name="Password" @bind-Value=@model.Password />
+                        </ChildContent>
+                        <Helper>
+                            <RadzenRequiredValidator Component="Password" Text="Your Password" />
+                        </Helper>
+                    </RadzenFormField>
+                    <RadzenButton ButtonType="ButtonType.Submit" Text="Login" ></RadzenButton>
+                </RadzenStack>
+            </RadzenTemplateForm>
     </form>
 </div>
 
-<Register></Register>
 @code {
-    private string Email { get; set; }
-    private string Password { get; set; }
+    private Variant vari = Variant.Outlined;
 
     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(Email);
+        var user = await UsersRepository.getUserByEmailRawAsync(model.Email);
         if (user == null)
         {
             await js.InvokeVoidAsync("alert", "User does not exist");
             verified = false;
             return;
         }
-        verified = BCrypt.Net.BCrypt.Verify(Password, user.Password);
+        verified = BCrypt.Net.BCrypt.Verify(model.Password, user.Password);
         if (verified)
         {
             verified = true;

ImageBoardServerApp/Pages/Accounts/Login.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/Accounts/Register.razor

@@ -20,6 +20,10 @@
     </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; }