Improve authentication by conditionally rendering LDAP and OIDC login options and fetching auth provider configurations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/4f13eaa5-e266-4ec8-8273-939cfc3ca326.jpg
This commit is contained in:
alphaeusmote
2025-04-10 03:19:57 +00:00
parent 9ccac76b03
commit 8bb52a2a2f
2 changed files with 90 additions and 55 deletions
+63 -54
View File
@@ -234,61 +234,70 @@ export default function AuthPage() {
{auth.loginMutation.isPending ? "Logging in..." : "Log in"}
</Button>
<div className="relative my-5">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-gray-300"></span>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<Button
type="button"
variant="outline"
className="w-full"
disabled={auth.ldapLoginMutation.isPending || auth.loginMutation.isPending}
onClick={() => {
const username = loginForm.getValues("username");
const password = loginForm.getValues("password");
{/* Only show additional login methods when they are configured */}
{(auth.ldapEnabled || auth.oidcEnabled) && (
<>
<div className="relative my-5">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-gray-300"></span>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with</span>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
{auth.ldapEnabled && (
<Button
type="button"
variant="outline"
className="w-full"
disabled={auth.ldapLoginMutation.isPending || auth.loginMutation.isPending}
onClick={() => {
const username = loginForm.getValues("username");
const password = loginForm.getValues("password");
// Validate the fields
if (!username || !password) {
loginForm.setError("username", {
type: "manual",
message: !username ? "Username is required" : undefined
});
loginForm.setError("password", {
type: "manual",
message: !password ? "Password is required" : undefined
});
return;
}
auth.ldapLoginMutation.mutate(
{ username, password },
{
onSuccess: () => {
navigate("/");
}
}
);
}}
>
{auth.ldapLoginMutation.isPending ? "Authenticating..." : "LDAP Login"}
</Button>
)}
// Validate the fields
if (!username || !password) {
loginForm.setError("username", {
type: "manual",
message: !username ? "Username is required" : undefined
});
loginForm.setError("password", {
type: "manual",
message: !password ? "Password is required" : undefined
});
return;
}
auth.ldapLoginMutation.mutate(
{ username, password },
{
onSuccess: () => {
navigate("/");
}
}
);
}}
>
{auth.ldapLoginMutation.isPending ? "Authenticating..." : "LDAP Login"}
</Button>
<Button
type="button"
variant="outline"
className="w-full"
disabled={auth.ldapLoginMutation.isPending || auth.loginMutation.isPending}
onClick={() => auth.initiateOidcLogin()}
>
OpenID Connect
</Button>
</div>
{auth.oidcEnabled && (
<Button
type="button"
variant="outline"
className={`w-full ${!auth.ldapEnabled ? "col-span-2" : ""}`}
disabled={auth.ldapLoginMutation.isPending || auth.loginMutation.isPending}
onClick={() => auth.initiateOidcLogin()}
>
OpenID Connect
</Button>
)}
</div>
</>
)}
</form>
</Form>
</CardContent>