import React, {useEffect} from 'react'
import Link from 'next/link'
import Router from 'next/router'
import isEmail from 'validator/lib/isEmail'

import {FormController, Input, Button} from '~/components/form'

export default function Login({user}){
  useEffect(()=>{
    if(user) Router.push('/account')
  }, [user])

  return (
    <FormController url="/api/auth" afterSubmit={()=>Router.push('/account')}>
      <h1>Login</h1>
      <Input label="Email" type="text" name="email" validate={value=>isEmail(value)} hint="Enter a valid email address" />
      <Input label="Password" type="password" name="password" validate={value=>(value.length >= 8)} hint="Password must be at least 8 characters long" />
      <Button type="submit">Submit</Button>
      <p>Need an account? <Link href="/register"><a>Register here</a></Link>.</p>
    </FormController>
  )
}