Skip to content

Commit 41cb814

Browse files
luannguyenQVluannguyenQV
committed
feat: update sign in page
1 parent 699b310 commit 41cb814

File tree

8 files changed

+171
-86
lines changed

8 files changed

+171
-86
lines changed

‎apps/web/@/actions/auth/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use server"
2+
3+
import { signIn } from "configs/auth"
4+
5+
export const signInWithCredentials = async (email: string, password: string) => {
6+
console.log(">>>>>", email, password)
7+
await signIn("credentials", {
8+
email,
9+
password,
10+
})
11+
}
12+
13+
export const signInWithGithub = async () => {
14+
await signIn("github")
15+
}

‎apps/web/@/messages/en.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,5 +138,44 @@
138138
"name_asc": "Name (A → Z)",
139139
"name_desc": "Name (Z → A)"
140140
}
141+
},
142+
"auth": {
143+
"email_label": "Email",
144+
"password_label": "Password",
145+
"email_placeholder": "Enter your email",
146+
"password_placeholder": "Enter your password",
147+
"dont_have_an_account": "Don't have an account?",
148+
"or_continue_with": "Or continue with",
149+
"github": "GitHub",
150+
"google": "Google",
151+
"facebook": "Facebook",
152+
"twitter": "Twitter",
153+
"linkedin": "LinkedIn",
154+
"instagram": "Instagram",
155+
"youtube": "YouTube",
156+
"tiktok": "TikTok",
157+
"sign_in": {
158+
"title": "Sign In",
159+
"description": "Sign in to your account",
160+
"sign_in_with": "Sign in with {provider}",
161+
"sign_in_with_github": "Sign in with GitHub",
162+
"sign_in_with_google": "Sign in with Google",
163+
"sign_in_with_facebook": "Sign in with Facebook",
164+
"sign_in_with_twitter": "Sign in with Twitter",
165+
"sign_in_with_linkedin": "Sign in with LinkedIn",
166+
"sign_in_with_instagram": "Sign in with Instagram",
167+
"sign_in_with_youtube": "Sign in with YouTube",
168+
"sign_in_with_tiktok": "Sign in with TikTok"
169+
},
170+
"sign_up": {
171+
"title": "Sign Up",
172+
"description": "Sign up for an account"
173+
},
174+
"forgot_password": {
175+
"title": "Forgot Password",
176+
"description": "Forgot your password? Enter your email address and we will send you a link to reset your password.",
177+
"send_instructions": "Send Instructions",
178+
"cancel": "Cancel"
179+
}
141180
}
142181
}

‎apps/web/@/molecules/sign-in-form/index.tsx‎

Lines changed: 77 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
import Link from "next/link"
44
import { useSearchParams } from "next/navigation"
55

