diff --git a/app/frontend/src/javascript/components/base/fab-input.tsx b/app/frontend/src/javascript/components/base/fab-input.tsx index 3a935983d..214921256 100644 --- a/app/frontend/src/javascript/components/base/fab-input.tsx +++ b/app/frontend/src/javascript/components/base/fab-input.tsx @@ -16,13 +16,14 @@ interface FabInputProps { maxLength?: number, pattern?: string, placeholder?: string, + error?: string, type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week', } /** * This component is a template for an input component that wraps the application style */ -export const FabInput: React.FC = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder }) => { +export const FabInput: React.FC = ({ id, onChange, defaultValue, icon, className, disabled, type, required, debounce, addOn, addOnClassName, readOnly, maxLength, pattern, placeholder, error }) => { const [inputValue, setInputValue] = useState(defaultValue); /** @@ -52,6 +53,13 @@ export const FabInput: React.FC = ({ id, onChange, defaultValue, return !!addOn; } + /** + * Check if the current component was provided an error string to display, on the input + */ + const hasError = (): boolean => { + return !!error; + } + /** * Debounced (ie. temporised) version of the 'on change' callback. */ @@ -74,19 +82,22 @@ export const FabInput: React.FC = ({ id, onChange, defaultValue, return (
- {hasIcon() && {icon}} - - {hasAddOn() && {addOn}} +
+ {hasIcon() && {icon}} + + {hasAddOn() && {addOn}} +
+ {hasError() && {error} }
); } diff --git a/app/frontend/src/javascript/components/payzen-settings.tsx b/app/frontend/src/javascript/components/payzen-settings.tsx index 5141cedd7..7661775f6 100644 --- a/app/frontend/src/javascript/components/payzen-settings.tsx +++ b/app/frontend/src/javascript/components/payzen-settings.tsx @@ -130,7 +130,6 @@ export const PayzenSettings: React.FC = ({ onEditKeys, onCu

- {error &&

{error}

}
@@ -139,7 +138,8 @@ export const PayzenSettings: React.FC = ({ onEditKeys, onCu icon={} onChange={handleCurrencyUpdate} maxLength={3} - pattern="[A-Z]{3}" /> + pattern="[A-Z]{3}" + error={error} />
{t('app.admin.invoices.payment.payzen.save')}
diff --git a/app/frontend/src/stylesheets/modules/fab-input.scss b/app/frontend/src/stylesheets/modules/fab-input.scss index c05be5140..8ef691ee1 100644 --- a/app/frontend/src/stylesheets/modules/fab-input.scss +++ b/app/frontend/src/stylesheets/modules/fab-input.scss @@ -1,7 +1,9 @@ .fab-input { - position: relative; - display: table; - border-collapse: separate; + .input-wrapper { + position: relative; + display: table; + border-collapse: separate; + } &--icon { min-width: 40px; @@ -65,4 +67,22 @@ } } + + .input-error { + .fab-input--icon { + color: #a94442; + background-color: #f2dede; + border-color: #a94442; + } + .fab-input--input { + border-color: #a94442; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08); + } + } + &--error { + display: block; + color: #a94442; + margin-top: 5px; + margin-bottom: 10px; + } } diff --git a/app/frontend/src/stylesheets/modules/payzen-settings.scss b/app/frontend/src/stylesheets/modules/payzen-settings.scss index a75f0bff4..d460f9249 100644 --- a/app/frontend/src/stylesheets/modules/payzen-settings.scss +++ b/app/frontend/src/stylesheets/modules/payzen-settings.scss @@ -24,24 +24,17 @@ color: #8a6d3b; background-color: #fcf8e3; } - .currency-error { - padding: 15px; - margin-bottom: 24px; - border: 1px solid #ebccd1; - color: #a94442; - background-color: #f2dede; - } .payzen-currency-form { display: flex; flex-direction: row; justify-content: flex-start; - align-items: flex-end; + align-items: flex-start; .currency-wrapper { padding: 5px 15px; } .save-currency { - margin: 5px 15px; + margin: 34px 15px 5px; } } }