source: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js@ dbd4834

Last change on this file since dbd4834 was dbd4834, checked in by Marko <Marko@…>, 2 years ago

Homepage, login and register components added

  • Property mode set to 100644
File size: 2.6 KB
Line 
1import React, { Component } from 'react'
2import profileIcon from "../../images/profileicon.png";
3import EmailIcon from '@mui/icons-material/Email';
4import "./LoginFormComponent.css"
5import InputFormComponent from './InputFormComponent';
6import { Link } from 'react-router-dom';
7import axios from 'axios';
8
9
10
11export class LoginFormComponent extends Component {
12
13 constructor(props) {
14 super(props)
15
16 this.state = {
17 email: '',
18 password: '',
19 }
20 }
21
22 changeHandler = (e) =>{
23 this.setState({[e.target.name] : e.target.value})
24 }
25
26 submitHandler = (e) => {
27 e.preventDefault()
28 var qs = require('qs');
29 var dataToSend = qs.stringify({
30 'email': this.state.email,
31 'password': this.state.password
32 });
33
34 var config = {
35 method: 'post',
36 url: '/login',
37 headers: {
38 'Content-Type': 'application/x-www-form-urlencoded'
39 },
40 data : dataToSend
41 };
42
43 axios(config)
44 .then(function (response) {
45 console.log(response.data);
46 })
47 .catch(function (error) {
48 console.log(error);
49 });
50
51 }
52
53 setValue = (e) => {
54 this.setState({
55 [e.target.name]: e.target.value
56 })
57
58 }
59
60
61render() {
62
63 const {email,password} = this.state
64
65 return (
66 <div className="loginform-main-div">
67 <div className="loginform-sub-main-div">
68 <div>
69
70 <div className="loginform-imgs-div">
71 <div className="loginform-image-container">
72 <img src={profileIcon} alt="profile" className="loginform-profile-img"/>
73 </div>
74 </div>
75
76 <form onSubmit={this.submitHandler}>
77 <h1>Најава</h1>
78
79 <div className='loginform-email-input'>
80 <InputFormComponent type='text' placeholder='Е-маил адреса' name='email' required={true}
81 setValue={this.setValue} errorMessage='Полето е задолжително!'/>
82 </div>
83
84 <div className="loginform-password-input">
85 <InputFormComponent type='password' placeholder='Лозинка' name='password'
86 setValue={this.setValue} required={true}
87 errorMessage='Полето е задолжително!'/>
88 </div>
89
90
91 <div className="loginform-button-wrapper">
92 <button className='loginform-button' type="submit">Најави се</button>
93 </div>
94 </form>
95 <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
96
97 </div>
98
99 </div>
100 </div>
101 );
102}
103}
104
105export default LoginFormComponent
Note: See TracBrowser for help on using the repository browser.