Astrix0x1

SignupModal.js

Sep 26th, 2021
863
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.  
  4. export default function SignupModal(props) {
  5.   const [email, setEmail] = useState('');
  6.   const [password, setPassword] = useState('');
  7.   const [buttonText, setbuttonText] = useState('Submit');
  8.   const [forgotPass, setForgotPass] = useState(false);
  9.  
  10.   const [show, setShow] = useState(false);
  11.  
  12.   const handleClose = () => setShow(false);
  13.   const handleShow = () => setShow(true);
  14.   const handleForgot = () => setForgotPass(v => !v);
  15.   return (
  16.     <>
  17.       <p>Don't have an account? <a href="#" onClick={handleShow}>Signup here</a></p>
  18.  
  19.      <Modal show={show} onHide={handleClose}>
  20.        <Modal.Header closeButton>
  21.          <Modal.Title>Signup</Modal.Title>
  22.        </Modal.Header>
  23.        <Modal.Body style={{ textAlign: 'left' }}>
  24.          <div>
  25.            <form>
  26.            <label>First Name</label>
  27.            <br/>
  28.            <input type="text" placeholder="Enter First Name"/>
  29.            <br/>
  30.            <label>Last Name</label>
  31.            <br/>
  32.            <input type="text" placeholder="Enter Last Name"/>
  33.            <br/>
  34.            <label>Phone Number</label>
  35.            <br/>
  36.            <input type="telephone" placeholder="Enter Phone Number"/>
  37.            <br/>
  38.            <label>Email</label>
  39.            <br/>
  40.            <input type="email" placeholder="Enter Email"/>
  41.            <br/>
  42.            <label>Password</label>
  43.            <br/>
  44.            <input type="password" placeholder="Enter Password"/>
  45.            <br/>
  46.            <label>Confirm Password</label>
  47.            <br/>
  48.            <input type="password" placeholder="Enter Confirm Password"/>
  49.            <br/>
  50.            <br/>
  51.            <Button variant="primary" onClick={handleClose}>
  52.              Signup
  53.            </Button>
  54.          </form>
  55.          </div>
  56.        </Modal.Body>
  57.      </Modal>
  58.    </>
  59.  );
  60. }
RAW Paste Data