From eba6e00251f54ebd0053f0fde74ca64829284d27 Mon Sep 17 00:00:00 2001 From: Masu Baumgartner <68913099+Masu-Baumgartner@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:49:03 +0200 Subject: [PATCH] Improved oauth2 ui design --- .../Controllers/OAuth2/OAuth2Controller.cs | 65 +++++++++++----- .../Http/Controllers/OAuth2/Pages/Login.razor | 66 +++++++++++++++++ .../Controllers/OAuth2/Pages/Register.razor | 74 +++++++++++++++++++ .../UI/Screens/AuthenticationScreen.razor | 5 ++ 4 files changed, 192 insertions(+), 18 deletions(-) create mode 100644 Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Login.razor create mode 100644 Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Register.razor diff --git a/Moonlight.ApiServer/Http/Controllers/OAuth2/OAuth2Controller.cs b/Moonlight.ApiServer/Http/Controllers/OAuth2/OAuth2Controller.cs index cafbcb03..dcb99546 100644 --- a/Moonlight.ApiServer/Http/Controllers/OAuth2/OAuth2Controller.cs +++ b/Moonlight.ApiServer/Http/Controllers/OAuth2/OAuth2Controller.cs @@ -1,18 +1,19 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Mvc; using MoonCore.Exceptions; using MoonCore.Extended.Abstractions; using MoonCore.Extended.OAuth2.AuthServer; using MoonCore.Extended.OAuth2.Models; -using MoonCore.Services; -using Moonlight.ApiServer.Configuration; using Moonlight.ApiServer.Database.Entities; +using Moonlight.ApiServer.Http.Controllers.OAuth2.Pages; using Moonlight.ApiServer.Services; using Moonlight.Shared.Http.Responses.OAuth2; namespace Moonlight.ApiServer.Http.Controllers.OAuth2; [ApiController] -[Route("oauth2")] +[Microsoft.AspNetCore.Mvc.Route("oauth2")] public class OAuth2Controller : Controller { private readonly OAuth2Service OAuth2Service; @@ -31,7 +32,8 @@ public class OAuth2Controller : Controller public async Task Authorize( [FromQuery(Name = "response_type")] string responseType, [FromQuery(Name = "client_id")] string clientId, - [FromQuery(Name = "redirect_uri")] string redirectUri + [FromQuery(Name = "redirect_uri")] string redirectUri, + [FromQuery(Name = "action")] string action = "login" ) { if (responseType != "code") @@ -41,20 +43,29 @@ public class OAuth2Controller : Controller throw new HttpApiException("Invalid authorization request", 400); Response.StatusCode = 200; - await Response.WriteAsync( - "

Login lol


" + - "
" + - "
" + - "
" + - "" + - "
" + - "
" + - "" + - "
" + - "
" + - "" + - "
" - ); + + if (action == "register") + { + await Response.WriteAsync( + await RenderPage(parmeters => + { + parmeters.Add("ClientId", clientId); + parmeters.Add("ResponseType", responseType); + parmeters.Add("RedirectUri", redirectUri); + }) + ); + } + else + { + await Response.WriteAsync( + await RenderPage(parmeters => + { + parmeters.Add("ClientId", clientId); + parmeters.Add("ResponseType", responseType); + parmeters.Add("RedirectUri", redirectUri); + }) + ); + } } [HttpPost("authorize")] @@ -189,4 +200,22 @@ public class OAuth2Controller : Controller Email = currentUser.Email }; } + + private async Task RenderPage(Action>? onConfigureParameters = null) where T : ComponentBase + { + var parameters = new Dictionary(); + onConfigureParameters?.Invoke(parameters); + + await using var htmlRenderer = new HtmlRenderer(HttpContext.RequestServices, HttpContext.RequestServices.GetRequiredService()); + + var html = await htmlRenderer.Dispatcher.InvokeAsync(async () => + { + var parameterView = ParameterView.FromDictionary(parameters!); + var output = await htmlRenderer.RenderComponentAsync(parameterView); + + return output.ToHtmlString(); + }); + + return html; + } } \ No newline at end of file diff --git a/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Login.razor b/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Login.razor new file mode 100644 index 00000000..ce39a655 --- /dev/null +++ b/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Login.razor @@ -0,0 +1,66 @@ + + + Login to your moonlight account + + + + + + +
+
+ Your Company +

Sign in to your account

+
+ +
+
+
+ +
+ +
+
+ +
+
+ +
+ Forgot password? +
+
+
+ +
+
+ +
+ +
+
+ +

+ Not a member? + + @{ + var registerUrl = $"?response_type={ResponseType}&client_id={ClientId}&redirect_uri={RedirectUri}&action=register"; + } + + Register now +

+
+
+ + + +@code +{ + [Parameter] + public string ClientId { get; set; } + + [Parameter] + public string RedirectUri { get; set; } + + [Parameter] + public string ResponseType { get; set; } +} diff --git a/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Register.razor b/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Register.razor new file mode 100644 index 00000000..ca8a9ba0 --- /dev/null +++ b/Moonlight.ApiServer/Http/Controllers/OAuth2/Pages/Register.razor @@ -0,0 +1,74 @@ + + + Register your moonlight account + + + + + + +
+
+ Your Company +

Create your account

+
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ Forgot password? +
+
+
+ +
+
+ +
+ +
+
+ +

+ Already a member? + + @{ + var loginUrl = $"?response_type={ResponseType}&client_id={ClientId}&redirect_uri={RedirectUri}&action=login"; + } + + Login now +

+
+
+ + + +@code +{ + [Parameter] + public string ClientId { get; set; } + + [Parameter] + public string RedirectUri { get; set; } + + [Parameter] + public string ResponseType { get; set; } +} diff --git a/Moonlight.Client/UI/Screens/AuthenticationScreen.razor b/Moonlight.Client/UI/Screens/AuthenticationScreen.razor index 62ae78ff..8e302685 100644 --- a/Moonlight.Client/UI/Screens/AuthenticationScreen.razor +++ b/Moonlight.Client/UI/Screens/AuthenticationScreen.razor @@ -108,6 +108,8 @@ else { IsHandlingDone = true; await InvokeAsync(StateHasChanged); + + Navigation.NavigateTo("/", true); } } @@ -120,6 +122,9 @@ else $"&redirect_uri={authStartData.RedirectUri}" + $"&response_type=code"; + Navigation.NavigateTo(uri, true); + return; + try { await WindowService.Open(