FilesExpand file tree

 master

/

authorizationForm.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

61 lines (57 loc) · 1.43 KB

 master

/

authorizationForm.js

Copy path

Top

File metadata and controls

• Code
• Blame

61 lines (57 loc) · 1.43 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

import React from 'react';

import ReactDOM from 'react-dom';

class Contact extends React.Component {

constructor(props) {

super(props);

this.state = {

password: 'swordfish',

authorized: false

};

this.authorize = this.authorize.bind(this);

}

authorize(e) {

const password = e.target.querySelector(

'input[type="password"]').value;

const auth = password == this.state.password;

this.setState({

authorized: auth

});

}

render() {

const login = ( //implenting JSX for login

<form action='#' onSubmit = {this.authorize}>

<input

type = 'password'

placeholder = 'Password'/>

<input type = 'submit'/>

</form>

);

const contactInfo = ( //implementing JSX for contactInfo

<ul>

<li>

client@example.com

</li>

<li>

555.555.5555

</li>

</ul>

);

let cond1 = 'Contact' //variable for the h1 tag

if(this.state.authorized){ //condition for checking the state

cond1 = 'Contact'

}

else{

cond1 = 'Enter the Password' //if not verified h1 tag should be this

}

return (

<div id="authorization">

<h1>{cond1}</h1>

{this.state.authorized ? contactInfo : login}

</div>

);

}

}

ReactDOM.render(

<Contact />,

document.getElementById('app')

);