fix signin too relax bug

This commit is contained in:
Dobromir Popov
2024-05-01 14:38:14 +03:00
parent 11cf6696ff
commit f2fc549265
4 changed files with 93 additions and 65 deletions

View File

@ -57,12 +57,15 @@ export default function SignIn({ csrfToken }) {
<Layout>
<div className="page">
<div className="signin">
<div className="min-h-screen flex flex-col items-center justify-center">
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
{/* Page Title */}
<h1 className="text-2xl font-bold text-gray-900 mt-6">Вход</h1>
{/* Section for Social Sign-On Providers */}
<div className="mt-8 w-full max-w-xs px-4">
<h2 className="text-lg font-semibold text-gray-700 mb-4">Влез чрез социални медии</h2>
<div className="mt-8 w-full max-w-md px-4 py-8 bg-white shadow rounded-lg">
{/* <h2 className="text-center text-lg font-semibold text-gray-900 mb-4">Sign in with a Social Media Account</h2> */}
<button onClick={() => signIn('google', { callbackUrl: '/' })}
className="flex items-center justify-center w-full py-2 px-4 border border-gray-300 rounded shadow-sm text-sm text-gray-700 bg-white hover:bg-gray-50">
className="flex items-center justify-center w-full py-3 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<img loading="lazy" height="24" width="24" alt="Google logo"
src="https://authjs.dev/img/providers/google.svg" className="mr-2" />
Влез чрез Google
@ -76,40 +79,42 @@ export default function SignIn({ csrfToken }) {
</div>
{/* Local Account Email and Password Form */}
<form onSubmit={handleSubmit} className="w-full max-w-xs px-4">
<h2 className="text-lg font-semibold text-gray-700 mb-4">Влез с локален акаунт</h2>
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">имейл</label>
<input
id="email"
type="text" // allow non-email addresses for username (admins)
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
<div className="mb-6">
<label htmlFor="password" className="block text-sm font-medium text-gray-700">парола</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
/>
</div>
{error && <div className="text-red-500 text-sm">{error}</div>}
<button type="submit" className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
Влез
</button>
{/* <button
<div className="w-full max-w-md mt-8 mb-8 px-4 py-8 bg-white shadow rounded-lg">
<h2 className="text-center text-lg font-semibold text-gray-900 mb-4">Влез с локален акаунт</h2>
<form onSubmit={handleSubmit}>
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-900">имейл</label>
<input
id="email"
type="text" // allow non-email addresses for username (admins)
value={email}
onChange={(e) => setEmail(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
<div className="mb-6">
<label htmlFor="password" className="block text-sm font-medium text-gray-900">парола</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
{error && <div className="text-red-500 text-sm text-center">{error}</div>}
<button type="submit" className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
Влез
</button>
{/* <button
type="button"
className="mt-4 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 hover:text-blue-700 focus:outline-none"
onClick={() => router.push('/auth/reset-password')}>
Забравена парола?
</button> */}
</form>
</form>
</div>
</div>
</div>
</div>