4e50e7e79d
- Improved import organization and formatting in PlaylistsPage, RegisterPage, SoundsPage, SettingsPage, and UsersPage for better readability. - Added error handling and user feedback with toast notifications in SoundsPage and SettingsPage. - Enhanced user experience by implementing debounced search functionality in PlaylistsPage and SoundsPage. - Updated the layout and structure of forms in SettingsPage and UsersPage for better usability. - Improved accessibility and semantics by ensuring proper labeling and descriptions in forms. - Fixed minor bugs related to state management and API calls in various components.
104 lines
2.7 KiB
TypeScript
104 lines
2.7 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { useAuth } from '@/contexts/AuthContext'
|
|
import { ApiError } from '@/lib/api'
|
|
import { useState } from 'react'
|
|
import { OAuthButtons } from './OAuthButtons'
|
|
|
|
export function LoginForm() {
|
|
const { login } = useAuth()
|
|
const [formData, setFormData] = useState({
|
|
email: '',
|
|
password: '',
|
|
})
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
await login(formData)
|
|
} catch (err) {
|
|
if (err instanceof ApiError) {
|
|
setError(err.message)
|
|
} else {
|
|
setError('An unexpected error occurred')
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[e.target.name]: e.target.value,
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="space-y-1">
|
|
<CardTitle className="text-2xl font-bold text-center">
|
|
Sign in
|
|
</CardTitle>
|
|
<CardDescription className="text-center">
|
|
Enter your email and password to sign in to your account
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-sm text-red-600 bg-red-50 p-3 rounded">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<Button type="submit" className="w-full" disabled={loading}>
|
|
{loading ? 'Signing in...' : 'Sign In'}
|
|
</Button>
|
|
</form>
|
|
|
|
<OAuthButtons />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|