106 lines
4.7 KiB
TypeScript
106 lines
4.7 KiB
TypeScript
import Input from "@/components/input";
|
|
import { useCallback, useState } from "react";
|
|
import axios from "axios";
|
|
import { signIn } from "next-auth/react"
|
|
import { FcGoogle } from "react-icons/fc"
|
|
import { FaGithub } from "react-icons/fa"
|
|
|
|
const Auth = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [variant, setVariant] = useState('login');
|
|
const toggleVariant = useCallback(() => {
|
|
setVariant((currentVariant) => currentVariant === 'login' ? 'register' : 'login')
|
|
}, [email, username, password]);
|
|
|
|
const login = useCallback(async () => {
|
|
try {
|
|
await signIn('credentials', {
|
|
email,
|
|
password,
|
|
redirect: false,
|
|
callbackUrl: '/profiles'
|
|
});
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}, [email, password])
|
|
|
|
const register = useCallback(async () => {
|
|
try {
|
|
await axios.post('/api/register', {
|
|
email,
|
|
username,
|
|
password
|
|
});
|
|
login()
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}, [email, username, password, login]);
|
|
|
|
return (
|
|
<div className="relative h-full bg-[url('../images/hero.jpg')] bg-no-repeat bg-center bg-fixed bg-cover">
|
|
<div className="bg-black w-full h-full lg:bg-opacity-50">
|
|
<nav className="px-12 py-5">
|
|
<img src="https://i.imgur.com/6awt6G7.png" className="h-12" />
|
|
</nav>
|
|
<div className="flex justify-center">
|
|
<div className="bg-black bg-opacity-70 px-16 py-16 self-center mt-2 lg:w-2/5 lg:max-w-md w-full">
|
|
<h2 className="text-white text-4xl mb-8 font-semibold">
|
|
{variant === 'login' ? 'Login' : 'Registrati'}
|
|
</h2>
|
|
<div className="flex flex-col gap-4">
|
|
{variant === 'register' && (
|
|
<Input
|
|
label="Username"
|
|
onChange={(e: any) => setUsername(e.target.value)}
|
|
id="username"
|
|
value={username}
|
|
/>
|
|
)}
|
|
<Input
|
|
label="Email"
|
|
onChange={(e: any) => setEmail(e.target.value)}
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
/>
|
|
<Input
|
|
label="Password"
|
|
onChange={(e: any) => setPassword(e.target.value)}
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
/>
|
|
</div>
|
|
<button onClick={variant === "login" ? login : register} className="bg-red-600 py-3 text-white rounded-md w-full mt-10 hover:bg-red-700 transition">
|
|
{variant === 'login' ? 'Login' : 'Crea Account'}
|
|
</button>
|
|
<div onClick={() => signIn('google', {
|
|
callbackUrl: '/'
|
|
})} className="flex flex-row items-center gap-4 mt-8 justify-center">
|
|
<div className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
|
|
<FcGoogle size={30} />
|
|
</div>
|
|
<div onClick={() => signIn('github', {
|
|
callbackUrl: '/'
|
|
})} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
|
|
<FaGithub size={30} />
|
|
</div>
|
|
</div>
|
|
<p className="text-neutral-500 mt-12">
|
|
{variant === 'login' ? 'Prima volta nel sito?' : 'Hai giá un account?'}
|
|
<span onClick={toggleVariant} className="text-white ml-1 hover:underline cursor-pointer">
|
|
{variant === 'login' ? 'Crea un account!' : 'Login'}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Auth; |