From 798117164afdc15e152cf760774a049f8a973ab8 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 2 Sep 2016 13:05:42 -0400
Subject: [PATCH] add client side sign up validation erros

---
 client/modules/User/components/SignupForm.js |  5 +++++
 client/modules/User/pages/SignupView.js      | 13 ++++++++++---
 client/styles/components/_forms.scss         |  7 +++++++
 client/styles/main.scss                      |  1 +
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 client/styles/components/_forms.scss

diff --git a/client/modules/User/components/SignupForm.js b/client/modules/User/components/SignupForm.js
index c9872754..d107dd2e 100644
--- a/client/modules/User/components/SignupForm.js
+++ b/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>
diff --git a/client/modules/User/pages/SignupView.js b/client/modules/User/pages/SignupView.js
index a7ec9ef3..3a39a1ae 100644
--- a/client/modules/User/pages/SignupView.js
+++ b/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'],
diff --git a/client/styles/components/_forms.scss b/client/styles/components/_forms.scss
new file mode 100644
index 00000000..fdd4b120
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index d5a48f07..404fdb9a 100644
--- a/client/styles/main.scss
+++ b/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';