Astrix0x1

LoginModal.js

Sep 26th, 2021
868
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import { Button, Modal} from 'react-bootstrap';
  3. import SignupModal from './SignupModal.js';
  4.  
  5. export default function LoginModal(props) {
  6.   const [email, setEmail] = useState('');
  7.   const [password, setPassword] = useState('');
  8.   const [buttonText, setbuttonText] = useState('Submit');
  9.   const [forgotPass, setForgotPass] = useState(false);
  10.  
  11.   const [show, setShow] = useState(false);
  12.  
  13.   const handleClose = () => setShow(false);
  14.   const handleShow = () => setShow(true);
  15.   const handleForgot = () => setForgotPass(v => !v);
  16.   return (
  17.     <>
  18.       <Button type="button" className="btn btn-default" onClick={handleShow}>
  19.         <i className="fa fa-user" aria-hidden="true"></i>Login/Signup
  20.         </Button>
  21.  
  22.       <Modal show={show} onHide={handleClose}>
  23.         <Modal.Header closeButton>
  24.           <Modal.Title>Login</Modal.Title>
  25.         </Modal.Header>
  26.         <Modal.Body style={{ textAlign: 'center' }}>
  27.         { !forgotPass ? (
  28.           <div>
  29.             <form>
  30.             <input type="email" placeholder="Enter Email"/>
  31.             <br/>
  32.             <input type="password" placeholder="Enter Password"/>
  33.             <br/>
  34.             <Button variant="primary" onClick={handleClose}>
  35.               Login
  36.             </Button>
  37.           </form>
  38.           <div className="forgotpass">
  39.             <p onClick={handleForgot}><a href="#">Forgot Password?</a></p>
  40.              <SignupModal/>
  41.           </div>
  42.           </div>
  43.           ) : <div>
  44.              <form>
  45.             <input type="email" placeholder="Enter Email"/>
  46.             <br/>
  47.             <Button variant="primary" onClick={handleClose}>
  48.               Submit
  49.             </Button>
  50.             </form>
  51.             <p onClick={handleForgot}><a href="#">{`< back to login`}</a></p>
  52.           </div>}
  53.         </Modal.Body>
  54.       </Modal>
  55.     </>
  56.   );
  57. }
RAW Paste Data