form, input, textarea page builder elements

lib/components/admin/panels/settings.jsx

@@ -106,6 +106,59 @@ Settings.options = [
       width: 50,
       height: 50
     }
+  },
+  {
+    label: 'Mail service',
+    type: Types.Select,
+    id: 'mailService',
+    props: {
+      values: [
+        '1und1',
+        'AOL',
+        'DebugMail.io',
+        'DynectEmail',
+        'FastMail',
+        'GandiMail',
+        'Gmail',
+        'Godaddy',
+        'GodaddyAsia',
+        'GodaddyEurope',
+        'hot.ee',
+        'Hotmail',
+        'iCloud',
+        'mail.ee',
+        'Mail.ru',
+        'Mailgun',
+        'Mailjet',
+        'Mandrill',
+        'Naver',
+        'Postmark',
+        'QQ',
+        'QQex',
+        'SendCloud',
+        'SendGrid',
+        'SES',
+        'Sparkpost',
+        'Yahoo',
+        'Yandex',
+        'Zoho'
+      ]
+    }
+  },
+  {
+    label: 'Mail user/email',
+    type: Types.String,
+    id: 'mailUser'
+  },
+  {
+    label: 'Mail user password',
+    type: Types.String,
+    id: 'mailPass'
+  },
+  {
+    label: 'Send emails to',
+    type: Types.String,
+    id: 'mailTo'
   }
 ];
 

lib/components/elements/form/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import forEach from 'lodash.foreach';
+import slugify from 'slug';
+import $ from 'jquery';
+import Component from '../../component';
+import Element from '../../element';
+
+import settings from './settings';
+import propsSchema from './props-schema';
+
+import schemaEntriesActionsFactory from '../../../client/actions/schema-entries';
+
+export default class Form extends Component {
+  sendEmail (formData) {
+    $
+      .post('/send-email', formData)
+      .done((response) => {
+
+      })
+      .fail((error) => {
+
+      });
+  }
+
+  addToSchema (formData) {
+    let actions = schemaEntriesActionsFactory(this.props.schema);
+
+    // Check required fields
+    if (formData._title && !formData._slug) {
+      formData._slug = slugify(formData._title, {lower: true}).toLowerCase();
+    }
+
+    actions
+      .add(formData)
+      .then((result) => {
+
+      })
+      .catch(() => {
+
+      });
+  }
+
+  sendCustom (formData) {
+    $
+      .post(this.props.custom, formData)
+      .done((response) => {
+
+      })
+      .fail((error) => {
+
+      });
+  }
+
+  onSubmit (event) {
+    event.preventDefault();
+    const formElement = React.findDOMNode(this);
+    let formData = {};
+
+    forEach(formElement.elements, (element) => {
+      formData[element.name] = element.value;
+    });
+
+    if (this.props.action === 'email') {
+      this.sendEmail(formData);
+    } else if (this.props.action === 'schema') {
+      this.addToSchema(formData);
+    } else if (this.props.action === 'custom') {
+      this.sendCustom(formData);
+    }
+  }
+
+  render () {
+    let props = {
+      tag: 'form',
+      element: this.props.element,
+      settings: this.constructor.settings,
+      onSubmit: this.onSubmit.bind(this)
+    };
+
+    return (
+      <Element {...props}>
+        {this.props.children}
+        <input type='submit' hidden='true' />
+      </Element>
+    );
+  }
+}
+
+Form.propTypes = {
+  action: React.PropTypes.string,
+  schema: React.PropTypes.string,
+  custom: React.PropTypes.string
+};
+
+Form.defaultProps = {};
+
+Form.propsSchema = propsSchema;
+Form.settings = settings;

lib/components/elements/form/props-schema.js

@@ -0,0 +1,33 @@
+import {Types} from '../../../data-types';
+import schemasStore from '../../../client/stores/schemas';
+
+export default [
+  {
+    label: 'Action',
+    type: Types.Select,
+    id: 'action',
+    props: {
+      labels: ['Send e-mail', 'Schema entry', 'Custom endpoint'],
+      values: ['email', 'schema', 'custom']
+    },
+    unlocks: {
+      schema: [
+        {
+          label: 'Schema',
+          type: Types.SelectEntry,
+          id: 'schema',
+          props: {
+            store: schemasStore
+          }
+        }
+      ],
+      custom: [
+        {
+          label: 'Custom url',
+          type: Types.String,
+          id: 'custom'
+        }
+      ]
+    }
+  }
+];

lib/components/elements/form/settings.js

@@ -0,0 +1,11 @@
+export default {
+  icon: {
+    class: 'material-icons',
+    content: 'mail'
+  },
+  category: 'form',
+  drop: {
+    rejects: 'Section'
+  },
+  drag: {}
+};

lib/components/elements/index.js

@@ -13,6 +13,9 @@ import Icon from './icon';
 import Counter from './counter';
 import Schema from './schema';
 import MusicPlayer from './music-player';
+import Form from './form';
+import TextInput from './text-input';
+import Textarea from './textarea';
 
 export default {
   Button,
@@ -29,5 +32,8 @@ export default {
   Icon,
   Counter,
   Schema,
-  MusicPlayer
+  MusicPlayer,
+  Form,
+  TextInput,
+  Textarea
 };

lib/components/elements/text-input/classes.js

@@ -0,0 +1,14 @@
+import jss from '../../../react-jss';
+
+export default jss.createRules({
+  input: {
+    display: 'inline-block',
+    width: '100%',
+    maxWidth: '100%',
+    border: '1px solid #cccccc',
+    outline: 0
+  },
+  holder: {
+    textAlign: 'left'
+  }
+});

lib/components/elements/text-input/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Component from '../../component';
+import Element from '../../element';
+import styles from '../../../styles';
+import cx from 'classnames';
+
+import settings from './settings';
+import propsSchema from './props-schema';
+import style from './style';
+import classes from './classes';
+
+export default class TextInput extends Component {
+  render () {
+    let classMap = (this.props.style && styles.getClassesMap(this.props.style)) || {};
+    let props = {
+      tag: 'div',
+      element: this.props.element,
+      settings: this.constructor.settings,
+      className: cx(classes.holder, classMap.holder)
+    };
+
+    return (
+      <Element {...props}>
+        <input type='text' name={this.props.name} placeholder={this.props.placeholder} className={cx(classes.input, classMap.input)}></input>
+      </Element>
+    );
+  }
+}
+
+TextInput.propTypes = {
+  name: React.PropTypes.string,
+  placeholder: React.PropTypes.string
+};
+TextInput.defaultProps = {};
+
+styles.registerStyle(style);
+TextInput.propsSchema = propsSchema;
+TextInput.settings = settings;

lib/components/elements/text-input/props-schema.js

@@ -0,0 +1,14 @@
+import {Types} from '../../../data-types';
+
+export default [
+  {
+    label: 'Name',
+    type: Types.String,
+    id: 'name'
+  },
+  {
+    label: 'Placeholder',
+    type: Types.String,
+    id: 'placeholder'
+  }
+];

lib/components/elements/text-input/settings.js

@@ -0,0 +1,10 @@
+export default {
+  icon: {
+    class: 'material-icons',
+    content: 'input'
+  },
+  style: 'input',
+  category: 'form',
+  drop: false,
+  drag: {}
+};