From 16f93a0a19a6568976faf9ae78a765b938929d34 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 6 Feb 2017 22:41:21 -0300 Subject: [PATCH] Validaiton --- client/coral-admin/src/actions/install.js | 64 +++++++++++++++++++ client/coral-admin/src/constants/install.js | 8 +++ .../containers/Install/InstallContainer.js | 42 ++++++------ .../components/Steps/AddOrganizationName.js | 14 ++-- .../components/Steps/CreateYourAccount.js | 22 +++++-- .../src/containers/Install/index.js | 0 client/coral-admin/src/reducers/install.js | 34 +++++++++- client/coral-framework/helpers/error.js | 3 +- client/coral-framework/helpers/validate.js | 3 +- client/coral-framework/translations.json | 2 + client/coral-ui/components/Button.css | 6 ++ client/coral-ui/components/Wizard.js | 6 +- 12 files changed, 163 insertions(+), 41 deletions(-) delete mode 100644 client/coral-admin/src/containers/Install/index.js diff --git a/client/coral-admin/src/actions/install.js b/client/coral-admin/src/actions/install.js index abaaeceb7..3bb81a1c0 100644 --- a/client/coral-admin/src/actions/install.js +++ b/client/coral-admin/src/actions/install.js @@ -1,5 +1,69 @@ +import coralApi from 'coral-framework/helpers/response'; import * as actions from '../constants/install'; +// import validate from 'coral-framework/helpers/validate'; +// import errorMsj from 'coral-framework/helpers/error'; + export const nextStep = () => ({type: actions.NEXT_STEP}); export const previousStep = () => ({type: actions.PREVIOUS_STEP}); export const goToStep = step => ({type: actions.GO_TO_STEP, step}); + +const installRequest = () => ({type: actions.INSTALL_REQUEST}); +const installSuccess = () => ({type: actions.INSTALL_SUCCESS}); +const installFailure = error => ({type: actions.INSTALL_FAILURE, error}); + +export const submit = () => (dispatch, getState) => { + const formData = getState().install.toJS().data; + console.log('Handling Submit'); + console.log(formData.settings); + + if (!(formData.settings != null)) { + return console.log('Validation Failed'); + } + + const empty = Object.keys(formData.settings).filter(name => { + console.log(name); + return !formData.settings[name].length; + }); + + console.log( + empty + ); + + // const empty = Object.keys(formData.settings) + // .filter(name => !formData[name].length) + + // console.log( + // empty + // ) + // if (empty.length) { + // console.log('Validation Failed') + // } + // .filter(name => data[name]) + +}; + +export const install = () => dispatch => { + dispatch(installRequest()); + coralApi('/setup') + .then(result => { + console.log(result); + dispatch(installSuccess()); + }) + .catch(error => { + console.error(error); + dispatch(installFailure(`${error.message}`)); + }); +}; + +export const updateSettingsFormData = (name, value) => ({ + type: actions.UPDATE_FORMDATA_SETTINGS, + name, + value +}); + +export const updateUserFormData = (name, value) => ({ + type: actions.UPDATE_FORMDATA_USER, + name, + value +}); diff --git a/client/coral-admin/src/constants/install.js b/client/coral-admin/src/constants/install.js index d33ec4657..08558e2f2 100644 --- a/client/coral-admin/src/constants/install.js +++ b/client/coral-admin/src/constants/install.js @@ -1,3 +1,11 @@ export const NEXT_STEP = 'NEXT_STEP'; export const PREVIOUS_STEP = 'PREVIOUS_STEP'; export const GO_TO_STEP = 'GO_TO_STEP'; +export const INSTALL_REQUEST = 'INSTALL_REQUEST'; +export const INSTALL_SUCCESS = 'INSTALL_SUCCESS'; +export const INSTALL_FAILURE = 'INSTALL_FAILURE'; +export const SHOW_ERRORS = 'SHOW_ERRORS'; +export const HAS_ERROR = 'HAS_ERROR'; +export const UPDATE_FORMDATA_SETTINGS = 'UPDATE_FORMDATA_SETTINGS'; +export const UPDATE_FORMDATA_USER = 'UPDATE_FORMDATA_USER'; +export const ADD_ERROR = 'ADD_ERROR'; diff --git a/client/coral-admin/src/containers/Install/InstallContainer.js b/client/coral-admin/src/containers/Install/InstallContainer.js index 350e60709..c9d81fe64 100644 --- a/client/coral-admin/src/containers/Install/InstallContainer.js +++ b/client/coral-admin/src/containers/Install/InstallContainer.js @@ -1,29 +1,27 @@ import React from 'react'; import {connect} from 'react-redux'; import styles from './style.css'; -import {nextStep, previousStep, goToStep} from '../../actions/install'; import {Wizard, WizardNav} from 'coral-ui'; import {Layout} from '../../components/ui/Layout'; +import {nextStep, previousStep, goToStep, updateUserFormData, updateSettingsFormData, submit} from '../../actions/install'; import InitialStep from './components/Steps/InitialStep'; import AddOrganizationName from './components/Steps/AddOrganizationName'; import CreateYourAccount from './components/Steps/CreateYourAccount'; -import InviteTeamMembers from './components/Steps/InviteTeamMembers'; import FinalStep from './components/Steps/FinalStep'; const InstallContainer = props => { - const {nextStep, previousStep, goToStep, install} = props; + const {goToStep, install} = props; return (

