empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 17:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Input field and form field error state (#1132)

Browse Source 
Fix other small consistencies: password spacing, dropdown error, error messages, pack form order
This commit is contained in:
RachelElysia 2021-06-18 14:56:11 -04:00 committed by GitHub
parent 3ed6573ff3
commit 8ee66f3309
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
View File

@ -138,6 +138,13 @@ export class ConfigurePackQueryForm extends Component {
<form className={baseClass} onSubmit={handleSubmit}>
<h2 className={`${baseClass}__title`}>Configuration</h2>
<div className={`${baseClass}__fields`}>
<Dropdown
{...fields.logging_type}
options={loggingTypeOptions}
placeholder="- - -"
label="Logging"
wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
/>
<InputField
{...fields.interval}
inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--frequency`}
@ -162,13 +169,6 @@ export class ConfigurePackQueryForm extends Component {
label="Minimum osquery version"
wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
/>
<Dropdown
{...fields.logging_type}
options={loggingTypeOptions}
placeholder="- - -"
label="Logging"
wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
/>
<InputField
{...fields.shard}
inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--shard`}

4
frontend/components/forms/ConfigurePackQueryForm/validate.js
View File

@ -10,11 +10,11 @@ const validate = (formData) => {
}
if (!formData.interval) {
errors.interval = "Interval must be present";
errors.interval = "Frequency (seconds) must be present";
}
if (formData.interval && !validateNumericality(formData.interval)) {
errors.interval = "Interval must be a number";
errors.interval = "Frequency must be a number";
}
if (!formData.logging_type) {

8
frontend/components/forms/FormField/_styles.scss
View File

@ -9,13 +9,17 @@
margin-bottom: $pad-xsmall;
&--error {
color: $ui-error;
font-weight: $bold;
}
}
&__hint {
font-size: $x-small;
font-style: italic;
font-weight: $regular;
color: $core-fleet-blue;
line-height: 20px;
display: inline-block;
margin-top: $pad-small;
code {
color: $core-vibrant-blue;

8
frontend/components/forms/fields/Dropdown/_styles.scss
View File

@ -7,7 +7,7 @@
margin-bottom: $pad-xsmall;
&--error {
color: $ui-error;
font-weight: $bold;
}
}
@ -15,8 +15,10 @@
&--error {
&.Select {
.Select-control {
border-color: $ui-error;
background-color: $ui-error;
color: $core-vibrant-red;
border: 1px solid $core-vibrant-red;
box-sizing: border-box;
border-radius: 4px;
}
.Select-arrow {

10
frontend/components/forms/fields/InputField/_styles.scss
View File

@ -25,10 +25,10 @@
}
&--error {
transition: background 150ms ease-in-out, color 150ms ease-in-out;
border-color: $ui-error;
background-color: $ui-error;
color: $core-white;
color: $core-vibrant-red;
border: 1px solid $core-vibrant-red;
box-sizing: border-box;
border-radius: 4px;
&:focus {
border-bottom-color: $ui-error;
@ -55,7 +55,7 @@
margin-bottom: $pad-xsmall;
&--error {
color: $ui-error;
font-weight: $bold;
}
}

14
frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
View File

@ -15,7 +15,9 @@
}
&--error {
color: $ui-error;
border: 1px solid $core-vibrant-red;
box-sizing: border-box;
border-radius: 4px;
}
}
@ -41,7 +43,14 @@
}
&--error {
border-bottom-color: $ui-error;
color: $core-vibrant-red;
border: 1px solid $core-vibrant-red;
box-sizing: border-box;
border-radius: 4px;
}
&--password {
letter-spacing: 4px;
}
}
@ -53,6 +62,7 @@
&__errors {
font-size: $x-small;
font-weight: $bold;
}
&__hint {