1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-15 13:36:35 +02:00

Compare commits

...

2 Commits

Author SHA1 Message Date
40309b4b4d Update Snapshots 2021-04-15 12:26:16 +02:00
8c929baeb5 Display input's error feedback only after focus 2021-04-15 12:20:58 +02:00
2 changed files with 14 additions and 14 deletions

View File

@ -1,11 +1,11 @@
/*
* Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
* Copyright (C) 2019-2021 CZ.NIC z.s.p.o. (http://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import React, { useState } from "react";
import { useUID } from "react-uid";
import PropTypes from "prop-types";
@ -36,8 +36,10 @@ export function Input({
...props
}) {
const uid = useUID();
const [initialErrorFeedbackState, setErrorFeedbackState] = useState(false);
const errorFeedbackIsVisible = !!(initialErrorFeedbackState && error);
const inputClassName = `form-control ${className || ""} ${
error ? "is-invalid" : ""
errorFeedbackIsVisible ? "is-invalid" : ""
}`.trim();
return (
<div className="form-group">
@ -49,14 +51,17 @@ export function Input({
className={inputClassName}
type={type}
id={uid}
onFocus={() => setErrorFeedbackState(true)}
{...props}
/>
{children}
</div>
{error ? <div className="invalid-feedback">{error}</div> : null}
{helpText ? (
{errorFeedbackIsVisible && (
<div className="invalid-feedback">{error}</div>
)}
{helpText && (
<small className="form-text text-muted">{helpText}</small>
) : null}
)}
</div>
);
}

View File

@ -340,7 +340,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
- First value
+ Second value
@@ -479,10 +479,94 @@
@@ -479,10 +479,89 @@
Parameters of the guest network can be set in the Guest network tab.
</small>
@ -398,7 +398,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ >
+ <input
+ autocomplete=\\"new-password\\"
+ class=\\"form-control is-invalid\\"
+ class=\\"form-control\\"
+ id=\\"21\\"
+ required=\\"\\"
+ type=\\"password\\"
@ -417,11 +417,6 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
+ </button>
+ </div>
+ </div>
+ <div
+ class=\\"invalid-feedback\\"
+ >
+ Password must contain at least 8 symbols
+ </div>
+ <small
+ class=\\"form-text text-muted\\"
+ >
@ -435,7 +430,7 @@ exports[`<WiFiSettings/> Snapshot guest network. 1`] = `
class=\\"form-group switch\\"
>
<div
@@ -506,10 +590,11 @@
@@ -506,10 +585,11 @@
<div
class=\\"text-right\\"
>