Feat: Ojito clave en Login y ScrollToTop global al cambiar de página
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useNavigate, useLocation, useNavigationType } from 'react-router-dom';
|
||||
import HomePage from './pages/HomePage';
|
||||
import ExplorarPage from './pages/ExplorarPage';
|
||||
import VehiculoDetailPage from './pages/VehiculoDetailPage';
|
||||
@@ -333,6 +333,17 @@ function MainLayout() {
|
||||
);
|
||||
}
|
||||
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
const navType = useNavigationType();
|
||||
useEffect(() => {
|
||||
if (navType !== "POP") {
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
}
|
||||
}, [pathname, navType]);
|
||||
return null;
|
||||
}
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
const mpPublicKey = import.meta.env.VITE_MP_PUBLIC_KEY;
|
||||
@@ -342,6 +353,7 @@ function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<Router>
|
||||
<ScrollToTop />
|
||||
<MainLayout />
|
||||
</Router>
|
||||
</AuthProvider>
|
||||
|
||||
@@ -102,6 +102,7 @@ export default function LoginModal({ onSuccess, onClose, initialMode }: Props) {
|
||||
// Estados de Login
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showLoginPass, setShowLoginPass] = useState(false);
|
||||
|
||||
// Para controlar si mostramos la opción de reenviar email no verificado
|
||||
const [showResend, setShowResend] = useState(false);
|
||||
@@ -553,14 +554,23 @@ export default function LoginModal({ onSuccess, onClose, initialMode }: Props) {
|
||||
<label className="text-xs font-black uppercase tracking-widest text-gray-500 block mb-1.5 ml-1">
|
||||
Contraseña
|
||||
</label>
|
||||
<input
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3.5 text-white outline-none focus:border-blue-500 transition-all placeholder:text-gray-600 focus:bg-white/10"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<div className="relative">
|
||||
<input
|
||||
required
|
||||
type={showLoginPass ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl pl-4 pr-12 py-3.5 text-white outline-none focus:border-blue-500 transition-all placeholder:text-gray-600 focus:bg-white/10"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLoginPass(!showLoginPass)}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white transition-colors"
|
||||
>
|
||||
{showLoginPass ? <EyeSlashIcon /> : <EyeIcon />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-right mt-2">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -7,7 +7,6 @@ export default function CondicionesPage() {
|
||||
const [show, setShow] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
const t = setTimeout(() => setShow(true), 100);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
Reference in New Issue
Block a user