login changes

TIAMSharedUI/Pages/Components/Step1.razor

@@ -0,0 +1,47 @@
+<form class="p-3 mt-3">
+    
+
+    <div class="form-field d-flex align-items-center">
+        
+
+        <DxMaskedInput @bind-Value="@Email"
+               CssClass="cw-320"
+               Mask="@EmailMask"
+               MaskMode="MaskMode.RegEx">
+    <DxRegExMaskProperties MaskAutoCompleteMode="@((MaskAutoCompleteMode)AutoCompleteMode)"
+                           Placeholder="Placeholder"
+                           PlaceholdersVisible="PlaceholderVisible" />
+                           </DxMaskedInput>
+
+        
+    </div>
+
+    <a class="btn btn-primary mt-3" @onclick="GoToNextStep">Next</a>
+</form>
+
+
+
+@code {
+    [Parameter]
+    public string Email { get; set; }
+
+    [Parameter]
+    public EventCallback<string> onNext { get; set; }
+
+    [Parameter]
+    public EventCallback<string> EmailChanged { get; set; }
+
+    IEnumerable<char> PredefinedPlaceholders { get; set; } = new List<char>() { '_', '#' };
+    
+    string EmailMask { get; set; } = @"(\w|[.-])+@(\w|-)+\.(\w|-){2,4}";
+    MaskAutoCompleteMode AutoCompleteMode { get; set; } = MaskAutoCompleteMode.Strong;
+    char Placeholder { get; set; } = '_';
+    bool PlaceholderVisible { get; set; } = true;
+
+    private async Task GoToNextStep()
+    {
+        await EmailChanged.InvokeAsync(Email);
+        await onNext.InvokeAsync();
+    }
+
+}

TIAMSharedUI/Pages/Components/Step2.razor

@@ -0,0 +1,39 @@
+<div>
+    <h3>Step 2: Phone Number</h3>
+
+    <div class="form-field d-flex align-items-center">
+        
+
+        <DxMaskedInput @bind-Value="PhoneNumber"
+                       Mask="\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})"
+                       MaskMode="@MaskMode.RegEx">
+            <DxRegExMaskProperties Placeholder="Placeholder" />
+        </DxMaskedInput>
+
+        <!--input @bind="Email" type="email" name="email" id="email" placeholder="Email"-->
+    </div>
+
+    
+
+    <!--input @bind="PhoneNumber" placeholder="Enter your phone number" /-->
+    <a class="btn btn-primary mt-3" @onclick="GoToNextStep">Next</a>
+</div>
+
+@code {
+    [Parameter]
+    public string PhoneNumber { get; set; }
+
+    [Parameter]
+    public EventCallback<string> onNext { get; set; }
+
+    [Parameter]
+    public EventCallback<string> PhoneNumberChanged { get; set; }
+
+    char Placeholder = '_';
+
+    private async Task GoToNextStep()
+    {
+        await PhoneNumberChanged.InvokeAsync(PhoneNumber);
+        await onNext.InvokeAsync(PhoneNumber);
+    }
+}

TIAMSharedUI/Pages/Components/Step3.razor

@@ -0,0 +1,35 @@
+<div>
+    <h3>Step 3: Password</h3>
+    <div class="form-field d-flex align-items-center">
+
+
+        <DxTextBox @bind-Text="@Password"
+                   Password="true"
+                   CssClass="cw-320" />
+
+        <!--input @bind="Email" type="email" name="email" id="email" placeholder="Email"-->
+    </div>
+
+    <!--input @bind="Password" type="password" placeholder="Enter your password" /-->
+    <a class="btn btn-primary mt-3" @onclick="SubmitRegistration">Next</a>
+</div>
+
+@code {
+        [Parameter]
+        public string Password { get; set; }
+
+        [Parameter]
+        public EventCallback<string> PasswordChanged { get; set; }
+
+        [Parameter]
+        public EventCallback onSubmit { get; set; }
+
+        
+
+        public async Task SubmitRegistration()
+        {
+        await PasswordChanged.InvokeAsync(Password);
+        await onSubmit.InvokeAsync();
+        }
+}
+

TIAMSharedUI/Pages/Login.razor

@@ -19,8 +19,8 @@
         <div class="p-3 mt-3">
             <div class="form-field d-flex align-items-center">
                 <span class="far fa-user"></span>
-                <input type="tel" @bind-value="loginModel.PhoneNumber" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
+                <input type="email" @bind-value="loginModel.Email" name="email" id="phoneNumber" placeholder="Phone number">
-                <ValidationMessage For="@(() => loginModel.PhoneNumber)" />
+                <ValidationMessage For="@(() => loginModel.Email)" />
             </div>
             <div class="form-field d-flex align-items-center">
                 <span class="fas fa-key"></span>

