Merge pull request #16 from turniere/ticket/TURNIERE-140

Format the errors after failed register or login

js/components/Login.js

@@ -8,6 +8,8 @@ import {
     clearErrors
 } from '../api';
 
+import '../../static/css/errormessages.css';
+
 export function Login(props) {
     return (
         <Container className="py-5">
@@ -31,7 +33,7 @@ class LoginErrorList extends React.Component {
         const { error, errorMessages } = this.props;
         if(error) {
             return (
-                <ul className='text-danger mt-3'>
+                <ul className='mt-3 error-box'>
                     { errorMessages.map((message, index) => 
                         <li key={index}>
                             {message}

pages/register.js

@@ -20,10 +20,10 @@ import {
     clearErrors
 }  from '../js/api';
 
+import '../static/css/errormessages.css';
 import '../static/everypage.css';
 
 export default class RegisterPage extends React.Component {
-
     render() {
         return (
             <div className="main generic-fullpage-bg">
@@ -42,7 +42,6 @@ export default class RegisterPage extends React.Component {
 }
 
 class Register extends React.Component {
-
     componentDidMount() {
         clearErrors();
     }
@@ -69,11 +68,9 @@ class RegisterErrorList extends React.Component {
         const { error, errorMessages } = this.props;
         if(error) {
             return (
-                <ul className='text-danger mt-3'>
+                <ul className="mt-3 error-box">
                     { errorMessages.map((message, index) => 
-                        <li key={index}>
-                            {message}
-                        </li>
+                        <li key={index}>{message}</li>
                     ) }
                 </ul>
             );
@@ -93,7 +90,6 @@ const VisibleRegisterErrorList = connect(
 )(RegisterErrorList);
 
 class RegisterForm extends React.Component {
-
     constructor(props) {
         super(props);
 

static/css/errormessages.css

@@ -0,0 +1,12 @@
+
+.error-box {
+    border: 2px solid #dc3545;
+    border-radius: 4px;
+    padding: 8px 16px;
+}
+
+.error-box > li {
+    color: #dc3545;
+    margin-right: 36px;
+    list-style-type: none;
+}