├── .eslintrc.json
├── public
    ├── favicon.ico
    └── vercel.svg
├── next.config.js
├── postcss.config.js
├── lib
    ├── axios.js
    └── useAuth.js
├── components
    ├── label.js
    ├── input.js
    ├── button.js
    └── errors.js
├── tailwind.config.js
├── .gitignore
├── package.json
├── pages
    ├── _document.js
    ├── index.js
    ├── offices
    │   └── [id].js
    ├── _app.js
    ├── profile.js
    ├── register.js
    └── login.js
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themsaid/ergodnc-nextjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 |   images: {
4 |     domains: [],
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/lib/axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | export default axios.create({
4 |     baseURL: 'http://api.ergodnc.test',
5 |     headers: {
6 |         'X-Requested-With': 'XMLHttpRequest',
7 |     },
8 |     withCredentials: true,
9 | });


--------------------------------------------------------------------------------
/components/label.js:
--------------------------------------------------------------------------------
 1 | export default function Label({ children, className = '', ...props }) {
 2 |     return (
 3 |         <label
 4 |             className={`${className} block text-gray-700`}
 5 |             {...props}>
 6 |             {children}
 7 |         </label>
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/input.js:
--------------------------------------------------------------------------------
 1 | export default function Input({ disabled = false, className = '', ...props }) {
 2 |     return (
 3 |         <input
 4 |             disabled={disabled}
 5 |             className={`${className} outline-none border rounded border-gray-200 h-10 px-2`}
 6 |             {...props}
 7 |         />
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |     purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 5 |     darkMode: false, // or 'media' or 'class'
 6 |     theme: {
 7 |         extend: {
 8 |             fontFamily: {
 9 |                 sans: ['Nunito', ...defaultTheme.fontFamily.sans],
10 |             },
11 |         },
12 |     },
13 |     variants: {
14 |         extend: {},
15 |     },
16 |     plugins: [],
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/components/button.js:
--------------------------------------------------------------------------------
 1 | export default function Button({ type = 'submit', className = '', ...props }) {
 2 |     return (
 3 |         <button
 4 |             type={type}
 5 |             className={`${className} rounded inline-flex items-center px-4 py-2 bg-purple-700 border border-transparent font-semibold text-xs text-white uppercase tracking-widest hover:bg-purple-800 active:bg-purple-900 focus:outline-none focus:border-purple-900 focus:ring ring-purple-300 disabled:opacity-25 transition ease-in-out duration-150`}
 6 |             {...props}
 7 |         />
 8 |     )
 9 | }
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nextapp",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "next": "12.0.4",
12 |     "react": "17.0.2",
13 |     "react-dom": "17.0.2"
14 |   },
15 |   "devDependencies": {
16 |     "autoprefixer": "^10.4.0",
17 |     "eslint": "7.32.0",
18 |     "eslint-config-next": "12.0.4",
19 |     "postcss": "^8.3.11",
20 |     "tailwindcss": "^2.2.19",
21 |     "swr": "^1.0.1",
22 |     "axios": "^0.24.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/components/errors.js:
--------------------------------------------------------------------------------
 1 | export default function Label({ errors = [], ...props }) {
 2 |     return (
 3 |         <>
 4 |             {errors.length > 0 && (
 5 |                 <div {...props}>
 6 |                     <div className="font-medium text-red-600">
 7 |                         Whoops! Something went wrong.
 8 |                     </div>
 9 | 
10 |                     <ul className="mt-3 list-disc list-inside text-sm text-red-600">
11 |                         {errors.map(error => (
12 |                             <li key={error}>{error}</li>
13 |                         ))}
14 |                     </ul>
15 |                 </div>
16 |             )}
17 |         </>
18 |     )
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | class MyDocument extends Document {
 4 |     render() {
 5 |         return (
 6 |             <Html>
 7 |                 <Head>
 8 |                     <link
 9 |                         href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
10 |                         rel="stylesheet"
11 |                     />
12 |                 </Head>
13 |                 <body className={"bg-gray-100"}>
14 |                 <Main />
15 |                 <NextScript />
16 |                 </body>
17 |             </Html>
18 |         )
19 |     }
20 | }
21 | 
22 | export default MyDocument


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/lib/useAuth.js:
--------------------------------------------------------------------------------
 1 | import useSWR from 'swr'
 2 | import axios from './axios'
 3 | import {useRouter} from 'next/router'
 4 | import {useEffect, useState} from 'react'
 5 | 
 6 | export default function useAuth({middleware} = {}) {
 7 |     const router = useRouter()
 8 | 
 9 |     const [isLoading, setIsLoading] = useState(true);
10 | 
11 |     useEffect(() => {
12 |         if (user || error) {
13 |             setIsLoading(false);
14 |         }
15 | 
16 |         if (middleware == 'guest' && user) router.push('/')
17 |         if (middleware == 'auth' && !user && error) router.push('/login')
18 |     })
19 | 
20 |     const {data: user, error, mutate} = useSWR('/user',
21 |         () => axios.get('/user').then(response => response.data.data)
22 |     )
23 | 
24 |     const csrf = () => axios.get('/sanctum/csrf-cookie')
25 | 
26 |     const login = async ({setErrors, ...props}) => {
27 |         setErrors([])
28 | 
29 |         await csrf()
30 | 
31 |         axios
32 |             .post('/login', props)
33 |             .then(() => mutate() && router.push('/'))
34 |             .catch(error => {
35 |                 if (error.response.status != 422) throw error
36 | 
37 |                 setErrors(Object.values(error.response.data.errors).flat())
38 |             })
39 |     }
40 | 
41 |     const logout = async () => {
42 |         await axios.post('/logout')
43 | 
44 |         mutate(null)
45 | 
46 |         router.push('/login')
47 |     }
48 | 
49 |     return {
50 |         user,
51 |         csrf,
52 |         login,
53 |         logout,
54 |         isLoading
55 |     }
56 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | import axios from '../lib/axios'
 4 | 
 5 | 
 6 | export default function Home({offices}) {
 7 |     return (
 8 |         <>
 9 |             <Head>
10 |                 <title>ergodnc</title>
11 |             </Head>
12 | 
13 |             {offices.map((office, index) => (
14 |                 <div key={office.id} className={`flex ${index + 1 == offices.length ? '' : 'pb-10 mb-10 border-b'}`}>
15 |                     <div className="w-1/3 h-56 relative overflow-hidden rounded-lg">
16 |                         <img src={office.images[0].path} className="object-cover w-full h-full"></img>
17 |                     </div>
18 | 
19 |                     <div className="w-full pl-14">
20 |                         <div className="flex justify-between items-center mb-6">
21 |                             <h1 className="text-2xl font-bold">{office.title}</h1>
22 |                             <span className="block font-semibold">${office.price_per_day / 100} per day</span>
23 |                         </div>
24 |                         <p className="leading-loose mb-5">
25 |                             {office.description}
26 |                         </p>
27 |                         <Link href={"/offices/" + office.id}>
28 |                             <a className="text-purple-600 font-bold">More details...</a>
29 |                         </Link>
30 |                     </div>
31 |                 </div>
32 |             ))}
33 |         </>
34 |     )
35 | }
36 | 
37 | export async function getStaticProps() {
38 |     const response = await axios.get('/offices');
39 | 
40 |     return {
41 |         props: {
42 |             offices: response.data.data
43 |         },
44 |     }
45 | }


--------------------------------------------------------------------------------
/pages/offices/[id].js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | import Button from '../../components/button'
 4 | import axios from '../../lib/axios'
 5 | 
 6 | 
 7 | export default function Office({office}) {
 8 |     return (
 9 |         <>
10 |             <Head>
11 |                 <title>ergodnc — {office.title}</title>
12 |             </Head>
13 | 
14 |             <div className="flex">
15 |                 <div className="w-1/2 h-56 relative overflow-hidden rounded-lg">
16 |                     <img src={office.images[0].path} className="object-cover w-full h-full"></img>
17 |                 </div>
18 | 
19 |                 <div className="w-full pl-14">
20 |                     <div className="flex justify-between items-center mb-6">
21 |                         <h1 className="text-2xl font-bold">{office.title}</h1>
22 |                         <span className="block font-semibold">${office.price_per_day / 100} per day</span>
23 |                     </div>
24 |                     <p className="leading-loose mb-5">
25 |                         {office.description}
26 |                     </p>
27 |                     <Button className="mt-10">Book</Button>
28 |                 </div>
29 |             </div>
30 |         </>
31 |     )
32 | }
33 | 
34 | export async function getStaticPaths() {
35 |     const response = await axios.get('/offices');
36 | 
37 |     return {
38 |         fallback: false,
39 |         paths: response.data.data.map(office => ({
40 |             params: {id: office.id.toString()}
41 |         }))
42 |     };
43 | }
44 | 
45 | export async function getStaticProps({params}) {
46 |     const response = await axios.get(`/offices/${params.id}`);
47 | 
48 |     return {
49 |         props: {
50 |             office: response.data.data
51 |         },
52 |     }
53 | }


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import 'tailwindcss/tailwind.css'
 2 | import Link from 'next/link'
 3 | import Button from '../components/button'
 4 | import useAuth from '../lib/useAuth'
 5 | 
 6 | function MyApp({Component, pageProps}) {
 7 |     const {user, logout} = useAuth()
 8 | 
 9 |     return (
10 |         <>
11 |             <div className="bg-white">
12 |                 <main className="shadow">
13 |                     <div className="max-w-screen-lg mx-auto flex flex-row justify-between items-center p-4 sm:p-7 relative z-10 space-x-2 sm:space-x-3">
14 |                         <Link href="/">
15 |                             <a className="block">
16 |                                 <h1 className="text-2xl font-black"><span className="text-purple-700">
17 |                                     ergo</span>dnc
18 |                                 </h1>
19 |                             </a>
20 |                         </Link>
21 | 
22 |                         <div className="flex items-center text-sm font-semibold">
23 |                             {user ?
24 |                                 <>
25 |                                     <a href="#" className="text-gray-700 hover:text-purple-700" onClick={logout}>Log Out</a>
26 |                                     <Link href={"/profile"}>
27 |                                         <a className="text-gray-700 ml-7 border border-gray-300 hover:border-gray-400 rounded px-4 py-2">Profile</a>
28 |                                     </Link>
29 |                                 </>
30 |                                 :
31 |                                 <>
32 |                                     <Link href={"/login"}>
33 |                                         <a className="text-gray-700 hover:text-purple-700">Sign In</a>
34 |                                     </Link>
35 |                                     <Link href={"/register"}>
36 |                                         <a className="text-gray-700 ml-7 border border-gray-300 hover:border-gray-400 rounded px-4 py-2">Create Account</a>
37 |                                     </Link>
38 |                                 </>
39 |                             }
40 |                         </div>
41 |                     </div>
42 |                 </main>
43 |             </div>
44 | 
45 |             <div className="max-w-screen-lg mx-auto p-4 sm:p-7 mt-10">
46 |                 <Component {...pageProps} />
47 |             </div>
48 |         </>
49 |     )
50 | }
51 | 
52 | export default MyApp
53 | 


--------------------------------------------------------------------------------
/pages/profile.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | import axios from "../lib/axios";
 4 | import useAuth from "../lib/useAuth";
 5 | import useSWR from "swr";
 6 | 
 7 | let user = {
 8 |     name: 'Some User'
 9 | };
10 | 
11 | 
12 | 
13 | export default function Profile() {
14 |     const {user, isLoading} = useAuth({middleware: 'auth'})
15 | 
16 |     const {data: reservations, error, mutate} = useSWR('/reservations', () =>
17 |         axios.get('/reservations')
18 |             .then(response => response.data.data),
19 |     )
20 | 
21 |     if (isLoading || !user){
22 |         return <>Loading...</>
23 |     }
24 | 
25 |     return (
26 |         <>
27 |             <Head>
28 |                 <title>ergodnc — Account</title>
29 |             </Head>
30 | 
31 |             <h1 className="text-3xl font-black mb-10">
32 |                 Hello {user.name}!
33 |             </h1>
34 | 
35 |             <div className="mb-10">
36 |                 <span>Here is a list of your previous reservations!</span>
37 |             </div>
38 | 
39 |             {reservations ? reservations.map((reservation, index) => (
40 |                 <div key={reservation.office.id} className={`flex ${index + 1 == reservations.length ? '' : 'pb-10 mb-10 border-b'}`}>
41 |                     <div className="w-1/3 h-56 relative overflow-hidden rounded-lg">
42 |                         <img src={reservation.office.featured_image.path} className="object-cover w-full h-full"></img>
43 |                     </div>
44 | 
45 | 
46 |                     <div className="w-full pl-14">
47 |                         <div className="flex justify-between items-center mb-6">
48 |                             <h1 className="text-2xl font-bold">{reservation.office.title}</h1>
49 |                             <span className="block font-semibold">Total ${reservation.price / 100}</span>
50 |                         </div>
51 |                         <p className="mb-5">
52 |                             <span className="text-gray-600 text-sm uppercase">
53 |                                 From <strong>{reservation.start_date.split('T')[0]}</strong> To <strong>{reservation.end_date.split('T')[0]}</strong>
54 |                             </span>
55 |                         </p>
56 |                         <p className="leading-loose mb-5">
57 |                             {reservation.office.description}
58 |                         </p>
59 |                         <Link href={"/offices/" + reservation.office.id}>
60 |                             <a className="text-purple-600 font-bold">More details...</a>
61 |                         </Link>
62 |                     </div>
63 |                 </div>
64 |             )) : ''}
65 |         </>
66 |     )
67 | }
68 | 


--------------------------------------------------------------------------------
/pages/register.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Link from 'next/link'
 3 | import Label from '../components/label'
 4 | import Input from '../components/input'
 5 | import Button from '../components/button'
 6 | import Errors from '../components/errors'
 7 | import {useState} from 'react'
 8 | 
 9 | export default function Register() {
10 |     const [name, setName] = useState('')
11 |     const [email, setEmail] = useState('')
12 |     const [password, setPassword] = useState('')
13 |     const [password_confirmation, setPasswordConfirmation] = useState('')
14 |     const [errors, setErrors] = useState([])
15 | 
16 |     const submitForm = async event => {
17 |         event.preventDefault()
18 |     }
19 | 
20 |     return (
21 |         <>
22 |             <Head>
23 |                 <title>ergodnc — Register</title>
24 |             </Head>
25 | 
26 |             <div className={"w-1/2 mx-auto bg-white p-5 rounded-lg"}>
27 |                 <Errors className="mb-5" errors={errors} />
28 | 
29 |                 <form onSubmit={submitForm} autoComplete="off">
30 |                     <div>
31 |                         <Label htmlFor="email">Name</Label>
32 | 
33 |                         <Input
34 |                             id="name"
35 |                             type="text"
36 |                             value={name}
37 |                             className="block mt-1 w-full"
38 |                             onChange={event => setName(event.target.value)}
39 |                             required
40 |                             autoFocus
41 |                             autoComplete="off"
42 |                         />
43 |                     </div>
44 | 
45 |                     <div className="mt-4">
46 |                         <Label htmlFor="email">Email</Label>
47 | 
48 |                         <Input
49 |                             id="email"
50 |                             type="email"
51 |                             value={email}
52 |                             className="block mt-1 w-full"
53 |                             onChange={event => setEmail(event.target.value)}
54 |                             required
55 |                         />
56 |                     </div>
57 | 
58 |                     <div className="mt-4">
59 |                         <Label htmlFor="password">Password</Label>
60 | 
61 |                         <Input
62 |                             id="password"
63 |                             type="password"
64 |                             value={password}
65 |                             className="block mt-1 w-full"
66 |                             onChange={event => setPassword(event.target.value)}
67 |                             required
68 |                         />
69 |                     </div>
70 | 
71 |                     <div className="mt-4">
72 |                         <Label htmlFor="password">Confirm Password</Label>
73 | 
74 |                         <Input
75 |                             id="password_confirmation"
76 |                             type="password"
77 |                             value={password_confirmation}
78 |                             className="block mt-1 w-full"
79 |                             onChange={event => setPasswordConfirmation(event.target.value)}
80 |                             required
81 |                         />
82 |                     </div>
83 | 
84 |                     <div className="flex items-center justify-end mt-4">
85 |                         <Link href="/login">
86 |                             <a className="underline text-sm text-gray-600 hover:text-gray-900">
87 |                                 Already registered?
88 |                             </a>
89 |                         </Link>
90 | 
91 |                         <Button className="ml-3">Register</Button>
92 |                     </div>
93 |                 </form>
94 |             </div>
95 |         </>
96 |     )
97 | }
98 | 


--------------------------------------------------------------------------------
/pages/login.js:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head'
  2 | import Link from 'next/link'
  3 | import Label from '../components/label'
  4 | import Input from '../components/input'
  5 | import Button from '../components/button'
  6 | import Errors from '../components/errors'
  7 | import {useState} from 'react'
  8 | import useAuth from '../lib/useAuth'
  9 | 
 10 | export default function Login() {
 11 |     const [email, setEmail] = useState('')
 12 |     const [password, setPassword] = useState('')
 13 |     const [remember, setRemember] = useState(false)
 14 |     const [errors, setErrors] = useState([])
 15 | 
 16 |     const {login, isLoading, user} = useAuth({middleware: 'guest'})
 17 | 
 18 |     const submitForm = async event => {
 19 |         event.preventDefault()
 20 | 
 21 |         login({email, password, remember, setErrors});
 22 |     }
 23 | 
 24 |     if (isLoading || user) {
 25 |         return <>Loading...</>
 26 |     }
 27 | 
 28 |     return (
 29 |         <>
 30 |             <Head>
 31 |                 <title>ergodnc — Login</title>
 32 |             </Head>
 33 | 
 34 |             <div className={"w-1/2 mx-auto bg-white p-5 rounded-lg"}>
 35 |                 <Errors className="mb-5" errors={errors} />
 36 | 
 37 |                 <form onSubmit={submitForm} autoComplete="off">
 38 |                     <div>
 39 |                         <Label htmlFor="email">Email</Label>
 40 | 
 41 |                         <Input
 42 |                             id="email"
 43 |                             type="email"
 44 |                             value={email}
 45 |                             className="block mt-1 w-full"
 46 |                             onChange={event => setEmail(event.target.value)}
 47 |                             required
 48 |                             autoFocus
 49 |                             autoComplete="off"
 50 |                         />
 51 |                     </div>
 52 | 
 53 |                     <div className="mt-4">
 54 |                         <Label htmlFor="password">Password</Label>
 55 | 
 56 |                         <Input
 57 |                             id="password"
 58 |                             type="password"
 59 |                             value={password}
 60 |                             className="block mt-1 w-full"
 61 |                             onChange={event => setPassword(event.target.value)}
 62 |                             required
 63 |                             autoComplete="current-password"
 64 |                         />
 65 |                     </div>
 66 | 
 67 |                     <div className="block mt-4">
 68 |                         <label
 69 |                             htmlFor="remember_me"
 70 |                             className="inline-flex items-center">
 71 |                             <input
 72 |                                 id="remember_me"
 73 |                                 type="checkbox"
 74 |                                 name="remember"
 75 |                                 checked={remember}
 76 |                                 onChange={event => setRemember(!remember)}
 77 |                                 className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
 78 |                             />
 79 | 
 80 |                             <span className="ml-2 text-gray-600">
 81 |                             Remember me
 82 |                         </span>
 83 |                         </label>
 84 |                     </div>
 85 | 
 86 |                     <div className="flex items-center justify-end mt-4">
 87 |                         <Link href="/forgot-password">
 88 |                             <a className="underline text-sm text-gray-600 hover:text-gray-900">
 89 |                                 Forgot your password?
 90 |                             </a>
 91 |                         </Link>
 92 | 
 93 |                         <Button className="ml-3">Login</Button>
 94 |                     </div>
 95 |                 </form>
 96 |             </div>
 97 |         </>
 98 |     )
 99 | }
100 | 


--------------------------------------------------------------------------------