added stack trace to some logging
This commit is contained in:
jackiettran
@@ -74,7 +74,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
|
||||
|
||||
// Focus the first input element when modal opens
|
||||
if (modalRef.current) {
|
||||
const firstInput = modalRef.current.querySelector<HTMLElement>('input');
|
||||
const firstInput = modalRef.current.querySelector<HTMLElement>("input");
|
||||
firstInput?.focus();
|
||||
}
|
||||
|
||||
@@ -96,11 +96,12 @@ const AuthModal: React.FC<AuthModalProps> = ({
|
||||
const handleGoogleLogin = () => {
|
||||
const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
|
||||
const redirectUri = `${window.location.origin}/auth/google/callback`;
|
||||
const scope = 'openid email profile';
|
||||
const responseType = 'code';
|
||||
const scope = "openid email profile";
|
||||
const responseType = "code";
|
||||
|
||||
const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
|
||||
`client_id=${encodeURIComponent(clientId || '')}` +
|
||||
const googleAuthUrl =
|
||||
`https://accounts.google.com/o/oauth2/v2/auth?` +
|
||||
`client_id=${encodeURIComponent(clientId || "")}` +
|
||||
`&redirect_uri=${encodeURIComponent(redirectUri)}` +
|
||||
`&response_type=${responseType}` +
|
||||
`&scope=${encodeURIComponent(scope)}` +
|
||||
@@ -158,13 +159,14 @@ const AuthModal: React.FC<AuthModalProps> = ({
|
||||
// Show first specific validation error if available, otherwise generic error
|
||||
const details = err.response?.data?.details;
|
||||
const specificError = details?.[0]?.message;
|
||||
setError(specificError || err.response?.data?.error || "An error occurred");
|
||||
setError(
|
||||
specificError || err.response?.data?.error || "An error occurred"
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
if (!show && !showForgotPassword && !showVerificationModal) return null;
|
||||
|
||||
return (
|
||||
@@ -195,158 +197,160 @@ const AuthModal: React.FC<AuthModalProps> = ({
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content" ref={modalRef}>
|
||||
<div className="modal-header border-0 pb-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => {
|
||||
resetModal();
|
||||
onHide();
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body px-4 pb-4">
|
||||
<h4 className="text-center mb-2">
|
||||
Welcome to Village Share
|
||||
</h4>
|
||||
<div className="modal-header border-0 pb-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => {
|
||||
resetModal();
|
||||
onHide();
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body px-4 pb-4">
|
||||
<h4 className="text-center mb-2">Welcome to Village Share</h4>
|
||||
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email Form */}
|
||||
<form onSubmit={handleEmailSubmit}>
|
||||
{mode === "signup" && (
|
||||
<>
|
||||
<div className="row mb-3">
|
||||
<div className="col">
|
||||
<label className="form-label">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<label className="form-label">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="name@example.com"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PasswordInput
|
||||
id="password"
|
||||
label="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{mode === "signup" && (
|
||||
<div style={{ marginTop: '-0.75rem', marginBottom: '1rem' }}>
|
||||
<PasswordStrengthMeter password={password} />
|
||||
{error && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "login" && (
|
||||
<div className="text-end mb-3" style={{ marginTop: '-0.5rem' }}>
|
||||
{/* Email Form */}
|
||||
<form onSubmit={handleEmailSubmit}>
|
||||
{mode === "signup" && (
|
||||
<>
|
||||
<div className="row mb-3">
|
||||
<div className="col">
|
||||
<label className="form-label">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={firstName}
|
||||
onChange={(e) => setFirstName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<label className="form-label">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={lastName}
|
||||
onChange={(e) => setLastName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label">Email</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
autoComplete="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PasswordInput
|
||||
id="password"
|
||||
label="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{mode === "signup" && (
|
||||
<div
|
||||
style={{ marginTop: "-0.75rem", marginBottom: "1rem" }}
|
||||
>
|
||||
<PasswordStrengthMeter password={password} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{mode === "login" && (
|
||||
<div
|
||||
className="text-end mb-3"
|
||||
style={{ marginTop: "-0.5rem" }}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className="text-primary text-decoration-none small"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowForgotPassword(true);
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary w-100 py-3 mb-1"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading
|
||||
? "Loading..."
|
||||
: mode === "login"
|
||||
? "Log in"
|
||||
: "Sign up"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="d-flex align-items-center my-3">
|
||||
<hr className="flex-grow-1" />
|
||||
<span className="px-3 text-muted">or</span>
|
||||
<hr className="flex-grow-1" />
|
||||
</div>
|
||||
|
||||
{/* Social Login Options */}
|
||||
<button
|
||||
className="btn btn-outline-dark w-100 mb-2 py-3 d-flex align-items-center justify-content-center"
|
||||
onClick={handleGoogleLogin}
|
||||
disabled={loading}
|
||||
type="button"
|
||||
>
|
||||
<i className="bi bi-google me-2"></i>
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<div className="text-center mt-3">
|
||||
<small className="text-muted">
|
||||
{mode === "login"
|
||||
? "Don't have an account? "
|
||||
: "Already have an account? "}
|
||||
<a
|
||||
href="#"
|
||||
className="text-primary text-decoration-none small"
|
||||
className="text-primary text-decoration-none"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShowForgotPassword(true);
|
||||
setError("");
|
||||
setMode(mode === "login" ? "signup" : "login");
|
||||
}}
|
||||
>
|
||||
Forgot password?
|
||||
{mode === "login" ? "Sign up" : "Log in"}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary w-100 py-3 mb-1"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading
|
||||
? "Loading..."
|
||||
: mode === "login"
|
||||
? "Log in"
|
||||
: "Sign up"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="d-flex align-items-center my-3">
|
||||
<hr className="flex-grow-1" />
|
||||
<span className="px-3 text-muted">or</span>
|
||||
<hr className="flex-grow-1" />
|
||||
</div>
|
||||
|
||||
{/* Social Login Options */}
|
||||
<button
|
||||
className="btn btn-outline-dark w-100 mb-2 py-3 d-flex align-items-center justify-content-center"
|
||||
onClick={handleGoogleLogin}
|
||||
disabled={loading}
|
||||
type="button"
|
||||
>
|
||||
<i className="bi bi-google me-2"></i>
|
||||
Continue with Google
|
||||
</button>
|
||||
|
||||
<div className="text-center mt-3">
|
||||
<small className="text-muted">
|
||||
{mode === "login"
|
||||
? "Don't have an account? "
|
||||
: "Already have an account? "}
|
||||
<a
|
||||
href="#"
|
||||
className="text-primary text-decoration-none"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
setMode(mode === "login" ? "signup" : "login");
|
||||
}}
|
||||
>
|
||||
{mode === "login" ? "Sign up" : "Log in"}
|
||||
<p className="text-center text-muted small mt-4 mb-0">
|
||||
By continuing, you agree to Village Share's{" "}
|
||||
<a href="/terms" className="text-decoration-none">
|
||||
Terms of Service
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="/privacy" className="text-decoration-none">
|
||||
Privacy Policy
|
||||
</a>
|
||||
</small>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-muted small mt-4 mb-0">
|
||||
By continuing, you agree to Village Share's{" "}
|
||||
<a href="/terms" className="text-decoration-none">
|
||||
Terms of Service
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="/privacy" className="text-decoration-none">
|
||||
Privacy Policy
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Forgot Password Modal */}
|
||||
|
||||
Reference in New Issue
Block a user