Registration on another page

Question

I have authorization form for my website:

Inside form:

<div class="auth">
@* <h1 class="auth__header">New User</h1> *@
<div class="auth__form">
    <EditForm class="form" Model="@us" OnValidSubmit="@OnValidSubmit">
        <DataAnnotationsValidator/>
        <label class="auth__label">Name :</label>
        <InputText class="input auth__input" @bind-Value="us.Name"/>
        <ValidationMessage For="@(() => us.Name)" />
        
        <label class="auth__label">Surname :</label>
        <InputText class="input auth__input" @bind-Value="us.Surname"/>
        <ValidationMessage For="@(() => us.Surname)" />
        
        <label class="auth__label">Email :</label>
        <InputText class="input auth__input" @bind-Value="us.Email"/>
        <ValidationMessage For="@(() => us.Email)" />
        
        <label class="auth__label">Password :</label>
        <InputText class="input auth__input" @bind-Value="us.Password"/>
        <ValidationMessage For="@(() => us.Password)" />
        
        <button>@ButtonText</button>
    </EditForm>
</div>

Problem is that it's shown inside site in the @Body in Shared blocks, but I need it as a another page as in this example (Blazor with individual Accounts), and I don't know how to do it:

But in this example, authorization form is a separate element, not subject to customization, and I didn't find examples or resources on the internet that had their own form.

Thanks for answers.

Answer 1

Create new razor page with this code:

@inherits LayoutComponentBase

<div>
    @Body
</div>

And paste this into the page you need (for my example create.razor):

@layout LoginLayout

And this will be worked.