Skip to content

Commit 890b98b

Browse files
mdamyanovamdamyanova
committed
omg, working Login! 😭❤️
1 parent b0207ed commit 890b98b

File tree

8 files changed

+1336
-1218
lines changed

8 files changed

+1336
-1218
lines changed

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example.csproj

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
<ItemGroup>
3333
<None Remove="ClientApp\components\About.tsx" />
3434
<None Remove="ClientApp\components\Error.tsx" />
35+
<None Remove="ClientApp\components\Example.tsx" />
3536
<None Remove="ClientApp\empty.tsx" />
3637
<None Remove="ClientApp\utils\request.ts" />
3738
</ItemGroup>
@@ -43,6 +44,7 @@
4344
<ItemGroup>
4445
<TypeScriptCompile Include="ClientApp\components\About.tsx" />
4546
<TypeScriptCompile Include="ClientApp\components\Error.tsx" />
47+
<TypeScriptCompile Include="ClientApp\components\Example.tsx" />
4648
<TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
4749
<TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
4850
<TypeScriptCompile Include="ClientApp\empty.tsx" />

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/NavMenu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export class NavMenu extends React.Component<{}, {}> {
1717
<NavItem eventKey={2} href="/about">About</NavItem>
1818
</Nav>
1919
<Nav pullRight>
20-
<NavItem eventKey={1} href="#">example</NavItem>
20+
<NavItem eventKey={1} href="/login">Login</NavItem>
2121
{/*todo - check users*/}
2222
<NavItem eventKey={2} href="/register">Register</NavItem>
2323
</Nav>

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/components/users/Login.tsx

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,91 @@
1-
//import * as React from 'react';
2-
//import { Redirect } from 'react-router';
3-
//import { setAccessToken, setUserId, setUser, isLoggedIn } from '../utils';
1+
import * as React from "react";
2+
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
3+
import 'isomorphic-fetch';
44

5-
//// todo fix this
6-
//class Login extends React.Component<any, any> {
7-
// constructor(props) {
8-
// super(props);
5+
export class Login extends React.Component<any, any> {
6+
constructor() {
7+
super();
8+
this.state = {
9+
userName: '',
10+
password: ''
11+
};
12+
this.handleOnChange = this.handleOnChange.bind(this);
13+
this.prepareFormData = this.prepareFormData.bind(this);
14+
this.loginUser = this.loginUser.bind(this);
15+
this.checkStatus = this.checkStatus.bind(this);
16+
}
917

10-
// this.login = this.login.bind(this);
11-
// this.onFormValueChange = this.onFormValueChange.bind(this);
18+
handleOnChange(event: any): void {
19+
this.setState({ [event.target.id]: event.target.value, errors: [] });
20+
}
1221

13-
// this.state = {
14-
// email: '',
15-
// password: '',
16-
// loggedIn: isLoggedIn(),
17-
// };
18-
// }
22+
prepareFormData(data = this.state) {
23+
return {
24+
UserName: data.userName.trim(),
25+
Password: data.password.trim()
26+
};
27+
}
1928

20-
// login(e) {
21-
// e.preventDefault();
22-
// const { email, password } = this.state;
29+
loginUser(event: React.FormEvent<HTMLFormElement>) {
30+
// When pressing Enter, the page shouldn't reload
31+
event.preventDefault();
2332

24-
// fetch("/token", {
25-
// method: "POST",
26-
// Headers: {
27-
// "Content-Type": "application/x-www-form-urlencoded"
28-
// },
29-
// body: `grant_type=password&username=${email}&password=${password}`
30-
// })
31-
// .then((response) => {
32-
// if (!response.ok) {
33-
// throw new Error(response.status);
34-
// }
33+
var data = JSON.stringify(this.prepareFormData());
3534

36-
// return response.json();
37-
// })
38-
// .then((response) => {
39-
// setAccessToken(response.access_token);
40-
// setUser(response.FullName);
41-
// setUserId(response.UserId);
42-
// })
43-
// .then(() => this.setState({ loggedIn: true }))
44-
// .catch(error => console.error(error));
45-
// }
35+
fetch('/api/users/login', {
36+
method: 'POST',
37+
headers: {
38+
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
39+
'Content-Type': 'application/json; charset=UTF-8'
40+
},
41+
body: data
42+
})
43+
.then(this.checkStatus);
44+
}
4645

47-
// onFormValueChange({ target }) {
48-
// this.setState({
49-
// [target.id]: target.value
50-
// });
51-
// }
46+
checkStatus(res: any): void {
47+
if (res.status >= 200 && res.status < 300) {
48+
this.props.history.push('/example');
49+
} else {
50+
let error = new Error(res.statusTest);
51+
console.log(error);
52+
this.props.history.push('/error');
53+
}
54+
}
5255

53-
// render() {
54-
// if (this.state.loggedIn) {
55-
// return <Redirect to="/" />;
56-
// }
57-
58-
// return (
59-
// <div className="login-view">
60-
// <h2>Login:</h2>
61-
62-
// <form onSubmit={this.login}>
63-
// <div>
64-
// <label htmlFor="email">Email:</label>
65-
// <input
66-
// type="email"
67-
// id="email"
68-
// onChange={this.onFormValueChange}
69-
// required
70-
// />
71-
// </div>
72-
73-
// <div>
74-
// <label htmlFor="password">Password:</label>
75-
// <input
76-
// type="password"
77-
// id="password"
78-
// onChange={this.onFormValueChange}
79-
// min="5"
80-
// required
81-
// />
82-
// </div>
83-
84-
// <button type="submit">Submit</button>
85-
// </form>
86-
// </div>
87-
// );
88-
// }
89-
//}
56+
render() {
57+
return (
58+
<Grid>
59+
<Row className="show-grid">
60+
<Col xs={12} md={6}>
61+
<form onSubmit={this.loginUser}>
62+
<Form horizontal>
63+
<FormGroup>
64+
<Col componentClass={ControlLabel} sm={2}>Username</Col>
65+
<Col sm={5}>
66+
<FormControl type="text" placeholder="Username" id="userName" onChange={this.handleOnChange} />
67+
</Col>
68+
</FormGroup>
69+
<FormGroup>
70+
<Col componentClass={ControlLabel} sm={2}>Password</Col>
71+
<Col sm={5}>
72+
<FormControl type="password" placeholder="Password" id="password" onChange={this.handleOnChange} />
73+
</Col>
74+
</FormGroup>
75+
<FormGroup>
76+
<Col smOffset={2} sm={10}>
77+
<Button type="submit">Login</Button>
78+
</Col>
79+
</FormGroup>
80+
</Form>
81+
</form>
82+
</Col>
83+
<Col xs={6} md={4}>
84+
<FormGroup>
85+
<FormControl.Static>Hello, {this.state.userName}</FormControl.Static>
86+
</FormGroup>
87+
</Col>
88+
</Row>
89+
</Grid>);
90+
}
91+
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/routes.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import { Layout } from './components/Layout';
44
import { Home } from './components/Home';
55
import { About } from './components/About';
66
import { Register } from './components/users/Register';
7+
import { Login } from './components/users/Login';
78
import { Users } from './components/users/Users';
89
import { Error } from './components/Error';
10+
import { Example } from './components/Example';
911

1012
export const routes = <Layout>
1113
<Route exact path='/' component={Home} />
1214
<Route path='/users' component={Users} />
1315
<Route path='/register' component={Register} />
16+
<Route path='/login' component={Login} />
1417
<Route path='/error' component={Error} />
18+
<Route path='/example' component={Example} />
1519
</Layout>;

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Controllers/HomeController.cs

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
using System;
2-
using System.Collections.Generic;
3-
using System.Diagnostics;
4-
using System.Linq;
5-
using System.Threading.Tasks;
6-
using Microsoft.AspNetCore.Mvc;
7-
81
namespace ASPNETCoreReactJS_Example.Controllers
92
{
3+
using Microsoft.AspNetCore.Authorization;
4+
using Microsoft.AspNetCore.Mvc;
5+
106
public class HomeController : Controller
117
{
128
public IActionResult Index()
139
{
1410
return View();
1511
}
1612

17-
public IActionResult Error()
13+
[Authorize]
14+
public IActionResult Example()
1815
{
19-
ViewData["RequestId"] = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
20-
return View();
16+
return this.Ok();
2117
}
2218
}
23-
}
19+
}

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/Views/Home/Index.cshtml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
ViewData["Title"] = "Home Page";
33
}
44
<div id="react-app">Loading...</div>
5+
56
@section scripts {
67
<script src="~/dist/main.js" asp-append-version="true"></script>
7-
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
8-
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
98
}

0 commit comments

Comments
 (0)