rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Trying to make it work

Browse Source
This commit is contained in:
Lee Robinson
2023-10-11 08:49:20 -05:00
parent 7c45e26fd7
commit e9f80cf5ba
5 changed files with 32 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dashboard/15-final/app/ui/dashboard/log-out-button.tsx
View File

@@ -1,15 +1,21 @@
'use client';
import { PowerIcon } from '@heroicons/react/24/outline';
import { signOut } from 'next-auth/react';
import { signOut } from '@/auth';
export default function LogOutButton() {
export default async function LogOutButton() {
return (
<button
onClick={() => signOut()}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
<form
action={async () => {
'use server';
await signOut();
}}
>
<PowerIcon className="w-6" />
<div className="hidden md:block">Sign Out</div>
</button>
<button
type="submit"
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
>
<PowerIcon className="w-6" />
<div className="hidden md:block">Sign Out</div>
</button>
</form>
);
}

53
dashboard/15-final/app/ui/login-form.tsx
View File

@@ -1,40 +1,11 @@
'use client';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { signIn } from '@/auth';
import { lusitana } from '@/app/ui/fonts';
import AcmeLogo from '@/app/ui/acme-logo';
import { AtSymbolIcon, KeyIcon } from '@heroicons/react/24/outline';
import { Button } from './button';
import { ArrowRightIcon } from '@heroicons/react/20/solid';
export default function LoginForm() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const { replace } = useRouter();
const handleSubmit = async (e: { preventDefault: () => void }) => {
e.preventDefault();
try {
const res = await signIn('credentials', {
email,
password,
redirect: false,
});
if (res?.error) {
setError('Invalid Credentials');
return;
}
replace('/dashboard');
} catch (error) {
console.log(error);
}
};
export default async function LoginForm() {
return (
<div className="flex items-center justify-center md:h-screen">
<div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
@@ -43,7 +14,13 @@ export default function LoginForm() {
<AcmeLogo />
</div>
</div>
<form onSubmit={handleSubmit} className="space-y-3">
<form
action={async () => {
'use server';
await signIn('credentials');
}}
className="space-y-3"
>
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-6 pt-5">
<h1 className={`${lusitana.className} mb-3 text-2xl`}>
Please log in to continue.
@@ -62,8 +39,6 @@ export default function LoginForm() {
id="email"
type="email"
placeholder="Enter your email address"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div>
@@ -81,20 +56,10 @@ export default function LoginForm() {
id="password"
type="password"
placeholder="Enter password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div>
</div>
{error && (
<p
aria-live="polite"
className="mt-4 w-fit rounded-md py-1 text-sm text-red-500"
>
{error}
</p>
)}
</div>
</div>
<Button className="w-full" type="submit">

3
dashboard/15-final/auth.ts
View File

@@ -17,7 +17,8 @@ async function getUser(email: string) {
export const {
handlers: { GET, POST },
auth,
CSRF_experimental,
signIn,
signOut,
} = NextAuth({
providers: [
Credentials({

2
dashboard/15-final/package.json
View File

@@ -18,7 +18,7 @@
"bcrypt": "^5.1.1",
"clsx": "^2.0.0",
"next": "13.5.5-canary.4",
"next-auth": "0.0.0-manual.83c4ebd1",
"next-auth": "0.0.0-manual.c8300b61",
"postcss": "8.4.31",
"react": "18.2.0",
"react-dom": "18.2.0",

10
pnpm-lock.yaml generated
View File

@@ -244,8 +244,8 @@ importers:
specifier: 13.5.5-canary.4
version: 13.5.5-canary.4(@babel/core@7.23.0)(react-dom@18.2.0)(react@18.2.0)
next-auth:
specifier: 0.0.0-manual.83c4ebd1
version: 0.0.0-manual.83c4ebd1(next@13.5.5-canary.4)(react@18.2.0)
specifier: 0.0.0-manual.c8300b61
version: 0.0.0-manual.c8300b61(next@13.5.5-canary.4)(react@18.2.0)
postcss:
specifier: 8.4.31
version: 8.4.31
@@ -3829,10 +3829,10 @@ packages:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true
/next-auth@0.0.0-manual.83c4ebd1(next@13.5.5-canary.4)(react@18.2.0):
resolution: {integrity: sha512-6nUXtVrZqTWvVz2NhUB/xbMyzxUSQycQWOquACwdpk63AcnZ3g01v+W0UX9paqkGIdqLPtI/pL6rA2N+MT58SQ==}
/next-auth@0.0.0-manual.c8300b61(next@13.5.5-canary.4)(react@18.2.0):
resolution: {integrity: sha512-0UW3ahzwqOc/H2OZ60JPUNQju+jIQSEy9SGL1Jehq+AixnNlWiTrTSEzLTtNx0O9LX3hGKWlnIAfYO2gVWx7dQ==}
peerDependencies:
next: ^13.4.6
next: ^13.5.3
nodemailer: ^6.6.5
react: ^18.2.0
peerDependenciesMeta: