MateuszSkoczek/WatchIt
1
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge pull request #86 from mateuszskoczek/features/auth_page_renew

Browse Source 
Features/auth page renew
This commit is contained in:
Mateusz Skoczek
2024-09-29 18:56:14 +02:00
committed by GitHub
Unverified
parent f9cea4e8bf 662789395f
commit 965c72fc7a
6 changed files with 159 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WatchIt.Website/WatchIt.Website/App.razor
View File

@@ -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>

1
WatchIt.Website/WatchIt.Website/Layout/EmptyLayout.razor.css
View File

@@ -1 +0,0 @@

9
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
View File

@@ -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)">
<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
{
@@ -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
{

175
WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor
View File

@@ -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">
<a class="logo" href="/">
WatchIt
</a>
<div>
@if (_authType == AuthType.SignIn)
<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="Login" @formname="login">
<EditForm Model="@(_registerModel)">
<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:</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>
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>
}
else
{
<form method="post" @onsubmit="Register" @formname="register">
<EditForm Model="@(_loginModel)">
<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 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>
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>
}
</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="@(() => _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');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('@(_background is null ? "assets/background_temp.jpg": _background.ToString())');
}
.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>
}

117
WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.cs
View File

@@ -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
private enum AuthType
{
SignIn,
SignUp
}
#region PARAMETERS
[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 string _background = "assets/background_temp.jpg";
private string _firstGradientColor = "#c6721c";
private string _secondGradientColor = "#85200c";
private AuthenticateRequest _loginModel = new AuthenticateRequest
{
UsernameOrEmail = null,
Password = null
};
private PhotoResponse? _background;
private bool _isSingUp;
private string? _formMessage;
private bool _formMessageIsSuccess;
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
@@ -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}";
_firstGradientColor = $"#{firstColor}";
_secondGradientColor = $"#{secondColor}";
};
await PhotosWebAPIService.GetPhotoRandomBackground(backgroundSuccess);
List<Task> endTasks = new List<Task>();
// STEP 0
endTasks.AddRange(
[
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

8
WatchIt.Website/WatchIt.Website/Pages/AuthPage.razor.css
View File

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