Merge branch '22-add-forgot-password-page' into 'dev'
Resolve "Add forgot-password Page" Closes #22 See merge request sa4-2020/the-sanmarinoes/frontend!13
This commit is contained in:
commit
dab9719311
4 changed files with 162 additions and 26 deletions
|
@ -4,34 +4,11 @@ import Home from "./views/Home";
|
|||
import Dashboard from "./views/DashboardTest";
|
||||
import Signup from "./views/Signup";
|
||||
import Login from "./views/Login";
|
||||
import ForgotPass from "./views/Forgot-password";
|
||||
import ChangePass from "./views/Forgot-pass-reset";
|
||||
|
||||
import { call } from './client_server';
|
||||
|
||||
|
||||
/*const ProtectedRoute = ({ component: Comp, loggedIn, logOut, path, ...rest }) => {
|
||||
return (
|
||||
<Route
|
||||
path={path}
|
||||
{...rest}
|
||||
render={(props) => {
|
||||
return loggedIn ? (
|
||||
<Comp logOut={logOut} {...props} />
|
||||
) : (
|
||||
<Redirect
|
||||
to={{
|
||||
pathname: "/login",
|
||||
state: {
|
||||
prevLocation: path,
|
||||
error: "You need to login first!",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};*/
|
||||
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -101,7 +78,12 @@ class App extends React.Component {
|
|||
<Route path="/dashboard" >
|
||||
{this.state.loggedIn ? <Dashboard logout={this.logout} /> : <Redirect to="/login" />}
|
||||
</Route>
|
||||
|
||||
<Route path="/forgot-password" >
|
||||
<ForgotPass />
|
||||
</Route>
|
||||
<Route path="/forgot-pass-change" >
|
||||
<ChangePass />
|
||||
</Route>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
|
85
smart-hut/src/views/Forgot-pass-reset.js
Normal file
85
smart-hut/src/views/Forgot-pass-reset.js
Normal file
|
@ -0,0 +1,85 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
|
||||
//import { call } from '../client_server';
|
||||
|
||||
|
||||
export default class ChangePass extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
password: "",
|
||||
error: {
|
||||
state: false,
|
||||
message: "",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({[nam]: val});
|
||||
};
|
||||
|
||||
checkpassword = (e) => {
|
||||
if (e.target.value !== this.state.password) {
|
||||
this.setState({error: {
|
||||
state : true,
|
||||
message : "Passwords do not match.",
|
||||
}});
|
||||
}
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
circular
|
||||
style={{margin: "2em"}}
|
||||
href="/"
|
||||
>
|
||||
<Icon name='arrow alternate circle left'/>
|
||||
Go Home </Button>
|
||||
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
|
||||
<Grid.Column style={{maxWidth: 450}}>
|
||||
<Header as='h2' color='blue' textAlign='center'>
|
||||
<Image src='img/logo.png'/> Reset Password
|
||||
</Header>
|
||||
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
|
||||
<Message
|
||||
error
|
||||
header='Change Password Error'
|
||||
content= {this.state.error.message}
|
||||
/>
|
||||
<Form.Input
|
||||
icon='address card outline'
|
||||
iconPosition='left'
|
||||
placeholder='Reset your password'
|
||||
name="password"
|
||||
type='password'
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
icon='address card outline'
|
||||
iconPosition='left'
|
||||
placeholder='Confirm Password'
|
||||
name="confirm-password"
|
||||
type='password'
|
||||
onChange={this.checkpassword}
|
||||
required
|
||||
/>
|
||||
<Button color='blue' fluid size='large' onClick={this.handleChangePassword}>
|
||||
Confirm password
|
||||
</Button>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
67
smart-hut/src/views/Forgot-password.js
Normal file
67
smart-hut/src/views/Forgot-password.js
Normal file
|
@ -0,0 +1,67 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
|
||||
//import { call } from '../client_server';
|
||||
|
||||
|
||||
export default class ForgotPass extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
user: "",
|
||||
error: {
|
||||
state: false,
|
||||
message: "",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({[nam]: val});
|
||||
};
|
||||
|
||||
handleSendEmail = (e) => {
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button
|
||||
circular
|
||||
style={{margin: "2em"}}
|
||||
href="/"
|
||||
>
|
||||
<Icon name='arrow alternate circle left'/>
|
||||
Go Home </Button>
|
||||
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
|
||||
<Grid.Column style={{maxWidth: 450}}>
|
||||
<Header as='h2' color='blue' textAlign='center'>
|
||||
<Image src='img/logo.png'/> Reset Password
|
||||
</Header>
|
||||
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
|
||||
<Message
|
||||
error
|
||||
header='Send E-mail Error'
|
||||
content= {this.state.error.message}
|
||||
/>
|
||||
<Form.Input
|
||||
icon='address card outline'
|
||||
iconPosition='left'
|
||||
placeholder='Username or E-mail'
|
||||
name="user"
|
||||
type='text'
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button color='blue' fluid size='large' onClick={this.handleSendEmail}>
|
||||
Send E-mail
|
||||
</Button>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -31,6 +31,8 @@ export default class Signup extends Component{
|
|||
if (res.status === "Errore") {
|
||||
this.setState({error: { state: true,
|
||||
message: "Errore"}});
|
||||
} else if (res.status === 200 && res.data){
|
||||
this.props.history.push("/");
|
||||
}
|
||||
}).catch(err => {
|
||||
//console.log(err);
|
||||
|
|
Loading…
Reference in a new issue