Contact Page Finally Implemented

public/input/Input.jsx

@@ -25,13 +25,44 @@ import React from 'react';
 
 import Button from './button/Button';
 import ButtonGroup from './button/ButtonGroup';
-import Form from './form/Form';
+import Form, { FormManager } from './form/Form';
 import InputGroup from './group/InputGroup';
 import Label from './label/Label';
 
 export default class Input extends React.Component {
   constructor(props) {
     super(props);
+
+    this.state = {
+      value: props.value
+    };
+  }
+
+  onChange(e, a, b) {
+    //Self explanitory
+    if(this.props.onChange) {
+      if(this.props.onChange(e) === false) return false;
+    }
+
+    if(this.props.manager) {
+      if(this.props.manager.onChange(this, e) === false) return false;
+    }
+
+    this.setState({
+      value: e.target.value
+    });
+  }
+
+  componentDidMount() {
+    if(this.props.manager) {
+      this.props.manager.addInput(this);
+    }
+  }
+
+  componentWillUnmount() {
+    if(this.props.manager) {
+      this.props.manager.removeInput(this);
+    }
   }
 
   render() {
@@ -80,11 +111,28 @@ export default class Input extends React.Component {
 
     //First we need to switch things like submit and reset
     if(type == "submit" || type == "reset" || type == "button") {
-      return <Button {...this.props} />;
+      return (<Button
+        {...this.props}
+        className={this.props.className}
+        value={this.state.value}
+      />);
+
     } else if(type == "textarea") {
-      element = <textarea {...this.props} className={innerClazzes}>{ value }</textarea>
+      element = (<textarea
+          {...this.props}
+          className={innerClazzes}
+          onChange={this.onChange.bind(this)}
+        >{ this.state.value }</textarea>
+      );
+
     } else {
-      element = <ElementType {...this.props} type={type} className={innerClazzes} />
+      element = (<ElementType
+        {...this.props}
+        onChange={this.onChange.bind(this)}
+        type={type}
+        value={ this.state.value }
+        className={innerClazzes}
+      />);
     }
 
     return (
@@ -103,6 +151,7 @@ export {
   Button,
   ButtonGroup,
   Form,
+  FormManager,
   InputGroup,
   TextArea,
   Label

public/input/form/Form.jsx

@@ -23,6 +23,7 @@
 
 import React from 'react';
 import Loader, { LoaderBackdrop } from './../../loading/Loader';
+import Input, { InputGroup, TextArea } from './../Input';
 
 export default class Form extends React.Component {
   constructor(props) {
@@ -34,7 +35,8 @@ export default class Form extends React.Component {
       loader: props.loader || false,
       loading: false,
       onSubmit: props.onSubmit,
-      contentType: props.contentType || props.encType || "application/x-www-form-urlencoded"
+      contentType: props.contentType || props.encType || "application/x-www-form-urlencoded",
+      manager: props.manager
     };
 
     //Determine action and method based off the internals
@@ -71,10 +73,25 @@ export default class Form extends React.Component {
       submitting: true
     });
 
+    //Prepare our data
+    let data;
+    if(this.props.manager) {
+      data = this.props.manager.getFormData();
+    }
+
+    if(this.state.contentType == "application/json") {
+      let dataJson = {};
+      data.forEach(function(value, key) {
+        dataJson[key] = value;
+      });
+      data = JSON.stringify(dataJson);
+    }
+
     //Prepare our request.
     fetch(this.state.action, {
       method: this.state.method,
       mode: this.state.mode,
+      body: data,
       headers: {
         "Content-Type": this.state.contentType
       }
@@ -87,21 +104,40 @@ export default class Form extends React.Component {
   }
 
   onSubmitted(response) {
+    let method = 'text';
+    let isJson = response.headers.get("Content-Type").toLowerCase().indexOf("application/json") !== -1;
+    if(isJson) method = 'json';
+
     if(!response.ok) {
-      throw Error(response.statusText);
+      let is4xx = Math.floor(response.status / 400) === 1;
+      if(is4xx) {
+        return response[method]()
+          .then(this.onErrorText.bind(this))
+          .catch(this.onError.bind(this))
+        ;
+      } else {
+        throw Error(response.statusText);
+      }
     }
 
     if(this.props.onData) return this.props.onData(response);
 
     //Handle the old fashioned way (expect json)
-    response.json().then(this.onJSON.bind(this)).catch(this.onError.bind(this));
+    response[method]()
+      .then(this.onData.bind(this))
+      .catch(this.onError.bind(this))
+    ;
   }
 
-  onJSON(response) {
+  onData(response) {
-    if(this.props.onJSON) return this.props.onJSON(response);
+    if(this.props.onSuccess) return this.props.onSuccess(response);
     console.log(response);
   }
 
+  onErrorText(e,a,b) {
+    this.onError(e,a,b);
+  }
+
   onError(e, a, b) {
     this.setState({
       loading: false,
@@ -142,3 +178,39 @@ export default class Form extends React.Component {
     );
   }
 }
+
+//FormManager
+class FormManager {
+  constructor() {
+    this.forms = [];
+    this.inputs = [];
+  }
+
+  addInput(input) {
+    this.inputs.push(input);
+  }
+
+  removeInput(input) {
+    let i = this.forms.indexOf(input);
+    if(i === -1) return;
+    this.inputs.splice(i, 1);
+  }
+
+  onChange(input, event) {
+  }
+
+  getFormData() {
+    let data = new FormData();
+
+    for(let i = 0; i < this.inputs.length; i++) {
+      let input = this.inputs[i];
+      data.append(input.props.name, input.state.value);
+    }
+
+    return data;
+  }
+}
+
+export {
+  FormManager
+};

public/keyboard/Keyboard.jsx

@@ -0,0 +1,41 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+const KEY_ESCAPE = 27;
+
+class Keyboard {
+  constructor(){}
+
+  isKeyOrCode(evt, key, code) {
+    if (typeof evt.key !== typeof undefined) {
+      return evt.key.toLowerCase() === key.toLowerCase();
+    }
+    return evt.keyCode === code;
+  }
+
+  isEscape(e) {
+    return this.isKeyOrCode(e, "Escape", KEY_ESCAPE);
+  }
+}
+
+export default new Keyboard();

public/language/en-AU.jsx

@@ -26,7 +26,6 @@ module.exports = {
   },
 
   "pages": {
-
     "about": {
       "title": "About Me",
       "banner": {
@@ -147,7 +146,13 @@ module.exports = {
       },
 
       "send": "Send",
-      "reset": "Reset"
+      "reset": "Reset",
+
+      "error": "An error has occured!",
+      "success": {
+        "heading": "Message sent!",
+        "paragraph": "Your email was sent! I should respond shortly, thanks for your patience!"
+      }
     },
 
     "privacy": {
@@ -157,6 +162,10 @@ module.exports = {
     }
   },
 
+  "modal": {
+    "close": "Close"
+  },
+
   "window": {
     "address": "Address:"
   }

public/modal/Modal.jsx

@@ -26,42 +26,89 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { Button } from './../input/Input';
+import Language from './../language/Language';
 import { openModal, closeModal } from './../actions/ModalActions';
+import { Heading4 } from './../typography/Typography';
+import Keyboard from './../keyboard/Keyboard';
 
 class Modal extends React.Component {
   constructor(props) {
     super(props);
+    this.onKeyDownBound = this.onKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.onKeyDownBound);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.onKeyDownBound);
+  }
+
+  onKeyDown(e) {
+    if(!Keyboard.isEscape(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.closeModal();
   }
 
   render() {
-    let junk = [];
-    for(let x = 0; x < 1000; x++) {
-      junk.push(<div  key={x}>Hello World</div>);
-    }
 
     //Add necessary buttons
-    let buttons;
+    let buttons = [];
-    if(this.props.buttons) buttons = this.props.button;
+    if(this.props.buttons) {
+      if(Array.isArray(buttons)) {
+        buttons.concat(this.props.buttons);
+      } else {
+        buttons.push(this.props.buttons);
+      }
+    }
+
+    if(this.props.close) {
+      buttons.push(<Button key="close" onClick={this.props.closeModal}>{ Language.get("modal.close") }</Button>);
+    }
+
+    //Inner divs
+    let heading,body,footer;
+    if(this.props.title) {
+      heading = (
+        <div className="o-modal__box-heading">
+          <Heading4 className="o-modal__title">
+            { this.props.title }
+          </Heading4>
+        </div>
+      );
+    }
+
+    if(this.props.children) {
+      body = (
+        <div className="o-modal__box-body">
+          { this.props.children }
+        </div>
+      );
+    }
+
+    if(buttons) {
+      footer = (
+        <div className="o-modal__box-footer">
+          { buttons }
+        </div>
+      );
+    }
 
     //Create our modal contents
     let contents = (
       <div className="o-modal">
         <div className="o-modal__inner">
+          {/* Provides both a good overlay, and a nice clickable area  */}
           <div className="o-modal__backdrop" onClick={this.props.closeModal}>
           </div>
 
-          <div className="o-modal__box">
+          {/* Box itself, has a background and a shadow */}
-            <div className="o-modal__box-inner">
+          <div className={"o-modal__box" + (this.props.large ? " is-large":"")}>
-              <div className="o-modal__box-body">
+            { heading }
-                <div className="o-modal__box-body-inner">
+            { body }
-                  { junk }
+            { footer }
-                </div>
-              </div>
-
-              <div className="o-modal__box-footer">
-                { buttons }
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -96,7 +143,8 @@ class Modal extends React.Component {
 
 const mapStateToProps = (state) => {
   return {
-    modal: state.modal
+    modal: state.modal,
+    language: state.language
   };
 }
 

public/page/contact/ContactPage.jsx

@@ -23,33 +23,142 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import Page, { PageBoundary } from './../Page';
-import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input';
 import Language from './../../language/Language';
 import ElementScrollFader from './../../animation/fade/ElementScrollFader';
 import ContentBox from './../../content/ContentBox';
-import { Title, Paragraph } from './../../typography/Typography';
+import { Title, Heading1, Paragraph } from './../../typography/Typography';
 import Forms from './../../../common/Forms';
+import Input, {
+  Form,
+  FormManager,
+  InputGroup,
+  TextArea,
+  Label,
+  ButtonGroup
+} from './../../input/Input';
 import Section, {
   BodySection,
   ClearSection,
   SplitSection,
   Split
 } from './../../section/Section';
+import { openModal } from './../../actions/ModalActions';
+import Modal from './../../modal/Modal';
 
 class ContactPage extends React.Component {
   constructor(props) {
     super(props);
+
+    //Form Manager (For the form and elements)
+    this.manager = new FormManager();
+
+    this.state = {
+      sent: false
+    };
+  }
+
+  onSuccess(data) {
+    if(data !== true) return this.onError(data);
+    this.setState({
+      sent: true
+    });
+  }
+
+  onError(e, a, b) {
+    this.props.openModal(
+      <Modal close title={Language.get("pages.contact.error")}>
+        { e }
+      </Modal>
+    );
   }
 
   render() {
+
+    //Form
+    let inners;
+    if(this.state.sent) {
+      //Sent Display
+      inners = (
+        <ElementScrollFader from="bottom">
+          <ContentBox box className="u-text-center">
+            <Heading1>{ Language.get("pages.contact.success.heading") }</Heading1>
+            <Paragraph>{ Language.get("pages.contact.success.paragraph") }</Paragraph>
+          </ContentBox>
+        </ElementScrollFader>
+      );
+    } else {
+      //Form
+      inners = (
+        <ElementScrollFader from="right">
+          <BodySection>
+            <Form
+              post="/api/contact/send"
+              contentType="application/json"
+              ajax
+              loader
+              onSuccess={ this.onSuccess.bind(this) }
+              onError={ this.onError.bind(this) }
+              manager={ this.manager }
+            >
+              <InputGroup test="First Group">
+                <Label htmlFor="name">
+                  { Language.get("pages.contact.name.label") }
+                </Label>
+                <Input
+                  name="name"
+                  type="text"
+                  placeholder={ Language.get("pages.contact.name.placeholder") }
+                  required={ Forms.contact.name.required }
+                  maxLength={ Forms.contact.name.maxLength }
+                  manager={ this.manager }
+                />
+              </InputGroup>
+
+              <InputGroup >
+                <Label htmlFor="email">
+                  { Language.get("pages.contact.email.label") }
+                </Label>
+                <Input
+                  name="email"
+                  type="email"
+                  placeholder={ Language.get("pages.contact.email.placeholder") }
+                  required={ Forms.contact.email.required }
+                  maxLength={ Forms.contact.email.maxLength }
+                  manager={ this.manager }
+                />
+              </InputGroup>
+
+              <InputGroup>
+                <Label> htmlFor="message">
+                  { Language.get("pages.contact.message.label") }
+                </Label>
+                <TextArea
+                  name="message"
+                  placeholder={ Language.get("pages.contact.message.placeholder") }
+                  rows="8"
+                  className="p-contact-page__message"
+                  required={ Forms.contact.message.required }e
+                  maxLength={ Forms.contact.message.maxLength }
+                  manager={ this.manager }
+                />
+              </InputGroup>
+
+              <ButtonGroup>
+                <Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
+                <Input type="reset" value={ Language.get("pages.contact.reset") } />
+              </ButtonGroup>
+            </Form>
+          </BodySection>
+        </ElementScrollFader>
+      );
+    }
+
     return (
       <Page style="contact-page" className="p-contact-page" title={ Language.get("pages.contact.title") }>
-
         <ClearSection />
-
         <PageBoundary small>
-
           <ElementScrollFader from="left">
             <ContentBox box className="u-text-center">
               <Title>{ Language.get("pages.contact.heading") }</Title>
@@ -62,49 +171,8 @@ class ContactPage extends React.Component {
           <br />
           <br />
 
-          <ElementScrollFader from="right">
+          { inners }
-            <BodySection>
-              <Form post="/api/contact/send" ajax loader>
-                <InputGroup>
-                  <Label>{ Language.get("pages.contact.name.label") }</Label>
-                  <Input
-                    type="text"
-                    placeholder={ Language.get("pages.contact.name.placeholder") }
-                    required={ Forms.contact.name.required }
-                    maxLength={ Forms.contact.name.maxLength }
-                  />
-                </InputGroup>
-
-                <InputGroup >
-                  <Label>{ Language.get("pages.contact.email.label") }</Label>
-                  <Input
-                    type="email"
-                    placeholder={ Language.get("pages.contact.email.placeholder") }
-                    required={ Forms.contact.email.required }
-                    maxLength={ Forms.contact.email.maxLength }
-                  />
-                </InputGroup>
-
-                <InputGroup>
-                  <Label>{ Language.get("pages.contact.message.label") }</Label>
-                  <TextArea
-                    placeholder={ Language.get("pages.contact.message.placeholder") }
-                    rows="8"
-                    className="p-contact-page__message"
-                    required={ Forms.contact.message.required }
-                    maxLength={ Forms.contact.message.maxLength }
-                  />
-                </InputGroup>
-
-                <ButtonGroup>
-                  <Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
-                  <Input type="reset" value={ Language.get("pages.contact.reset") } />
-                </ButtonGroup>
-              </Form>
-            </BodySection>
-          </ElementScrollFader>
         </PageBoundary>
-
         <ClearSection />
       </Page>
     );
@@ -117,4 +185,10 @@ const mapStateToProps = function(state) {
   }
 }
 
-export default connect(mapStateToProps)(ContactPage);
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    openModal: openModal
+  },dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ContactPage);

public/page/home/Homepage.jsx

@@ -42,7 +42,7 @@ class Homepage extends React.Component {
   testModal() {
     console.log("oof");
     this.props.openModal(
-      <Modal>
+      <Modal close>
         Hello Modal
       </Modal>
     );

public/styles/components/_app.scss

@@ -14,4 +14,8 @@
   width: 100%;
   overflow-y: scroll;
   overflow-x: hidden;
+
+  &.is-modal-open {
+    overflow: hidden;
+  }
 }

public/styles/objects/_modal.scss

@@ -12,7 +12,6 @@
  */
 $o-modal--backdrop: rgba(0, 0, 0, 0.7);
 $o-modal--background: white;
-$o-modal--padding: 0.5em;
 
 $o-modal--transition: 0.2s $s-animation--ease-out;
 
@@ -28,10 +27,11 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
     position: relative;
     width: 100%;
     height: 100%;
+    overflow: auto;
   }
 
   &__backdrop {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: 0;
     width: 100%;
@@ -44,60 +44,41 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
   }
 
   &__box {
-    @include t-absolute-center-x-y();
+    @extend %t-dp--shadow;
+    background: $o-modal--background;
+    position: relative;
     width: 100%;
-    height: 100%;
+    margin: 5em auto;
-    max-width: 95%;
-    max-height: 95%;
 
-    &-inner {
+    //Transition properties
-      position: relative;
+    transition: all #{$o-modal--transition};
-      @extend %t-flexbox;
+    @include t-scale(0.4);
-      @include t-flex-wrap(wrap);
+    opacity: 0;
-      @include t-flex-direction(column);
-      @include t-align-items(flex-start);
-      @include t-align-content(flex-start);
-      @extend %t-dp--shadow;
-      width: 100%;
-      height: 100%;
-      background: $o-modal--background;
-
-      //Transition properties
-      transition: all #{$o-modal--transition};
-      @include t-scale(0.4);
-      opacity: 0;
-    }
-
-    &-body {
-      position: relative;
-      @include t-flex-grow(1);
-      width: 100%;
-
-      /* Unfortunately flex can only get us half way there */
-      &-inner {//Hacks our content so it will never overflow its container.
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        padding: $o-modal--padding;
-      }
-    }
 
+    &-heading,
+    &-body,
     &-footer {
-      width: 100%;
+      padding: 1em;
-      padding: $o-modal--padding;
     }
   }
 
+  &__title {
+    margin: 1em 0 0.5em;
+  }
+
+
+  //Media Queries
   @include t-media-query($s-xsmall-up) {
     &__box {
-      width: 800px;
+      max-width: 600px;
-      height: 600px;
+
+      &.is-large {
+        max-width: 900px;
+      }
     }
   }
 
+
   //Transition related
   &__transition {
     &-container {}//Top level container
@@ -112,7 +93,7 @@ $o-modal--transition: 0.2s $s-animation--ease-out;
           opacity: 1;
         }
 
-        .o-modal__box-inner {
+        .o-modal__box {
           @include t-scale(1);
           opacity: 1;
         }

public/typography/Heading.jsx

@@ -31,7 +31,7 @@ const Heading = (props) => {
 
 
   return (
-    <CustomTag className={clazz} {...props} />
+    <CustomTag {...props} className={clazz} />
   );
 }
 export default Heading;