feat: improve FilterModal mobile responsiveness and handle social auth errors via URL parameters
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { signIn } from 'next-auth/react';
|
import { signIn } from 'next-auth/react';
|
||||||
|
import { useSearchParams } from 'next/navigation';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { authService, AuthService, RegisterRequest, agentsService, AgentType } from '@/services';
|
import { authService, AuthService, RegisterRequest, agentsService, AgentType } from '@/services';
|
||||||
import { resetLogoutState } from '@/services/api';
|
import { resetLogoutState } from '@/services/api';
|
||||||
@@ -14,6 +15,7 @@ interface ValidationError {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function SignUpPage() {
|
export default function SignUpPage() {
|
||||||
|
const searchParams = useSearchParams();
|
||||||
const [userType, setUserType] = useState<UserType>('USER');
|
const [userType, setUserType] = useState<UserType>('USER');
|
||||||
const [firstName, setFirstName] = useState('');
|
const [firstName, setFirstName] = useState('');
|
||||||
const [lastName, setLastName] = useState('');
|
const [lastName, setLastName] = useState('');
|
||||||
@@ -28,6 +30,14 @@ export default function SignUpPage() {
|
|||||||
const [selectedAgentTypeId, setSelectedAgentTypeId] = useState('');
|
const [selectedAgentTypeId, setSelectedAgentTypeId] = useState('');
|
||||||
const [loadingAgentTypes, setLoadingAgentTypes] = useState(false);
|
const [loadingAgentTypes, setLoadingAgentTypes] = useState(false);
|
||||||
|
|
||||||
|
// Surface errors passed via ?error= (e.g. from social signup callback)
|
||||||
|
useEffect(() => {
|
||||||
|
const errorParam = searchParams.get('error');
|
||||||
|
if (errorParam) {
|
||||||
|
setError(decodeURIComponent(errorParam));
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
// Clear logout flags and fetch agent types on mount
|
// Clear logout flags and fetch agent types on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
localStorage.removeItem('isLoggingOut');
|
localStorage.removeItem('isLoggingOut');
|
||||||
|
|||||||
@@ -155,7 +155,8 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
|
|||||||
(user as any).refreshToken = data.data.refreshToken;
|
(user as any).refreshToken = data.data.refreshToken;
|
||||||
} else if (!res.ok) {
|
} else if (!res.ok) {
|
||||||
const errorMsg = data?.message || "Social login failed";
|
const errorMsg = data?.message || "Social login failed";
|
||||||
return `/login?error=${encodeURIComponent(errorMsg)}`;
|
const returnTo = mode === 'signup' ? '/signup' : '/login';
|
||||||
|
return `${returnTo}?error=${encodeURIComponent(errorMsg)}`;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Social auth sync error:", error);
|
console.error("Social auth sync error:", error);
|
||||||
|
|||||||
@@ -103,16 +103,16 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<div className="shrink-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
|
<div className="shrink-0 bg-white px-4 sm:px-8 py-4 sm:py-5 border-t border-[#d9d9d9] flex items-center gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={onClearAll}
|
onClick={onClearAll}
|
||||||
className="px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors"
|
className="flex-1 sm:flex-initial px-4 sm:px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors whitespace-nowrap"
|
||||||
>
|
>
|
||||||
Clear all Filters
|
Clear all Filters
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={onApply}
|
onClick={onApply}
|
||||||
className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] font-fractul font-bold text-[14px] text-[#00293d] transition-colors"
|
className="flex-1 sm:flex-initial px-4 sm:px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] font-fractul font-bold text-[14px] text-[#00293d] transition-colors whitespace-nowrap sm:ml-auto"
|
||||||
>
|
>
|
||||||
Apply Filters
|
Apply Filters
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user