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

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

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

@@ -8,91 +8,91 @@
@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>
<label>
Email:
<InputText @bind-Value="_registerModel!.Email"/>
</label>
</div>
<div>
<label>
Password:
<InputText type="password" @bind-Value="_registerModel!.Password"/>
</label>
<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>
<label>
Confirm password:
<InputText type="password" @bind-Value="_passwordConfirmation"/>
</label>
</div>
<div>
<button type="submit">Sign up</button>
<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>
</form>
</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>
</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>
<label>
Password:
<InputText type="password" @bind-Value="_loginModel!.Password"/>
</label>
</div>
<div>
<label>
<InputCheckbox @bind-Value="_loginModel!.RememberMe"></InputCheckbox>
Remember me
</label>
<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>
<button type="submit">Sign in</button>
</div>
</form>
<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>
</EditForm>
}
<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>
@if (_errors is not null)
{
<div class="text-danger">
@foreach (string error in _errors)
{
@error
<br/>
}
</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>

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

@@ -43,14 +43,8 @@ public partial class AuthPage
private PhotoResponse? _background;
private bool _isSingUp;
private AuthenticateRequest _loginModel = new AuthenticateRequest
{
UsernameOrEmail = null,
Password = null
};
private string? _formMessage;
private bool _formMessageIsSuccess;
private RegisterRequest _registerModel = new RegisterRequest
{
@@ -58,9 +52,13 @@ public partial class AuthPage
Email = null,
Password = null
};
private string _passwordConfirmation;
private string _registerPasswordConfirmation;
private IEnumerable<string> _errors;
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();
}
async void LoginSuccess(AuthenticateResponse data)
void LoginUnauthorized()
{
_formMessageIsSuccess = false;
_formMessage = "Incorrect account 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