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:
Matteo Omenetti 2020-03-05 11:12:03 +01:00
commit dab9719311
4 changed files with 162 additions and 26 deletions

View file

@ -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>
);
}

View 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>
)
}
}

View 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>
)
}
}

View file

@ -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);