added bootstrap styling to examples, implemented registration example

Author: dsumer

examples/Home/index.js

@@ -3,9 +3,16 @@ import React from 'react';
 export default class App extends React.Component {
     render() {
         return (
-            <div>
-                <h1>Home</h1>
+            <div className="jumbotron">
+                <h1 className="display-3">Welcome!</h1>
+                <p className="lead">
+                    These are the examples of <a href="https://github.com/cat-react/form">@cat-react/form</a>.
+                </p>
+                <hr />
+                <p>
+                    Use the navigation on the left side to take a closer look at each example.
+                </p>
             </div>
         );
-    };
+    }
 }

examples/Login/index.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import Form from '@cat-react/form/Form';
-import TextInput from '../components/TextInput';
+import BasicInput from '../components/BasicInput';
 
 export default class App extends React.Component {
     render() {
         return (
             <Form>
                 <h1>Login</h1>
-                <div>
-                    <TextInput label="Username" name="username" value="" validations={{isRequired: true}}/>
-                </div>
-                <div>
-                    <TextInput label="Email" name="email" value="" validations={{isEmail: true}}/>
-                </div>
+                <BasicInput label="Email address"
+                            name="email"
+                            type="email"
+                            value=""
+                            validations={{isRequired: true, isEmail: true}}
+                            placeholder="Enter email"/>
+                <button type="submit" className="btn btn-primary">Login</button>
             </Form>
         );
     };

examples/Registration/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import Form from '@cat-react/form/Form';
+import BasicInput from '../components/BasicInput';
+import autoBind from 'auto-bind';
+
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+
+        autoBind(this);
+
+        this.state = {
+            success: false,
+            error: false
+        }
+    }
+
+    onSubmit(values, valid) {
+        if (valid) {
+            this.setState({
+                success: true,
+                error: false
+            });
+        } else {
+            this.setState({
+                success: false,
+                error: true
+            });
+        }
+    }
+
+    render() {
+        let success = null;
+        if (this.state.success) {
+            success = (
+                <div className="alert alert-success" role="alert">
+                    Success!
+                </div>
+            );
+        }
+        let error = null;
+        if (this.state.error) {
+            error = (
+                <div className="alert alert-danger" role="alert">
+                    Error! Please check your inputs.
+                </div>
+            );
+        }
+
+        return (
+            <Form onSubmit={this.onSubmit}>
+                <h1>Registration</h1>
+                {success}
+                {error}
+                <BasicInput label="Email address"
+                            name="email"
+                            type="email"
+                            value=""
+                            validations={{isRequired: true, isEmail: true}}
+                            validationErrors={{
+                                isRequired: 'You have to enter your email address.',
+                                isEmail: 'Please enter a valid email address.'
+                            }}
+                            placeholder="Enter email"/>
+                <BasicInput label="Confirm Email address"
+                            name="confirm_email"
+                            type="email"
+                            value=""
+                            validations={{isRequired: true, equalsField: 'email'}}
+                            validationErrors={{
+                                isRequired: 'Confirm your email address.',
+                                equalsField: 'The email addresses are not matching each other.'
+                            }}
+                            placeholder="Confirm your Email address"/>
+                <BasicInput label="First Name"
+                            name="first_name"
+                            type="text"
+                            value=""
+                            validations={{minLength: 3}}
+                            validationErrors={{
+                                minLength: 'Your First Name has to be minimum 3 characters long.'
+                            }}
+                            placeholder="Enter your First Name"/>
+                <button type="submit" className="btn btn-primary">Submit</button>
+            </Form>
+        );
+    };
+}

examples/components/BasicInput.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Input from '@cat-react/form/Input'
+
+@Input
+export default class BasicInput extends React.Component {
+    onChange(event) {
+        this.props.setValue(event.target.value);
+    }
+
+    renderErrors() {
+        let errorMessages = [];
+        if (!this.props.isPristine()) {
+            errorMessages = this.props.getErrorMessages();
+        }
+
+        if (!errorMessages || errorMessages.length <= 0) {
+            return null;
+        }
+
+        return <ul className="errorText">{errorMessages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
+    }
+
+    render() {
+        let className = 'form-control';
+        if (!this.props.isPristine()) {
+            className += this.props.isValid() ? '' : ' error';
+        }
+
+        // TODO: remove onBlur
+        return (
+            <div className="form-group">
+                <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
+                <input type={this.props.type}
+                       className={className}
+                       id={this.props.name}
+                       aria-describedby={this.props.name}
+                       placeholder={this.props.placeholder}
+                       value={this.props.getValue()}
+                       onChange={this.onChange.bind(this)}
+                       onBlur={this.props.onBlur} />
+                {this.renderErrors()}
+            </div>
+        );
+    }
+}

examples/components/TextInput.js

@@ -0,0 +1,19 @@
+.sidebar {
+    margin: 7px 0px;
+}
+.sidebar a {
+    color: #337ab7;
+}
+.main {
+    padding: 10px 5px;
+}
+.jumbotron {
+    border-radius: 10px;
+    padding: 10px 20px;
+}
+.error {
+    border-color: red !important;
+}
+.errorText {
+    color: darkred;
+}

examples/index.css

@@ -3,9 +3,11 @@ import ReactDOM from 'react-dom';
 import {HashRouter, Link, Route, Switch} from 'react-router-dom';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.css';
 
 import Home from './Home';
 import Login from './Login';
+import Registration from './Registration';
 
 const menuEntries = [
     {
@@ -18,28 +20,54 @@ const menuEntries = [
         path: '/login',
         component: Login,
         text: 'Login'
+    },
+    {
+        path: '/registration',
+        component: Registration,
+        text: 'Registration'
     }
 ];
 
+class App extends React.Component {
+    render() {
+        const currentEntry = menuEntries.find((entry) => entry.path === window.location.hash.replace('#', ''));
+
+        return (
+            <div>
+                <div className="col-md-2 sidebar">
+                    <div className="list-group">
+                    <span className="list-group-item">
+                        <a href="https://github.com/cat-react/form"><b>@cat-react/form</b></a> Examples
+                    </span>
+                        {menuEntries.map((entry, index) => {
+                            const replace = entry.path === window.location.hash.replace('#', '');
+                            return <Link key={index} className="list-group-item nav-link" to={entry.path}
+                                         replace={replace}>{entry.text}</Link>;
+                        })}
+                    </div>
+                </div>
+                <div className="col-md-10 main">
+                    <ol className="breadcrumb">
+                        <li className="breadcrumb-item">Examples</li>
+                        <li className="breadcrumb-item active">
+                            <a href={'#' + currentEntry.path}>{currentEntry.text}</a>
+                        </li>
+                    </ol>
+                    <Switch>
+                        {menuEntries.map((entry, index) => {
+                            return <Route key={index} exact={!!entry.exact} path={entry.path}
+                                          component={entry.component}/>;
+                        })}
+                    </Switch>
+                </div>
+            </div>
+        );
+    }
+}
+
 ReactDOM.render(
     <HashRouter>
-        <div>
-            <nav>
-                <ul>
-                    {menuEntries.map((entry, index) => {
-                        let replace = entry.path === window.location.hash.replace('#', '');
-                        return <li key={index}><Link to={entry.path} replace={replace}>{entry.text}</Link></li>;
-                    })}
-                </ul>
-            </nav>
-            <main>
-                <Switch>
-                    {menuEntries.map((entry, index) => {
-                        return <Route key={index} exact={!!entry.exact} path={entry.path} component={entry.component}/>;
-                    })}
-                </Switch>
-            </main>
-        </div>
+        <App />
     </HashRouter>,
     document.getElementById('root')
 );