Skip to content

Commit

Permalink
Merge branch 'dinxsh:master' into brackets-backend
Browse files Browse the repository at this point in the history
  • Loading branch information
@777advait
777advait authored Dec 18, 2024
2 parents 6ba7206 + a45fa8c commit 5a192b0
Show file tree
Hide file tree
Showing 7 changed files with 344 additions and 179 deletions.
8 changes: 5 additions & 3 deletions @/components/ui/card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
));
CardTitle.displayName = "CardTitle";

const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
<p
const CardDescription = React.forwardRef(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
>
{children}
</div>
));
CardDescription.displayName = "CardDescription";

Expand Down
21 changes: 21 additions & 0 deletions app/(auth)/layout.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Image from "next/image";

export default function AuthLayout({ children }) {
return (
<div className="flex border h-[90vh] -mt-8 w-[98%] mx-auto rounded-2xl bg-zinc-400/10 border-zinc-200/20 backdrop-blur-lg backdrop-saturate-200">
<div className="w-1/2 relative p-2 flex items-center justify-center max-md:hidden">
<Image
src={`/assets/grad1.svg`}
alt=""
width={1024}
height={1024}
className="h-[97%] w-[98%] -z-10 object-cover object-left-bottom opacity-95 rounded-2xl inset-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute"
/>
<h2 className="text-7xl m-5 font-bold pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-white/90 via-white/70 to-zinc-800 bg-clip-text leading-none text-transparent max-sm:text-3xl max-sm:text-center p-2 text-center">
Sanity Gaming
</h2>
</div>
<div className="w-1/2 max-md:w-full relative p-2 flex items-center justify-center">{children}</div>
</div>
);
}
104 changes: 64 additions & 40 deletions app/(auth)/sign-in/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
import { FaDiscord, FaGoogle } from "react-icons/fa";
import { Loader2 } from "lucide-react";
import { delay } from "framer-motion";
import Image from "next/image";

export default function SignInForm() {
const router = useRouter();
Expand All @@ -53,24 +54,27 @@ export default function SignInForm() {
});

if (result?.error) {
console.error('Sign in error:', result.error);
console.error("Sign in error:", result.error);
toast({
title: "Error",
description: result.error === "CredentialsSignin" ? "Invalid email or password" : result.error,
description:
result.error === "CredentialsSignin"
? "Invalid email or password"
: result.error,
variant: "destructive",
});
} else if (result?.url) {
router.push("/dashboard");
} else {
console.error('Unexpected result:', result);
console.error("Unexpected result:", result);
toast({
title: "Error",
description: "An unexpected error occurred",
variant: "destructive",
});
}
} catch (error) {
console.error('Sign in error:', error);
console.error("Sign in error:", error);
toast({
title: "Error",
description: "An unexpected error occurred",
Expand All @@ -91,16 +95,24 @@ export default function SignInForm() {

return (
<div>
<div
className="bg-cover bg-center h-screen"
style={{ backgroundImage: "url('pexels-lulizler-3165335.jpg')" }}
>
<div className="flex justify-center items-center min-h-[70vh] pt-10">
<Card className="w-96">
<CardHeader>
<CardDescription></CardDescription>
<div className="">
<div className="flex justify-center items-center">
<Card className="w-[23rem] max-sm:w-[19rem] border-zinc-400/10">
<CardHeader className="p-2">
<CardDescription className="flex flex-col gap-2 pt-5 items-center justify-center">
<Image
src="/assets/logo.jpg"
alt=""
width={500}
height={500}
className="size-12 rounded-xl"
/>
<p className="font-bold text-base">Sign in to Sanity Gaming</p>
<p className="text-zinc-400">
Welcome back! Please sign in to continue.
</p>
</CardDescription>
</CardHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<CardContent className="space-y-5">
Expand All @@ -109,10 +121,13 @@ export default function SignInForm() {
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel className="text-xl">
<FormLabel className="text-base font-bold text-zinc-300">
Email or Username
</FormLabel>
<Input className="text-xl" {...field} />
<Input
className="text-base border-zinc-400/10"
{...field}
/>
<FormMessage />
</FormItem>
)}
Expand All @@ -123,54 +138,63 @@ export default function SignInForm() {
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel className="text-xl">Password</FormLabel>
<Input type="password" className="text-xl" {...field} />
<FormLabel className="text-base font-bold text-zinc-300">
Password
</FormLabel>
<Input
type="password"
className="text-base border-zinc-400/10"
{...field}
/>
<FormMessage />
</FormItem>
)}
/>
</CardContent>
<CardFooter className="grid mt-4">
<Button className="w-full" type="submit" disabled={isLoading}>
<CardFooter className="grid py-3 ">
<Button

className="w-full font-bold"
type="submit"
disabled={isLoading}
>
{isLoading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : null}
Sign In
</Button>

<div className="text-center">
<div className="my-5 flex items-center">
<div className="h-[1px] bg-foreground/20 w-1/2"></div>
<div className="mx-2 text-foreground/60">OR</div>
<div className="h-[1px] bg-foreground/20 w-1/2"></div>
</div>
<div className="my-5 flex items-center">
<div className="h-[1px] bg-zinc-400/20 w-1/2"></div>
<div className="mx-2 text-foreground/60 font-bold">or</div>
<div className="h-[1px] bg-zinc-400/20 w-1/2"></div>
</div>

<div className="text-center flex items-center justify-center gap-2">
<Button
variant="outline"
variant="default"
className="w-full flex gap-4"
onClick={handleGoogleSignIn}
>
<FaGoogle className="h-4 w-4" /> Sign in with Google
<FaGoogle className="h-4 w-4" />
</Button>

<Button
variant="outline"
className="w-full mt-2 flex gap-4"
variant="default"
className="w-full flex gap-4"
onClick={handleDiscordSignIn}
>
<FaDiscord className="h-4 w-4" />
Sign in with Discord
</Button>

<div className="mt-10 text-foreground/80">
Not a member yet?{" "}
<Link
href="/sign-up"
className="hover:text-foreground underline transition-all"
>
Sign up
</Link>
</div>
</div>
<div className="mt-10 mb-5 text-foreground/80 text-xs text-center text-zinc-400">
Not a member yet?{" "}
<Link
href="/sign-up"
className="hover:text-blue-800 underline transition-all "
>
Sign up
</Link>
</div>
</CardFooter>
</form>
Expand Down
Loading

0 comments on commit 5a192b0

Please sign in to comment.