85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
|
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>
|
||
|
)
|
||
|
}
|
||
|
}
|