131 lines
4.2 KiB
JavaScript
131 lines
4.2 KiB
JavaScript
import { useState } from 'react';
|
|
import { signIn, signOut, getCsrfToken, useSession } from 'next-auth/react';
|
|
import { Formik, Field, ErrorMessage } from 'formik';
|
|
import * as Yup from 'yup';
|
|
import { useRouter } from 'next/router';
|
|
import Link from 'next/link'
|
|
|
|
|
|
export default function SignIn({ csrfToken }) {
|
|
const router = useRouter();
|
|
const [error, setError] = useState(null);
|
|
const { data: session } = useSession()
|
|
// console.log(session)
|
|
if (session) {
|
|
return (
|
|
<>
|
|
<br /><br />
|
|
You are already Signed in, click on continue
|
|
<br />
|
|
<Link href="/">Continue...</Link>
|
|
<br /><br />
|
|
or : <button onClick={() => signOut()}>Sign out</button>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Formik
|
|
initialValues={{ email: '', password: '', tenantKey: '' }}
|
|
validationSchema={Yup.object({
|
|
email: Yup.string()
|
|
.max(30, 'Must be 30 characters or less')
|
|
.email('Invalid email address')
|
|
.required('Please enter your email'),
|
|
password: Yup.string().required('Please enter your password'),
|
|
})}
|
|
onSubmit={async (values, { setSubmitting }) => {
|
|
const res = await signIn('credentials', {
|
|
redirect: false,
|
|
email: values.email,
|
|
password: values.password,
|
|
callbackUrl: `${window.location.origin}`,
|
|
});
|
|
if (res?.error) {
|
|
setError(res.error);
|
|
} else {
|
|
setError(null);
|
|
}
|
|
if (res.url) router.push(res.url);
|
|
setSubmitting(false);
|
|
}}
|
|
>
|
|
{(formik) => (
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<div
|
|
className="bg-red-400 flex flex-col items-center
|
|
justify-center min-h-screen py-2 shadow-lg">
|
|
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
|
<input
|
|
name="csrfToken"
|
|
type="hidden"
|
|
defaultValue={csrfToken}
|
|
/>
|
|
|
|
<div className="text-red-400 text-md text-center rounded p-2">
|
|
{error}
|
|
</div>
|
|
<div className="mb-4">
|
|
<label
|
|
htmlFor="email"
|
|
className="uppercase text-sm text-gray-600 font-bold"
|
|
>
|
|
Email
|
|
<Field
|
|
name="email"
|
|
aria-label="enter your email"
|
|
aria-required="true"
|
|
type="text"
|
|
className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
|
|
/>
|
|
</label>
|
|
|
|
<div className="text-red-600 text-sm">
|
|
<ErrorMessage name="email" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label
|
|
htmlFor="password"
|
|
className="uppercase text-sm text-gray-600 font-bold"
|
|
>
|
|
password
|
|
<Field
|
|
name="password"
|
|
aria-label="enter your password"
|
|
aria-required="true"
|
|
type="password"
|
|
className="w-full bg-gray-300 text-gray-900 mt-2 p-3"
|
|
/>
|
|
</label>
|
|
|
|
<div className="text-red-600 text-sm">
|
|
<ErrorMessage name="password" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
<button
|
|
type="submit"
|
|
className="bg-green-400 text-gray-100 p-3 rounded-lg w-full"
|
|
>
|
|
{formik.isSubmitting ? 'Please wait...' : 'Sign In'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Formik>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// This is the recommended way for Next.js 9.3 or newer
|
|
export async function getServerSideProps(context) {
|
|
return {
|
|
props: {
|
|
csrfToken: await getCsrfToken(context),
|
|
},
|
|
};
|
|
} |