From 662789395fd5f4398052f616daa61b1219c2c253 Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Sun, 29 Sep 2024 18:54:08 +0200
Subject: [PATCH] auth page renewed, fix in MainLayout

---
 WatchIt.Website/WatchIt.Website/App.razor     |   2 +-
 .../WatchIt.Website/Layout/MainLayout.razor   |   4 +-
 .../WatchIt.Website/Pages/AuthPage.razor      | 152 +++++++++---------
 .../WatchIt.Website/Pages/AuthPage.razor.cs   |  67 ++++----
 4 files changed, 114 insertions(+), 111 deletions(-)

diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index 35cf53c..2992e8c 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -11,7 +11,7 @@
     <!-- CSS -->
     <link rel="stylesheet" href="css/general.css?version=0.2.0.3"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.2.0.0"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.11"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.12"/>
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
index 46f957f..ca49395 100644
--- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
+++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
@@ -28,9 +28,7 @@
                                                 <InputText class="form-control" placeholder="Search with regex" @bind-Value="@(_searchbarText)"/>
                                             </div>
                                             <button type="button" class="btn btn-sm btn-outline-secondary" @onclick="@(SearchStart)">⌕</button>
-                                            <a id="searchbarCancel" @onclick="@(() => _searchbarVisible = false)">
-                                                <img src="assets/icons/cancel.png" alt="cancel_icon" height="20" width="20"/>
-                                            </a>
+                                            <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = false)">&#10060;&#xFE0E;</button>
                                         }
                                         else
                                         {
diff --git a/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor
index ce91e78..39efc0c 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor
@@ -8,98 +8,98 @@
 @if (_loaded)
 {
     <div class="h-100 d-flex align-items-center justify-content-center">
-        <div class="d-inline-flex flex-column justify-content-center panel panel-header rounded-3">
-            <a id="logo" class="logo" href="/">
-                WatchIt
-            </a>
-            <div>
+        <div class="panel panel-header rounded-3 p-3">
+            <div class="d-flex flex-column align-items-center gap-3">
+                <a id="logo" class="logo m-0" href="/">WatchIt</a>
                 @if (_isSingUp)
                 {
-                    <form method="post" @onsubmit="Register" @formname="register">
+                    <EditForm Model="@(_registerModel)">
                         <AntiforgeryToken/>
-                        <div>
-                            <label>
-                                Username:
-                                <InputText @bind-Value="_registerModel!.Username"/>
-                            </label>
+                        <div class="container-grid">
+                            <div class="row form-group mb-1">
+                                <label for="username" class="col-5 col-form-label">Username:</label>
+                                <div class="col">
+                                    <InputText id="username" class="form-control" @bind-Value="_registerModel!.Username"/>
+                                </div>
+                            </div>
+                            <div class="row form-group my-1">
+                                <label for="email" class="col-5 col-form-label">Email:</label>
+                                <div class="col">
+                                    <InputText id="email" class="form-control" @bind-Value="_registerModel!.Email"/>
+                                </div>
+                            </div>
+                            <div class="row form-group my-1">
+                                <label for="password" class="col-5 col-form-label">Password:</label>
+                                <div class="col">
+                                    <InputText id="password" class="form-control" type="password" @bind-Value="_registerModel!.Password"/>
+                                </div>
+                            </div>
+                            <div class="row form-group my-1">
+                                <label for="confpassword" class="col-5 col-form-label">Confirm password:</label>
+                                <div class="col">
+                                    <InputText id="confpassword" class="form-control" type="password" @bind-Value="_registerPasswordConfirmation"/>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col align-self-center">
+                                    <span class="text-@(_formMessageIsSuccess ? "success" : "danger")">@_formMessage</span>
+                                </div>
+                                <div class="col-auto">
+                                    <button type="submit" class="btn btn-dark" @onclick="@(Register)">Sign up</button>
+                                </div>
+                            </div>
                         </div>
-                        <div>
-                            <label>
-                                Email:
-                                <InputText @bind-Value="_registerModel!.Email"/>
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                Password:
-                                <InputText type="password" @bind-Value="_registerModel!.Password"/>
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                Confirm password:
-                                <InputText type="password" @bind-Value="_passwordConfirmation"/>
-                            </label>
-                        </div>
-                        <div>
-                            <button type="submit">Sign up</button>
-                        </div>
-                    </form>
+                    </EditForm>
                 }
                 else
                 {
-                    <form method="post" @onsubmit="Login" @formname="login">
+                    <EditForm Model="@(_loginModel)">
                         <AntiforgeryToken/>
-                        <div>
-                            <label>
-                                Username or email:
-                                <InputText @bind-Value="_loginModel!.UsernameOrEmail"/>
-                            </label>
+                        <div class="container-grid">
+                            <div class="row form-group mb-1">
+                                <label for="username" class="col-5 col-form-label">Username or email:</label>
+                                <div class="col">
+                                    <InputText id="username" class="form-control" @bind-Value="_loginModel!.UsernameOrEmail"/>
+                                </div>
+                            </div>
+                            <div class="row form-group my-1">
+                                <label for="password" class="col-5 col-form-label">Password:</label>
+                                <div class="col">
+                                    <InputText id="password" type="password" class="form-control" @bind-Value="_loginModel!.Password"/>
+                                </div>
+                            </div>
+                            <div class="row form-group">
+                                <div class="col">
+                                    <div class="form-check">
+                                        <InputCheckbox class="form-check-input" @bind-Value="_loginModel!.RememberMe"/>
+                                        <label class="form-check-label">Remember me</label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col align-self-center">
+                                    <span class="text-@(_formMessageIsSuccess ? "success" : "danger")">@_formMessage</span>
+                                </div>
+                                <div class="col-auto">
+                                    <button type="submit" class="btn btn-dark" @onclick="@(Login)">Sign in</button>
+                                </div>
+                            </div>
                         </div>
-                        <div>
-                            <label>
-                                Password:
-                                <InputText type="password" @bind-Value="_loginModel!.Password"/>
-                            </label>
-                        </div>
-                        <div>
-                            <label>
-                                <InputCheckbox @bind-Value="_loginModel!.RememberMe"></InputCheckbox>
-                                Remember me
-                            </label>
-                        </div>
-                        <div>
-                            <button type="submit">Sign in</button>
-                        </div>
-                    </form>
+                    </EditForm>
                 }
-            </div>
-            @if (_errors is not null)
-            {
-                <div class="text-danger">
-                    @foreach (string error in _errors)
-                    {
-                        @error
-                        <br/>
-                    }
+                <div class="btn-group w-100">
+                    <input type="radio" class="btn-check" name="signtype" id="signin" autocomplete="off" checked="@(!_isSingUp)" @onclick="() => { _isSingUp = false; _formMessage = null; _formMessageIsSuccess = false; }">
+                    <label class="btn btn-outline-secondary" for="signin">Sign in</label>
+                    <input type="radio" class="btn-check" name="signtype" id="signup" autocomplete="off" checked="@(_isSingUp)" @onclick="() => { _isSingUp = true; _formMessage = null; _formMessageIsSuccess = false; }">
+                    <label class="btn btn-outline-secondary" for="signup">Sign up</label>
                 </div>
-            }
-            <div>
-                <label>
-                    <input type="radio" checked="@(() => !_isSingUp)" name="auth" @onchange="@(() => _isSingUp = false)" />
-                    Sign in
-                </label>
-                <label>
-                    <input type="radio" checked="@(() => _isSingUp)" name="auth" @onchange="@(() => _isSingUp = true)" />
-                    Sign up
-                </label>
             </div>
         </div>
     </div>
 
 
 
-<style>
+    <style>
         /* TAGS */
         
         body {
@@ -112,5 +112,5 @@
         #logo {
             background-image: linear-gradient(45deg, @(_background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(_background.Background.FirstGradientColor)}, #{Convert.ToHexString(_background.Background.SecondGradientColor)}"));
         }
-</style>
+    </style>
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs
index 965a23e..d646264 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs
@@ -43,24 +43,22 @@ public partial class AuthPage
     private PhotoResponse? _background;
 
     private bool _isSingUp;
+    private string? _formMessage;
+    private bool _formMessageIsSuccess;
     
-    
-
-    private AuthenticateRequest _loginModel = new AuthenticateRequest
-    {
-        UsernameOrEmail = null,
-        Password = null
-    };
-
     private RegisterRequest _registerModel = new RegisterRequest
     {
         Username = null,
         Email = null,
         Password = null
     };
-    private string _passwordConfirmation;
-
-    private IEnumerable<string> _errors;
+    private string _registerPasswordConfirmation;
+    
+    private AuthenticateRequest _loginModel = new AuthenticateRequest
+    {
+        UsernameOrEmail = null,
+        Password = null
+    };
 
     #endregion
 
@@ -95,44 +93,51 @@ public partial class AuthPage
 
     private async Task Login()
     {
-        await AccountsWebAPIService.Authenticate(_loginModel, LoginSuccess, LoginBadRequest, LoginUnauthorized);
+        void LoginBadRequest(IDictionary<string, string[]> data)
+        {
+            _formMessageIsSuccess = false;
+            _formMessage = data.SelectMany(x => x.Value).FirstOrDefault();
+        }
+
+        void LoginUnauthorized()
+        {
+            _formMessageIsSuccess = false;
+            _formMessage = "Incorrect account data";
+        }
         
-        async void LoginSuccess(AuthenticateResponse data)
+        async Task LoginSuccess(AuthenticateResponse data)
         {
             await TokensService.SaveAuthenticationData(data);
             NavigationManager.NavigateTo(RedirectTo);
         }
         
-        void LoginBadRequest(IDictionary<string, string[]> data)
-        {
-            _errors = data.SelectMany(x => x.Value).Select(x => $"• {x}");
-        }
         
-        void LoginUnauthorized()
-        {
-            _errors = [ "Incorrect account data" ];
-        }
+        await AccountsWebAPIService.Authenticate(_loginModel, async (data) => await LoginSuccess(data), LoginBadRequest, LoginUnauthorized);
     }
     
     private async Task Register()
     {
-        if (_registerModel.Password != _passwordConfirmation)
-        {
-            _errors = [ "Password fields don't match" ];
-            return;
-        }
-        
-        await AccountsWebAPIService.Register(_registerModel, RegisterSuccess, RegisterBadRequest);
-
         void RegisterSuccess(RegisterResponse data)
         {
+            _formMessageIsSuccess = true;
+            _formMessage = "You are registered. You can sign in now.";
             _isSingUp = false;
         }
-
+        
         void RegisterBadRequest(IDictionary<string, string[]> data)
         {
-            _errors = data.SelectMany(x => x.Value).Select(x => $"• {x}");
+            _formMessageIsSuccess = false;
+            _formMessage = data.SelectMany(x => x.Value).FirstOrDefault();
         }
+        
+        
+        if (_registerModel.Password != _registerPasswordConfirmation)
+        {
+            _formMessageIsSuccess = false;
+            _formMessage = "Password fields don't match";
+            return;
+        }
+        await AccountsWebAPIService.Register(_registerModel, RegisterSuccess, RegisterBadRequest);
     }
 
     #endregion