Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better UX when resetting pw

Browse Source
This commit is contained in:
jackiettran
2025-12-29 00:38:10 -05:00
parent e153614993
commit ac1e22f194
3 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/AuthModal.tsx
View File

@@ -8,7 +8,7 @@ import VerificationCodeModal from "./VerificationCodeModal";
interface AuthModalProps { interface AuthModalProps {
show: boolean; show: boolean;
onHide: () => void; onHide: () => void;
initialMode?: "login" | "signup"; initialMode?: "login" | "signup" | "forgot-password";
} }
const AuthModal: React.FC<AuthModalProps> = ({ const AuthModal: React.FC<AuthModalProps> = ({
@@ -16,14 +16,14 @@ const AuthModal: React.FC<AuthModalProps> = ({
onHide, onHide,
initialMode = "login", initialMode = "login",
}) => { }) => {
const [mode, setMode] = useState<"login" | "signup">(initialMode); const [mode, setMode] = useState<"login" | "signup">(initialMode === "forgot-password" ? "login" : initialMode);
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [firstName, setFirstName] = useState(""); const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState(""); const [lastName, setLastName] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [showForgotPassword, setShowForgotPassword] = useState(false); const [showForgotPassword, setShowForgotPassword] = useState(initialMode === "forgot-password");
const [showVerificationModal, setShowVerificationModal] = useState(false); const [showVerificationModal, setShowVerificationModal] = useState(false);
const { login, register } = useAuth(); const { login, register } = useAuth();
@@ -32,7 +32,13 @@ const AuthModal: React.FC<AuthModalProps> = ({
// Update mode when modal is opened with different initialMode // Update mode when modal is opened with different initialMode
useEffect(() => { useEffect(() => {
if (show && initialMode) { if (show && initialMode) {
setMode(initialMode); if (initialMode === "forgot-password") {
setShowForgotPassword(true);
setMode("login"); // Default to login when returning from forgot password
} else {
setMode(initialMode);
setShowForgotPassword(false);
}
} }
}, [show, initialMode]); }, [show, initialMode]);

8
frontend/src/contexts/AuthContext.tsx
View File

@@ -27,8 +27,8 @@ interface AuthContextType {
updateUser: (user: User) => void; updateUser: (user: User) => void;
checkAuth: () => Promise<void>; checkAuth: () => Promise<void>;
showAuthModal: boolean; showAuthModal: boolean;
authModalMode: "login" | "signup"; authModalMode: "login" | "signup" | "forgot-password";
openAuthModal: (mode: "login" | "signup") => void; openAuthModal: (mode: "login" | "signup" | "forgot-password") => void;
closeAuthModal: () => void; closeAuthModal: () => void;
} }
@@ -50,7 +50,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
const [user, setUser] = useState<User | null>(null); const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [showAuthModal, setShowAuthModal] = useState(false); const [showAuthModal, setShowAuthModal] = useState(false);
const [authModalMode, setAuthModalMode] = useState<"login" | "signup">("login"); const [authModalMode, setAuthModalMode] = useState<"login" | "signup" | "forgot-password">("login");
const isAuthenticating = useRef(false); const isAuthenticating = useRef(false);
const checkAuth = async () => { const checkAuth = async () => {
@@ -144,7 +144,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
setUser(user); setUser(user);
}; };
const openAuthModal = (mode: "login" | "signup") => { const openAuthModal = (mode: "login" | "signup" | "forgot-password") => {
setAuthModalMode(mode); setAuthModalMode(mode);
setShowAuthModal(true); setShowAuthModal(true);
}; };

9
frontend/src/pages/ResetPassword.tsx
View File

@@ -140,6 +140,15 @@ const ResetPassword: React.FC = () => {
<h5 className="mt-3">Invalid Reset Link</h5> <h5 className="mt-3">Invalid Reset Link</h5>
<p className="text-danger">{error}</p> <p className="text-danger">{error}</p>
<div className="mt-3"> <div className="mt-3">
<button
className="btn btn-primary me-2"
onClick={() => {
navigate('/', { replace: true });
openAuthModal('forgot-password');
}}
>
Request New Link
</button>
<Link to="/" className="btn btn-outline-secondary"> <Link to="/" className="btn btn-outline-secondary">
Return to Home Return to Home
</Link> </Link>