Añadir plantilla

Base para front

4 files changed, 272 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Pages/Users/LockScreen.js b/front/odiparpack/app/containers/Pages/Users/LockScreen.js
new file mode 100644
index 0000000..2752ae6
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/LockScreen.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LockForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+import { Grid } from '@material-ui/core';
+
+class ResetPassword extends React.Component {
+  state = {
+    valueForm: []
+  }
+
+  submitForm(values) {
+    setTimeout(() => {
+      this.setState({ valueForm: values });
+      console.log(`You submitted:\n\n${this.state.valueForm}`);
+      window.location.href = '/app';
+    }, 500); // simulate server latency
+  }
+
+  render() {
+    const title = brand.name + ' - Lock Screen';
+    const description = brand.desc;
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <div className={classes.container}>
+          <Grid container spacing={3} alignItems="center" direction="row" justify="center">
+            <Grid item md={4} xs={11}>
+              {/* ----------------------------------------------------------------------*/}
+              {/* Load Login Form */}
+              <LockForm onSubmit={(values) => this.submitForm(values)} />
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
+
+ResetPassword.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ResetPassword);
diff --git a/front/odiparpack/app/containers/Pages/Users/Login.js b/front/odiparpack/app/containers/Pages/Users/Login.js
new file mode 100644
index 0000000..300f7b4
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/Login.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import logo from 'ba-images/logo.svg';
+import { LoginForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+
+import { Grid, Hidden, Typography } from '@material-ui/core';
+
+class Login extends React.Component {
+  state = {
+    valueForm: []
+  }
+
+  submitForm(values) {
+    setTimeout(() => {
+      this.setState({ valueForm: values });
+      console.log(`You submitted:\n\n${this.state.valueForm}`);
+      window.location.href = '/app';
+    }, 500); // simulate server latency
+  }
+
+  render() {
+    const title = brand.name + ' - Login';
+    const description = brand.desc;
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <div className={classes.container}>
+          <Grid container spacing={3} alignItems="center" direction="row" justify="center">
+            <Grid item container justify="center" spacing={0} className={classes.loginWrap}>
+              <Hidden smDown>
+                <Grid item md={6} className={classes.welcomeWrap}>
+                  {/* Welcome Login */}
+                  <div className={classes.welcome}>
+                    <div className={classes.welcomeContent}>
+                      <div className={classes.brand}>
+                        <img src={logo} alt={brand.name} />
+                        <h3>{brand.name}</h3>
+                      </div>
+                      <Typography variant="h3">
+                        <span className={Type.light}>Hello there,</span>
+                      </Typography>
+                      <Typography variant="h6" className={classes.brandText}>
+                        <span className={Type.regular}>
+                          welcome to
+                          {' '}
+                          {brand.name}
+                        </span>
+                      </Typography>
+                    </div>
+                    <ArrowForward className={classes.decoBottom} />
+                  </div>
+                </Grid>
+              </Hidden>
+              <Grid item md={6} sm={8} xs={11}>
+                {/* ----------------------------------------------------------------------*/}
+                {/* Load Login Form */}
+                <LoginForm onSubmit={(values) => this.submitForm(values)} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
+
+Login.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Login);
diff --git a/front/odiparpack/app/containers/Pages/Users/Register.js b/front/odiparpack/app/containers/Pages/Users/Register.js
new file mode 100644
index 0000000..c139068
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/Register.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import brand from 'ba-api/brand';
+import logo from 'ba-images/logo.svg';
+import { RegisterForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+
+import { Grid, Hidden, Typography } from '@material-ui/core';
+
+class Login extends React.Component {
+  state = {
+    valueForm: []
+  }
+
+  submitForm(values) {
+    setTimeout(() => {
+      this.setState({ valueForm: values });
+      console.log(`You submitted:\n\n${this.state.valueForm}`);
+      window.location.href = '/app';
+    }, 500); // simulate server latency
+  }
+
+  render() {
+    const title = brand.name + ' - Register';
+    const description = brand.desc;
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <div className={classes.container}>
+          <Grid container spacing={3} alignItems="center" direction="row" justify="center">
+            <Grid item container justify="center" spacing={0} className={classes.loginWrap}>
+              <Hidden smDown>
+                <Grid item md={6} className={classes.welcomeWrap}>
+                  {/* Welcome Login */}
+                  <div className={classes.welcome}>
+                    <div className={classes.welcomeContent}>
+                      <div className={classes.brand}>
+                        <img src={logo} alt={brand.name} />
+                        <h3>{brand.name}</h3>
+                      </div>
+                      <Typography variant="h4">
+                        <span className={Type.light}>Nice to meet You :)</span>
+                      </Typography>
+                    </div>
+                    <ArrowForward className={classes.decoBottom} />
+                  </div>
+                </Grid>
+              </Hidden>
+              <Grid item md={6} sm={8} xs={11}>
+                {/* ----------------------------------------------------------------------*/}
+                {/* Load Register Form */}
+                <RegisterForm onSubmit={(values) => this.submitForm(values)} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
+
+Login.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Login);
diff --git a/front/odiparpack/app/containers/Pages/Users/ResetPassword.js b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js
new file mode 100644
index 0000000..e80253d
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { ResetForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+import { Grid } from '@material-ui/core';
+
+class ResetPassword extends React.Component {
+  state = {
+    valueForm: []
+  }
+
+  submitForm(values) {
+    setTimeout(() => {
+      this.setState({ valueForm: values });
+      console.log(`You submitted:\n\n${this.state.valueForm}`);
+    }, 500); // simulate server latency
+  }
+
+  render() {
+    const title = brand.name + ' - Reset Password';
+    const description = brand.desc;
+    const { classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <div className={classes.container}>
+          <Grid container spacing={3} alignItems="center" direction="row" justify="center">
+            <Grid item md={6} xs={11}>
+              {/* ----------------------------------------------------------------------*/}
+              {/* Load Login Form */}
+              <ResetForm onSubmit={(values) => this.submitForm(values)} />
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
+
+ResetPassword.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ResetPassword);