feat(oidc): added in so we could use an oidc to login as well :D

frontend/src/lib/auth-client.ts

@@ -1,4 +1,4 @@
-import { adminClient } from "better-auth/client/plugins";
+import { adminClient, genericOAuthClient } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/react";
 import { ac, admin, systemAdmin, user } from "./auth-permissions";
 
@@ -13,6 +13,7 @@ export const authClient = createAuthClient({
 				systemAdmin,
 			},
 		}),
+		genericOAuthClient(),
 	],
 });
 

frontend/src/routes/(auth)/-components/LoginForm.tsx

@@ -1,4 +1,5 @@
 import { Link, useNavigate } from "@tanstack/react-router";
+import { Cat, LogIn } from "lucide-react";
 import { toast } from "sonner";
 import {
 	Card,
@@ -9,13 +10,23 @@ import {
 } from "@/components/ui/card";
 import { authClient } from "@/lib/auth-client";
 import { useAppForm } from "@/lib/formSutff";
+import { Button } from "../../../components/ui/button";
 import socket from "../../../lib/socket.io";
 
 export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 	const loginEmail = localStorage.getItem("loginEmail") || "";
 	const rememberMe = localStorage.getItem("rememberMe") === "true";
+
 	const navigate = useNavigate();
 
+	const oauthLogin = async () => {
+		await authClient.signIn.oauth2({
+			providerId: "voidauth",
+			callbackURL: "/lst/app",
+			errorCallbackURL: "/lst/app/login",
+		});
+	};
+
 	const form = useAppForm({
 		defaultValues: {
 			email: loginEmail,
@@ -26,7 +37,7 @@ export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 			// set remember me incase we want it later
 			if (value.rememberMe) {
 				localStorage.setItem("rememberMe", value.rememberMe.toString());
-				localStorage.setItem("loginEmail", value.email);
+				localStorage.setItem("loginEmail", value.email.toLocaleLowerCase());
 			} else {
 				localStorage.removeItem("rememberMe");
 				localStorage.removeItem("loginEmail");
@@ -62,7 +73,17 @@ export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 		<div>
 			<Card className="p-3 w-96">
 				<CardHeader>
-					<CardTitle>Login to your account</CardTitle>
+					<CardTitle>
+						<div className="flex flex-row justify-center">
+							<Button onClick={oauthLogin} size="lg" variant="ghost">
+								<Cat />
+							</Button>
+							<span className="mt-2">Login to your account</span>{" "}
+							<Button size="lg" variant="ghost">
+								<Cat />
+							</Button>
+						</div>
+					</CardTitle>
 					<CardDescription>
 						Enter your username and password below
 					</CardDescription>
@@ -76,12 +97,19 @@ export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 					>
 						<form.AppField name="email">
 							{(field) => (
-								<field.InputField label="Email" inputType="email" required />
+								<field.InputField
+									label="Email"
+									inputType="email"
+									required={rememberMe}
+								/>
 							)}
 						</form.AppField>
 						<form.AppField name="password">
 							{(field) => (
-								<field.InputPasswordField label="Password" required={true} />
+								<field.InputPasswordField
+									label="Password"
+									required={rememberMe}
+								/>
 							)}
 						</form.AppField>
 
@@ -98,7 +126,7 @@ export default function LoginForm({ redirectPath }: { redirectPath: string }) {
 							</Link>
 						</div>
 
-						<div className="flex justify-end mt-2">
+						<div className="flex justify-between mt-2 ">
 							<form.AppForm>
 								<form.SubmitButton>Login</form.SubmitButton>
 							</form.AppForm>