Skip to content

Commit b356f34

Browse files
archies-coderarchies-coder
committed
Add Form refactoring
1 parent 4fe2bb0 commit b356f34

File tree

11 files changed

+426
-311
lines changed

11 files changed

+426
-311
lines changed

‎app/Routes/login.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,19 @@ router.post('/api/login',async (req, res)=>{
3131
router.post('/api/logout',(req, res)=>{
3232
req.session.destroy(err=>{
3333
if(err){
34-
console.log('Couldnt destroy');
34+
console.log('Couldnt destroy');
3535
}
3636
res.clearCookie('SESS_SID')
3737
res.send('logged out')
3838
})
3939
})
4040

41+
router.get('/auth', (req, res)=>{
42+
if (req.session.userId) {
43+
res.status(200).send('Authenticated')
44+
}else{
45+
res.status(401).send('Not Authenticated')
46+
}
47+
})
48+
4149
module.exports = router;

‎app/config/keys.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const dbURI = 'mongodb://archisbhoir:Archi%40123321@ds351807.mlab.com:51807/nitmoi';
1+
const dbURI = 'mongodb://localhost:27017/nitmoi';
22
const SECRET = 'fdshgchsbfojsd153456ds4fndsjbvjkdsda4sfdfgf564sd56v4f';
33
module.exports = {dbURI, SECRET}
44

‎client/src/components/add-student/AddStudent.js‎

Lines changed: 115 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,31 @@ export default class AddStudent extends Component {
2828
modalIsOpen: false,
2929
date: new Date(),
3030
addedStudent: {},
31-
loading: false
31+
loading: false,
32+
loggedIn: false
3233
}
3334
}
3435

36+
componentDidMount=()=>{
37+
this.setState({loading: true})
38+
fetch('/auth', {
39+
method: 'GET',
40+
mode: 'cors',
41+
headers: {
42+
'content-type': 'application/json'
43+
}
44+
}).then(res => {
45+
if (res.status === 200) {
46+
this.setState({loggedIn: true, loading:false})
47+
} else {
48+
this.setState({ loggedIn: false, loading:false})
49+
}
50+
}).catch(err => {
51+
this.setState({loggedIn: false,loading:false})
52+
throw new Error(err)
53+
})
54+
}
55+
3556
onChange = date => {
3657
this.setState({ date })
3758
this.closeModal()
@@ -45,6 +66,15 @@ export default class AddStudent extends Component {
4566
this.setState({ modalIsOpen: false });
4667
}
4768

69+
redirectHome = (e) => {
70+
e.preventDefault();
71+
this.props.history.push('/')
72+
}
73+
redirectLogin = (e) => {
74+
e.preventDefault();
75+
this.props.history.push('/login')
76+
}
77+
4878
handleAddForm = (e) => {
4979
e.preventDefault();
5080
this.setState({ loading: true })
@@ -85,9 +115,9 @@ export default class AddStudent extends Component {
85115
if (res.status === 401) {
86116
this.setState({ loading: false })
87117
this.props.history.push('/login')
118+
} else {
119+
this.setState({ loading: false })
88120
}
89-
this.setState({ loading: false })
90-
throw new Error(res.status)
91121
}
92122
this.setState({ loading: false })
93123
return res.json();
@@ -98,88 +128,94 @@ export default class AddStudent extends Component {
98128
})
99129
.catch(err => {
100130
this.setState({ loading: false })
101-
throw new Error(err)
102131
})
103132
}
104133

105134
render() {
106-
return (this.state.loading) ? <MyLoader loading={this.state.loading} /> :
107-
<AuthContext.Consumer>
108-
{context => (
109-
<div className="d-lg-flex justify-content-center p-3">
110-
<h3>Add New Student</h3>
111-
<form className="py-3" onSubmit={this.handleAddForm}>
112-
<div className="row py-3">
113-
<div className="col">
114-
<input type="text" ref={this.firstNameEl} className="form-control" placeholder="First name" required />
115-
</div>
116-
<div className="col">
117-
<input type="text" ref={this.middleNameEl} className="form-control" placeholder="Middle name" />
135+
return (this.state.loading) ? <MyLoader loading={this.state.loading} /> :
136+
this.state.loggedIn ? <AuthContext.Consumer>
137+
{context => (
138+
<div className="container text-align-center p-3">
139+
<div className="container w-75 text-align-center">
140+
<div className="container" style={{textAlign:'center',fontSize:'25px'}}>Add New Student</div>
141+
<form className="py-3" onSubmit={this.handleAddForm}>
142+
<div className="row py-3">
143+
<div className="col">
144+
<input type="text" ref={this.firstNameEl} className="form-control form-control-sm" placeholder="First name" required />
145+
</div>
146+
<div className="col">
147+
<input type="text" ref={this.middleNameEl} className="form-control form-control-sm" placeholder="Middle name" />
148+
</div>
149+
<div className="col">
150+
<input type="text" ref={this.lastNameEl} className="form-control form-control-sm" placeholder="Last name" required />
151+
</div>
118152
</div>
119-
<div className="col">
120-
<input type="text" ref={this.lastNameEl} className="form-control" placeholder="Last name" required />
153+
<div className="form-group">
154+
<input type="text" ref={this.addressEl} className="form-control form-control-sm" id="InputAddress" placeholder="Address" required />
121155
</div>
122-
</div>
123-
<div className="form-group">
124-
<label htmlFor="InputAddress">Address</label>
125-
<input type="text" ref={this.addressEl} className="form-control" id="InputAddress" placeholder="Address" required />
126-
</div>
127-
<div className="row">
128-
<div className="form-group col">
129-
<label htmlFor="Inputstandard">Standard</label>
130-
<select className="form-control form-control-sm" id="Inputstandard" ref={this.standardEl}>
131-
<option>5</option>
132-
<option>6</option>
133-
<option>7</option>
134-
<option>8</option>
135-
<option>9</option>
136-
<option>10</option>
137-
</select>
156+
<hr />
157+
<div className="row">
158+
<div className="form-group col">
159+
<label htmlFor="Inputstandard">Standard</label>
160+
<select className="form-control form-control-sm" id="Inputstandard" ref={this.standardEl}>
161+
<option>5</option>
162+
<option>6</option>
163+
<option>7</option>
164+
<option>8</option>
165+
<option>9</option>
166+
<option>10</option>
167+
</select>
168+
</div>
169+
<div className="form-group col">
170+
<label htmlFor="InputBoard">Board</label>
171+
<select className="form-control form-control-sm" id="InputBoard" ref={this.boardEl}>
172+
<option>MH</option>
173+
<option>MH Semi-Eng</option>
174+
<option>ICSC</option>
175+
<option>CBSE</option>
176+
</select>
177+
</div>
138178
</div>
139-
<div className="form-group col">
140-
<label htmlFor="InputBoard">Board</label>
141-
<select className="form-control form-control-sm" id="InputBoard" ref={this.boardEl}>
142-
<option>MH</option>
143-
<option>ICSC</option>
144-
<option>CBSE</option>
145-
</select>
179+
<div className="form-group">
180+
<label htmlFor="InputDate">Date Of Joining </label>
181+
<i className="far fa-calendar-alt ml-2 mr-4 mb-2 btn-lg" id="InputDate" onClick={this.openModal} />
182+
<span>Selected Date:- {this.state.date.toLocaleString('en-IN').split(',')[0]}</span>
146183
</div>
147-
</div>
148-
<div className="form-group">
149-
<label htmlFor="InputDate">Date Of Joining </label>
150-
<i className="far fa-calendar-alt ml-2 mr-4 mb-2 btn-lg" id="InputDate" onClick={this.openModal} />
151-
<span>Selected Date:- {this.state.date.toLocaleString('en-IN').split(',')[0]}</span>
152-
</div>
153-
<div>
154-
<h5>Last Year Marks</h5>
155-
</div>
156-
<div className="form-group row">
157-
<div className="col-md-4">
158-
<label htmlFor="InputPhysics">Physics</label>
159-
<input type="number" className="form-control" ref={this.physicsEl} id="InputPhysics" placeholder="Physics" required />
184+
<hr />
185+
<div>
186+
<h5>Last Year Marks / Grades</h5>
160187
</div>
161-
<div className="col-md-4"><label htmlFor="InputEnglish">English</label>
162-
<input type="number" className="form-control" ref={this.englishEl} id="InputEnglish" placeholder="English" required />
188+
<div className="form-group row">
189+
<div className="col-md-4">
190+
<input type="text" className="form-control form-control-sm" ref={this.physicsEl} id="InputPhysics" placeholder="Physics" required />
191+
</div>
192+
<div className="col-md-4">
193+
<input type="text" className="form-control form-control-sm" ref={this.englishEl} id="InputEnglish" placeholder="English" required />
194+
</div>
195+
<div className="col-md-4">
196+
<input type="text" className="form-control form-control-sm" ref={this.mathsEl} id="InputMaths" placeholder="Maths" required />
197+
</div>
163198
</div>
164-
<div className="col-md-4"><label htmlFor="InputMaths">Maths</label>
165-
<input type="number" className="form-control" ref={this.mathsEl} id="InputMaths" placeholder="Maths" required />
199+
<hr/>
200+
<div className="row">
201+
<div className="form-group col">
202+
<label htmlFor="InputSex">Gender</label>
203+
<select className="form-control form-control-sm" id="InputSex" ref={this.sexEl}>
204+
<option>Male</option>
205+
<option>Female</option>
206+
</select>
207+
</div>
208+
<div className="form-group col">
209+
<label htmlFor="InputFees">Total Fees</label>
210+
<input type="number" className="form-control form-control-sm" ref={this.feesEl} id="InputFees" placeholder="Total Fees" />
211+
</div>
166212
</div>
167-
</div>
168-
<div className="row">
169-
<div className="form-group col">
170-
<label htmlFor="InputSex">Gender</label>
171-
<select className="form-control form-control-sm" id="InputSex" ref={this.sexEl}>
172-
<option>Male</option>
173-
<option>Female</option>
174-
</select>
175-
</div>
176-
<div className="form-group col">
177-
<label htmlFor="InputFees">Total Fees</label>
178-
<input type="text" className="form-control" ref={this.feesEl} id="InputFees" placeholder="Amout Of Fees Paid" />
179-
</div>
180-
</div>
181-
<button type="submit" className="btn btn-primary">Submit</button>
182-
</form>
213+
<hr/>
214+
<button type="button" onClick={this.redirectHome} className="btn btn-light float-right ml-3">Cancel</button>
215+
<button type="submit" className="btn btn-primary float-right">Submit</button>
216+
</form>
217+
</div>
218+
183219
<Modal
184220
isOpen={this.state.modalIsOpen}
185221
onRequestClose={this.closeModal}
@@ -192,9 +228,11 @@ export default class AddStudent extends Component {
192228
value={this.state.date}
193229
/>
194230
</Modal>
195-
196231
</div>
197232
)}
198-
</AuthContext.Consumer>
199-
}
233+
</AuthContext.Consumer>: <div className='container p-5'>
234+
<h3>OOPS !! <br/> Not Logged In</h3>
235+
<a href="/login" onClick={this.redirectLogin}>Login</a>
236+
</div>
237+
}
200238
}

0 commit comments

Comments
 (0)