133 lines
3.5 KiB
JavaScript
133 lines
3.5 KiB
JavaScript
import React, {Component} from 'react';
|
|
import './Password.css';
|
|
import {faEye, faEyeSlash} from '@fortawesome/free-solid-svg-icons';
|
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
|
|
|
export default class extends Component {
|
|
state = {
|
|
button_text: 'clear',
|
|
password: '',
|
|
password2: '',
|
|
show_password: false,
|
|
};
|
|
|
|
componentDidMount() {
|
|
if (!this.props.value || (this.props.value.length === 0)) {
|
|
this.setState({
|
|
...this.state,
|
|
button_text: 'set',
|
|
password: '',
|
|
password2: '',
|
|
show_password: false,
|
|
})
|
|
} else {
|
|
this.setState({
|
|
...this.state,
|
|
button_text: 'clear',
|
|
password: this.props.value,
|
|
password2: '',
|
|
show_password: false,
|
|
})
|
|
}
|
|
}
|
|
|
|
handleActionClick = () => {
|
|
if (!this.props.disabled) {
|
|
switch (this.state.button_text) {
|
|
case 'clear':
|
|
this.setState({
|
|
...this.state,
|
|
button_text: 'set',
|
|
password: '',
|
|
password2: '',
|
|
});
|
|
break;
|
|
|
|
case 'confirm':
|
|
if (this.state.password === this.state.password2) {
|
|
this.props.changed(this.state.password);
|
|
this.setState({
|
|
...this.state,
|
|
button_text: this.state.password && this.state.password.length > 0 ? 'clear' : 'set',
|
|
password2: '',
|
|
});
|
|
} else {
|
|
this.setState({
|
|
...this.state,
|
|
button_text: 'set',
|
|
password: '',
|
|
password2: '',
|
|
}, () => {
|
|
if (this.props.mismatchHandler) {
|
|
this.props.mismatchHandler();
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'set':
|
|
this.setState({
|
|
...this.state,
|
|
button_text: 'confirm',
|
|
password2: '',
|
|
});
|
|
break;
|
|
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
};
|
|
|
|
handlePasswordChanged = e => {
|
|
if (this.state.button_text === 'set') {
|
|
this.setState({
|
|
...this.state,
|
|
password: e.target.value,
|
|
});
|
|
} else if (this.state.button_text === 'confirm') {
|
|
this.setState({
|
|
...this.state,
|
|
password2: e.target.value,
|
|
});
|
|
}
|
|
};
|
|
|
|
handlePasswordKeyUp = e => {
|
|
if ((e.keyCode === 13) && ((this.state.button_text === 'confirm') || (this.state.button_text === 'set'))) {
|
|
this.handleActionClick();
|
|
}
|
|
};
|
|
|
|
handleShowHideClick = () => {
|
|
this.setState({
|
|
...this.state,
|
|
show_password: !this.state.show_password,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div className={'PasswordOwner'}>
|
|
<a href={'#'}
|
|
className={'PasswordLink'}
|
|
onClick={this.handleActionClick}>
|
|
<u>{this.state.button_text}</u>
|
|
</a>
|
|
<input autoFocus={this.props.autoFocus}
|
|
className={'PasswordInput'}
|
|
disabled={this.props.readOnly || (this.state.button_text === 'clear')}
|
|
onChange={this.handlePasswordChanged}
|
|
onKeyUp={this.handlePasswordKeyUp}
|
|
type={this.state.show_password ? 'text' : 'password'}
|
|
value={(this.state.button_text === 'confirm') ? this.state.password2 : this.state.password} />
|
|
<a href={'#'}
|
|
className={'PasswordShowHide'}
|
|
onClick={this.handleShowHideClick}>
|
|
<FontAwesomeIcon icon={this.state.show_password ? faEye : faEyeSlash} />
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
};
|