Improved oauth2 ui design
This commit is contained in:
Masu Baumgartner
@@ -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(
|
||||
"<h1>Login lol</h1><br />" +
|
||||
"<br />" +
|
||||
"<br />" +
|
||||
"<form method=\"post\">" +
|
||||
"<label for=\"email\">Email:</label>" +
|
||||
"<input type=\"email\" id=\"email\" name=\"email\"><br>" +
|
||||
"<br>" +
|
||||
"<label for=\"password\">Password:</label>" +
|
||||
"<input type=\"password\" id=\"password\" name=\"password\"><br>" +
|
||||
"<br>" +
|
||||
"<input type=\"submit\" value=\"Submit\">" +
|
||||
"</form>"
|
||||
);
|
||||
|
||||
if (action == "register")
|
||||
{
|
||||
await Response.WriteAsync(
|
||||
await RenderPage<Register>(parmeters =>
|
||||
{
|
||||
parmeters.Add("ClientId", clientId);
|
||||
parmeters.Add("ResponseType", responseType);
|
||||
parmeters.Add("RedirectUri", redirectUri);
|
||||
})
|
||||
);
|
||||
}
|
||||
else
|
||||
{
|
||||
await Response.WriteAsync(
|
||||
await RenderPage<Login>(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<string> RenderPage<T>(Action<Dictionary<string, object>>? onConfigureParameters = null) where T : ComponentBase
|
||||
{
|
||||
var parameters = new Dictionary<string, object>();
|
||||
onConfigureParameters?.Invoke(parameters);
|
||||
|
||||
await using var htmlRenderer = new HtmlRenderer(HttpContext.RequestServices, HttpContext.RequestServices.GetRequiredService<ILoggerFactory>());
|
||||
|
||||
var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
|
||||
{
|
||||
var parameterView = ParameterView.FromDictionary(parameters!);
|
||||
var output = await htmlRenderer.RenderComponentAsync<T>(parameterView);
|
||||
|
||||
return output.ToHtmlString();
|
||||
});
|
||||
|
||||
return html;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Login to your moonlight account</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<img class="mx-auto h-10 w-auto" src="https://gamecp.masuowo.xyz/api/core/asset/Core/svg/logo.svg" alt="Your Company">
|
||||
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Sign in to your account</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" action="#" method="POST">
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
|
||||
<div class="mt-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-10 text-center text-sm text-gray-500">
|
||||
Not a member?
|
||||
|
||||
@{
|
||||
var registerUrl = $"?response_type={ResponseType}&client_id={ClientId}&redirect_uri={RedirectUri}&action=register";
|
||||
}
|
||||
|
||||
<a href="@registerUrl" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">Register now</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter]
|
||||
public string ClientId { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string RedirectUri { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string ResponseType { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Register your moonlight account</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
|
||||
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<img class="mx-auto h-10 w-auto" src="https://gamecp.masuowo.xyz/api/core/asset/Core/svg/logo.svg" alt="Your Company">
|
||||
<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">Create your account</h2>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
|
||||
<form class="space-y-6" action="#" method="POST">
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
|
||||
<div class="mt-2">
|
||||
<input id="username" name="username" type="text" autocomplete="username" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
|
||||
<div class="mt-2">
|
||||
<input id="email" name="email" type="email" autocomplete="email" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-semibold text-indigo-600 hover:text-indigo-500">Forgot password?</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign up</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="mt-10 text-center text-sm text-gray-500">
|
||||
Already a member?
|
||||
|
||||
@{
|
||||
var loginUrl = $"?response_type={ResponseType}&client_id={ClientId}&redirect_uri={RedirectUri}&action=login";
|
||||
}
|
||||
|
||||
<a href="@loginUrl" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">Login now</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@code
|
||||
{
|
||||
[Parameter]
|
||||
public string ClientId { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string RedirectUri { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string ResponseType { get; set; }
|
||||
}
|
||||
Reference in New Issue
Block a user