136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
|
|
import { auth, googleProvider } from '../firebaseConfig';
|
|
|
|
const Login = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleEmailLogin = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
await signInWithEmailAndPassword(auth, email, password);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleGoogleLogin = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
await signInWithPopup(auth, googleProvider);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ maxWidth: '400px', margin: '100px auto', padding: '20px' }}>
|
|
<h2>Login to DZTPS</h2>
|
|
|
|
{error && (
|
|
<div style={{
|
|
color: 'red',
|
|
marginBottom: '10px',
|
|
padding: '10px',
|
|
border: '1px solid red',
|
|
borderRadius: '4px',
|
|
backgroundColor: '#ffe6e6'
|
|
}}>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleEmailLogin}>
|
|
<div style={{ marginBottom: '15px' }}>
|
|
<label htmlFor="email">Email:</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
disabled={loading}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px',
|
|
marginTop: '5px',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '4px'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div style={{ marginBottom: '15px' }}>
|
|
<label htmlFor="password">Password:</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
disabled={loading}
|
|
style={{
|
|
width: '100%',
|
|
padding: '8px',
|
|
marginTop: '5px',
|
|
border: '1px solid #ccc',
|
|
borderRadius: '4px'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
style={{
|
|
width: '100%',
|
|
padding: '10px',
|
|
backgroundColor: '#007bff',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: loading ? 'not-allowed' : 'pointer',
|
|
opacity: loading ? 0.6 : 1
|
|
}}
|
|
>
|
|
{loading ? 'Signing in...' : 'Sign in with Email'}
|
|
</button>
|
|
</form>
|
|
|
|
<div style={{ margin: '20px 0', textAlign: 'center' }}>
|
|
<span>OR</span>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleGoogleLogin}
|
|
disabled={loading}
|
|
style={{
|
|
width: '100%',
|
|
padding: '10px',
|
|
backgroundColor: '#db4437',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: loading ? 'not-allowed' : 'pointer',
|
|
opacity: loading ? 0.6 : 1
|
|
}}
|
|
>
|
|
{loading ? 'Signing in...' : 'Sign in with Google'}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login; |