Created
June 16, 2017 16:07
-
-
Save kjromero/7491c64a331868143b0c0a836fabe80b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import firebase from 'firebase'; | |
| import ForgotPss from './components/ForgotPss'; | |
| import Home from './components/Home.js'; | |
| import Modal from 'react-modal'; | |
| import './App.css'; | |
| const customStyles = { | |
| content : { | |
| top : '50%', | |
| left : '50%', | |
| right : 'auto', | |
| bottom : 'auto', | |
| marginRight : '-50%', | |
| transform : 'translate(-50%, -50%)' | |
| } | |
| }; | |
| class App extends Component { | |
| constructor () { | |
| super(); | |
| this.state = { | |
| user: null, | |
| email: null, | |
| password: null, | |
| modalIsOpen: false | |
| }; | |
| this.openModal = this.openModal.bind(this); | |
| this.closeModal = this.closeModal.bind(this); | |
| this.handleLogout = this.handleLogout.bind(this); | |
| this.handleAuth = this.handleAuth.bind(this); | |
| this.handleInputChange = this.handleInputChange.bind(this); | |
| } | |
| openModal() { | |
| this.setState({modalIsOpen: true}); | |
| } | |
| closeModal() { | |
| this.setState({modalIsOpen: false}); | |
| const recover = firebase.auth(); | |
| recover.sendPasswordResetEmail(this.state.email).then( response => { | |
| console.log('Se envio un correo a su cuenta.',response); | |
| }).catch( error => { | |
| console.log('error', error); | |
| }); | |
| } | |
| recoverPass(mailAddres){ | |
| } | |
| componentWillMount (){ | |
| firebase.auth().onAuthStateChanged(user => { | |
| this.setState({user}); | |
| }); | |
| } | |
| handleAuth(){ | |
| //const provider = new firebase.auth.GoogleAuthProvider(); | |
| firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password) | |
| .then(result => console.log(`${result.user.email} ha iniciado sesion`)) | |
| .catch(error => console.log(`Error ${error.code} : ${error.message} `)); | |
| } | |
| handleLogout(){ | |
| firebase.auth().signOut() | |
| .then(result => console.log(`${result.user.email} ha salido`)) | |
| .catch(error => console.log(`Error ${error.code} : ${error.message} `)); | |
| } | |
| handleForgotPassword(){ | |
| return <ForgotPss />; | |
| } | |
| handleInputChange(event) { | |
| const target = event.target; | |
| const value = target.value; | |
| const name = target.name; | |
| this.setState({ | |
| [name]: value | |
| }); | |
| } | |
| renderLoginButton(){ | |
| if(this.state.user){ | |
| return( | |
| <Home onLogOut={this.handleLogout}/> | |
| ) | |
| }else{ | |
| return( | |
| <div className="row"> | |
| <div className="col-md-4 col-md-offset-4"> | |
| <div className="panel panel-default"> | |
| <div className="panel-heading"> | |
| <h3 className="panel-title">Ingresar</h3> | |
| </div> | |
| <div className="panel-body"> | |
| <form accept-charset="UTF-8" > | |
| <fieldset> | |
| <div className="form-group"> | |
| <input className="form-control" placeholder="E-mail" name="email" type="email" value={this.state.email} onChange={this.handleInputChange} /> | |
| </div> | |
| <div className="form-group"> | |
| <input className="form-control" placeholder="Contraseña" name="password" type="password" value={this.state.password} onChange={this.handleInputChange} /> | |
| </div> | |
| <div className="form-group"> | |
| <a onClick={this.openModal} >Olvido su contraseña?</a> | |
| </div> | |
| <input className="btn btn-lg btn-success btn-block" onClick={this.handleAuth} value="login Google"/> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| render() { | |
| return ( | |
| <div className="container"> | |
| {this.renderLoginButton()} | |
| <Modal | |
| isOpen={this.state.modalIsOpen} | |
| onAfterOpen={this.afterOpenModal} | |
| onRequestClose={this.closeModal} | |
| style={customStyles} | |
| contentLabel="Example Modal" | |
| > | |
| <div className="panel panel-default"> | |
| <div className="panel-heading"> | |
| <h3 className="panel-title">Ingresa el email que validara tu contraseña</h3> | |
| </div> | |
| <div className="panel-body"> | |
| <form accept-charset="UTF-8" > | |
| <fieldset> | |
| <div className="form-group"> | |
| <input className="form-control" placeholder="E-mail" name="email" type="email" value={this.state.email} onChange={this.handleInputChange} /> | |
| </div> | |
| <input className="btn btn-lg btn-success btn-block" onClick={this.closeModal} value="Recuperar Contrasena"/> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| </Modal> | |
| </div> | |
| ); | |
| } | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment