add client side sign up validation erros

client/modules/User/components/SignupForm.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 
 function SignupForm(props) {
   const { fields: { username, email, password, confirmPassword }, handleSubmit } = props;
+  console.log(props.fields);
   return (
     <form className="signup-form" onSubmit={handleSubmit(props.signUpUser.bind(this))}>
       <p className="signup-form__field">
@@ -12,6 +13,7 @@ function SignupForm(props) {
           placeholder="Username"
           {...username}
         />
+        {username.touched && username.error && <span className="form-error">{username.error}</span>}
       </p>
       <p className="signup-form__field">
         <input
@@ -21,6 +23,7 @@ function SignupForm(props) {
           placeholder="Email"
           {...email}
         />
+        {email.touched && email.error && <span className="form-error">{email.error}</span>}
       </p>
       <p className="signup-form__field">
         <input
@@ -30,6 +33,7 @@ function SignupForm(props) {
           placeholder="Password"
           {...password}
         />
+        {password.touched && password.error && <span className="form-error">{password.error}</span>}
       </p>
       <p className="signup-form__field">
         <input
@@ -39,6 +43,7 @@ function SignupForm(props) {
           aria-label="confirm password"
           {...confirmPassword}
         />
+        {confirmPassword.touched && confirmPassword.error && <span className="form-error">{confirmPassword.error}</span>}
       </p>
       <input type="submit" value="Sign Up" aria-label="sign up" />
     </form>

client/modules/User/pages/SignupView.js

@@ -27,11 +27,19 @@ function validate(formProps) {
   const errors = {};
 
   if (!formProps.username) {
-    errors.username = 'Please enter a username';
+    errors.username = 'Please enter a username.';
+  } else if (!formProps.username.match(/^.{1,20}$/)) {
+    errors.username = 'Username must be less than 20 characters.';
+  } else if (!formProps.username.match(/^[a-zA-Z0-9._-]{1,20}$/)) {
+    errors.username = 'Username must only consist of numbers, letters, periods, dashes, and underscores.';
   }
+
   if (!formProps.email) {
-    errors.email = 'Please enter an email';
+    errors.email = 'Please enter an email.';
+  } else if (!formProps.email.match(/^[-a-z0-9~!$%^&*_=+}{'?]+(\.[-a-z0-9~!$%^&*_=+}{'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i)) {
+    errors.email = 'Please enter a valid email address.';
   }
+
   if (!formProps.password) {
     errors.password = 'Please enter a password';
   }
@@ -46,7 +54,6 @@ function validate(formProps) {
   return errors;
 }
 
-// export default connect(mapStateToProps, mapDispatchToProps)(SignupView);
 export default reduxForm({
   form: 'signup',
   fields: ['username', 'email', 'password', 'confirmPassword'],

client/styles/components/_forms.scss

@@ -0,0 +1,7 @@
+.form-error {
+  display: block;
+  padding-top: #{10 / $base-font-size}rem;
+  color: $console-error-color;
+  width: #{300 / $base-font-size}rem;
+  font-size: #{12 / $base-font-size}rem;
+}

client/styles/main.scss

@@ -24,6 +24,7 @@
 @import 'components/overlay';
 @import 'components/about';
 @import 'components/github-button';
+@import 'components/forms';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';