Astrix0x1

Converted to functional component

Sep 26th, 2021
1,146
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from "react";
  2. import {
  3.   Navbar,
  4.   NavDropdown,
  5.   MenuItem,
  6.   NavItem,
  7.   Nav,
  8.   Popover,
  9.   Tooltip,
  10.   Button,
  11.   Modal,
  12.   OverlayTrigger
  13. } from "react-bootstrap";
  14.  
  15. import CreateNewAccount from "./CreateNewAccount";
  16.  
  17. const RenderForgot = () => {
  18.  return(
  19.   <div>
  20.     <p>inside of forgot! :) </p>
  21.     <a
  22.       href="#"
  23.       onClick={e => {
  24.         e.preventDefault();
  25.         this.setMode("login");
  26.       }}
  27.     >
  28.       Back to login
  29.     </a>
  30.   </div>
  31.   );
  32. }
  33.  
  34. const RenderRegister = () => {
  35.   return (
  36.     <div>
  37.       <div>
  38.         <form className="form-horizontal form-loanable">
  39.           <div className="alert alert-danger alert-sm">
  40.             <button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
  41.             <span className="fw-semi-bold">Error:</span> Login failed.
  42.             </div>
  43.           <fieldset>
  44.             <div className="form-group has-feedback required">
  45.               <label htmlFor="login-email" className="col-sm-5">Username or email</label>
  46.               <div className="col-sm-7">
  47.                 <span className="form-control-feedback" aria-hidden="true"></span>
  48.                 <input
  49.                   type="text"
  50.                   name="email"
  51.                   id="login-email"
  52.                   className="form-control"
  53.                   placeholder="Enter username or email"
  54.                   onChange={this.onChange}
  55.                 />
  56.               </div>
  57.               { /* console.log('error email ::: ' + JSON.stringify(errors)) */}
  58.             </div>
  59.             <div className="form-group has-feedback required">
  60.               <label htmlFor="login-password" className="col-sm-5">Password</label>
  61.               <div className="col-sm-7">
  62.                 <span className="form-control-feedback" aria-hidden="true"></span>
  63.                 <div className="login-password-wrapper">
  64.                   <input
  65.                     type="password"
  66.                     name="password"
  67.                     id="login-password"
  68.                     className="form-control"
  69.                     placeholder="*****"
  70.                     required
  71.                     onChange={this.onChange}
  72.                   />
  73.                  
  74.                 </div>
  75.               </div>
  76.             </div>
  77.           </fieldset>
  78.           <div className="form-action">
  79.             <button
  80.               type="submit"
  81.               className="btn btn-lg btn-primary btn-left">Enter <span className="icon-arrow-right2 outlined"></span></button>
  82.            
  83.           </div>
  84.         </form>
  85.      
  86.       </div>
  87.       <a
  88.         href="#"
  89.         onClick={e => {
  90.           e.preventDefault();
  91.           this.setMode("login");
  92.         }}
  93.       >
  94.         Log in here
  95.       </a>
  96.     </div>
  97.   );
  98. };
  99.  
  100. const RenderLogin = () => {
  101.   return (
  102.     <div>
  103.         <form className="form-horizontal form-loanable">
  104.           <div className="alert alert-danger alert-sm">
  105.             <button type="button" className="close" data-dismiss="alert" aria-hidden="true">×</button>
  106.             <span className="fw-semi-bold">Error:</span> Login failed.
  107.             </div>
  108.           <fieldset>
  109.             <div className="form-group has-feedback required">
  110.               <label htmlFor="login-email" className="col-sm-5">Username or email</label>
  111.               <div className="col-sm-7">
  112.                 <span className="form-control-feedback" aria-hidden="true"></span>
  113.                 <input
  114.                   type="text"
  115.                   name="email"
  116.                   id="login-email"
  117.                   className="form-control"
  118.                   placeholder="Enter username or email"
  119.                   onChange={this.onChange}
  120.                   value={this.state.email}
  121.                   required
  122.                 />
  123.               </div>
  124.               { /* console.log('error email ::: ' + JSON.stringify(errors)) */}
  125.             </div>
  126.             <div className="form-group has-feedback required">
  127.               <label htmlFor="login-password" className="col-sm-5">Password</label>
  128.               <div className="col-sm-7">
  129.                 <span className="form-control-feedback" aria-hidden="true"></span>
  130.                 <div className="login-password-wrapper">
  131.                   <input
  132.                     type="password"
  133.                     name="password"
  134.                     id="login-password"
  135.                     className="form-control"
  136.                     placeholder="*****"
  137.                     required
  138.                     onChange={this.onChange}
  139.                     value={this.state.password}
  140.                   />
  141.                   <a
  142.                     href="#"
  143.                     onClick={e => {
  144.                       e.preventDefault();
  145.                       this.setMode("forgot");
  146.                     }}
  147.                   >
  148.                     Forgot Password
  149.                    </a>
  150.                 </div>
  151.               </div>
  152.             </div>
  153.           </fieldset>
  154.           <div className="form-action">
  155.             <button
  156.               type="submit"
  157.               className="btn btn-lg btn-primary btn-left">Enter <span className="icon-arrow-right2 outlined"></span></button>
  158.           </div>
  159.         </form>
  160.      <a
  161.         href="#"
  162.         onClick={e => {
  163.           e.preventDefault();
  164.           this.setMode("register");
  165.         }}
  166.       >
  167.       Create your account
  168.       </a>
  169.     </div>
  170.   );
  171. }
  172.  
  173. const LoginForm = () => {
  174.  
  175.   const [showModal, setShowModal] = useState(false);
  176.   const [smShow, setSmShow] = useState(false);
  177.   const [email, setEmail] = useState('');
  178.   const [password, setPassword] = useState('');
  179.   const [mode, setMode] = useState('login');
  180.  
  181.   const setMode = (mode) => {
  182.     setMode(mode);
  183.   }
  184.  
  185.   return (
  186.     <div>
  187.       <Modal
  188.         show={showModal}
  189.         onHide={onClose}
  190.         onSubmit={onSubmit}
  191.         bsSize="large"
  192.       >
  193.         <Modal.Header closeButton={true}>
  194.           <h2>{ mode === "login" ? "Login" : mode === "register" ? "Register" : "Forgot Password" }</h2>
  195.         </Modal.Header>
  196.         <Modal.Body>
  197.           {mode === "login" ? (<RenderLogin />) : mode === "register" ? (<RenderRegister />) : (<RenderForgot />)}
  198.         </Modal.Body>
  199.         <Modal.Footer>
  200.           <Button onClick={this.props.onClose}>Close</Button>
  201.         </Modal.Footer>
  202.       </Modal>
  203.     </div>
  204.   );
  205. }
  206.  
  207. export default LoginForm;
RAW Paste Data