1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
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>
)
}