��JFIF��`�`��Viewing File: /home/u820193700/domains/throtllr.com/public_html/js/pages/Login.js

const { useState } = React;
const { useNavigate, Link, useLocation } = ReactRouterDOM;

function Login({ setUser }) {
    const navigate = useNavigate();
    const location = useLocation();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(false);

    const [showPassword, setShowPassword] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        setLoading(true);
        setError('');

        try {
            const data = await window.fetchAPI('/auth/login.php', {
                method: 'POST',
                body: JSON.stringify({ email, password })
            });

            sessionStorage.setItem('throtllr_user', JSON.stringify(data.user));
            setUser(data.user);

            // Extract query parameters from either standard search or HashRouter's hash-based queries
            let queryString = location.search;
            if (!queryString && window.location.hash.includes('?')) {
                queryString = '?' + window.location.hash.split('?')[1];
            }

            const params = new URLSearchParams(queryString);
            const redirect = params.get('redirect');
            const autoBook = params.get('autoBook');

            if (redirect) {
                const target = autoBook ? `${redirect}?autoBook=true` : redirect;
                navigate(target);
            } else {
                navigate('/');
            }

        } catch (err) {
            if (err.needs_verification) {
                navigate(`/verify-email?email=${encodeURIComponent(email)}`);
                return;
            }
            setError(err.message || 'Login failed');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="container mt-5 mb-5" style={{ maxWidth: '500px' }}>
            <div className="card">
                <div className="card-body" style={{ padding: '40px' }}>
                    <h2 className="text-center mb-4">Login to Manage</h2>

                    {error && <div className="mb-3" style={{ color: 'var(--danger)', padding: '10px', backgroundColor: 'rgba(220, 53, 69, 0.1)', borderRadius: '4px' }}>{error}</div>}

                    <form onSubmit={handleSubmit}>
                        <div className="form-group mb-3">
                            <label className="form-label">Email Address</label>
                            <input
                                type="email"
                                className="form-control"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                required
                            />
                        </div>
                        <div className="form-group mb-4">
                            <div className="d-flex justify-content-between align-items-center mb-1">
                                <label className="form-label mb-0">Password</label>
                                <Link to="/forgot-password" style={{ fontSize: '0.8rem', color: 'var(--primary-color)', textDecoration: 'none' }}>Forgot Password?</Link>
                            </div>
                            <div className="input-group-custom">
                                <input
                                    type={showPassword ? "text" : "password"}
                                    className="form-control"
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    required
                                />
                                <span className="pwd-toggle" onClick={() => setShowPassword(!showPassword)}>
                                    <i className={`fa-solid ${showPassword ? 'fa-eye-slash' : 'fa-eye'}`}></i>
                                </span>
                            </div>
                        </div>
                        <button type="submit" className="btn w-100 mt-2" disabled={loading}>
                            {loading ? 'Logging in...' : 'Login'}
                        </button>

                        <style>{`
                            .input-group-custom {
                                position: relative;
                                display: flex;
                                align-items: center;
                            }
                            .pwd-toggle {
                                position: absolute;
                                right: 15px;
                                cursor: pointer;
                                color: #777;
                                z-index: 10;
                                transition: color 0.3s;
                            }
                            .pwd-toggle:hover {
                                color: var(--primary-color);
                            }
                            .form-control {
                                padding-right: 45px !important;
                            }
                        `}</style>
                    </form>

                    <div className="text-center mt-4 text-muted">
                        Don't have an account? <Link to="/register">Register as Rider</Link>
                    </div>
                </div>
            </div>
        </div>
    );
}

Back to Directory ��}�!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz�� w�!1AQaq"2�B�� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��?��_��+��?��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��(��