Initial commit

src/common/pages/InviteConfirmation/form.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {Form, Input, Button, Select, DatePicker, Icon} from 'antd'
+const {Option, OptGroup} = Select;
+
+const FormItem = Form.Item;
+
+@inject('appstate')
+@observer
+class InviteConfirmationForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {};
+    this.defaultState = Object.assign({}, this.state);
+  }
+
+  componentDidMount() {
+    console.log('InviteConfirmationForm loaded!')
+  }
+
+  render() {
+
+    const {getFieldDecorator} = this.props.form;
+
+    const formItemLayout = {
+      labelCol: {
+        xs: {span: 24},
+        sm: {span: 6},
+      },
+      wrapperCol: {
+        xs: {span: 24},
+        sm: {span: 14},
+      },
+    };
+
+    const tailFormItemLayout = {
+      wrapperCol: {
+        xs: {
+          span: 24,
+          offset: 0,
+        },
+        sm: {
+          span: 14,
+          offset: 6,
+        },
+      },
+    };
+
+    const formItemLayoutWithOutLabel = {
+      wrapperCol: {
+        xs: {span: 24, offset: 0},
+        sm: {span: 14, offset: 6},
+      },
+    };
+
+    const formItemLayoutFull = {
+      wrapperCol: {
+        xs: {span: 24, offset: 0},
+        sm: {span: 24, offset: 0},
+      },
+    };
+
+    return (
+      <Form>
+        <FormItem label={"Your new Password"}>
+          {getFieldDecorator('password', {
+            rules: [
+              {
+                required: true,
+                message: 'Cannot be empty',
+              },
+              {
+                min: 4,
+                message: 'at least 4 character'
+              }
+            ]
+          })(<Input type={"password"} />)}
+        </FormItem>
+      </Form>
+    )
+  }
+}
+
+export default Form.create()(InviteConfirmationForm);

src/common/pages/InviteConfirmation/index.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import {observer, inject} from 'mobx-react';
+import {
+  Form,
+  Input,
+  Button,
+  Select,
+  DatePicker,
+  Icon,
+  message,
+  Spin
+} from 'antd'
+import InviteForm from './form';
+import css from 'reactcss';
+import {LINKS} from './../../routes';
+import './style.scss';
+
+const {Option, OptGroup} = Select;
+const FormItem = Form.Item;
+
+@inject('appstate')
+@observer
+export default class InviteConfirmationComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      isLoading: false
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.style = css({
+      default: {
+        container: {
+          minHeight: '100vh'
+        },
+        loginForm: {
+          paddingTop: '15%'
+        }
+      }
+    })
+    this.authStore = props.appstate.auth;
+  }
+
+  componentDidMount() {
+    console.log('InviteConfirmationComponent loaded!');
+    this.query = this
+      .props
+      .location
+      .search
+      .substr(1)
+      .split('&')
+      .reduce((q, value) => {
+        const [k,
+          v] = value.split('=');
+        q[k] = v;
+        return q;
+      }, {});
+  }
+
+  confirm() {
+    let message = message;
+    this.setState({isLoading: true})
+    this
+      .formInstance
+      .validateFields((err, fields) => {
+        if (err) {
+          return console.error(err)
+        }
+
+        setTimeout(() => {
+          this
+            .authStore
+            .acceptInvite(this.query.token, fields.password)
+            .then(res => {
+              // message.success(res.message);
+              this
+                .props
+                .history
+                .push(LINKS.LOGIN);
+            })
+            .catch(err => {
+              console.log(err);
+              message.error(err.message);
+              this.setState({isLoading: false})
+            });
+        }, 1000);
+      })
+  }
+
+  render() {
+
+    return (
+      <div className="login" style={this.style.container}>
+        <div className="login-box">
+          <Spin spinning={this.state.isLoading}>
+            <div className="header">
+              <div>
+                <img alt="logo" src="/assets/images/green.png"/>
+              </div>
+              <p>Accelerate</p>
+            </div>
+            <div style={{
+              textAlign: "center"
+            }}>
+              <InviteForm ref={form => this.formInstance = form}/>
+              <Button
+                style={{
+                width: "100%",
+                marginBottom: 10
+              }}
+                type="primary"
+                size="large"
+                onClick={e => this.confirm()}>Confirm</Button>
+            </div>
+          </Spin>
+        </div>
+      </div>
+    )
+  }
+}

src/common/pages/InviteConfirmation/style.scss

@@ -0,0 +1,41 @@
+.invite-confirmation {
+    .background {
+        height: 100%;
+        overflow-y: hidden;
+        background-color: #f8f8f8;
+    }
+    .ant-form-explain {
+        text-align: left;
+    }
+    .login-box {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -160px 0 0 -160px;
+        width: 320px;
+        height: 320px;
+        padding: 36px;
+        box-shadow: 0 0 100px rgba(0, 0, 0, .08);
+        .header {
+            text-align: center;        
+            cursor: pointer;
+            margin-bottom: 24px;
+            img {
+                width: 40px;
+                margin-right: 8px;
+            }
+            span {
+                vertical-align: text-bottom;
+                font-size: 16px;
+                text-transform: uppercase;
+                display: inline-block;
+            }
+             p {
+                font-size: 16px;
+                text-transform: uppercase;
+               
+            }
+        
+        }
+    }
+}