diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml deleted file mode 100644 index 198c17b..0000000 --- a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml +++ /dev/null @@ -1,8 +0,0 @@ -@page "/login" -@model ShoppingAssistantWebClient.Web.Pages.LoginModel - -

Login

- -@{ - -} diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs b/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs deleted file mode 100644 index f57fb3e..0000000 --- a/ShoppingAssistantWebClient.Web/Pages/Login.cshtml.cs +++ /dev/null @@ -1,12 +0,0 @@ -using Microsoft.AspNetCore.Mvc; -using Microsoft.AspNetCore.Mvc.RazorPages; - -namespace ShoppingAssistantWebClient.Web.Pages -{ - public class LoginModel : PageModel - { - public void OnGet() - { - } - } -} diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.razor b/ShoppingAssistantWebClient.Web/Pages/Login.razor new file mode 100644 index 0000000..8b690a9 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/Login.razor @@ -0,0 +1,82 @@ +@page "/login" + +@using System.Text.RegularExpressions +@using Microsoft.AspNetCore.Components.Forms +@using ShoppingAssistantWebClient.Web.Models.Input; + + + + + + + + +
+
+ @if (!string.IsNullOrWhiteSpace(errorMessage)) + { +
+ @errorMessage +
+ } + + @phoneValidationMessage +
or
+ + @emailValidationMessage + + + +
+
+ +@code { + private string phoneValidationMessage = ""; + private string emailValidationMessage = ""; + private bool isPhoneInvalid = false; + private bool isEmailInvalid = false; + + private LoginInputModel LoginInput = new LoginInputModel(); + + private void ValidatePhone() + { + if (!string.IsNullOrWhiteSpace(LoginInput.Phone) && !Regex.IsMatch(LoginInput.Phone, @"^\+[0-9]{1,15}$")) + { + phoneValidationMessage = "Please enter a valid phone number"; + isPhoneInvalid = true; + } + else + { + phoneValidationMessage = ""; + isPhoneInvalid = false; + } + } + + private void ValidateEmail() + { + if (!string.IsNullOrWhiteSpace(LoginInput.Email) && !Regex.IsMatch(LoginInput.Email, @"^[^@\s]+@[^@\s]+\.[^@\s]+$")) + { + emailValidationMessage = "Please enter a valid email address"; + isEmailInvalid = true; + } + else + { + emailValidationMessage = ""; + isEmailInvalid = false; + } + } + + private bool HasValidationErrors() + { + return !string.IsNullOrWhiteSpace(phoneValidationMessage) || !string.IsNullOrWhiteSpace(emailValidationMessage); + } + private async Task HandleLogin() + { + if (HasValidationErrors()) + { + return; + } + + await LoginUser(LoginInput); + } +} diff --git a/ShoppingAssistantWebClient.Web/Pages/Login.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Login.razor.cs new file mode 100644 index 0000000..2a15b52 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/Login.razor.cs @@ -0,0 +1,43 @@ +using Microsoft.AspNetCore.Components; +using ShoppingAssistantWebClient.Web.Network; +using ShoppingAssistantWebClient.Web.Models.Input; + + +namespace ShoppingAssistantWebClient.Web.Pages; + +public partial class Login : ComponentBase +{ + + [Inject] + NavigationManager NavigationManager { get; set; } + + [Inject] + private AuthenticationService _authenticationService { get; set; } + + private string errorMessage = ""; + + + private void RedirectToNewChat() { + var url = $"/"; + NavigationManager.NavigateTo(url); + } + + public async Task LoginUser(LoginInputModel login) { + if (login.IsEmailOrPhoneProvided) + { + try + { + await _authenticationService.LoginAsync(login); + RedirectToNewChat(); + } + catch (Exception ex) + { + errorMessage = "Login failed. Please try again."; + } + } + else + { + errorMessage = "Please provide an email or phone number."; + } + } +} diff --git a/ShoppingAssistantWebClient.Web/Pages/Settings.razor b/ShoppingAssistantWebClient.Web/Pages/Settings.razor index 3c79afe..ec1275d 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Settings.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Settings.razor @@ -3,6 +3,7 @@ @using ShoppingAssistantWebClient.Web.Models @inject IHttpContextAccessor httpContextAccessor; +@inject NavigationManager NavigationManager;
- +
@@ -141,6 +142,11 @@ } } + private void RedirectToLogin() { + var url = $"/login"; + NavigationManager.NavigateTo(url); + } + private string ShowErrorDivClass() { return string.IsNullOrEmpty(errorMessage) ? "hidden" : "alert alert-danger"; diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/Login.css b/ShoppingAssistantWebClient.Web/wwwroot/css/Login.css new file mode 100644 index 0000000..73e912a --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/Login.css @@ -0,0 +1,112 @@ +.page { + position: relative; + width: 100%; + height: 96vh; + border: 1.5% solid; + padding: 1.25em; + background-color: #f0f0f0; +} + +.sidebar-menu { + display: none; +} + +.right-frame { + position: absolute; + right: 1.25em; + left: 1.25em; + top: 1.25em; + bottom: 0em; + transition: 1s; + + @media screen and (max-width: 900px) { + left: 1.25em; + } +} + +footer { + height: 4vh; + background-color: #f0f0f0; +} + +.amazon-associate { + position: relative; + left: calc(50% - 12.5em); + transform: translateX(-50%); + bottom: 0; + font-size: 0.7em; + color: #000; + text-decoration: none; + align-items: center; + justify-content: center; + transition: 0.5s; + background-color: #f0f0f0; +} + +.login-container { + display: flex; + justify-content: center; + align-items: center; + height: 96vh; + background-color: #f0f0f0; +} + +.login-form { + max-width: 570px; + background-color: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} + +.login-form input[type="tel"], +.login-form input[type="email"], +.login-form input[type="password"] { + width: 100%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ddd; + border-radius: 5px; +} + +.or { + text-align: center; + color: #333; +} + +.login-button, +.back-button { + width: 100%; + padding: 10px; + margin: 10px 0; + border: none; + border-radius: 5px; + background-color: #007bff; + color: white; + cursor: pointer; +} + +.back-button { + background-color: #ccc; +} + +.login-button:hover, +.back-button:hover { + opacity: 0.9; +} + +@media (max-width: 600px) { + .login-form { + width: 90%; + } +} + +.error-message-container { + text-align: center; + margin: 10px 0; + padding: 5px; +} + +.validation-message.error { + color: red; +}