@page "/login"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<div class="card cw-480" style="width: 400px">
    <EditForm Model="@Data"
              OnValidSubmit="@HandleValidSubmit"
              OnInvalidSubmit="@HandleInvalidSubmit"
              Context="EditFormContext">
        <DataAnnotationsValidator />
        <div class="card-header text-center py-3">
            <h4>Welcome to DevExpress</h4>
            <p class="tm-8 mb-0 fw-normal fs-825">
                Log in to see it in action
            </p>
        </div>
        <div class="card-body">
            <DxFormLayout>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="tbUsername" class="d-none">Username</label>
                    <DxTextBox @bind-Text="@Data.Username"
                               NullText="Username"
                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                               InputId="tbUsername" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Username)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <label for="tbPassword" class="d-none">Password</label>
                    <DxTextBox @bind-Text="@Data.Password"
                               NullText="Password"
                               Password="true"
                               ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                               InputId="tbPassword" />
                    <div class="text-danger">
                        <ValidationMessage For="@(() => Data.Password)" />
                    </div>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <DxButton CssClass="w-100"
                              Text="Login"
                              RenderStyle="ButtonRenderStyle.Primary"
                              SubmitFormOnClick="true" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanMd="12">
                    <div class="text-center pt-2">
                        <div class="tm-8 fs-825">
                            Do not have an account?
                        </div>
                        <DxButton Text="Create an account"
                                  RenderStyle="ButtonRenderStyle.Link"
                                  Click="GotoRegistrationForm" />
                    </div>
                </DxFormLayoutItem>
            </DxFormLayout>
        </div>
    </EditForm>
</div>
<p class="tm-8 cw-480 mt-2">
    @FormSubmitResult
</p>

@code {
    string FormSubmitResult = "";
    UserDataBase Data { get; set; } = new UserDataBase();
    void GotoRegistrationForm()
    {
        Navigation.NavigateTo("/register");

    }
    void HandleValidSubmit()
    {
        FormSubmitResult = "You have been logged in successully.";
    }
    void HandleInvalidSubmit()
    {
        FormSubmitResult = "";
    }
}