Skip to content

Commit b0207ed

Browse files
mdamyanovamdamyanova
committed
Register users - done; add fancy Error page :))
1 parent f68be43 commit b0207ed

File tree

13 files changed

+1161
-1140
lines changed

13 files changed

+1161
-1140
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,28 @@
3131

3232
<ItemGroup>
3333
<None Remove="ClientApp\components\About.tsx" />
34-
<None Remove="ClientApp\components\users\Test.tsx" />
34+
<None Remove="ClientApp\components\Error.tsx" />
3535
<None Remove="ClientApp\empty.tsx" />
3636
<None Remove="ClientApp\utils\request.ts" />
3737
</ItemGroup>
3838

3939
<ItemGroup>
40-
<Folder Include="ClientApp\assets\" />
40+
<None Include="wwwroot\baby-cow.jpg" />
4141
</ItemGroup>
4242

4343
<ItemGroup>
4444
<TypeScriptCompile Include="ClientApp\components\About.tsx" />
45+
<TypeScriptCompile Include="ClientApp\components\Error.tsx" />
4546
<TypeScriptCompile Include="ClientApp\components\users\Login.tsx" />
4647
<TypeScriptCompile Include="ClientApp\components\users\Register.tsx" />
47-
<TypeScriptCompile Include="ClientApp\components\users\Test.tsx" />
4848
<TypeScriptCompile Include="ClientApp\empty.tsx" />
4949
<TypeScriptCompile Include="ClientApp\utils\request.ts" />
5050
</ItemGroup>
5151

52+
<ItemGroup>
53+
<Folder Include="ClientApp\assets\images\" />
54+
</ItemGroup>
55+
5256
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
5357
<!-- Ensure Node.js is installed -->
5458
<Exec Command="node --version" ContinueOnError="true">

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

Lines changed: 81 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -2,158 +2,123 @@
22
import { Link, Redirect, RouteComponentProps } from 'react-router-dom';
33
import { Form, FormGroup, FormControl, ControlLabel, Button, Col, Grid, Row } from 'react-bootstrap';
44
import 'isomorphic-fetch';
5-
import index from "popper.js";
65

76
interface HandleNameChangeInterface {
87
target: HTMLInputElement;
98
}
109

