Files
Moonlight/Moonlight/Shared/Components/Auth/Register.razor
2023-09-06 20:05:38 +02:00

136 lines
6.2 KiB
Plaintext

@page "/register"
@* This is just a "virtual" route/page. The handling for that is
@* MainLayout doing for us. We need to put that here so the router
@* does not return the 404 page
*@
@using Moonlight.App.Services
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services.Interop
@using Moonlight.App.Services.Sessions
@inject SmartTranslateService SmartTranslateService
@inject NavigationManager NavigationManager
@inject AlertService AlertService
@inject UserService UserService
@inject CookieService CookieService
@inject OAuth2Service OAuth2Service
<div class="d-flex flex-center">
<div class="card rounded-3 w-md-550px">
<div class="card-body">
<div class="d-flex flex-center flex-column-fluid pb-15 pb-lg-20">
<div class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
<div class="text-center mb-11">
<h1 class="text-dark fw-bolder mb-3">
<TL>Sign Up</TL>
</h1>
<div class="text-gray-500 fw-semibold fs-6">
<TL>Sign up to start with moonlight</TL>
</div>
</div>
@foreach (var providers in OAuth2Service.Providers.Chunk(2))
{
<div class="row g-3 mb-9">
@foreach (var provider in providers)
{
<div class="col-md-6">
<a href="#" @onclick:preventDefault @onclick="() => StartOAuth2(provider.Key)" class="btn btn-flex btn-outline btn-text-gray-700 btn-active-color-primary bg-state-light flex-center text-nowrap w-100">
<div class="h-15px me-3">
<i class="mb-1 bx bx-md bx-fingerprint"></i>
</div>
<TL>Sign in with</TL>&nbsp; @(provider.Value.DisplayName)
</a>
</div>
}
</div>
}
@if (OAuth2Service.Providers.Any())
{
<div class="separator separator-content my-10">
<span class="w-125px text-gray-500 fw-semibold fs-7">
<TL>Or with email</TL>
</span>
</div>
}
<SmartForm Model="UserRegisterModel" OnValidSubmit="CreateUser">
<div class="fv-row mb-4 fv-plugins-icon-container">
<InputText @bind-Value="UserRegisterModel.Email" placeholder="@(SmartTranslateService.Translate("Email"))" name="email" autocomplete="off" class="form-control bg-transparent"/>
</div>
<div class="row">
<div class="col-lg-6 mb-4 fv-plugins-icon-container">
<InputText @bind-Value="UserRegisterModel.FirstName" type="text" placeholder="@(SmartTranslateService.Translate("Firstname"))" name="text" class="form-control bg-transparent"/>
</div>
<div class="col-lg-6 mb-4 fv-plugins-icon-container">
<InputText @bind-Value="UserRegisterModel.LastName" type="text" placeholder="@(SmartTranslateService.Translate("Lastname"))" name="text"class="form-control bg-transparent"/>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4 fv-plugins-icon-container">
<InputText @bind-Value="UserRegisterModel.Password" type="password" placeholder="@(SmartTranslateService.Translate("Password"))" name="password" autocomplete="off" class="form-control bg-transparent"/>
</div>
<div class="col-lg-6 mb-4 fv-plugins-icon-container">
<InputText @bind-Value="UserRegisterModel.ConfirmPassword" type="password" placeholder="@(SmartTranslateService.Translate("Repeat password"))" name="password" autocomplete="off" class="form-control bg-transparent"/>
</div>
</div>
<div class="row mt-3 mb-3">
<SmartReCaptcha @bind-Value="UserRegisterModel.Captcha">
</SmartReCaptcha>
</div>
<div class="d-grid mb-6">
<button type="submit" class="btn btn-primary">
<TL>Sign-up</TL>
</button>
</div>
</SmartForm>
<div class="text-gray-500 text-center fw-semibold fs-6">
<TL>Already registered?</TL>
<a href="/login" class="link-primary">
<TL>Sign in</TL>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
@code
{
private UserRegisterModel UserRegisterModel = new();
private async Task StartOAuth2(string id)
{
var url = await OAuth2Service.GetUrl(id);
NavigationManager.NavigateTo(url ,true);
}
private async Task CreateUser()
{
if (UserRegisterModel.ConfirmPassword != UserRegisterModel.Password)
{
await AlertService.Error(SmartTranslateService.Translate("Passwords need to match"));
return;
}
var token = await UserService.Register(UserRegisterModel.Email, UserRegisterModel.Password, UserRegisterModel.FirstName, UserRegisterModel.LastName);
await CookieService.SetValue("token", token, 10);
if (NavigationManager.Uri.EndsWith("register"))
NavigationManager.NavigateTo("/", true);
else
NavigationManager.NavigateTo(NavigationManager.Uri, true);
}
}