2021-06-24 15:59:11 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
import { getCsrfToken } from "next-auth/client";
|
2021-03-29 21:01:12 +00:00
|
|
|
|
|
|
|
|
export default function Login({ csrfToken }) {
|
|
|
|
|
return (
|
2021-07-30 23:05:38 +00:00
|
|
|
<div className="min-h-screen bg-neutral-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
2021-06-24 15:59:11 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>Login</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
2021-07-30 23:05:38 +00:00
|
|
|
<img className="h-6 mx-auto" src="/calendso-logo-word.svg" alt="Calendso Logo" />
|
|
|
|
|
<h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
|
2021-06-24 15:59:11 +00:00
|
|
|
</div>
|
2021-04-30 21:14:26 +00:00
|
|
|
|
2021-06-24 15:59:11 +00:00
|
|
|
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
2021-07-30 23:05:38 +00:00
|
|
|
<div className="bg-white py-8 px-4 mx-2 rounded-sm sm:px-10 border border-neutral-200">
|
2021-06-24 15:59:11 +00:00
|
|
|
<form className="space-y-6" method="post" action="/api/auth/callback/credentials">
|
|
|
|
|
<input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
|
|
|
|
|
<div>
|
2021-07-30 23:05:38 +00:00
|
|
|
<label htmlFor="email" className="block text-sm font-medium text-neutral-700">
|
2021-06-24 15:59:11 +00:00
|
|
|
Email address
|
|
|
|
|
</label>
|
|
|
|
|
<div className="mt-1">
|
|
|
|
|
<input
|
|
|
|
|
id="email"
|
|
|
|
|
name="email"
|
|
|
|
|
type="email"
|
|
|
|
|
autoComplete="email"
|
|
|
|
|
required
|
2021-07-30 23:05:38 +00:00
|
|
|
className="appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-sm shadow-sm placeholder-gray-400 focus:outline-none focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
|
2021-06-24 15:59:11 +00:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-04-30 21:14:26 +00:00
|
|
|
|
2021-06-24 15:59:11 +00:00
|
|
|
<div>
|
2021-07-30 23:05:38 +00:00
|
|
|
<div className="flex">
|
|
|
|
|
<div className="w-1/2">
|
|
|
|
|
<label htmlFor="password" className="block text-sm font-medium text-neutral-700">
|
|
|
|
|
Password
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="w-1/2 text-right">
|
|
|
|
|
<Link href="/auth/forgot-password">
|
|
|
|
|
<a className="font-medium text-secondary-600 text-sm">Forgot?</a>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-06-24 15:59:11 +00:00
|
|
|
<div className="mt-1">
|
|
|
|
|
<input
|
|
|
|
|
id="password"
|
|
|
|
|
name="password"
|
|
|
|
|
type="password"
|
|
|
|
|
autoComplete="current-password"
|
|
|
|
|
required
|
2021-07-30 23:05:38 +00:00
|
|
|
className="appearance-none block w-full px-3 py-2 border border-neutral-300 rounded-sm shadow-sm placeholder-gray-400 focus:outline-none focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm"
|
2021-06-24 15:59:11 +00:00
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-04-30 21:14:26 +00:00
|
|
|
|
2021-06-24 15:59:11 +00:00
|
|
|
<div className="space-y-2">
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
2021-07-30 23:05:38 +00:00
|
|
|
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
2021-06-24 15:59:11 +00:00
|
|
|
Sign in
|
|
|
|
|
</button>
|
2021-03-29 21:01:12 +00:00
|
|
|
</div>
|
2021-06-24 15:59:11 +00:00
|
|
|
</form>
|
2021-03-29 21:01:12 +00:00
|
|
|
</div>
|
2021-07-30 23:05:38 +00:00
|
|
|
<div className="mt-4 text-neutral-600 text-center text-sm">
|
|
|
|
|
Don't have an account? <a href="#" className="font-medium text-neutral-900">Create an account</a>
|
|
|
|
|
</div>
|
2021-06-24 15:59:11 +00:00
|
|
|
</div>
|
2021-04-30 21:14:26 +00:00
|
|
|
</div>
|
2021-06-24 15:59:11 +00:00
|
|
|
);
|
2021-03-29 21:01:12 +00:00
|
|
|
}
|
|
|
|
|
|
2021-06-24 15:59:11 +00:00
|
|
|
Login.getInitialProps = async ({ req }) => {
|
2021-03-29 21:01:12 +00:00
|
|
|
return {
|
2021-06-24 15:59:11 +00:00
|
|
|
csrfToken: await getCsrfToken({ req }),
|
|
|
|
|
};
|
|
|
|
|
};
|
