From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- front/odiparpack/app/components/Forms/LockForm.js | 123 +++++++++++++ front/odiparpack/app/components/Forms/LoginForm.js | 147 +++++++++++++++ .../app/components/Forms/MaterialDropZone.js | 202 +++++++++++++++++++++ .../app/components/Forms/ReduxFormMUI.js | 69 +++++++ .../app/components/Forms/RegisterForm.js | 174 ++++++++++++++++++ front/odiparpack/app/components/Forms/ResetForm.js | 71 ++++++++ .../app/components/Forms/helpers/helpers.js | 8 + front/odiparpack/app/components/Forms/user-jss.js | 179 ++++++++++++++++++ 8 files changed, 973 insertions(+) create mode 100644 front/odiparpack/app/components/Forms/LockForm.js create mode 100644 front/odiparpack/app/components/Forms/LoginForm.js create mode 100644 front/odiparpack/app/components/Forms/MaterialDropZone.js create mode 100644 front/odiparpack/app/components/Forms/ReduxFormMUI.js create mode 100644 front/odiparpack/app/components/Forms/RegisterForm.js create mode 100644 front/odiparpack/app/components/Forms/ResetForm.js create mode 100644 front/odiparpack/app/components/Forms/helpers/helpers.js create mode 100644 front/odiparpack/app/components/Forms/user-jss.js (limited to 'front/odiparpack/app/components/Forms') 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 ( +
+ +
+ + {dummy.user.name} +
+ + + + + + + ) + }} + /> + + + Hint: Type anything to unlock! + +
+
+ +
+ +
+
+ ); + } +} + +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 ( +
+ +
+
+ + + +
+
+ + + + {this.state.showPassword ? : } + + + ) + }} + required + validate={required} + className={classes.field} + /> + +
+
+ } label="Remember" /> + +
+ +
+ + + +
+
+ Cannot Login? + + | + {' '} + +
+ +
+
+ ); + } +} + +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) => ( +
+ this.handleRemove(file, index)}> + + +
+ ); + const previews = filesArray => filesArray.map((file, index) => { + const base64Img = URL.createObjectURL(file); + if (isImage(file)) { + return ( +
+
+
preview
+ {deleteBtn(file, index)} +
+
+ ); + } + return ( +
+
+ + {deleteBtn(file, index)} +
+
+ ); + }); + let dropzoneRef; + return ( +
+ { dropzoneRef = node; }} + {...rest} + > + {({ getRootProps, getInputProps }) => ( +
+
+ +

{text}

+
+ +
+
+
+ )} + {/* end */} + + {showButton && ( + + )} +
+ {showPreviews && previews(files)} +
+ +
+ ); + } +} + +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 }) => ( + +); + +TextFieldRedux.propTypes = { + input: PropTypes.object.isRequired, + meta: PropTypes.object, +}; + +TextFieldRedux.defaultProps = { + meta: null, +}; +/* End */ + +/* Select */ +export const SelectRedux = ({ input, children, ...rest }) => ( + +); + +SelectRedux.propTypes = { + input: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, +}; +/* End */ + +/* Checkbox */ +export const CheckboxRedux = ({ input, ...rest }) => ( + +); + +CheckboxRedux.propTypes = { + input: PropTypes.object.isRequired, +}; +/* End */ + +/* Switch */ +export const SwitchRedux = ({ 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 ( +
+ + + + + + {tab === 0 + && ( +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+ } label="Agree with" /> + Terms & Condition +
+ +
+
+ ) + } + {tab === 1 + && ( +
+ + + +
+ ) + } + +
+ ); + } +} + +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 ( +
+ +
+
+ + + +
+
+ +
+
+ +
+ ); + } +} + +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; -- cgit v1.2.3