8 files changed, 973 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Forms/LockForm.js b/front/odiparpack/app/components/Forms/LockForm.js
new file mode 100644
index 0000000..c667809
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/LockForm.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Field, reduxForm } from 'redux-form/immutable';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import Help from '@material-ui/icons/Help';
+import dummy from 'ba-api/dummyContents';
+import avatarApi from 'ba-api/avatars';
+import {
+  Button,
+  Popover,
+  FormControl,
+  IconButton,
+  Typography,
+  InputAdornment,
+  Paper,
+  Avatar,
+} from '@material-ui/core';
+import { TextFieldRedux } from './ReduxFormMUI';
+import styles from './user-jss';
+
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+
+class LockForm extends React.Component {
+  state = {
+    anchorEl: null,
+  };
+
+  handleShowHint = event => {
+    this.setState({
+      anchorEl: event.currentTarget,
+    });
+  };
+
+  handleClose = () => {
+    this.setState({
+      anchorEl: null,
+    });
+  };
+
+  render() {
+    const {
+      classes,
+      handleSubmit,
+      pristine,
+      submitting
+    } = this.props;
+    const { anchorEl } = this.state;
+    return (
+      <div className={classes.formWrap}>
+        <Paper className={classes.lockWrap}>
+          <form onSubmit={handleSubmit}>
+            <Avatar alt="John Doe" src={avatarApi[6]} className={classes.avatar} />
+            <Typography className={classes.userName} variant="h4">{dummy.user.name}</Typography>
+            <div>
+              <FormControl className={classes.formControl}>
+                <Field
+                  name="password"
+                  component={TextFieldRedux}
+                  type="password"
+                  label="Your Password"
+                  required
+                  validate={required}
+                  className={classes.field}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="Helper Hint"
+                          onClick={this.handleShowHint}
+                        >
+                          <Help />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
+                />
+              </FormControl>
+              <Popover
+                open={Boolean(anchorEl)}
+                anchorEl={anchorEl}
+                onClose={this.handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'center',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
+              >
+                <Typography className={classes.hint}>Hint: Type anything to unlock!</Typography>
+              </Popover>
+            </div>
+            <div className={classes.btnArea}>
+              <Button fullWidth variant="contained" color="primary" type="submit">
+                Continue
+                <ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
+              </Button>
+            </div>
+          </form>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+LockForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+};
+
+const LockFormReduxed = reduxForm({
+  form: 'immutableELockFrm',
+  enableReinitialize: true,
+})(LockForm);
+
+export default withStyles(styles)(LockFormReduxed);
diff --git a/front/odiparpack/app/components/Forms/LoginForm.js b/front/odiparpack/app/components/Forms/LoginForm.js
new file mode 100644
index 0000000..d652480
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/LoginForm.js
@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Field, reduxForm } from 'redux-form/immutable';
+import { connect } from 'react-redux';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import AllInclusive from '@material-ui/icons/AllInclusive';
+import Brightness5 from '@material-ui/icons/Brightness5';
+import People from '@material-ui/icons/People';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import { Button, IconButton, InputAdornment, FormControl, FormControlLabel } from '@material-ui/core';
+import styles from './user-jss';
+import { TextFieldRedux, CheckboxRedux } from './ReduxFormMUI';
+import { ContentDivider } from '../Divider';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : undefined
+);
+
+class LoginForm extends React.Component {
+  state = {
+    showPassword: false
+  }
+
+  handleClickShowPassword = () => {
+    this.setState({ showPassword: !this.state.showPassword });
+  };
+
+  handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  render() {
+    const {
+      classes,
+      handleSubmit,
+      pristine,
+      submitting
+    } = this.props;
+    return (
+      <div className={classes.formWrap}>
+        <PapperBlock whiteBg title="Login" desc="">
+          <form onSubmit={handleSubmit}>
+            <div>
+              <FormControl className={classes.formControl}>
+                <Field
+                  name="email"
+                  component={TextFieldRedux}
+                  placeholder="Your Email"
+                  label="Your Email"
+                  required
+                  validate={[required, email]}
+                  className={classes.field}
+                />
+              </FormControl>
+            </div>
+            <div>
+              <FormControl className={classes.formControl}>
+                <Field
+                  name="password"
+                  component={TextFieldRedux}
+                  type={this.state.showPassword ? 'text' : 'password'}
+                  label="Your Password"
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="Toggle password visibility"
+                          onClick={this.handleClickShowPassword}
+                          onMouseDown={this.handleMouseDownPassword}
+                        >
+                          {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
+                  required
+                  validate={required}
+                  className={classes.field}
+                />
+              </FormControl>
+            </div>
+            <div className={classes.btnArea}>
+              <FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} />} label="Remember" />
+              <Button variant="contained" color="primary" type="submit">
+                Continue
+                <ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
+              </Button>
+            </div>
+            <ContentDivider content="OR" />
+            <div className={classes.btnArea}>
+              <Button variant="contained" size="small" className={classes.redBtn} type="button">
+                <AllInclusive className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 1
+              </Button>
+              <Button variant="contained" size="small" className={classes.blueBtn} type="button">
+                <Brightness5 className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 2
+              </Button>
+              <Button variant="contained" size="small" className={classes.cyanBtn} type="button">
+                <People className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 3
+              </Button>
+            </div>
+            <div className={classes.footer}>
+              Cannot Login?
+              <Button size="small" color="secondary" className={classes.button}>Forgot Password</Button>
+              |
+              {' '}
+              <Button size="small" color="secondary" className={classes.button}>Register</Button>
+            </div>
+          </form>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+LoginForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+};
+
+const LoginFormReduxed = reduxForm({
+  form: 'immutableExample',
+  enableReinitialize: true,
+})(LoginForm);
+
+const reducer = 'login';
+const FormInit = connect(
+  state => ({
+    force: state,
+    initialValues: state.getIn([reducer, 'usersLogin'])
+  }),
+)(LoginFormReduxed);
+
+export default withStyles(styles)(FormInit);
diff --git a/front/odiparpack/app/components/Forms/MaterialDropZone.js b/front/odiparpack/app/components/Forms/MaterialDropZone.js
new file mode 100644
index 0000000..c62b3fd
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/MaterialDropZone.js
@@ -0,0 +1,202 @@
+import React from 'react';
+import Dropzone from 'react-dropzone';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import FileIcon from '@material-ui/icons/Description';
+import ActionDelete from '@material-ui/icons/Delete';
+import IconButton from '@material-ui/core/IconButton';
+import Snackbar from '@material-ui/core/Snackbar';
+import CloudUpload from '@material-ui/icons/CloudUpload';
+import { lighten } from '@material-ui/core/styles/colorManipulator';
+import 'ba-styles/vendors/react-dropzone/react-dropzone.css';
+import isImage from './helpers/helpers.js';
+
+const styles = theme => ({
+  dropItem: {
+    borderColor: theme.palette.secondary.main,
+    background: lighten(theme.palette.secondary.light, 0.9),
+    borderRadius: 2
+  },
+  uploadIconSize: {
+    width: 51,
+    height: 51,
+    color: theme.palette.secondary.main,
+    margin: '0 auto'
+  },
+  rightIcon: {
+    marginLeft: theme.spacing(1),
+  },
+  button: {
+    marginTop: 20
+  }
+});
+
+class MaterialDropZone extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      openSnackBar: false,
+      errorMessage: '',
+      files: this.props.files, // eslint-disable-line
+      acceptedFiles: this.props.acceptedFiles // eslint-disable-line
+    };
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  onDrop(filesVal) {
+    const { files } = this.state;
+    const { filesLimit } = this.props;
+    let oldFiles = files;
+    const filesLimitVal = filesLimit || '3';
+    oldFiles = oldFiles.concat(filesVal);
+    if (oldFiles.length > filesLimit) {
+      this.setState({
+        openSnackBar: true,
+        errorMessage: 'Cannot upload more than ' + filesLimitVal + ' items.',
+      });
+    } else {
+      this.setState({ files: oldFiles });
+    }
+  }
+
+  onDropRejected() {
+    this.setState({
+      openSnackBar: true,
+      errorMessage: 'File too big, max size is 3MB',
+    });
+  }
+
+  handleRequestCloseSnackBar = () => {
+    this.setState({
+      openSnackBar: false,
+    });
+  };
+
+  handleRemove(file, fileIndex) {
+    const thisFiles = this.state.files; // eslint-disable-line
+    // This is to prevent memory leaks.
+    window.URL.revokeObjectURL(file.preview);
+
+    thisFiles.splice(fileIndex, 1);
+    this.setState({ files: thisFiles });
+  }
+
+  render() {
+    const {
+      classes,
+      showPreviews,
+      maxSize,
+      text,
+      showButton,
+      filesLimit,
+      ...rest
+    } = this.props;
+
+    const {
+      acceptedFiles,
+      files,
+      openSnackBar,
+      errorMessage
+    } = this.state;
+    const fileSizeLimit = maxSize || 3000000;
+    const deleteBtn = (file, index) => (
+      <div className="middle">
+        <IconButton onClick={() => this.handleRemove(file, index)}>
+          <ActionDelete className="removeBtn" />
+        </IconButton>
+      </div>
+    );
+    const previews = filesArray => filesArray.map((file, index) => {
+      const base64Img = URL.createObjectURL(file);
+      if (isImage(file)) {
+        return (
+          <div key={index.toString()}>
+            <div className="imageContainer col fileIconImg">
+              <figure className="imgWrap"><img className="smallPreviewImg" src={base64Img} alt="preview" /></figure>
+              {deleteBtn(file, index)}
+            </div>
+          </div>
+        );
+      }
+      return (
+        <div key={index.toString()}>
+          <div className="imageContainer col fileIconImg">
+            <FileIcon className="smallPreviewImg" alt="preview" />
+            {deleteBtn(file, index)}
+          </div>
+        </div>
+      );
+    });
+    let dropzoneRef;
+    return (
+      <div>
+        <Dropzone
+          accept={acceptedFiles.join(',')}
+          onDrop={this.onDrop}
+          onDropRejected={this.onDropRejected}
+          acceptClassName="stripes"
+          rejectClassName="rejectStripes"
+          maxSize={fileSizeLimit}
+          ref={(node) => { dropzoneRef = node; }}
+          {...rest}
+        >
+          {({ getRootProps, getInputProps }) => (
+            <div {...getRootProps()} className={classNames(classes.dropItem, 'dropZone')}>
+              <div className="dropzoneTextStyle">
+                <input {...getInputProps()} />
+                <p className="dropzoneParagraph">{text}</p>
+                <div className={classes.uploadIconSize}>
+                  <CloudUpload className={classes.uploadIconSize} />
+                </div>
+              </div>
+            </div>
+          )}
+          {/* end */}
+        </Dropzone>
+        {showButton && (
+          <Button
+            className={classes.button}
+            fullWidth
+            variant="contained"
+            onClick={() => {
+              dropzoneRef.open();
+            }}
+            color="secondary"
+          >
+            Click to upload file(s)
+          </Button>
+        )}
+        <div className="row preview">
+          {showPreviews && previews(files)}
+        </div>
+        <Snackbar
+          open={openSnackBar}
+          message={errorMessage}
+          autoHideDuration={4000}
+          onClose={this.handleRequestCloseSnackBar}
+        />
+      </div>
+    );
+  }
+}
+
+MaterialDropZone.propTypes = {
+  files: PropTypes.array.isRequired,
+  text: PropTypes.string.isRequired,
+  acceptedFiles: PropTypes.array,
+  showPreviews: PropTypes.bool.isRequired,
+  showButton: PropTypes.bool,
+  maxSize: PropTypes.number.isRequired,
+  filesLimit: PropTypes.number.isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+MaterialDropZone.defaultProps = {
+  acceptedFiles: [],
+  showButton: false,
+};
+
+export default withStyles(styles)(MaterialDropZone);
diff --git a/front/odiparpack/app/components/Forms/ReduxFormMUI.js b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
new file mode 100644
index 0000000..383a717
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TextField from '@material-ui/core/TextField';
+import Select from '@material-ui/core/Select';
+import Checkbox from '@material-ui/core/Checkbox';
+import Switch from '@material-ui/core/Switch';
+
+/* Textfield */
+export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => (
+  <TextField
+    {...rest}
+    {...input}
+    error={touched && Boolean(error)}
+  />
+);
+
+TextFieldRedux.propTypes = {
+  input: PropTypes.object.isRequired,
+  meta: PropTypes.object,
+};
+
+TextFieldRedux.defaultProps = {
+  meta: null,
+};
+/* End */
+
+/* Select */
+export const SelectRedux = ({ input, children, ...rest }) => (
+  <Select
+    {...input}
+    {...rest}
+  >
+    {children}
+  </Select>
+);
+
+SelectRedux.propTypes = {
+  input: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};
+/* End */
+
+/* Checkbox */
+export const CheckboxRedux = ({ input, ...rest }) => (
+  <Checkbox
+    checked={input.value === '' ? false : input.value}
+    {...input}
+    {...rest}
+  />
+);
+
+CheckboxRedux.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+/* End */
+
+/* Switch */
+export const SwitchRedux = ({ input, ...rest }) => (
+  <Switch
+    checked={input.value === '' ? false : input.value}
+    {...input}
+    {...rest}
+  />
+);
+
+SwitchRedux.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+/* End */
diff --git a/front/odiparpack/app/components/Forms/RegisterForm.js b/front/odiparpack/app/components/Forms/RegisterForm.js
new file mode 100644
index 0000000..2ac4c65
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/RegisterForm.js
@@ -0,0 +1,174 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Field, reduxForm } from 'redux-form/immutable';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import AllInclusive from '@material-ui/icons/AllInclusive';
+import Brightness5 from '@material-ui/icons/Brightness5';
+import People from '@material-ui/icons/People';
+import { Button, FormControl, FormControlLabel, Tabs, Tab } from '@material-ui/core';
+import styles from './user-jss';
+import { TextFieldRedux, CheckboxRedux } from './ReduxFormMUI';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : undefined
+);
+
+const passwordsMatch = (value, allValues) => {
+  console.log(value, allValues.get('password'));
+  if (value !== allValues.get('password')) {
+    return 'Passwords dont match';
+  }
+  return undefined;
+};
+
+class RegisterForm extends React.Component {
+  state = {
+    tab: 0,
+  };
+
+  handleClickShowPassword = () => {
+    this.setState({ showPassword: !this.state.showPassword });
+  };
+
+  handleMouseDownPassword = event => {
+    event.preventDefault();
+  };
+
+  handleChangeTab = (event, value) => {
+    this.setState({ tab: value });
+  };
+
+  render() {
+    const {
+      classes,
+      handleSubmit,
+      pristine,
+      submitting
+    } = this.props;
+    const { tab } = this.state;
+    return (
+      <div className={classes.formWrap}>
+        <PapperBlock whiteBg title="Create New Account" desc="">
+          <Tabs
+            value={this.state.tab}
+            onChange={this.handleChangeTab}
+            indicatorColor="primary"
+            textColor="primary"
+            centered
+            className={classes.tab}
+          >
+            <Tab label="With Email" />
+            <Tab label="With Social Network" />
+          </Tabs>
+          {tab === 0
+            && (
+              <form onSubmit={handleSubmit}>
+                <div>
+                  <FormControl className={classes.formControl}>
+                    <Field
+                      name="name"
+                      component={TextFieldRedux}
+                      placeholder="Username"
+                      label="Username"
+                      required
+                      className={classes.field}
+                    />
+                  </FormControl>
+                </div>
+                <div>
+                  <FormControl className={classes.formControl}>
+                    <Field
+                      name="email"
+                      component={TextFieldRedux}
+                      placeholder="Your Email"
+                      label="Your Email"
+                      required
+                      validate={[required, email]}
+                      className={classes.field}
+                    />
+                  </FormControl>
+                </div>
+                <div>
+                  <FormControl className={classes.formControl}>
+                    <Field
+                      name="password"
+                      component={TextFieldRedux}
+                      type="password"
+                      label="Your Password"
+                      required
+                      validate={[required, passwordsMatch]}
+                      className={classes.field}
+                    />
+                  </FormControl>
+                </div>
+                <div>
+                  <FormControl className={classes.formControl}>
+                    <Field
+                      name="passwordConfirm"
+                      component={TextFieldRedux}
+                      type="password"
+                      label="Re-type Password"
+                      required
+                      validate={[required, passwordsMatch]}
+                      className={classes.field}
+                    />
+                  </FormControl>
+                </div>
+                <div className={classNames(classes.btnArea, classes.noMargin)}>
+                  <div className={classes.optArea}>
+                    <FormControlLabel control={<Field name="checkbox" component={CheckboxRedux} className={classes.agree} />} label="Agree with" />
+                    <a href="#" className={classes.link}>Terms &amp; Condition</a>
+                  </div>
+                  <Button variant="contained" color="primary" type="submit">
+                  Continue
+                    <ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
+                  </Button>
+                </div>
+              </form>
+            )
+          }
+          {tab === 1
+            && (
+              <div>
+                <Button fullWidth variant="contained" size="large" className={classNames(classes.redBtn, classes.socMedFull)} type="button">
+                  <AllInclusive className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 1
+                </Button>
+                <Button fullWidth variant="contained" size="large" className={classNames(classes.blueBtn, classes.socMedFull)} type="button">
+                  <Brightness5 className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 2
+                </Button>
+                <Button fullWidth variant="contained" size="large" className={classes.cyanBtn} type="button">
+                  <People className={classNames(classes.leftIcon, classes.iconSmall)} />
+                Socmed 3
+                </Button>
+              </div>
+            )
+          }
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+RegisterForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+};
+
+const RegisterFormReduxed = reduxForm({
+  form: 'immutableExample',
+  enableReinitialize: true,
+})(RegisterForm);
+
+export default withStyles(styles)(RegisterFormReduxed);
diff --git a/front/odiparpack/app/components/Forms/ResetForm.js b/front/odiparpack/app/components/Forms/ResetForm.js
new file mode 100644
index 0000000..95bf93b
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/ResetForm.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { Field, reduxForm } from 'redux-form/immutable';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import { Button, FormControl } from '@material-ui/core';
+import styles from './user-jss';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import { TextFieldRedux } from './ReduxFormMUI';
+
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : undefined
+);
+
+class ResetForm extends React.Component {
+  render() {
+    const {
+      classes,
+      handleSubmit,
+      pristine,
+      submitting
+    } = this.props;
+    return (
+      <div className={classes.formWrap}>
+        <PapperBlock whiteBg title="Reset Password" desc="We will send reset password link to Your Email">
+          <form onSubmit={handleSubmit}>
+            <div>
+              <FormControl className={classes.formControl}>
+                <Field
+                  name="email"
+                  component={TextFieldRedux}
+                  placeholder="Your Email"
+                  label="Your Email"
+                  required
+                  validate={[required, email]}
+                  className={classes.field}
+                />
+              </FormControl>
+            </div>
+            <div className={classes.btnArea}>
+              <Button variant="contained" color="primary" type="submit">
+                Send ResetLink
+                <ArrowForward className={classNames(classes.rightIcon, classes.iconSmall)} disabled={submitting || pristine} />
+              </Button>
+            </div>
+          </form>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+ResetForm.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  pristine: PropTypes.bool.isRequired,
+  submitting: PropTypes.bool.isRequired,
+};
+
+const ResetFormReduxed = reduxForm({
+  form: 'immutableEResetFrm',
+  enableReinitialize: true,
+})(ResetForm);
+
+export default withStyles(styles)(ResetFormReduxed);
diff --git a/front/odiparpack/app/components/Forms/helpers/helpers.js b/front/odiparpack/app/components/Forms/helpers/helpers.js
new file mode 100644
index 0000000..99c953a
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/helpers/helpers.js
@@ -0,0 +1,8 @@
+export default function isImage(file) {
+  const fileName = file.name || file.path;
+  const suffix = fileName.substr(fileName.indexOf('.') + 1).toLowerCase();
+  if (suffix === 'jpg' || suffix === 'jpeg' || suffix === 'bmp' || suffix === 'png') {
+    return true;
+  }
+  return false;
+}
diff --git a/front/odiparpack/app/components/Forms/user-jss.js b/front/odiparpack/app/components/Forms/user-jss.js
new file mode 100644
index 0000000..5b9ae4a
--- /dev/null
+++ b/front/odiparpack/app/components/Forms/user-jss.js
@@ -0,0 +1,179 @@
+import { cyan, indigo, red } from '@material-ui/core/colors';
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    width: '100%',
+    zIndex: 1,
+    position: 'relative'
+  },
+  container: {
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    [theme.breakpoints.down('md')]: {
+      overflow: 'hidden'
+    },
+  },
+  formControl: {
+    width: '100%',
+    marginBottom: theme.spacing(3)
+  },
+  loginWrap: {
+    [theme.breakpoints.up('md')]: {
+      width: 860
+    },
+  },
+  formWrap: {
+    [theme.breakpoints.up('md')]: {
+      marginTop: -24
+    },
+  },
+  btnArea: {
+    justifyContent: 'space-between',
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: theme.spacing(3),
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+      '& button': {
+        width: '100%',
+        margin: 5
+      }
+    },
+  },
+  noMargin: {
+    margin: 0
+  },
+  optArea: {
+    justifyContent: 'space-between',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '60%'
+    },
+  },
+  redBtn: {
+    color: theme.palette.getContrastText(red[500]),
+    backgroundColor: red[500],
+    '&:hover': {
+      backgroundColor: red[700],
+    },
+  },
+  blueBtn: {
+    color: theme.palette.getContrastText(indigo[500]),
+    backgroundColor: indigo[500],
+    '&:hover': {
+      backgroundColor: indigo[700],
+    },
+  },
+  cyanBtn: {
+    color: theme.palette.getContrastText(cyan[700]),
+    backgroundColor: cyan[500],
+    '&:hover': {
+      backgroundColor: cyan[700],
+    },
+  },
+  leftIcon: {
+    marginRight: theme.spacing(1),
+  },
+  rightIcon: {
+    marginLeft: theme.spacing(1),
+  },
+  iconSmall: {
+    fontSize: 20,
+  },
+  footer: {
+    textAlign: 'center',
+    padding: 5,
+    background: theme.palette.grey[100],
+    fontSize: 14,
+    position: 'relative'
+  },
+  welcomeWrap: {
+    position: 'relative'
+  },
+  welcome: {
+    background: theme.palette.secondary.light,
+    position: 'absolute',
+    width: '100%',
+    height: 'calc(100% + 30px)',
+    padding: '20px 50px',
+    top: -15,
+    left: 2,
+    boxShadow: theme.shadows[5],
+    borderRadius: 2,
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
+  brand: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    position: 'relative',
+    marginBottom: 20,
+    '& img': {
+      width: 32
+    },
+    '& h3': {
+      fontSize: 18,
+      margin: 0,
+      paddingLeft: 10,
+      fontWeight: 500,
+      color: theme.palette.grey[700]
+    }
+  },
+  brandText: {
+    marginTop: 10,
+    color: 'rgba(0, 0, 0, 0.54)',
+  },
+  decoBottom: {
+    fontSize: 480,
+    position: 'absolute',
+    left: 10,
+    bottom: -190,
+    opacity: 0.1,
+    color: theme.palette.secondary.dark
+  },
+  tab: {
+    marginBottom: 20,
+    [theme.breakpoints.up('md')]: {
+      marginTop: theme.spacing(1) * -3,
+    },
+  },
+  link: {
+    fontSize: 12,
+    marginLeft: -30,
+    color: theme.palette.secondary.main,
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  },
+  socMedFull: {
+    marginBottom: theme.spacing(2)
+  },
+  lockWrap: {
+    textAlign: 'center',
+    padding: theme.spacing(3)
+  },
+  avatar: {
+    width: 150,
+    height: 150,
+    margin: '5px auto 30px',
+    [theme.breakpoints.up('md')]: {
+      margin: '-75px auto 30px',
+    },
+    boxShadow: theme.shadows[8]
+  },
+  userName: {
+    marginBottom: theme.spacing(3)
+  },
+  hint: {
+    padding: theme.spacing(1)
+  }
+});
+
+export default styles;