Merge pull request #86 from mateuszskoczek/features/auth_page_renew

Features/auth page renew

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>

WatchIt.Website/WatchIt.Website/Layout/EmptyLayout.razor.css

@@ -1 +0,0 @@
-

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor

@@ -1,4 +1,5 @@
-@using WatchIt.Common.Model.Photos
+@using System.Net
+@using WatchIt.Common.Model.Photos
 @using WatchIt.Website.Services.WebAPI.Photos
 
 @inherits LayoutComponentBase
@@ -27,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)">
+                                            <button type="button" class="btn btn-sm" @onclick="@(() => _searchbarVisible = false)">&#10060;&#xFE0E;</button>
-                                                <img src="assets/icons/cancel.png" alt="cancel_icon" height="20" width="20"/>
-                                            </a>
                                         }
                                         else
                                         {
@@ -42,7 +41,7 @@
                                     <div class="float-end">
                                         @if (_user is null)
                                         {
-                                            <a id="signInButton" class="main-button" href="/auth">Sign in</a>
+                                            <a id="signInButton" class="main-button" href="/auth?redirect_to=@(WebUtility.UrlEncode(NavigationManager.Uri))">Sign in</a>
                                         }
                                         else
                                         {

WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor

@@ -1,117 +1,116 @@
 @page "/auth"
 @layout EmptyLayout
 
-<PageTitle>WatchIt - @(_authType == AuthType.SignIn ? "Sign in" : "Sign up")</PageTitle>
+<PageTitle>WatchIt - @(_isSingUp ? "Sign up" : "Sign in")</PageTitle>
-
 
 
 
 @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">
+        <div class="panel panel-header rounded-3 p-3">
-            <a class="logo" href="/">
+            <div class="d-flex flex-column align-items-center gap-3">
-                WatchIt
+                <a id="logo" class="logo m-0" href="/">WatchIt</a>
-            </a>
+                @if (_isSingUp)
-            <div>
-                @if (_authType == AuthType.SignIn)
                 {
-                    <form method="post" @onsubmit="Login" @formname="login">
+                    <EditForm Model="@(_registerModel)">
                         <AntiforgeryToken/>
-                        <div>
+                        <div class="container-grid">
-                            <label>
+                            <div class="row form-group mb-1">
-                                Username or email:
+                                <label for="username" class="col-5 col-form-label">Username:</label>
-                                <InputText @bind-Value="_loginModel!.UsernameOrEmail"/>
+                                <div class="col">
-                            </label>
+                                    <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>
+                    </EditForm>
-                            <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>
                 }
                 else
                 {
-                    <form method="post" @onsubmit="Register" @formname="register">
+                    <EditForm Model="@(_loginModel)">
                         <AntiforgeryToken/>
-                        <div>
+                        <div class="container-grid">
-                            <label>
+                            <div class="row form-group mb-1">
-                                Username:
+                                <label for="username" class="col-5 col-form-label">Username or email:</label>
-                                <InputText @bind-Value="_registerModel!.Username"/>
+                                <div class="col">
-                            </label>
+                                    <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>
+                    </EditForm>
-                            <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>
                 }
-            </div>
+                <div class="btn-group w-100">
-            @if (_errors is not null)
+                    <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>
-                <div class="text-danger">
+                    <input type="radio" class="btn-check" name="signtype" id="signup" autocomplete="off" checked="@(_isSingUp)" @onclick="() => { _isSingUp = true; _formMessage = null; _formMessageIsSuccess = false; }">
-                    @foreach (string error in _errors)
+                    <label class="btn btn-outline-secondary" for="signup">Sign up</label>
-                    {
-                        @error
-                        <br/>
-                    }
                 </div>
-            }
-            <div>
-                <label>
-                    <input type="radio" checked="@(() => _authType == AuthType.SignIn)" name="auth" @onchange="@(() => _authType = AuthType.SignIn)" />
-                    Sign in
-                </label>
-                <label>
-                    <input type="radio" checked="@(() => _authType == AuthType.SignUp)" name="auth" @onchange="@(() => _authType = AuthType.SignUp)" />
-                    Sign up
-                </label>
             </div>
         </div>
     </div>
-    
+
-    
+
-    
+
     <style>
+        /* TAGS */
+        
         body {
-            height: 100%;
+            background-image: url('@(_background is null ? "assets/background_temp.jpg": _background.ToString())');
-            
-            background-image: url('@_background');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
         }
     
-        .logo {
+    
-            background-image: linear-gradient(45deg, @_firstGradientColor, @_secondGradientColor);
+        /* IDS */
+    
+        #logo {
+            background-image: linear-gradient(45deg, @(_background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(_background.Background.FirstGradientColor)}, #{Convert.ToHexString(_background.Background.SecondGradientColor)}"));
         }
     </style>
 }

WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Components;
+using System.Net;
+using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model.Accounts;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
@@ -26,42 +27,38 @@ public partial class AuthPage
     
     
     
-    #region ENUMS
+    #region PARAMETERS
-
-    private enum AuthType
-    {
-        SignIn,
-        SignUp
-    }
 
+    [SupplyParameterFromQuery(Name = "redirect_to")]
+    private string RedirectTo { get; set; } = "/";
+    
     #endregion
     
     
     
     #region FIELDS
     
-    private bool _loaded = false;
+    private bool _loaded;
 
-    private AuthType _authType = AuthType.SignIn;
+    private PhotoResponse? _background;
-    private string _background = "assets/background_temp.jpg";
-    private string _firstGradientColor = "#c6721c";
-    private string _secondGradientColor = "#85200c";
-
-    private AuthenticateRequest _loginModel = new AuthenticateRequest
-    {
-        UsernameOrEmail = null,
-        Password = null
-    };
 
+    private bool _isSingUp;
+    private string? _formMessage;
+    private bool _formMessageIsSuccess;
+    
     private RegisterRequest _registerModel = new RegisterRequest
     {
         Username = null,
         Email = null,
         Password = null
     };
-    private string _passwordConfirmation;
+    private string _registerPasswordConfirmation;
-
+    
-    private IEnumerable<string> _errors;
+    private AuthenticateRequest _loginModel = new AuthenticateRequest
+    {
+        UsernameOrEmail = null,
+        Password = null
+    };
 
     #endregion
 
@@ -75,22 +72,19 @@ public partial class AuthPage
         {
             if (await AuthenticationService.GetAuthenticationStatusAsync())
             {
-                NavigationManager.NavigateTo("/");
+                NavigationManager.NavigateTo(WebUtility.UrlDecode(RedirectTo));
             }
-        
-            Action<PhotoResponse> backgroundSuccess = (data) =>
-            {
-                string imageBase64 = Convert.ToBase64String(data.Image);
-                string firstColor = BitConverter.ToString(data.Background.FirstGradientColor)
-                                                .Replace("-", string.Empty);
-                string secondColor = BitConverter.ToString(data.Background.SecondGradientColor)
-                                                 .Replace("-", string.Empty);
             
-                _background = $"data:{data.MimeType};base64,{imageBase64}";
+            List<Task> endTasks = new List<Task>();
-                _firstGradientColor = $"#{firstColor}";
+            
-                _secondGradientColor = $"#{secondColor}";
+            // STEP 0
-            };
+            endTasks.AddRange(
-            await PhotosWebAPIService.GetPhotoRandomBackground(backgroundSuccess);
+            [
+                PhotosWebAPIService.GetPhotoRandomBackground(data => _background = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
         
             _loaded = true;
             StateHasChanged();
@@ -99,44 +93,51 @@ public partial class AuthPage
 
     private async Task Login()
     {
-        await AccountsWebAPIService.Authenticate(_loginModel, LoginSuccess, LoginBadRequest, LoginUnauthorized);
-        
-        async void LoginSuccess(AuthenticateResponse data)
-        {
-            await TokensService.SaveAuthenticationData(data);
-            NavigationManager.NavigateTo("/");
-        }
-        
         void LoginBadRequest(IDictionary<string, string[]> data)
         {
-            _errors = data.SelectMany(x => x.Value).Select(x => $"• {x}");
+            _formMessageIsSuccess = false;
+            _formMessage = data.SelectMany(x => x.Value).FirstOrDefault();
         }
-        
+
         void LoginUnauthorized()
         {
-            _errors = [ "Incorrect account data" ];
+            _formMessageIsSuccess = false;
+            _formMessage = "Incorrect account data";
         }
+        
+        async Task LoginSuccess(AuthenticateResponse data)
+        {
+            await TokensService.SaveAuthenticationData(data);
+            NavigationManager.NavigateTo(RedirectTo);
+        }
+        
+        
+        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)
         {
-            _authType = AuthType.SignIn;
+            _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

WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.css

@@ -4,6 +4,14 @@ html {
     height: 100%;
 }
 
+body {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    
+    height: 100%;
+}
+
 
 
 /* CLASSES */