Reset fields on click

This commit is contained in:
Ildar Kamalov 2019-02-19 13:05:16 +03:00
parent ff012cf0a3
commit b8c0ed9335
2 changed files with 23 additions and 5 deletions

View File

@ -23,6 +23,19 @@ const validate = (values) => {
return errors; return errors;
}; };
const clearFields = (change) => {
const fields = {
private_key: '',
certificate_chain: '',
port_https: '',
port_dns_over_tls: '',
server_name: '',
force_https: false,
enabled: false,
};
Object.keys(fields).forEach(field => change(field, fields[field]));
};
let Form = (props) => { let Form = (props) => {
const { const {
t, t,
@ -31,7 +44,7 @@ let Form = (props) => {
isEnabled, isEnabled,
certificateChain, certificateChain,
privateKey, privateKey,
reset, change,
invalid, invalid,
submitting, submitting,
processing, processing,
@ -269,7 +282,7 @@ let Form = (props) => {
type="button" type="button"
className="btn btn-secondary btn-standart" className="btn btn-secondary btn-standart"
disabled={submitting || processing} disabled={submitting || processing}
onClick={reset} onClick={() => clearFields(change)}
> >
<Trans>reset_settings</Trans> <Trans>reset_settings</Trans>
</button> </button>
@ -284,7 +297,7 @@ Form.propTypes = {
isEnabled: PropTypes.bool.isRequired, isEnabled: PropTypes.bool.isRequired,
certificateChain: PropTypes.string.isRequired, certificateChain: PropTypes.string.isRequired,
privateKey: PropTypes.string.isRequired, privateKey: PropTypes.string.isRequired,
reset: PropTypes.func.isRequired, change: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired, submitting: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired, invalid: PropTypes.bool.isRequired,
initialValues: PropTypes.object.isRequired, initialValues: PropTypes.object.isRequired,

View File

@ -73,14 +73,19 @@
opacity: 0; opacity: 0;
} }
.checkbox__input:checked+.checkbox__label:before { .checkbox__input:checked + .checkbox__label:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4zIDkuMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik0xMS44IDAuNUw1LjMgOC41IDAuNSA0LjIiLz48L3N2Zz4=);
} }
.checkbox__input:focus+.checkbox__label:before { .checkbox__input:focus + .checkbox__label:before {
box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32); box-shadow: 0 0 1px 1px rgba(74, 74, 74, 0.32);
} }
.checkbox__input:disabled + .checkbox__label {
opacity: 0.7;
cursor: default;
}
.checkbox__label-text { .checkbox__label-text {
max-width: 515px; max-width: 515px;
line-height: 1.5; line-height: 1.5;