TIAMSharedUI/Pages/Register.razor

@@ -1,4 +1,6 @@
 @page "/register"
+@using TIAMWebApp.Shared.Application.Models.PageModels;
+@using TIAMSharedUI.Pages.Components;
 @inject NavigationManager navManager
 <PageTitle>Register</PageTitle>
 
@@ -10,20 +12,35 @@
             Let's create your account!
         </div>
         <form class="p-3 mt-3">
-        <!--DxMaskedInput @bind-Value="@Telephone"
+        <div>
-                       CssClass="cw-320"
+            @switch (currentStep)
-                       Mask="+00 (999) 000-0000">
+            {
-            <DxTextMaskProperties Placeholder="Placeholder" SaveLiteral="SaveLiterals" />
+                case 1:
-        </DxMaskedInput-->
+                    <Step1 @bind-Email="regModel.Email" onNext="GoToNextStep" />;
-
+                    break;
-            <div class="form-field d-flex align-items-center">
+                case 2:
-                <span class="far fa-user"></span>
+                    <Step2 @bind-PhoneNumber="regModel.PhoneNumber" onNext="GoToNextStep" />;
-                <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
+                    break;
+                case 3:
+                    <Step3 @bind-Password="regModel.Password" onSubmit="SubmitRegistration" />;
+                    break;
+            }
         </div>
       
-        <a class="btn btn-primary mt-3" @onclick="next">Next</a>
-        </form>
         
+        </form>
+    @{
+        if(!registered)
+        {
+
+            <div>
+                <p>@regModel.Email</p>
+                <p>@regModel.PhoneNumber</p>
+                <p>@regModel.Password</p>
+            </div>
+        }
+
+}
         
 
         <div class="text-center fs-6">
@@ -33,6 +50,7 @@
 
 @code {
         
+        RegistrationModel regModel = new();
         /*IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
         string Telephone { get; set; } = "5625595830";
         char Placeholder { get; set; } = '_';
@@ -43,6 +61,26 @@
             navManager.NavigateTo("register2");
         }
 
+    private int currentStep = 1;
+
+    private string Email { get; set; }
+    private string PhoneNumber { get; set; }
+    private string Password { get; set; }
+    bool registered = false;
+
+    private void GoToNextStep(string someString)
+    {
+        currentStep++;
+    }
+
+    private void SubmitRegistration()
+    {
+        // Implement your registration logic here
+        // You can use Email, PhoneNumber, and Password variables
+        // Reset currentStep after successful registration
+        registered = true;
+        currentStep = 1;
+    }
+
+
 }
-
-

TIAMSharedUI/Pages/Registerold.razor

@@ -0,0 +1,48 @@
+@page "/registerOld"
+@inject NavigationManager navManager
+<PageTitle>Register</PageTitle>
+
+<div class="wrapper">
+        <div class="my-logo">
+            <img src="_content/TIAMSharedUI/images/png-logo-0.png" alt="">
+        </div>
+        <div class="text-center mt-4 name">
+            Let's create your account!
+        </div>
+        <form class="p-3 mt-3">
+        <!--DxMaskedInput @bind-Value="@Telephone"
+                       CssClass="cw-320"
+                       Mask="+00 (999) 000-0000">
+            <DxTextMaskProperties Placeholder="Placeholder" SaveLiteral="SaveLiterals" />
+        </DxMaskedInput-->
+
+            <div class="form-field d-flex align-items-center">
+                <span class="far fa-user"></span>
+                <input type="tel" name="phoneNumber" id="phoneNumber" placeholder="Phone number">
+            </div>
+      
+        <a class="btn btn-primary mt-3" @onclick="next">Next</a>
+        </form>
+
+
+
+        <div class="text-center fs-6">
+            Already have an account? <a href="login">Sign in here!</a>
+        </div>
+    </div>
+
+@code {
+
+    /*IEnumerable<char> PredefinedPlaceholders = new List<char>() { '_', '#' };
+    string Telephone { get; set; } = "5625595830";
+    char Placeholder { get; set; } = '_';
+    bool SaveLiterals { get; set; } = true;*/
+
+    private void next()
+    {
+        navManager.NavigateTo("register2");
+    }
+    
+}
+
+

TIAMSharedUI/Pages/Registerold.razor.css

@@ -0,0 +1,3 @@
+.wrapper {
+    max-width: 400px;
+}

TIAMWebApp/Shared/Models/PageModels/LoginModel.cs

@@ -12,7 +12,7 @@ namespace TIAMWebApp.Shared.Application.Models.PageModels
         [Required]
         public string? Password { get; set; }
         [Required]
-        public string? PhoneNumber { get; set; }
+        public string? Email { get; set; }
         
     }
 }