Advertisement
MnassriSami

React.JS - Authorization Form

Oct 28th, 2018
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. class Contact extends React.Component {
  5.   constructor(props) {
  6.     super(props);
  7.     this.state = {
  8.       password: 'swordfish',
  9.       authorized: false
  10.     };
  11.     this.authorize = this.authorize.bind(this);
  12.   }
  13.  
  14.   authorize(e) {
  15.     const password = e.target.querySelector(
  16.       'input[type="password"]').value;
  17.     const auth = password == this.state.password;
  18.     this.setState({
  19.       authorized: auth
  20.     });
  21.   }
  22.  
  23.   render() {
  24.     const login = (
  25.       <form action='#' onSubmit={this.authorize}>
  26.         <input type='password' placeholder='Password'/>
  27.         <input type='submit'/>
  28.       </form>
  29.     );
  30.     const contactInfo = (
  31.             <ul>
  32.           <li>
  33.             client@example.com
  34.           </li>
  35.           <li>
  36.             555.555.5555
  37.           </li>
  38.       </ul>
  39.         );
  40.     return (
  41.       <div id="authorization">
  42.         <h1>{this.state.authorized ? 'Contact':'Enter the Password'}</h1>
  43.         {this.state.authorized ? contactInfo : login}
  44.       </div>
  45.     );
  46.   }
  47. }
  48.  
  49. ReactDOM.render(
  50.   <Contact />,
  51.   document.getElementById('app')
  52. );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement