import { useState } from 'react'
import { Head, Link, useForm } from '@inertiajs/react'
import * as Form from '@radix-ui/react-form'
import ErrorMessage from '../../components/ErrorMessage'
export default function SessionsNew({ flash }) {
const { data, setData, post, processing, errors } = useForm({
email_address: '',
password: '',
remember: false,
})
const handleSubmit = (e) => {
e.preventDefault()
post('/session')
}
return (
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-50">
<Head title="Log in" />
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
登录以使用
</h2>
<p className="mt-2 text-center text-sm text-gray-600">
或{' '}
<Link
href="/users/new"
className="font-medium text-indigo-600 hover:text-indigo-500"
>
创建新账户
</Link>
</p>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
{flash?.alert && (
<div className="mb-4">
<ErrorMessage message={flash.alert} />
</div>
)}
<Form.Root className="space-y-6" onSubmit={handleSubmit}>
<Form.Field name="email_address" className="space-y-1">
<Form.Label className="block text-sm font-medium text-gray-700">
邮箱地址
</Form.Label>
<Form.Control asChild>
<input
id="email_address"
name="email_address"
type="email"
autoComplete="email"
required
value={data.email_address}
onChange={(e) => setData('email_address', e.target.value)}
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</Form.Control>
{errors.email_address && (
<Form.Message className="text-sm text-red-600">
{Array.isArray(errors.email_address) ? errors.email_address[0] : errors.email_address}
</Form.Message>
)}
</Form.Field>
<Form.Field name="password" className="space-y-1">
<Form.Label className="block text-sm font-medium text-gray-700">
密码
</Form.Label>
<Form.Control asChild>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
value={data.password}
onChange={(e) => setData('password', e.target.value)}
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</Form.Control>
{errors.password && (
<Form.Message className="text-sm text-red-600">
{Array.isArray(errors.password) ? errors.password[0] : errors.password}
</Form.Message>
)}
</Form.Field>
<div className="flex items-center justify-between">
{/* <div className="flex items-center">
<input
id="remember"
name="remember"
type="checkbox"
checked={data.remember}
onChange={(e) => setData('remember', e.target.checked)}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
/>
<label
htmlFor="remember"
className="ml-2 block text-sm text-gray-900"
>
记住我
</label>
</div> */}
{/* <div className="text-sm">
<Link
href="/passwords/new"
className="font-medium text-indigo-600 hover:text-indigo-500"
>
忘记密码?
</Link>
</div> */}
</div>
<div>
<Form.Submit asChild>
<button
type="submit"
disabled={processing}
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
>
{processing ? '登录中...' : '登录'}
</button>
</Form.Submit>
</div>
</Form.Root>
{/* <div className="mt-6">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">
Or continue with
</span>
</div>
</div>
<div className="mt-6 grid grid-cols-1 gap-3">
<button
type="button"
disabled
title="GitHub login is not available yet"
className="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-400 opacity-60 cursor-not-allowed"
>
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path
fillRule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
clipRule="evenodd"
/>
</svg>
<span>GitHub</span>
</button>
</div>
</div> */}
</div>
</div>
</div>
)
}