Skip to content

Commit f68be43

Browse files
mdamyanovamdamyanova
committed
working on Authenticate Users and edit some small things :)
1 parent ccdaa6e commit f68be43

40 files changed

+3793
-3177
lines changed

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

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
</PropertyGroup>
99

1010
<ItemGroup>
11-
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.6" />
11+
<PackageReference Include="AutoMapper" Version="6.2.2" />
12+
<PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="3.2.0" />
13+
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.7" />
14+
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="2.0.2" />
15+
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer.Design" Version="1.1.5" />
1216
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.3" />
1317
</ItemGroup>
1418

@@ -18,26 +22,31 @@
1822

1923
<ItemGroup>
2024
<!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
25+
<Compile Remove="Areas\**" />
26+
<Content Remove="Areas\**" />
2127
<Content Remove="ClientApp\**" />
28+
<EmbeddedResource Remove="Areas\**" />
29+
<None Remove="Areas\**" />
2230
</ItemGroup>
2331

2432
<ItemGroup>
2533
<None Remove="ClientApp\components\About.tsx" />
26-
<None Remove="ClientApp\components\Users.tsx" />
34+
<None Remove="ClientApp\components\users\Test.tsx" />
2735
<None Remove="ClientApp\empty.tsx" />
36+
<None Remove="ClientApp\utils\request.ts" />
2837
</ItemGroup>
2938

3039
<ItemGroup>
31-
<Folder Include="Areas\Admin\Controllers\" />
32-
<Folder Include="Areas\Admin\Data\" />
33-
<Folder Include="Areas\Admin\Models\" />
34-
<Folder Include="Areas\Admin\Views\" />
40+
<Folder Include="ClientApp\assets\" />
3541
</ItemGroup>
3642

3743
<ItemGroup>
3844
<TypeScriptCompile Include="ClientApp\components\About.tsx" />
39-
<TypeScriptCompile Include="ClientApp\components\Users.tsx" />
45+
<TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
46+
<TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
47+
<TypeScriptCompile Include="ClientApp\components\users\Test.tsx" />
4048
<TypeScriptCompile Include="ClientApp\empty.tsx" />
49+
<TypeScriptCompile Include="ClientApp\utils\request.ts" />
4150
</ItemGroup>
4251