11-
interface RegisterState {
12-
userName: string,
13-
fullName: string,
14-
email: string,
15-
password: string,
16-
confirmPassword: string
17-
};
18-
1910
export class Register extends React.Component<any, any> {
20-
constructor(props: any) {
21-
super(props);
11+
constructor() {
12+
super();
2213
this.state = {
2314
userName: '',
2415
fullName: '',
2516
email: '',
2617
password: '',
27-
confirmPassword: ''
18+
confirmPassword: '',
19+
errors: []
2820
};
2921
this.handleOnChange = this.handleOnChange.bind(this);
22+
this.prepareFormData = this.prepareFormData.bind(this);
23+
this.registerUser = this.registerUser.bind(this);
24+
this.checkStatus = this.checkStatus.bind(this);
25+
}
26+
27+
handleOnChange(event: any): void {
28+
this.setState({ [event.target.id]: event.target.value, errors: [] });
3029
}
3130

32-
public handleOnChange(event: any): void {
33-
this.setState({ [event.target.id]: event.target.value });
34-
}
31+
prepareFormData(data = this.state) {
32+
return {
33+
UserName: data.userName.trim(),
34+
FullName: data.fullName.trim(),
35+
Email: data.email.trim(),
36+
Password: data.password.trim(),
37+
ConfirmPassword: data.confirmPassword.trim()
38+
};
39+
}
3540

36-
private registerUser(event: React.FormEvent<HTMLFormElement>) {
41+
registerUser(event: React.FormEvent<HTMLFormElement>) {
3742
// When pressing Enter, the page shouldn't reload
3843
event.preventDefault();
3944

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-
};
45+
var data = JSON.stringify(this.prepareFormData());
4746

48-
fetch('api/users/register', {
49-
method: 'post',
50-
body: JSON.stringify(data), // post body
47+
fetch('/api/users/register', {
48+
method: 'POST',
5149
headers: {
52-
'Accept': 'application/json'
53-
}
50+
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
51+
'Content-Type': 'application/json; charset=UTF-8'
52+
},
53+
body: data
5454
})
55-
.then(() => this.props.history.push("/login"))
56-
.catch(error => console.error(error));
55+
.then(this.checkStatus);
56+
}
57+
58+
checkStatus(res: any) : void {
59+
if (res.status >= 200 && res.status < 300) {
60+
this.props.history.push('/login');
61+
} else {
62+
let error = new Error(res.statusTest);
63+
console.log(error);
64+
this.props.history.push('/error');
65+
}
5766
}
5867

59-
public render() {
68+
render() {
6069
return (
6170
<Grid>
6271
<Row className="show-grid">
6372
<Col xs={12} md={6}>
6473
<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>
74+
<Form horizontal>
75+
<FormGroup>
76+
<Col componentClass={ControlLabel} sm={2}>Username</Col>
77+
<Col sm={5}>
78+
<FormControl type="text" placeholder="Username" id="userName" onChange={this.handleOnChange} />
79+
</Col>
80+
</FormGroup>
81+
<FormGroup>
82+
<Col componentClass={ControlLabel} sm={2}>Full Name</Col>
83+
<Col sm={5}>
84+
<FormControl type="text" placeholder="Full Name" id="fullName" onChange={this.handleOnChange} />
85+
</Col>
86+
</FormGroup>
87+
<FormGroup>
88+
<Col componentClass={ControlLabel} sm={2}>Email</Col>
89+
<Col sm={5}>
90+
<FormControl type="email" placeholder="Email" id="email" onChange={this.handleOnChange} />
91+
</Col>
92+
</FormGroup>
93+
<FormGroup>
94+
<Col componentClass={ControlLabel} sm={2}>Password</Col>
95+
<Col sm={5}>
96+
<FormControl type="password" placeholder="Password" id="password" onChange={this.handleOnChange} />
97+
</Col>
98+
</FormGroup>
99+
<FormGroup>
100+
<Col componentClass={ControlLabel} sm={2}>Confirm Password</Col>
101+
<Col sm={5}>
102+
<FormControl type="password" pattern={this.state.password} placeholder="Confirm Password" id="confirmPassword" onChange={this.handleOnChange} />
103+
</Col>
104+
</FormGroup>
105+
<FormGroup>
106+
<Col smOffset={2} sm={10}>
107+
<Button type="submit">Register</Button>
108+
</Col>
109+
</FormGroup>
101110
</Form>
102111
</form>
103112
</Col>
104113
<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>
114+
<FormGroup>
115+
<ControlLabel>Hello, stranger! Are you ok with this info:</ControlLabel>
116+
<FormControl.Static>Username: {this.state.userName}</FormControl.Static>
117+
<FormControl.Static> Full Name: {this.state.fullName}</FormControl.Static>
118+
<FormControl.Static>Email: {this.state.email}</FormControl.Static>
110119
</FormGroup>
111120
</Col>
112121
</Row>
113122
</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-
// );
158123
}
159124
}

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

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

‎ASPNETCoreReactJS-Example/ASPNETCoreReactJS-Example/ClientApp/css/main.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import 'components/nav-menu.css';
2-
@import 'components/register.css';
2+
@import 'components/register.css';
3+
@import 'error.css';

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { Home } from './components/Home';
55
import { About } from './components/About';
66
import { Register } from './components/users/Register';
77
import { Users } from './components/users/Users';
8+
import { Error } from './components/Error';
89

910
export const routes = <Layout>
1011
<Route exact path='/' component={Home} />
1112
<Route path='/users' component={Users} />
1213
<Route path='/register' component={Register} />
14+
<Route path='/error' component={Error} />
1315
</Layout>;

0 commit comments

Comments
 (0)