From 7efc6960dc2138f6f45d130c2773958d29f0f7f2 Mon Sep 17 00:00:00 2001 From: anuj_thakur Date: Fri, 24 Mar 2017 23:24:21 +0530 Subject: [PATCH] navigation fixes --- client/main.html | 5 +- client/stylesheets/custom.css | 6 + imports/client/layouts/NonOrgApp.css | 14 + imports/client/layouts/NonOrgApp.js | 26 ++ imports/client/views/core/DatePicker.js | 34 ++ imports/client/views/core/ErrorLabel.js | 15 + imports/client/views/core/Form.js | 151 +++++++ imports/client/views/core/Label.js | 17 + imports/client/views/core/Stepper.js | 21 + imports/client/views/core/Validator.js | 48 ++ imports/client/views/core/validations.js | 14 + imports/client/views/nonOrg/enter/SignupView.js | 370 ++++++++++------ imports/client/views/nonOrg/enter/signup.css | 133 +++++- .../org/admin/students/AddStudentFormContainer.js | 97 +++++ .../client/views/org/admin/students/StudentForm.js | 483 +++++++++++++++++++++ .../client/views/org/admin/students/addStudent.js | 4 +- imports/client/views/org/enter/LoginPane.js | 29 +- imports/client/views/org/enter/loginpane.css | 77 +++- imports/client/views/verify/EmailPane.js | 59 +-- imports/client/views/verify/emailpane.css | 99 ++++- imports/collections/students/methods.js | 8 +- package.json | 2 + 22 files changed, 1495 insertions(+), 217 deletions(-) create mode 100644 client/stylesheets/custom.css create mode 100644 imports/client/layouts/NonOrgApp.css create mode 100644 imports/client/views/core/DatePicker.js create mode 100644 imports/client/views/core/ErrorLabel.js create mode 100644 imports/client/views/core/Form.js create mode 100644 imports/client/views/core/Label.js create mode 100644 imports/client/views/core/Stepper.js create mode 100644 imports/client/views/core/Validator.js create mode 100644 imports/client/views/core/validations.js create mode 100644 imports/client/views/org/admin/students/AddStudentFormContainer.js create mode 100644 imports/client/views/org/admin/students/StudentForm.js diff --git a/client/main.html b/client/main.html index 6595aeb..b162e7e 100644 --- a/client/main.html +++ b/client/main.html @@ -14,13 +14,16 @@ type='text/css' /> + + + - + li > a +{ + color:#00b395 !important; + font-family: 'Ubuntu', sans-serif; + font-size: larger; +} diff --git a/imports/client/layouts/NonOrgApp.js b/imports/client/layouts/NonOrgApp.js index cb5412d..0f82246 100644 --- a/imports/client/layouts/NonOrgApp.js +++ b/imports/client/layouts/NonOrgApp.js @@ -1,5 +1,16 @@ import React, { Component } from 'react'; import { Grid } from 'react-bootstrap'; +import { Link } from 'react-router'; +import { Row, Col, FormGroup, + ControlLabel, FormControl, + InputGroup, Button, + Navbar,Modal, Nav, NavItem, + Glyphicon, Collapse, + NavbarToggler, NavbarBrand, + NavLink, DropdownItem, DropdownToggle, DropdownMenu, + NavDropdown, MenuItem } from 'react-bootstrap'; +import { LinkContainer } from 'react-router-bootstrap'; +import './NonOrgApp.css'; /** * user based redirection will take place here */ @@ -13,6 +24,21 @@ import { Grid } from 'react-bootstrap'; render(){ return (
+ + + + YOUNGDESK + + + + + + + { this.props.children } diff --git a/imports/client/views/core/DatePicker.js b/imports/client/views/core/DatePicker.js new file mode 100644 index 0000000..f9afcab --- /dev/null +++ b/imports/client/views/core/DatePicker.js @@ -0,0 +1,34 @@ +import React, { Component, PropTypes } from 'react' +import $ from 'jquery' +import 'jquery-ui/ui/widgets/datepicker' + +class DatePicker extends Component { + componentDidMount() { + $('.datepicker').datepicker({ + changeMonth: true, + changeYear: true, + showButtonPanel: true, + yearRange: '-116:+34', + dateFormat: 'dd/mm/yy' + }); + } + + render() { + return ( + + ) + } +} + +DatePicker.propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, +} + +export default DatePicker diff --git a/imports/client/views/core/ErrorLabel.js b/imports/client/views/core/ErrorLabel.js new file mode 100644 index 0000000..6535c86 --- /dev/null +++ b/imports/client/views/core/ErrorLabel.js @@ -0,0 +1,15 @@ +import React, { PropTypes } from 'react' + +const ErrorLabel = props => ( + +) + +ErrorLabel.propTypes = { + children: PropTypes.any.isRequired, +} + +export default ErrorLabel diff --git a/imports/client/views/core/Form.js b/imports/client/views/core/Form.js new file mode 100644 index 0000000..fedc2e1 --- /dev/null +++ b/imports/client/views/core/Form.js @@ -0,0 +1,151 @@ +import React, { Component, PropTypes } from 'react' +import isEqual from 'lodash/isEqual' +import get from 'lodash/get' +import cloneDeep from 'lodash/cloneDeep' +import set from 'lodash/set' + +// github.com/smalldots +class Form extends Component { + constructor(props) { + super(props) + this.state = { + values: props.initialValues || {}, + dirtyValues: [], + submitted: false + } + this.isPristine = this.isPristine.bind(this) + this.isDirty = this.isDirty.bind(this) + this.isSubmitted = this.isSubmitted.bind(this) + this.getValue = this.getValue.bind(this) + this.setValue = this.setValue.bind(this) + this.setPristine = this.setPristine.bind(this) + this.setDirty = this.setDirty.bind(this) + this.resetSubmitted = this.resetSubmitted.bind(this) + } + + componentWillReceiveProps(nextProps) { + if (!isEqual(this.props.initialValues, nextProps.initialValues)) { + this.setState(prevState => ({ + values: { ...nextProps.initialValues, ...prevState.values } + })) + } + } + + isPristine(path) { + if (path) { + return !this.state.dirtyValues.find(dirtyValue => dirtyValue === path) + } + return !this.state.dirtyValues.length + } + + isDirty(path) { + return !this.isPristine(path) + } + + isSubmitted() { + return this.state.submitted + } + + resetSubmitted() { + this.setState({ submitted: false }) + } + + getValue(path) { + if (!path) { + throw new Error(`getValue() requires a path`) + } + return get(this.state.values, path, '') + } + + setValue (path, value) { + if (!path) { + throw new Error(`setValue() requires a path`) + } + if (value === undefined) { + throw new Error(`setValue() requires a non-undefined value`) + } + this.setState(prevState => { + const prevValues = prevState.values + // Lo-Dash's set() mutates the original value, so we need to make a copy + const prevValuesCopy = cloneDeep(prevValues) + const nextValues = set(prevValuesCopy, path, value) + return { values: nextValues } + }) + this.setDirty(path) + } + + setPristine(path) { + if (!path) { + throw new Error(`setPristine() requires a path`) + } + this.setState(prevState => ({ + dirtyValues: ( + this.isPristine(path) + ? prevState.dirtyValues + : prevState.dirtyValues.filter(dirtyValue => dirtyValue !== path) + ) + })) + } + + setDirty(path) { + if (!path) { + throw new Error(`setDirty() requires a path`) + } + this.setState(prevState => ({ + dirtyValues: ( + this.isDirty(path) + ? prevState.dirtyValues + : [...prevState.dirtyValues, path] + ) + })) + } + + reset() { + this.setState({ + values: this.props.initialValues, + dirtyValues: [], + submitted: false + }) + } + + handleSubmit(event) { + if (event) { + event.preventDefault() + } + this.setState({ submitted: true }) + if (this.props.onSubmit) { + this.props.onSubmit(this.state.values) + } + } + + render() { + // eslint-disable-next-line + const { initialValues, children, ...rest } = this.props + return ( +
+ {children({ + values: this.state.values, + isPristine: this.isPristine, + isDirty: this.isDirty, + isSubmitted: this.isSubmitted, + getValue: this.getValue, + setValue: this.setValue, + setPristine: this.setPristine, + setDirty: this.setDirty, + reset: this.reset, + resetSubmitted: this.resetSubmitted + })} +
+ ) + } +} + +Form.propTypes = { + initialValues: PropTypes.object, + onSubmit: PropTypes.func, + children: PropTypes.func.isRequired +} + +Form.defaultProps = { initialValues: {} } + +export default Form diff --git a/imports/client/views/core/Label.js b/imports/client/views/core/Label.js new file mode 100644 index 0000000..e104afc --- /dev/null +++ b/imports/client/views/core/Label.js @@ -0,0 +1,17 @@ +import React, { PropTypes } from 'react' + +const Label = props => ( + +) + +Label.propTypes = { + children: PropTypes.string.isRequired, + required: PropTypes.bool, +} + +export default Label diff --git a/imports/client/views/core/Stepper.js b/imports/client/views/core/Stepper.js new file mode 100644 index 0000000..1edb7fc --- /dev/null +++ b/imports/client/views/core/Stepper.js @@ -0,0 +1,21 @@ +import React, { PropTypes } from 'react' + +const Stepper = props => ( + +) + +Stepper.propTypes = { + steps: PropTypes.arrayOf(PropTypes.shape({ + label: PropTypes.string.isRequired, + active: PropTypes.bool.isRequired, + })) +} + +export default Stepper diff --git a/imports/client/views/core/Validator.js b/imports/client/views/core/Validator.js new file mode 100644 index 0000000..42fa1cb --- /dev/null +++ b/imports/client/views/core/Validator.js @@ -0,0 +1,48 @@ +import { Component, PropTypes } from 'react' +import isArray from 'lodash/isArray' +import get from 'lodash/get' + +class Validator extends Component { + constructor(props) { + super(props) + this.getErrors = this.getErrors.bind(this) + } + + getErrors() { + if (!this.props.validations) { + return null + } + const errors = Object.keys(this.props.validations).reduce((result, path) => { + const validations = this.props.validations[path] + if (!isArray(validations)) { + throw new Error(`validations[${path}] should be an array`) + } + return { + ...result, + [path]: validations.map((validation, index) => { + if (typeof validation !== 'function') { + throw new Error(`validations[${path}][${index}] should be a function`) + } + const error = validation(get(this.props.values, path, ''), this.props.values, path) + if (error && typeof error !== 'string') { + throw new Error(`validations[${path}][${index}] should return a string`) + } + return error + }).find(error => error) || null + } + }, {}) + return Object.keys(errors).find(path => errors[path]) ? errors : null + } + + render() { + return this.props.children({ errors: this.getErrors() }) + } +} + +Validator.propTypes = { + validations: PropTypes.object, + values: PropTypes.object, + children: PropTypes.func.isRequired +} + +export default Validator diff --git a/imports/client/views/core/validations.js b/imports/client/views/core/validations.js new file mode 100644 index 0000000..8e4bcaf --- /dev/null +++ b/imports/client/views/core/validations.js @@ -0,0 +1,14 @@ +export const isRequired = (fieldName, value) => { + if (!value) { + return fieldName ? `${fieldName} is required` : 'Required' + } +} + +export const minLength = minLength => { + return value => value && value.length < minLength && `Min. length: ${minLength}` +} + +export const isValidEmail = value => { + const exR = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + return !exR.test(value) && 'Please use a valid email' +} diff --git a/imports/client/views/nonOrg/enter/SignupView.js b/imports/client/views/nonOrg/enter/SignupView.js index c4dad7c..31891cc 100644 --- a/imports/client/views/nonOrg/enter/SignupView.js +++ b/imports/client/views/nonOrg/enter/SignupView.js @@ -1,130 +1,240 @@ -import React from 'react'; -import { Link } from 'react-router'; -import { Row, Col, FormGroup, - ControlLabel, FormControl, - InputGroup, Button } from 'react-bootstrap'; -import handleSignup from './signup'; -import { Orgs } from '/imports/collections/orgs/index'; -import './signup.css'; - -export default class Signup extends React.Component { - constructor(props) { - super(props); - this.state = { - orgSlug: "" - }; - } - componentWillMount(){ - Meteor.subscribe('allOrgsSlug'); - } - - componentDidMount() { - handleSignup({ component: this }); - } - handleChange(e) { - this.setState({ orgSlug: e.target.value }); - } - handleSubmit(event) { - event.preventDefault(); - } - checkExistingOrgSlug() { - if(this.state.orgSlug==""){return null} - searchOrg = Orgs.find({slug:this.state.orgSlug}).fetch(); - if(searchOrg.length>0){ - return "error" - }else{ - return "success" - } - } - render() { - return ( -
- - -

Sign Up

-
(this.signupForm = form) } - onSubmit={ this.handleSubmit } - > - - - - Organisation URL - - this.handleChange(e)} - /> - @yd.com - - - - - - - - Organisation Name - - - - - - - - First Name - - - - - - Last Name - - - - - - Email Address - - - - Password - - - {/* Sign Up - -
- - -
- ); - } -} +import React from 'react'; +import { Link } from 'react-router'; +import { Icon } from '/imports/client/components/Icon'; +import { LinkContainer } from 'react-router-bootstrap'; +import { Row, Col, FormGroup, + ControlLabel, FormControl, + InputGroup, Button, + Navbar,Modal, Nav, NavItem, + Glyphicon, Collapse, + NavbarToggler, NavbarBrand, + NavLink, DropdownItem, DropdownToggle, DropdownMenu, + NavDropdown, MenuItem } from 'react-bootstrap'; +import handleSignup from './signup'; +import { Orgs } from '/imports/collections/orgs/index'; +import { Meteor } from 'meteor/meteor'; + +import './signup.css'; + +export default class Signup extends React.Component { + constructor(props) { + super(props); + this.state = { + orgSlug: "" + }; + } + componentWillMount(){ + Meteor.subscribe('allOrgsSlug'); + } + + componentDidMount() { + handleSignup({ component: this }); + } + handleChange(e) { + this.setState({ orgSlug: e.target.value }); + } + handleSubmit(event) { + event.preventDeult(); + } + checkExistingOrgSlug() { + if(this.state.orgSlug==""){return null} + searchOrg = Orgs.find({slug:this.state.orgSlug}).fetch(); + if(searchOrg.length>0){ + return "error" + }else{ + return "success" + } + } + + render() + { + // const {user, org} = this.props.data; + return( +
+
+
+ + +

Welcome to YoungDesk!!!

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + + + +

+

+ + + + +
+ +
Lorem Ipsum
+
+ + +
+ +
Lorem Ipsum
+
+ + +
+ +
Lorem Ipsum
+
+ + +
+ +
Lorem Ipsum
+
+ + + + +

+
+ + + + +
+

Lets Get In Touch!

+
+ + +
+ + +
+ +

123-456-6789

+
+ + +
+ +

feedback@youngdesk.com

+
+ + +
+ +
+ + +

Sign up with Us

+
+
(this.signupForm = form) } + onSubmit={ this.handleSubmit } + > + Organisation Details + + + + + {/* Organisation URL */} + + this.handleChange(e)} + /> + @yd.com + + + + + + + + + {/* Organisation Name */} + + + + +
+ Personal Details + + + + {/* First Name */} + + + + + + {/* Middle Name */} + + + + + + {/* Last Name */} + + + + +
+ User Credentials + + {/* Email Address */} + + + + {/* Password */} + + + {/* Sign Up + +
+ + +
+
+
+ + ); + } +} diff --git a/imports/client/views/nonOrg/enter/signup.css b/imports/client/views/nonOrg/enter/signup.css index 973652e..90dc0f6 100644 --- a/imports/client/views/nonOrg/enter/signup.css +++ b/imports/client/views/nonOrg/enter/signup.css @@ -1,13 +1,138 @@ .Signup { + float: right; + margin: 20px auto; + width: 400px; + height: auto; + padding: 20px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; background-color: white; - margin: auto; - width: 40%; - border: 3px solid #73AD21; - padding: 10px; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + box-shadow: 1px 2px 5px rgba(0,0,0,.31); + border: solid 1px #cbc9c9; + font-family: 'Ubuntu', sans-serif; +} + +.Content +{ + margin: 20px auto; + width: 750px; + height: auto; + padding: 20px; + font-family: 'Ubuntu', sans-serif; + color: white; + float:left; +} + +.section-heading +{ + text-align: center; +} + +.contact +{ + text-align: center; + text-indent: 0px !important; +} + +.container +{ + /*width:1300px !important;*/ +} + +h1 +{ + font-size: 45px !important; +} + +p +{ + text-indent: 50px; + text-align: justify; + font-size:15px; +} + +h6 +{ + text-align: center; +} + +i +{ + display: inline-block; + width: 100%; + text-align: center; +} + + + +.wrapper +{ + overflow: hidden; } .page-header { text-align: center; + color:#00b395; + font-weight: bolder; +} + +.side-heading +{ + /*padding: 10px;*/ + text-align: left; + font-weight: bold; + color:#00b395; + font-size: 14px; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #00b395; + padding: 0; +} + +.blue { + background-color: #00b395; + background-image: -webkit-linear-gradient(top,#00b395,#00cdaa); + background-image: -moz-linear-gradient(top,#00b395,#00cdaa); + background-image: -ms-linear-gradient(top,#00b395,#00cdaa); + background-image: -o-linear-gradient(top,#00b395,#00cdaa); + background-image: linear-gradient(top,#00b395,#00cdaa); + + border: 1px solid #00b395; + color: white; + + font-size: 13px; + font-weight: bold; + text-align: center; + height: 27px; + line-height: 27px; + min-width: 54px; + padding: 0 10px; + text-decoration: none; +} + +.blue:hover { + border: 1px solid #00b395; + + color: white; + background-color: #00b395; + background-image: -webkit-linear-gradient(top,#00b395,#009f85); + background-image: -moz-linear-gradient(top,#00b395,#009f85); + background-image: -ms-linear-gradient(top,#00b395,#009f85); + background-image: -o-linear-gradient(top,#00b395,#009f85); + background-image: linear-gradient(top,#00b395,#009f85); + + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); + box-shadow: 0 1px 1px rgba(0,0,0,.1); + width: auto; + height: 27px; } diff --git a/imports/client/views/org/admin/students/AddStudentFormContainer.js b/imports/client/views/org/admin/students/AddStudentFormContainer.js new file mode 100644 index 0000000..15974c3 --- /dev/null +++ b/imports/client/views/org/admin/students/AddStudentFormContainer.js @@ -0,0 +1,97 @@ +import React, { Component } from 'react' +import { AddStudentForm } from './addStudentForm' +import StudentForm from './StudentForm' +import Form from '/imports/client/views/core/Form' +import Validator from '/imports/client/views/core/Validator' +import { isRequired, isValidEmail } from '/imports/client/views/core/validations' +import { addStudentManually } from '/imports/collections/students/methods'; + +export class AddStudentFormContainer extends Component { + + constructor(props) { + super(props) + this.state = { currentStep: 0 } + this.handleNextClick = this.handleNextClick.bind(this) + this.handleBackClick = this.handleBackClick.bind(this) + this.handleSubmit = this.handleSubmit.bind(this) + } + + handleNextClick() { + this.form.handleSubmit() + if (this.validator.getErrors() && Object.keys(this.validator.getErrors()).length > 0) return + this.setState({ currentStep: this.state.currentStep + 1 }) + this.form.resetSubmitted() + } + + handleBackClick() { + this.setState({ currentStep: this.state.currentStep + -1 }) + } + + handleSubmit() { + if (this.state.currentStep === 3) { + addStudentManually.call(this.form.state.values) + } + } + + //render callback + render() { + return ( +
this.form = form} + initialValues={{ + gender: 'male', + parentGender: 'male', + }} + > + {({ values, setValue, getValue, isSubmitted, isDirty }) => ( + this.validator = validator} + validations={{ + admissionId: [(value) => isRequired('Admission id', value)], + firstName: [(value) => isRequired('First name', value)], + middleName: [(value) => isRequired('Middle name', value)], + lastName: [(value) => isRequired('Last name', value)], + email: [(value) => isRequired('Email', value), isValidEmail], + dob: [(value) => isRequired('Date of birth', value)], + gender: [(value) => isRequired('Gender', value)], + rollNo: [(value) => this.state.currentStep === 1 && isRequired('Roll no', value)], + class: [(value) => this.state.currentStep === 1 && isRequired('Class', value)], + section: [(value) => this.state.currentStep === 1 && isRequired('Section', value)], + community: [(value) => this.state.currentStep === 1 && isRequired('Community', value)], + bloodGroup: [(value) => this.state.currentStep === 1 && isRequired('Blood group', value)], + phone: [(value) => this.state.currentStep === 1 && isRequired('Phone', value)], + address: [(value) => this.state.currentStep === 2 && isRequired('Address', value)], + city: [(value) => this.state.currentStep === 2 && isRequired('City', value)], + state: [(value) => this.state.currentStep === 2 && isRequired('State', value)], + parentName: [(value) => this.state.currentStep === 3 && isRequired('Parent name', value)], + parentEmail: [(value) => this.state.currentStep === 3 && isRequired('Parent email', value), (value) => this.state.currentStep === 3 && isValidEmail(value)], + relation: [(value) => this.state.currentStep === 3 && isRequired('Relation', value)], + profession: [(value) => this.state.currentStep === 3 && isRequired('Profession', value)], + parentGender: [(value) => this.state.currentStep === 3 && isRequired('Parent gender', value)], + parentPhone: [(value) => this.state.currentStep === 3 && isRequired('Parent phone', value)], + parentAddress: [(value) => this.state.currentStep === 3 && isRequired('Parent address', value)], + parentCity: [(value) => this.state.currentStep === 3 && isRequired('Parent city', value)], + parentState: [(value) => this.state.currentStep === 3 && isRequired('Parent state', value)], + parentZipcode: [(value) => this.state.currentStep === 3 && isRequired('Parent zip code', value)], + }} + > + {({ errors }) => ( + + )} + + )} +
+ ) + } +} diff --git a/imports/client/views/org/admin/students/StudentForm.js b/imports/client/views/org/admin/students/StudentForm.js new file mode 100644 index 0000000..29eb8f1 --- /dev/null +++ b/imports/client/views/org/admin/students/StudentForm.js @@ -0,0 +1,483 @@ +import React, { PropTypes } from 'react' +import { + Row, + Col, + FormGroup, + FormControl, + Button +} from 'react-bootstrap' +import DatePicker from '/imports/client/views/core/DatePicker' +import Label from '/imports/client/views/core/Label' +import Stepper from '/imports/client/views/core/Stepper' +import ErrorLabel from '/imports/client/views/core/ErrorLabel' + +const StudentForm = props => ( +
+ + {props.currentStep === 0 && ( +
+ Personal data + + + + + props.setValue('admissionId', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.admissionId && ( + {props.errors.admissionId} + )} + + + + + + props.setValue('firstName', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.firstName && ( + {props.errors.firstName} + )} + + + + + + + + props.setValue('middleName', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.middleName && ( + {props.errors.middleName} + )} + + + + + + props.setValue('lastName', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.lastName && ( + {props.errors.lastName} + )} + + + + + + + + props.setValue('email', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.email && ( + {props.errors.email} + )} + + + + + + { + props.setValue('dob', e.target.value) + }} + /> + {props.isSubmitted() && props.errors && props.errors.dob && ( + {props.errors.dob} + )} + + + + + + + + props.setValue('gender', e.target.value)} + > + + + + {props.isSubmitted() && props.errors && props.errors.gender && ( + {props.errors.gender} + )} + + + +
+ )} + {props.currentStep === 1 && ( +
+ Academic + + + + + props.setValue('rollNo', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.rollNo && ( + {props.errors.rollNo} + )} + + + + + + props.setValue('class', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.class && ( + {props.errors.class} + )} + + + + + + + + props.setValue('section', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.section && ( + {props.errors.section} + )} + + + + + + props.setValue('community', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.community && ( + {props.errors.community} + )} + + + + + + + + props.setValue('bloodGroup', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.bloodGroup && ( + {props.errors.bloodGroup} + )} + + + + + + props.setValue('phone', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.phone && ( + {props.errors.phone} + )} + + + +
+ )} + {props.currentStep === 2 && ( +
+ Address + + + + + props.setValue('address', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.address && ( + {props.errors.address} + )} + + + + + + props.setValue('city', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.city && ( + {props.errors.city} + )} + + + + + + + + props.setValue('state', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.state && ( + {props.errors.state} + )} + + + +
+ )} + {props.currentStep === 3 && ( +
+ Parent information + + + + + props.setValue('parentName', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentName && ( + {props.errors.parentName} + )} + + + + + + props.setValue('parentEmail', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentEmail && ( + {props.errors.parentEmail} + )} + + + + + + + + props.setValue('relation', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.relation && ( + {props.errors.relation} + )} + + + + + + props.setValue('profession', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.profession && ( + {props.errors.profession} + )} + + + + + + + + props.setValue('parentGender', e.target.value)} + > + + + + {props.isSubmitted() && props.errors && props.errors.parentGender && ( + {props.errors.parentGender} + )} + + + + + + props.setValue('parentPhone', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentPhone && ( + {props.errors.parentPhone} + )} + + + + + + + + props.setValue('parentAddress', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentAddress && ( + {props.errors.parentAddress} + )} + + + + + + props.setValue('parentCity', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentCity && ( + {props.errors.parentCity} + )} + + + + + + + + props.setValue('parentZipcode', e.target.value)} + /> + {props.isSubmitted() && props.errors && props.errors.parentZipcode && ( + {props.errors.parentZipcode} + )} + + + +
+ )} +
+ {props.currentStep > 0 && ( +
+ + +
+ )} + {props.currentStep < 3 && ( +
+ +
+ )} + {props.currentStep === 3 && ( +
+ +
+ )} +
+
+) + +StudentForm.propTypes = { + currentStep: PropTypes.number.isRequired, + onNextClick: PropTypes.func.isRequired, + onBackClick: PropTypes.func.isRequired, + setValue: PropTypes.func.isRequired, + getValue: PropTypes.func.isRequired, +} + +export default StudentForm diff --git a/imports/client/views/org/admin/students/addStudent.js b/imports/client/views/org/admin/students/addStudent.js index 2f94fff..c2d1528 100644 --- a/imports/client/views/org/admin/students/addStudent.js +++ b/imports/client/views/org/admin/students/addStudent.js @@ -6,7 +6,7 @@ import { Link,browserHistory } from 'react-router'; import { FormGroup,Panel,Table, ButtonToolbar,Modal, FormControl,Glyphicon,Button } from 'react-bootstrap'; -import { AddStudentForm } from './addStudentForm'; +import { AddStudentFormContainer } from './AddStudentFormContainer'; const style = { margin: 12, @@ -49,7 +49,7 @@ export class AddStudent extends Component { New Student - + diff --git a/imports/client/views/org/enter/LoginPane.js b/imports/client/views/org/enter/LoginPane.js index 56ff8a0..6872dce 100644 --- a/imports/client/views/org/enter/LoginPane.js +++ b/imports/client/views/org/enter/LoginPane.js @@ -28,7 +28,7 @@ export class LoginPane extends React.Component {
- Login +

Login

{ this.props.data.error } @@ -36,6 +36,7 @@ export class LoginPane extends React.Component { { this.props.data.message } +
this.props.onLogin(e) }> @@ -44,7 +45,7 @@ export class LoginPane extends React.Component { onChange={ (e) => this.props.onUpdate('email', e.currentTarget.value) } name="email" id="email" - placeholder="Enter your email" /> + placeholder="Email" /> @@ -53,28 +54,30 @@ export class LoginPane extends React.Component { onChange={ (e) => this.props.onUpdate('password', e.currentTarget.value) } name="password" id="password" - placeholder="Enter your password" /> + placeholder="Password" /> - + + + + Forgot your password? + + + + - - - Forgotten password? - - +
diff --git a/imports/client/views/org/enter/loginpane.css b/imports/client/views/org/enter/loginpane.css index 4c58b9b..7438ee8 100644 --- a/imports/client/views/org/enter/loginpane.css +++ b/imports/client/views/org/enter/loginpane.css @@ -1,12 +1,73 @@ -.enterPane__box{ -background-color: white; -margin: auto; - width: 30%; - border: 3px solid #73AD21; - padding: 10px; +.enterPane__box +{ + margin: 20px auto; + width: 400px; + height: 100%; + padding: 20px; + float:right; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: white; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + box-shadow: 1px 2px 5px rgba(0,0,0,.31); + border: solid 1px #cbc9c9; + font-family: 'Ubuntu', sans-serif; } - .enterPane__header{ + .enterPane__header + { text-align: center; - font-weight: bold; + color:#00b395; + font-weight: bolder; + } + + .blue { + background-color: #00b395; + background-image: -webkit-linear-gradient(top,#00b395,#00cdaa); + background-image: -moz-linear-gradient(top,#00b395,#00cdaa); + background-image: -ms-linear-gradient(top,#00b395,#00cdaa); + background-image: -o-linear-gradient(top,#00b395,#00cdaa); + background-image: linear-gradient(top,#00b395,#00cdaa); + + border: 1px solid #00b395; + color: white; + + font-size: 13px; + font-weight: bold; + text-align: center; + height: 27px; + line-height: 27px; + min-width: 54px; + padding: 0 10px; + text-decoration: none; + } + + .form-group + { + clear:both; + } + + .enterPane__link + { + text-decoration: underline; + } + + .blue:hover { + border: 1px solid #00b395; + + color: white; + background-color: #00b395; + background-image: -webkit-linear-gradient(top,#00b395,#009f85); + background-image: -moz-linear-gradient(top,#00b395,#009f85); + background-image: -ms-linear-gradient(top,#00b395,#009f85); + background-image: -o-linear-gradient(top,#00b395,#009f85); + background-image: linear-gradient(top,#00b395,#009f85); + + -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); + box-shadow: 0 1px 1px rgba(0,0,0,.1); + width: auto; + height: 27px; } diff --git a/imports/client/views/verify/EmailPane.js b/imports/client/views/verify/EmailPane.js index d49dddf..fbb5d44 100644 --- a/imports/client/views/verify/EmailPane.js +++ b/imports/client/views/verify/EmailPane.js @@ -39,38 +39,28 @@ export class EmailPane extends React.Component { const {user} = this.props; return ( -
-
- {/*
- -
*/} -
- Enter your email address -
-
-
- - Enter email - - - this.onUpdate('email', evt.currentTarget.value)} - placeholder = "Email" - /> +
+
+ +
+
+ + + + Email + this.onUpdate('email', evt.currentTarget.value)} + placeholder="Organisation Name" + /> + +
- -
-
-
-
this.onSetEmail()} - > - Send verification email -
+
+ + {/* */}
); @@ -85,12 +75,11 @@ export class EmailPane extends React.Component {
{/* */} -

Your email needs verification

-
-
- Please check your email – we sent a verification link to
+

Hi, your email needs verification

+ + Please check your email – we sent a verification link to   - {user.emails[0].address} + {user.emails[0].address}
diff --git a/imports/client/views/verify/emailpane.css b/imports/client/views/verify/emailpane.css index 3729101..e08ff1b 100644 --- a/imports/client/views/verify/emailpane.css +++ b/imports/client/views/verify/emailpane.css @@ -1,20 +1,63 @@ +.wizardPane-box +{ + margin: 20px auto; + width: 400px; + height: auto; + padding: 20px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: white; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + box-shadow: 1px 2px 5px rgba(0,0,0,.31); + border: solid 1px #cbc9c9; + font-family: 'Ubuntu', sans-serif; +} + +.wizardPane-box1 +{ + margin: 20px auto; + width: 300px; + height: auto; + padding: 20px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: white; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + box-shadow: 1px 2px 5px rgba(0,0,0,.31); + border: solid 1px #cbc9c9; + font-family: 'Ubuntu', sans-serif; +} + .wizardPane-sectionD { background-color: white; margin: auto; - width: 30%; + width: 100%; padding: 10px; top:50px; cursor: pointer; font-weight: bold; - color: crimson; + color: #00b395; font-style: italic; + text-align: center; } .EmailVerify { color:green; font-weight: bold; + font-style: normal !important; + color: #00b395; +} + +.subheading +{ + font-weight: bold; + color: #00b395; } .wizardPane-link:hover @@ -22,32 +65,52 @@ text-decoration: underline; } +i +{ + display: inline-block; + width: 100%; + text-align: center; +} + +h3 +{ + margin-top: 0px !important; + text-align: center; + color: white; +} + +span +{ + font-size: 14px; + color: white; +} + .wizardPane-section1 { - margin:auto; - width: 30%; - padding: 10px; - background:#fff; - -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + /*margin: 20px auto;*/ + width: 360px; + height: auto; + padding: 10px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: darkslategray; } .wizardPane-section { - margin:auto; - width: 30%; - padding: 10px; - background:#fff; - -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + width: 360px; + height: auto; + padding: 10px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: black; } .wizardPane-title { - font-size: 20px; - color:black; + color:white; } diff --git a/imports/collections/students/methods.js b/imports/collections/students/methods.js index 8137e5d..fe866bc 100644 --- a/imports/collections/students/methods.js +++ b/imports/collections/students/methods.js @@ -80,8 +80,8 @@ export const addStudentManually = new ValidatedMethod({ newParentId = Parents.insert({ userId: newParentUserId, orgId: orgId, - address: data.address, - gender: data.gender, + address: data.address, + gender: data.gender, dob: data.dob, rollNo: data.rollNo, class: data.studentclass, @@ -89,11 +89,7 @@ export const addStudentManually = new ValidatedMethod({ bloodGroup: data.bloodGroup, community: data.community, }); - console.log("newParentUserId"); - console.log(newParentUserId); } - console.log("newUserId"); - console.log(newStudentId); if(newStudentId){ Students.insert({ userId: newStudentId, diff --git a/package.json b/package.json index 6454c88..fb409d8 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,9 @@ "csvtojson": "^1.1.4", "fs": "0.0.1-security", "jquery": "^2.2.4", + "jquery-ui": "^1.12.1", "jquery-validation": "^1.15.1", + "lodash": "^4.17.4", "material-fabmenu": "0.0.1", "material-ui": "^0.17.1", "meteor-node-stubs": "^0.2.6", -- 2.0.0