4352
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface LayoutProps {
77

88
export class Layout extends React.Component<LayoutProps, {}> {
99
public render() {
10-
return <div className='row'>
10+
return <div>
1111
<NavMenu />
1212
{this.props.children}
1313
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ export class NavMenu extends React.Component<{}, {}> {
1818
</Nav>
1919
<Nav pullRight>
2020
<NavItem eventKey={1} href="#">example</NavItem>
21-
<NavItem eventKey={2} href="#">example</NavItem>
21+
{/*todo - check users*/}
22+
<NavItem eventKey={2} href="/register">Register</NavItem>
2223
</Nav>
2324
</Navbar.Collapse>
2425
</Navbar>;

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

Lines changed: 0 additions & 11 deletions
This file was deleted.

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
//import * as React from 'react';
2+
//import { Redirect } from 'react-router';
3+
//import { setAccessToken, setUserId, setUser, isLoggedIn } from '../utils';
4+
5+
//// todo fix this
6+
//class Login extends React.Component<any, any> {
7+
// constructor(props) {
8+
// super(props);
9+
10+
// this.login = this.login.bind(this);
11+
// this.onFormValueChange = this.onFormValueChange.bind(this);
12+
13+
// this.state = {
14+
// email: '',
15+
// password: '',
16+
// loggedIn: isLoggedIn(),
17+
// };
18+
// }
19+
20+
// login(e) {
21+
// e.preventDefault();
22+
// const { email, password } = this.state;
23+
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+
// }
35+
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+
// }
46+
47+
// onFormValueChange({ target }) {
48+
// this.setState({
49+
// [target.id]: target.value
50+
// });
51+
// }
52+
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+
//}

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

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import * as React from "react";
2+
import { Link, Redirect, RouteComponentProps } from 'react-router-dom';
3+
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
4+
import 'isomorphic-fetch';
5+
import index from "popper.js";
6+
7+
interface HandleNameChangeInterface {
8+
target: HTMLInputElement;
9+
}
10+
11+
interface RegisterState {
12+
userName: string,
13+
fullName: string,
14+
email: string,
15+
password: string,
16+
confirmPassword: string
17+
};
18+
19+
export class Register extends React.Component<any, any> {
20+
constructor(props: any) {
21+
super(props);
22+
this.state = {
23+
userName: '',
24+
fullName: '',
25+
email: '',
26+
password: '',
27+
confirmPassword: ''
28+
};
29+
this.handleOnChange = this.handleOnChange.bind(this);
30+
}
31+
32+
public handleOnChange(event: any): void {
33+
this.setState({ [event.target.id]: event.target.value });
34+
}
35+
36+
private registerUser(event: React.FormEvent<HTMLFormElement>) {
37+
// When pressing Enter, the page shouldn't reload
38+
event.preventDefault();
39+
40+
var data = {
41+
UserName: this.state.userName,
42+
FullName: this.state.fullName,
43+
Email: this.state.email,
44+
Password: this.state.password,
45+
ConfirmPassword: this.state.confirmPassword
46+
};
47+
48+
fetch('api/users/register', {
49+
method: 'post',
50+
body: JSON.stringify(data), // post body
51+
headers: {
52+
'Accept': 'application/json'
53+
}
54+
})
55+
.then(() => this.props.history.push("/login"))
56+
.catch(error => console.error(error));
57+
}
58+
59+
public render() {
60+
return (
61+
<Grid>
62+
<Row className="show-grid">
63+
<Col xs={12} md={6}>
64+
<form onSubmit={this.registerUser}>
65+
<Form horizontal>
66+
<FormGroup>
67+
<Col componentClass={ControlLabel} sm={2}>Username</Col>
68+
<Col sm={5}>
69+
<FormControl type="text" placeholder="Username" id="userName" onChange={this.handleOnChange} />
70+
</Col>
71+
</FormGroup>
72+
<FormGroup>
73+
<Col componentClass={ControlLabel} sm={2}>Full Name</Col>
74+
<Col sm={5}>
75+
<FormControl type="text" placeholder="Full Name" id="fullName" onChange={this.handleOnChange} />
76+
</Col>
77+
</FormGroup>
78+
<FormGroup>
79+
<Col componentClass={ControlLabel} sm={2}>Email</Col>
80+
<Col sm={5}>
81+
<FormControl type="email" placeholder="Email" id="email" onChange={this.handleOnChange} />
82+
</Col>
83+
</FormGroup>
84+
<FormGroup>
85+
<Col componentClass={ControlLabel} sm={2}>Password</Col>
86+
<Col sm={5}>
87+
<FormControl type="password" placeholder="Password" id="password" onChange={this.handleOnChange} />
88+
</Col>
89+
</FormGroup>
90+
<FormGroup>
91+
<Col componentClass={ControlLabel} sm={2}>Confirm Password</Col>
92+
<Col sm={5}>
93+
<FormControl type="password" pattern={this.state.password} placeholder="Confirm Password" id="confirmPassword" onChange={this.handleOnChange} />
94+
</Col>
95+
</FormGroup>
96+
<FormGroup>
97+
<Col smOffset={2} sm={10}>
98+
<Button type="submit">Register</Button>
99+
</Col>
100+
</FormGroup>
101+
</Form>
102+
</form>
103+
</Col>
104+
<Col xs={6} md={4}>
105+
<FormGroup>
106+
<ControlLabel>Hello, stranger! Are you ok with this info:</ControlLabel>
107+
<FormControl.Static>Username: {this.state.userName}</FormControl.Static>
108+
<FormControl.Static> Full Name: {this.state.fullName}</FormControl.Static>
109+
<FormControl.Static>Email: {this.state.email}</FormControl.Static>
110+
</FormGroup>
111+
</Col>
112+
</Row>
113+
</Grid>);
114+
115+
//
116+
117+
//public render() {
118+
119+
// return (
120+
// <Form horizontal>
121+
// <FormGroup controlId="formHorizontalUserName">
122+
// <Col componentClass={ControlLabel} sm={2}>Username</Col>
123+
// <Col sm={2}>
124+
// <input type="text" placeholder="Username" onChange={this.changeUserName} />
125+
// </Col>
126+
// </FormGroup>
127+
// <FormGroup controlId="formHorizontalFullName">
128+
// <Col componentClass={ControlLabel} sm={2}>Full Name</Col>
129+
// <Col sm={2}>
130+
// <input type="text" placeholder="Full Name" onChange={this.changeFullName} />
131+
// </Col>
132+
// </FormGroup>
133+
// <FormGroup controlId="formHorizontalEmail">
134+
// <Col componentClass={ControlLabel} sm={2}>Email</Col>
135+
// <Col sm={2}>
136+
// <input type="email" placeholder="Email" onChange={this.changeEmail} />
137+
// </Col>
138+
// </FormGroup>
139+
// <FormGroup controlId="formHorizontalPassword">
140+
// <Col componentClass={ControlLabel} sm={2}>Password</Col>
141+
// <Col sm={2}>
142+
// <input type="password" placeholder="Password" onChange={this.changePassword} />
143+
// </Col>
144+
// </FormGroup>
145+
// <FormGroup controlId="formHorizontalPassword">
146+
// <Col componentClass={ControlLabel} sm={2}>Confirm Password</Col>
147+
// <Col sm={2}>
148+
// <input type="password" placeholder="Confirm Password" onChange={this.changeConfirmPassword} />
149+
// </Col>
150+
// </FormGroup>
151+
// <FormGroup>
152+
// <Col smOffset={2} sm={10}>
153+
// <Button type="submit">Register</Button>
154+
// </Col>
155+
// </FormGroup>
156+
// </Form>
157+
// );
158+
}
159+
}

0 commit comments

Comments
 (0)