import React,{memo} from 'react';
import { withRouter } from "react-router-dom";
import { SiteRutas, ImagenesRutas } from '../../request/RutasConfig.jsx';

 function CambiarContrasenaPage() {
    const divStyle = {
        background: 'url(' + ImagenesRutas.Fondo_Login + ') no-repeat center center fixed'
    };
  return (
    <div style={divStyle} className="menu_container MainContainer">
    <div className="container">
        <div className="pull-right">
            <img className="logo_ld small" src={ImagenesRutas.Logo_LD_Blanco} alt="LogicalDataLogo" />
        </div>
        <div className="login_bg">
            <p className="title">Contabilidad</p>
            <h1 className="h1 text-center">Cambiar Contraseña</h1>
            <div className="row">
                <div className="col-12 col-md-10 offset-md-1">
                    <form id="frmCambiarContrasena">
                        <fieldset>
                            <legend></legend>
                            <p>Por favor ingrese sus credenciales para cambiar su contrase&ntilde;a.</p>

                            <div className='form-group'>
                                <span className='input-icon'>
                                    <input type='text' className='login' name='user' title='Nombre de Usuario' value={''} disabled readOnly/>
                                </span>
                            </div>
                            <div className='form-group'>
                                <span className='input-icon'>
                                    <input type='password' className='login' name='currentPass' title='Contraseña' placeholder='Contraseña' onChange={()=>{}} />
                                </span>
                            </div>
                            <div className='form-group'>
                                <span className='input-icon'>
                                    <input type='password' className='login' name='newPass' title='Nueva Contraseña' placeholder='Nueva Contraseña' onChange={()=>{}} />
                                </span>
                            </div>
                            <div className='form-group'>
                                <span className='input-icon'>
                                    <input type='password' className='login' name='confirmPass' title='Confirmar Contraseña' placeholder='Confirmar Contraseña' onChange={()=>{}} />
                                </span>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                    <button type="button" title="Cancelar" className="btn btn-light float-left" onClick={()=>{}}>Cancelar</button>
                                </div>

                                <div className="col-6">
                                    <button type="button" title="Cambiar" onClick={()=>{}} className="btn btn-light float-right">Cambiar</button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
  );
};
export default withRouter(memo(CambiarContrasenaPage))