// LoginPage.tsx import{useState}from "react"; import{useAuth}from "../context/AuthContext"; import{useNavigate}from "react-router-dom"; export default function LoginPage(){const [username,setUsername] = useState("");const [password,setPassword] = useState("");const [error,setError] = useState("");const{login}= useAuth();const navigate = useNavigate();// Make this function async const handleSubmit = async (e: React.FormEvent) =>{e.preventDefault();setError("");// Clear previous errors // Await the result! const result = await login(username,password);// Check for the error property inside the result object if (!result.error){navigate("/admin")}else{console.error(result.error);setError("Invalid credentials")}}const inputStyle ={width:"100%",padding: "8px",marginTop: "4px",background: "#fff",color: "#333",border: "1px solid #ccc",borderRadius: "4px"}return (<div style={{display: "flex",justifyContent: "center",alignItems: "center",height: "100vh",background: "#f0f2f5"}}> <form onSubmit={handleSubmit} style={{background: "white",color: "#333",padding: "2rem",borderRadius: "8px",boxShadow: "0 4px 12px rgba(0,0,0,0.1)",width: "300px"}} > <h2 style={{marginBottom: "1.5rem",textAlign: "center"}}>Back Office</h2> {error && <p style={{color: "red",fontSize: "0.9rem",marginBottom: "1rem"}}>{error}</p>} <div style={{marginBottom: "1rem"}}> <label style={{display: "block",fontSize: "0.9rem"}}>Email</label> <input type="text" value={username} onChange={e => setUsername(e.target.value)} style={inputStyle} /> </div> <div style={{marginBottom: "1.5rem"}}> <label style={{display: "block",fontSize: "0.9rem"}}>Password</label> <input type="password" value={password} onChange={e => setPassword(e.target.value)} style={inputStyle} /> </div> <button type="submit" style={{width: "100%",padding: "10px",background: "#007bff",color: "white",border: "none",borderRadius: "4px",cursor: "pointer"}} > Login </button> </form> </div>)}html,body,#root{height:100%;width:100%;margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;position:relative}.selection-overlay{position:absolute;inset:0;z-index:100;display:flex;justify-content:center;align-items:center}.webgl-container{flex:1;width:100%;height:100%;position:absolute;inset:0;z-index:1}.placeholder-component{padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;text-align:center}.placeholder-component.viewer{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.fade-overlay{position:absolute;inset:0;z-index:9999;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebar-container-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.burger-menu-btn{position:absolute;left:22px;top:20px;width:60px;height:60px;background:transparent;border:none;cursor:pointer;pointer-events:auto;z-index:1001;padding:0}.burger-icon{width:42px;height:42px;object-fit:contain}.sidebar-panel{position:absolute;top:0;left:0;height:100%;width:80%;max-width:300px;background-color:#fff;padding:23px;border-right:1px solid #ddd;box-shadow:2px 0 10px #0000001a;pointer-events:auto;transform:translate(-100%);transition:transform .3s cubic-bezier(.25,.8,.5,1);z-index:1002;display:flex;flex-direction:column}.sidebar-panel.open{transform:translate(0)}.sidebar-header{display:flex;align-items:center;margin-bottom:14px}.menu-close-btn{background:none;border:none;cursor:pointer;padding:3px;margin-right:8px}.sidebar-title{font-size:18px;font-weight:700}.sidebar-subheading{font-size:14px;font-weight:600;color:gray;margin-bottom:8px;margin-top:0}.disponibilidad-title{margin-left:5px}.prices-title{margin-left:-15px}.sidebar-list{margin-top:4px;margin-left:4px}.sidebar-list-item{display:flex;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px;border-bottom:1px solid #ddd}.list-bullet{font-size:18px;margin-right:10px;flex:1}.switch-wrapper{width:50px;display:flex;justify-content:flex-end}.custom-switch{width:40px;height:24px;border-radius:12px;position:relative;cursor:pointer;transition:background-color .2s}.custom-switch-thumb{width:20px;height:20px;background-color:#f4f3f4;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px #0003}.custom-switch.active .custom-switch-thumb{transform:translate(16px)}.slider-section{margin-top:20px;padding-left:15px;padding-right:15px}.slider-value-display{font-size:16px;margin-top:10px;text-align:center;position:relative;left:-10px}.range-slider-track-container{position:relative;height:40px;margin-top:10px;margin-bottom:10px}.range-track-bg{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background-color:#d3d3d3;border-radius:2px}.range-track-active{position:absolute;top:50%;height:4px;transform:translateY(-50%);background-color:#1fb6ff;border-radius:2px}.range-thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background-color:#1fb6ff;transform:translate(-50%,-50%);cursor:grab;z-index:3;box-shadow:0 1px 3px #0000004d}.range-thumb:active{cursor:grabbing}.range-labels,.range-values{display:flex;justify-content:space-between;width:100%;margin-top:5px}.range-labels span{font-size:12px;color:gray}.range-values span{font-size:12px}.room-checkboxes{display:flex;flex-direction:column;gap:12px;padding:10px 0}.room-checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#333;cursor:pointer}.room-checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#4CAF50}