Welcome to the Coral Project

- { install.step !== 0 ? : null } - + { install.step !== 0 ? : null } + -
@@ -31,19 +29,6 @@ const InstallContainer = props => { ); }; -const wizardNavitems = [{ - text: '1. Add Organization Name', - step: 1 -}, -{ - text: '2. Create your account', - step: 2 -}, -{ - text: '3. Invite team members', - step: 3 -}]; - const mapStateToProps = state => ({ install: state.install.toJS() }); @@ -51,7 +36,22 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ nextStep: () => dispatch(nextStep()), previousStep: () => dispatch(previousStep()), - goToStep: step => dispatch(goToStep(step)) + goToStep: step => dispatch(goToStep(step)), + handleSettingsChange: e => { + const {name, value} = e.currentTarget; + dispatch(updateSettingsFormData(name, value)); + }, + handleUserChange: e => { + const {name, value} = e.currentTarget; + dispatch(updateUserFormData(name, value)); + }, + handleSubmit: e => { + e.preventDefault(); + dispatch(submit()); + } }); -export default connect(mapStateToProps, mapDispatchToProps)(InstallContainer); +export default connect( + mapStateToProps, + mapDispatchToProps +)(InstallContainer); diff --git a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js index 1e2c75fda..c7edce628 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js +++ b/client/coral-admin/src/containers/Install/components/Steps/AddOrganizationName.js @@ -2,7 +2,8 @@ import React from 'react'; import styles from './style.css'; import {FormField, Button} from 'coral-ui'; -const InitialStep = () => { +const AddOrganizationName = props => { + const {handleSettingsChange, handleSubmit, install} = props; return (

@@ -10,17 +11,20 @@ const InitialStep = () => { inviting new team members

-
{}}> + - + label='Organization name' + onChange={handleSettingsChange} + showErrors={install.showErrors} + errorMsg={install.errors.organizationName} /> +
); }; -export default InitialStep; +export default AddOrganizationName; diff --git a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js index f245218d8..d0b6cbf1f 100644 --- a/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js +++ b/client/coral-admin/src/containers/Install/components/Steps/CreateYourAccount.js @@ -3,36 +3,44 @@ import styles from './style.css'; import {FormField, Button} from 'coral-ui'; const InitialStep = props => { - const {nextStep} = props; + const {handleSubmit, handleUserChange} = props; return (
-
+ + label='Email address' required + onChange={handleUserChange} + /> + label='Username' + onChange={handleUserChange} + /> + label='Password' + onChange={handleUserChange} + /> + label='Confirm Password' + onChange={handleUserChange} + /> - +
diff --git a/client/coral-admin/src/containers/Install/index.js b/client/coral-admin/src/containers/Install/index.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js index d97c7f236..6f98b2296 100644 --- a/client/coral-admin/src/reducers/install.js +++ b/client/coral-admin/src/reducers/install.js @@ -3,10 +3,22 @@ import {Map} from 'immutable'; import * as actions from '../constants/install'; const initialState = Map({ - step: 0 + data: Map(), + errors: Map(), + showErrors: false, + hasError: false, + step: 0, + navItems: [{ + text: '1. Add Organization Name', + step: 1 + }, + { + text: '2. Create your account', + step: 2 + }] }); -export default function auth (state = initialState, action) { +export default function install (state = initialState, action) { switch (action.type) { case actions.NEXT_STEP: return state @@ -17,6 +29,24 @@ export default function auth (state = initialState, action) { case actions.GO_TO_STEP: return state .set('step', action.step); + case actions.UPDATE_FORMDATA_SETTINGS: + return state + .setIn(['data', 'settings', action.name], action.value); + case actions.UPDATE_FORMDATA_USER: + return state + .setIn(['data', 'user', action.name], action.value); + case actions.SHOW_ERRORS: + return state + .set('showErrors', action.show); + case actions.HAS_ERROR: + return state + .set('hasError', action.has); + case actions.ADD_ERROR: + return state + .setIn(['errors', action.name], action.error); + case actions.NO_ERROR: + return state + .set('errors', Map()); default : return state; } diff --git a/client/coral-framework/helpers/error.js b/client/coral-framework/helpers/error.js index 34ba253ba..882486f6a 100644 --- a/client/coral-framework/helpers/error.js +++ b/client/coral-framework/helpers/error.js @@ -6,5 +6,6 @@ export default { email: lang.t('error.email'), password: lang.t('error.password'), displayName: lang.t('error.displayName'), - confirmPassword: lang.t('error.confirmPassword') + confirmPassword: lang.t('error.confirmPassword'), + organizationName: lang.t('error.organizationName'), }; diff --git a/client/coral-framework/helpers/validate.js b/client/coral-framework/helpers/validate.js index b267fb7c0..639b513b4 100644 --- a/client/coral-framework/helpers/validate.js +++ b/client/coral-framework/helpers/validate.js @@ -2,5 +2,6 @@ export default { email: email => (/^([A-Za-z0-9_\-\.\+])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)), password: pass => (/^(?=.{8,}).*$/.test(pass)), confirmPassword: () => true, - displayName: displayName => (/^[a-zA-Z0-9_]+$/.test(displayName)) + displayName: displayName => (/^[a-zA-Z0-9_]+$/.test(displayName)), + organizationName: org => (/^[a-zA-Z0-9_]+$/).test(org) }; diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json index 07b719f6b..1d0cc19c2 100644 --- a/client/coral-framework/translations.json +++ b/client/coral-framework/translations.json @@ -10,6 +10,7 @@ "password": "Password must be at least 8 characters", "displayName": "Display names can contain letters, numbers and _ only", "confirmPassword": "Passwords don't match. Please, check again", + "organizationName": "Organization name must only contain letters or numbers.", "emailPasswordError": "Email and/or password combination incorrect.", "EMAIL_REQUIRED": "An email address is required", "PASSWORD_REQUIRED": "Must input a password", @@ -32,6 +33,7 @@ "email": "No es un email válido", "password": "La contraseña debe tener por lo menos 8 caracteres", "displayName": "Los nombres pueden contener letras, números y _", + "organizationName": "El nombre de la organización debe contener letras y/o números.", "confirmPassword": "Las contraseñas no coinciden", "emailPasswordError": "Email y/o contraseña incorrecta.", "EMAIL_REQUIRED": "Se requiere una dirección de correo electrónico", diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css index ece3779d6..4cdd7ef74 100644 --- a/client/coral-ui/components/Button.css +++ b/client/coral-ui/components/Button.css @@ -30,6 +30,12 @@ font-size: 18px; vertical-align: middle; } + + &:disabled { + background: #E0E0E0; + color: #4f5c67; + font-weight: bold; + } } .type--black { diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js index 429bce72c..eefa2a0b1 100644 --- a/client/coral-ui/components/Wizard.js +++ b/client/coral-ui/components/Wizard.js @@ -1,7 +1,7 @@ import React, {PropTypes} from 'react'; const Wizard = (props) => { - const {children, currentStep, nextStep, previousStep, goToStep} = props; + const {children, currentStep, ...rest} = props; return (
{React.Children.toArray(children) @@ -10,9 +10,7 @@ const Wizard = (props) => { React.cloneElement(child, { i, currentStep, - nextStep, - previousStep, - goToStep + ...rest }) )}