6+
import { zodResolver } from "@hookform/resolvers/zod"
7+
import { signIn } from "configs/auth"
68
import { Github } from "lucide-react"
7-
import { signIn } from "next-auth/react"
9+
import { useTranslations } from "next-intl"
10+
import { useForm } from "react-hook-form"
811
import {
912
Button,
1013
Card,
@@ -18,21 +21,34 @@ import {
1821
TabsTrigger,
1922
Typography,
2023
} from "ui"
24+
import { z } from "zod"
25+
26+
import { signInWithCredentials, signInWithGithub } from "@/actions/auth"
27+
28+
type FormData = {
29+
email: string
30+
password: string
31+
}
2132

2233
export default function SignInForm() {
23-
const searchParams = useSearchParams()
34+
const t = useTranslations("auth")
2435

25-
const onSignIn = async (e) => {
26-
e.preventDefault()
27-
await signIn("github", {
28-
redirect: true,
29-
callbackUrl: (searchParams.get("callbackUrl") as string) || "/",
30-
})
36+
const { register, handleSubmit } = useForm<FormData>({
37+
resolver: zodResolver(
38+
z.object({
39+
email: z.string().email(),
40+
password: z.string().min(8),
41+
})
42+
),
43+
})
44+
45+
const onSignIn = async (data: FormData) => {
46+
await signInWithCredentials(data.email, data.password)
3147
}
3248

3349
return (
3450
<div className="mt-16 w-full max-w-md flex-1 rounded-md p-8">
35-
<div>
51+
<div className="text-center">
3652
<Typography variant="h1">Sign In</Typography>
3753

3854
<Typography
@@ -44,99 +60,76 @@ export default function SignInForm() {
4460
</div>
4561

4662
<div className="grid-6 mt-8 grid w-full">
47-
<form>
48-
<Card>
49-
<CardContent className="pt-6">
50-
<Tabs>
51-
<div className="mb-1">
52-
<Label>Sign in mode</Label>
63+
<Card>
64+
<CardContent className="pt-6">
65+
<form onSubmit={handleSubmit(onSignIn)}>
66+
<div className="grid gap-4">
67+
<div className="grid gap-2">
68+
<Label htmlFor="email">Email</Label>
69+
<Input
70+
id="email"
71+
placeholder="name@example.com"
72+
type="email"
73+
autoCapitalize="none"
74+
autoComplete="email"
75+
autoCorrect="off"
76+
{...register("email", { required: true })}
77+
/>
78+
</div>
79+
<div className="grid gap-2">
80+
<Label htmlFor="password">Password</Label>
81+
<Input
82+
id="password"
83+
placeholder="********"
84+
type="password"
85+
autoCapitalize="none"
86+
autoCorrect="off"
87+
{...register("password", { required: true })}
88+
/>
5389
</div>
54-
<TabsList className="grid w-full grid-cols-2">
55-
<TabsTrigger value="magic">Magic Link</TabsTrigger>
56-
<TabsTrigger value="username_password">Username/Password</TabsTrigger>
57-
</TabsList>
58-
<TabsContent value="username_password">
59-
<div className="grid gap-4">
60-
<div className="grid gap-1">
61-
<Label className="">Email</Label>
62-
<Input
63-
id="email"
64-
placeholder="name@example.com"
65-
type="email"
66-
autoCapitalize="none"
67-
autoComplete="email"
68-
autoCorrect="off"
69-
/>
70-
</div>
71-
<div className="grid gap-1">
72-
<Label className="">Password</Label>
73-
<Input
74-
id="password"
75-
placeholder="********"
76-
type="password"
77-
autoCapitalize="none"
78-
autoCorrect="off"
79-
/>
80-
</div>
81-
<Button>Sign In</Button>
82-
</div>
83-
</TabsContent>
84-
<TabsContent value="magic">
85-
<div className="grid gap-4">
86-
<div className="grid gap-1">
87-
<Label className="">Email</Label>
88-
<Input
89-
id="email"
90-
placeholder="name@example.com"
91-
type="email"
92-
autoCapitalize="none"
93-
autoComplete="email"
94-
autoCorrect="off"
95-
/>
96-
</div>
97-
<Button>Sign In With Email</Button>
98-
</div>
99-
</TabsContent>
100-
</Tabs>
101-
</CardContent>
102-
<CardFooter>
103-
<div className="flex w-full flex-col">
104-
<div className="relative">
105-
<div className="absolute inset-0 flex items-center">
106-
<span className="w-full border-t" />
107-
</div>
108-
<div className="relative flex justify-center py-4 text-xs uppercase">
109-
<span className="bg-background px-2 text-muted-foreground">
110-
Or continue with
111-
</span>
112-
</div>
90+
<Button type="submit">{t("sign_in.title")}</Button>
91+
</div>
92+
</form>
93+
</CardContent>
94+
<CardFooter>
95+
<div className="flex w-full flex-col">
96+
<div className="relative">
97+
<div className="absolute inset-0 flex items-center">
98+
<span className="w-full border-t" />
99+
</div>
100+
<div className="relative flex justify-center py-4 text-xs uppercase">
101+
<span className="bg-background px-2 text-muted-foreground">
102+
{t("or_continue_with")}
103+
</span>
113104
</div>
105+
</div>
106+
107+
<form action={signInWithGithub}>
114108
<Button
115109
variant="outline"
116-
type="button"
117-
onClick={onSignIn}
110+
type="submit"
118111
>
119112
<Github size={16} />
120-
<span className="ml-2">GitHub</span>
113+
<span className="ml-2">{t("github")}</span>
121114
</Button>
122-
</div>
123-
</CardFooter>
124-
</Card>
125-
</form>
115+
</form>
116+
</div>
117+
</CardFooter>
118+
</Card>
126119
</div>
127120

128121
<div className="mt-4 text-center">
129-
<Link href="register">
122+
<Link href="/signup">
130123
<Typography
131124
variant="span"
132125
className="mt-4"
133126
>
134-
Don&apos;t have an account?{" "}
127+
{t("dont_have_an_account")}
135128
<Typography
136129
className="font-bold hover:underline"
137130
variant="span"
138131
>
139-
Sign Up
132+
{t("sign_up.title")}
140133
</Typography>
141134
</Typography>
142135
</Link>

‎apps/web/@/molecules/user-nav/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Link from "next/link"
22

3-
import { auth, authConfigs } from "configs/auth"
4-
import { getServerSession } from "next-auth"
3+
import { auth } from "configs/auth"
54
import { getTranslations } from "next-intl/server"
65
import {
76
Avatar,

apps/web/app/[lang]/(auth)/sign-in/page.tsx renamed to apps/web/app/[lang]/(auth)/signin/page.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,22 @@ import React from "react"
22
import { redirect } from "next/navigation"
33

44
import { auth } from "configs/auth"
5+
import { getTranslations } from "next-intl/server"
56

67
import SignInForm from "@/molecules/sign-in-form"
78

9+
export async function generateMetadata() {
10+
const t = await getTranslations()
11+
12+
return {
13+
title: t("auth.sign_in.title"),
14+
description: t("auth.sign_in.description"),
15+
}
16+
}
17+
818
export default async function Page() {
919
const session = await auth()
20+
1021
if (session) {
1122
redirect("/")
1223
}

apps/web/app/[lang]/(auth)/register/page.tsx renamed to apps/web/app/[lang]/(auth)/signup/page.tsx

File renamed without changes.

‎apps/web/configs/auth.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { PrismaAdapter } from "@auth/prisma-adapter"
22
import prisma from "database"
33
import NextAuth from "next-auth"
4+
import Credentials from "next-auth/providers/credentials"
45
import GithubProvider from "next-auth/providers/github"
56

67
export const { handlers, auth, signIn, signOut } = NextAuth({
@@ -10,6 +11,32 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
1011
clientId: process.env.GITHUB_ID,
1112
clientSecret: process.env.GITHUB_SECRET,
1213
}),
14+
Credentials({
15+
credentials: {
16+
email: {},
17+
password: {},
18+
},
19+
authorize: async (credentials: Record<string, string>) => {
20+
console.log(">>>>>", credentials)
21+
22+
try {
23+
const user = await prisma.user.findUnique({
24+
where: {
25+
email: credentials.email,
26+
password: credentials.password,
27+
},
28+
})
29+
30+
if (!user) {
31+
return null
32+
}
33+
34+
return user
35+
} catch (e) {
36+
return null
37+
}
38+
},
39+
}),
1340
],
1441
pages: {
1542
signIn: "/sign-in",

‎packages/database/prisma/migrations/20240907102730_/migration.sql‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
-- This is an empty migration.

0 commit comments

Comments
 (0)