bc-stories/src/components/RetrieveStory/RetrieveStoryForm.js
2019-07-13 16:03:04 -04:00

88 lines
2.2 KiB
JavaScript

import React from 'react'
//----------------------------------------------//
const initialState = {
password: '',
hash: '',
}
class RetrieveStoryForm extends React.Component {
constructor() {
super()
this.state = initialState
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
handleSubmit(e) {
e.preventDefault()
try {
const encryptedStory = this.props.fetchStory(
this.state.password,
this.state.hash
)
this.props.navigate('read')
} catch (e) {
console.log(e)
}
}
render() {
return (
<div className="mt-3 mb-5">
<h3> Retrieve A Story</h3>
<p>Enter your secret key and your hash below.</p>
<form onSubmit={this.handleSubmit}>
<div className="form-group row">
<label htmlFor="password" className="col-sm-3 col-form-label">
Password
</label>
<div className="col-sm-7">
<input
type="text"
className="form-control"
id="password"
name="password"
placeholder="Password"
onChange={this.handleChange}
value={this.state.password}
/>
</div>
</div>
<div className="form-group row">
<label htmlFor="hash" className="col-sm-3 col-form-label">
Hash:
</label>
<div className="col-sm-7">
<input
type="text"
className="form-control"
id="hash"
name="hash"
placeholder="Hash"
onChange={this.handleChange}
value={this.state.hash}
/>
</div>
</div>
<div className="form-group row">
<div className="col-sm-3">
<button className="btn btn-dark " type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
)
}
}
//----------------------------------------------//
export default RetrieveStoryForm