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

auth page renewed, fix in MainLayout

Browse Source
This commit is contained in:
Mateusz Skoczek
2024-09-29 18:54:08 +02:00
Unverified
parent 97dcdbebf4
commit 662789395f
4 changed files with 114 additions and 111 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 --> <!-- CSS -->
<link rel="stylesheet" href="css/general.css?version=0.2.0.3"/> <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="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 --> <!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

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

@@ -28,9 +28,7 @@
<InputText class="form-control" placeholder="Search with regex" @bind-Value="@(_searchbarText)"/> <InputText class="form-control" placeholder="Search with regex" @bind-Value="@(_searchbarText)"/>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary" @onclick="@(SearchStart)">⌕</button> <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 else
{ {

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

@@ -8,98 +8,98 @@
@if (_loaded) @if (_loaded)
{ {
<div class="h-100 d-flex align-items-center justify-content-center"> <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 id="logo" 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>
<div>
@if (_isSingUp) @if (_isSingUp)
{ {
<form method="post" @onsubmit="Register" @formname="register"> <EditForm Model="@(_registerModel)">
<AntiforgeryToken/> <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:</label>
<InputText @bind-Value="_registerModel!.Username"/> <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>
<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>
} }
else else
{ {
<form method="post" @onsubmit="Login" @formname="login"> <EditForm Model="@(_loginModel)">
<AntiforgeryToken/> <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 or email:</label>
<InputText @bind-Value="_loginModel!.UsernameOrEmail"/> <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>
<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>
} }
</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>
}
<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> </div>
</div> </div>
<style> <style>
/* TAGS */ /* TAGS */
body { body {
@@ -112,5 +112,5 @@
#logo { #logo {
background-image: linear-gradient(45deg, @(_background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(_background.Background.FirstGradientColor)}, #{Convert.ToHexString(_background.Background.SecondGradientColor)}")); background-image: linear-gradient(45deg, @(_background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(_background.Background.FirstGradientColor)}, #{Convert.ToHexString(_background.Background.SecondGradientColor)}"));
} }
</style> </style>
} }

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

@@ -43,14 +43,8 @@ public partial class AuthPage
private PhotoResponse? _background; private PhotoResponse? _background;
private bool _isSingUp; private bool _isSingUp;
private string? _formMessage;
private bool _formMessageIsSuccess;
private AuthenticateRequest _loginModel = new AuthenticateRequest
{
UsernameOrEmail = null,
Password = null
};
private RegisterRequest _registerModel = new RegisterRequest private RegisterRequest _registerModel = new RegisterRequest
{ {
@@ -58,9 +52,13 @@ public partial class AuthPage
Email = null, Email = null,
Password = null Password = null
}; };
private string _passwordConfirmation; private string _registerPasswordConfirmation;
private IEnumerable<string> _errors; private AuthenticateRequest _loginModel = new AuthenticateRequest
{
UsernameOrEmail = null,
Password = null
};
#endregion #endregion
@@ -95,44 +93,51 @@ public partial class AuthPage
private async Task Login() 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();
}
async void LoginSuccess(AuthenticateResponse data) void LoginUnauthorized()
{
_formMessageIsSuccess = false;
_formMessage = "Incorrect account data";
}
async Task LoginSuccess(AuthenticateResponse data)
{ {
await TokensService.SaveAuthenticationData(data); await TokensService.SaveAuthenticationData(data);
NavigationManager.NavigateTo(RedirectTo); NavigationManager.NavigateTo(RedirectTo);
} }
void LoginBadRequest(IDictionary<string, string[]> data)
{
_errors = data.SelectMany(x => x.Value).Select(x => $"• {x}");
}
void LoginUnauthorized() await AccountsWebAPIService.Authenticate(_loginModel, async (data) => await LoginSuccess(data), LoginBadRequest, LoginUnauthorized);
{
_errors = [ "Incorrect account data" ];
}
} }
private async Task Register() 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) void RegisterSuccess(RegisterResponse data)
{ {
_formMessageIsSuccess = true;
_formMessage = "You are registered. You can sign in now.";
_isSingUp = false; _isSingUp = false;
} }
void RegisterBadRequest(IDictionary<string, string[]> data) 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 #endregion