Skip to content

Commit 4976036

Browse files
mscode07mscode07
authored
Merge pull request #15 from mscode07/dev
added signin page
2 parents 95680ab + aa8ba24 commit 4976036

File tree

17 files changed

+970
-243
lines changed

17 files changed

+970
-243
lines changed

‎apps/X/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function RootLayout({
2323
}>) {
2424
return (
2525
<html lang="en" className="dark">
26-
<body className={`${geistSans.variable} ${geistMono.variable}`}>
26+
<body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
2727
{children}
2828
</body>
2929
</html>

‎apps/X/app/lib/auth.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export const authOptions = {
135135
return session;
136136
},
137137
},
138-
page: {
139-
signIn: "/auth",
138+
pages: {
139+
signIn: "/",
140140
},
141141
};

‎apps/X/app/login/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { SigninComp } from "@/components/ui";
2+
3+
const Login = () => {
4+
return (
5+
<div>
6+
<div className=""></div>
7+
</div>
8+
);
9+
};
10+
11+
export default Login;

‎apps/X/app/page.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
import { SigninComp } from "@/components/ui";
12
import React from "react";
23

34
const Page = () => {
4-
return <div>Page</div>;
5+
return (
6+
<div className="">
7+
<SigninComp />
8+
</div>
9+
);
510
};
611

712
export default Page;

‎apps/X/app/signin/page.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎apps/X/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"check-types": "tsc --noEmit"
1212
},
1313
"dependencies": {
14+
"@radix-ui/react-dialog": "^1.1.4",
1415
"@radix-ui/react-slot": "^1.1.1",
1516
"@repo/ui": "*",
1617
"bcrypt": "^5.1.1",

‎apps/X/src/components/ui/LoginComp.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const LoginComp = () => {
2+
return <div>Test</div>;
3+
};

‎apps/X/src/components/ui/SigninComp.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { SigninRightCom, X_logo } from "./index";
1+
import { SigninRightCom, X_logoBIG } from "./index";
22

33
export const SigninComp = () => {
44
return (
55
<div>
6-
<div className="grid grid-cols-6">
7-
<div className="col-span-3 text-8xl">
8-
<div className="flex justify-center items-center h-screen">
9-
<X_logo />
6+
<div className="custom:grid custom:grid-cols-6 custom:items-center">
7+
<div className="custom:col-span-3 text-8xl">
8+
<div className="custom:flex custom:justify-center custom:items-center">
9+
<div className="mx-10 mt-20 ">
10+
<X_logoBIG />
11+
</div>
1012
</div>
1113
</div>
12-
<div className="col-span-3">
14+
<div className="custom:col-span-3 flex flex-col items-center justify-center mx-10">
1315
<SigninRightCom />
1416
</div>
1517
</div>

‎apps/X/src/components/ui/SigninRightCom.tsx‎

Lines changed: 89 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,100 @@
1-
import { Button } from "./button";
2-
import { FcGoogle } from "react-icons/fc";
1+
"use client";
2+
import {
3+
Dialog,
4+
DialogContent,
5+
DialogDescription,
6+
DialogHeader,
7+
DialogTitle,
8+
DialogTrigger,
9+
} from "@/components/ui/dialog";
10+
import { signIn } from "next-auth/react";
311
import { FaGithub } from "react-icons/fa6";
12+
import { FcGoogle } from "react-icons/fc";
13+
import { UserCredentials, LoginComp } from "./index";
14+
import { Button } from "./button";
415

516
export const SigninRightCom = () => {
17+
const handleGoogleSignIn = async () => {
18+
await signIn("google");
19+
};
20+
const handleGithubSignIn = async () => {
21+
await signIn("github");
22+
};
23+
24+
const handleCredentialsSignIn = () => {
25+
signIn("credentials");
26+
};
27+
628
return (
729
<div>
8-
<div className="flex justify-center items-center h-screen">
30+
<div className="custom:flex custom:justify-center custom:items-center custom:h-screen">
931
<div>
1032
<div className="text-6xl font-bold my-8">Happening now</div>
1133
<div className="text-3xl font-bold">Join Today.</div>
12-
13-
<Button className="mt-10 px-20 ">
14-
{" "}
15-
<FcGoogle /> Sign UP with Google{" "}
16-
</Button>
17-
<br />
18-
<Button className="mt-10 px-20">
19-
{" "}
20-
<FaGithub /> Sign UP with Google{" "}
21-
</Button>
34+
<div className="flex flex-col max-w-64">
35+
<Button
36+
className="mt-10 px-36 rounded-2xl"
37+
onClick={handleGoogleSignIn}
38+
>
39+
{" "}
40+
<FcGoogle /> Sign UP with Google{" "}
41+
</Button>
42+
<Button
43+
className="mt-2 px-36 rounded-2xl font-bold"
44+
onClick={handleGithubSignIn}
45+
>
46+
{" "}
47+
<FaGithub /> Sign UP with Github{" "}
48+
</Button>
49+
</div>
50+
<div className="flex items-center justify-center max-w-64 ml-4">
51+
<hr className="w-72 h-0.5 my-4 bg-gray-200 border-0 rounded dark:bg-gray-700"></hr>
52+
<p className="px-2 text-slate-500">or</p>
53+
<hr className="w-72 h-0.5 my-4 bg-gray-200 border-0 rounded dark:bg-gray-700"></hr>
54+
</div>
55+
{/* <Button
56+
className="bg-twitterBlue hover:bg-blue-500 px-24 mt-0 rounded-2xl text-white"
57+
onClick={handleCredentialsSignIn}
58+
>
59+
Create Account
60+
</Button> */}
61+
<Dialog>
62+
<DialogTrigger className="bg-twitterBlue hover:bg-blue-500 py-1 px-24 mt-0 rounded-2xl text-white">
63+
Create Account
64+
</DialogTrigger>
65+
<DialogContent className="bg-black min-w-96 max-w-96">
66+
<DialogHeader>
67+
<DialogTitle className="w-4/5 flex items-center justify-center ">
68+
<UserCredentials />
69+
</DialogTitle>
70+
</DialogHeader>
71+
</DialogContent>
72+
</Dialog>
73+
<p className="text-xs text-slate-600 mt-0.5 w-64">
74+
By signing up, you agree to the{" "}
75+
<span className="text-twitterBlue">Terms of Service</span> and
76+
<span className="text-twitterBlue"> Privacy Policy</span>, including
77+
<span className="text-twitterBlue"> Cookie Use.</span>
78+
</p>
79+
<div className="mt-12 font-semibold">Already have an account?</div>
80+
{/* <Button
81+
variant={"outline"}
82+
className="mt-3 px-28 rounded-2xl text-twitterBlue"
83+
>
84+
Sign In
85+
</Button> */}
86+
<Dialog>
87+
<DialogTrigger className=" border border-slate-500 py-1 px-24 mt-1 rounded-2xl text-twitterBlue font-semibold hover:bg-slate-900 ">
88+
Sign In
89+
</DialogTrigger>
90+
<DialogContent className="bg-black min-w-96 max-w-96">
91+
<DialogHeader>
92+
<DialogTitle className="w-4/5 flex items-center justify-center ">
93+
<LoginComp />
94+
</DialogTitle>
95+
</DialogHeader>
96+
</DialogContent>
97+
</Dialog>
2298
</div>
2399
</div>
24100
</div>

‎apps/X/src/components/ui/UserCredentials.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { signIn } from "next-auth/react";
2+
import { Button } from "./button";
3+
import { Input } from "./index";
4+
import { X_logo } from "./X_logo";
5+
6+
export const UserCredentials = () => {
7+
const handleCredentialsSignIn = () => {
8+
signIn("credentials");
9+
};
10+
return (
11+
<div>
12+
<div className="">
13+
<X_logo />
14+
</div>
15+
16+
<div className="mt-5 w-72">
17+
<div className="m-4 text-xl ">Create your Account</div>
18+
<div className="flex-col justify-center items-center">
19+
<Input
20+
type="text"
21+
placeholder="Username"
22+
className="m-4 focus:border-blue-500"
23+
/>
24+
<Input
25+
type="text"
26+
placeholder="Name"
27+
className="m-4 focus:border-blue-500"
28+
/>
29+
<Input
30+
type="text"
31+
placeholder="Email"
32+
className="m-4 focus:border-blue-500"
33+
/>
34+
<Input
35+
type="passowrd"
36+
placeholder="Password"
37+
className="m-4 focus:border-blue-500"
38+
/>
39+
</div>
40+
<Button
41+
className="w-full ml-4 rounded-2xl font-bold text-twitterBlue"
42+
onClick={handleCredentialsSignIn}
43+
>
44+
Create Account
45+
</Button>
46+
</div>
47+
</div>
48+
);
49+
};

0 commit comments

Comments
 (0)