Astrix0x1

Untitled

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