Material Kit 2 PRO React

Hello, What is the difference between HTML and HTML+PSD package? HTML gets me regular images, and HTML+PSD gets me photoshop files so I can edit images? Or is there more to it?

Hello there @rimoslav . Thank you for your interest in working with our products. The HTML package only gives you the code, while the HTML+PSD, also gives you PSD images/files for our pages. Best, Manu.

Hello, How can I change CustomInput in form, so I can have an error class (red underline, plus red text added as an error text)? Also, how to change default purple underline in CustomInput (when you click on an input field) to any other color?

I figured out how to add red underline and red x mark in the field if there's an error, but how to add custom text?

Hello there @rimoslav and thank you for your interest in working with our products. What do you mean by add custom text? Do you mean by adding a defaultValue? Best, Manu.

I mean to literary display error text from server side validation. Same as bootstrap 4 .is-invalid and .is-valid. classes. So if user enters right password, there's a green check mark next to it, and no text below field. If he enters no password, there's red x, and "Please enter your password" written below input field. If he/she enters wrong password, there's "Wrong password" written below input field. And same for every input field in the form. I managed to do it by adding simple paragraph below every input field if there's an error, but it's not even close to acceptable solution.

@ctmployee i'm trying to use browserHistory or history.push to redirect to a specific page defined in route say /profile-page but its not working.

Hello again, @hardik_rathore. Can you please open an issue here: https://github.com/creativetimofficial/ct-material-kit-pro-react/issues ? I haven't used history.push, and do not know how to do that. So by opening an issue above, and if you complete the ISSUES_TEMPLATE when you press NEW ISSUE button, than you will have to respond to some questions, which will help me create the same issue that you have. That way i will be able to do testing and find a solution. Best, Manu.

@hardik_rathore Are you using Redux? Here's how I just did it 5 minutes ago, using Redux, and react-redux library: In Sign-Up component: import React from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { registerUser } from "../../actions/authActions"; componentDidMount() { window.scrollTo(0, 0); document.body.scrollTop = 0; if (this.props.auth.isAuthenticated) { this.props.history.push("/landing-page"); } } //if user is already logged in, redirect him immediately to landing-page UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.errors) { this.setState({ errors: nextProps.errors }); } } //errors are coming from back-end and are getting put into props (thanks to mapStateToProps) and from there, put into state. On form submit: handleSubmit(e) { e.preventDefault(); const newUser = { firstName: this.state.firstName, lastName: this.state.lastName, email: this.state.email, password: this.state.password, password2: this.state.password2 }; this.props.registerUser(newUser, this.props.history); } At the bottom of Sign-Up: Register.propTypes = { registerUser: PropTypes.func.isRequired, auth: PropTypes.object.isRequired, errors: PropTypes.object.isRequired, history: PropTypes.object, classes: PropTypes.object.isRequired, rest: PropTypes.array }; const mapStateToProps = state => ({ auth: state.auth, errors: state.errors }); export default connect( mapStateToProps, { registerUser } )(withStyles(signupPageStyle)(Register)); In authActions file, we make axios request: import { GET_ERRORS } from "./types"; export const registerUser = (userData, history) => dispatch => { axios .post("/api/users/register", userData) .then(res => history.push("/login-page")) .catch(err => dispatch({ type: GET_ERRORS, payload: err.response.data }) ); }; In errorReducer file: import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types"; const initialState = {}; export default function(state = initialState, action) { switch (action.type) { case GET_ERRORS: return action.payload; case CLEAR_ERRORS: return {}; default: return state; } } Hope this helps.

@ctmployee Hi again, Eslint can't solve paths to your imports. Do you know any way to make eslint able to solve those import paths without using relative paths?

Hello again @jukkahuuskonen . What do you mean <<Eslint can't solve paths to your imports>>? Have you taken a look at our live docs: https://demos.creative-tim.com/material-kit-pro-react/#/documentation/tutorial ? Maybe you do not have the .env file? I really am not sure what to say to you right now, since it's the first time I hear an issue about Eslint. Maybe it would help me if you would detail a bit. Best, Manu.

@ctmployee I've that .env -file. VSCode do find the imports, but Eslint gives following error on every import under src-folder: "[eslint] Unable to resolve path to module 'views/Dashboard/Dashboard.jsx'. [import/no-unresolved]" I can suppress the error by turning off that rule, but I'd like to have it on. I tried the "npm install --g cross-env", but it's still a bit unclear how to do that. 1.Do I delete the .env-file? 2. I really don't know how to edit the scripts on package.json. At the moment they are straight from the "Material-kit-react-pro" + several npm modules installed. Otherwise they are as they were. when I tried editing those scripts, nothing worked anymore.

Hello again @jukkahuuskonen . Change the <<"start-js": "react-scripts start",>> line to <<"start-js": "NODE_PATH=./src react-scripts start",>> . Best, Manu.

@ctmployee Can't get it to work. getting this error on after<<npm start>> : <<'NODE_PATH' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1...>> I'll report an issue, if this bothers me too much. This isn't the best place (due to the limited editor...) to report more complex problems :) Thank you for the effort though :)

how to handle onChange for CustomInput

inputProps={{ startAdornment: ( <InputAdornment position="start"> {/* <Icon className={classes.icon}>lock_outline</Icon> */} </InputAdornment> ), placeholder: "Password...", onChange:this.handleOnChange }}

Hello again, @hardik_rathore . Yes, it seems you've figured it out. When you have questions like this, it would be useful to take a look at our repo issues (https://github.com/creativetimofficial/ct-material-kit-pro-react/issues) and search here if somebody hasn't already asked that. Best, Manu.

@einazare Hello. It's impossible to make facebook login without updating react-scripts, since we need webpack-dev-server v 3.1.7 at least, which is react-scripts dependency. Is there any way around it?

The reason for that is that, the app crashes with HTTPS=true set in the .env file (which is required now for facebook login).

Hello, there @rimoslav . You can update the react, react-router-dom and react-scripts dependencies, but you will have to make some changes to our scripts. Also, you will have to change the import of our css, to scss from import <<"assets/scss/material-kit-pro-react.css?v=1.2.0";>> to <<import "assets/scss/material-kit-pro-react.scss?v=1.2.0";>> . Or add a new script for compiling the scss into css. Here is how you scripts should now look like: <<"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start", "compile-scss": "node-sass src/assets/scss/material-kit-pro-react.scss ssrc/assets/scss/material-kit-pro-react.css" },>> . Best, Manu.

Thanks for the reply. I did it with few extra steps. Besides that, I needed to remove anything containing eslint in optionalDependencies, delete package-lock.json, delete node_modules, delete .eslintrc.js file, run /npm install/ and then /npm prune/. I'll repeat these steps again if I have time, and post the issue on github.

Hi, I was wondering if this can be married to Meteor file structure? The internal links can be changed in the files, but every update to a new version will screw it, is there a way?

Hello @denisoftus .And thank you for your interest in using our product. We haven't used Metero in none of our products and can't really answer your question. But i am going to tell you what we've told to a lot of our users that wanted something in our products that we haven't used, you can try our free version of this product and see if it suits your needs. Here is a link to it: <<https://www.creative-tim.com/product/material-kit-react>>. For the updates, you could have two Github repos, one on which you would develop your product, and one on which you would have our product unaltered. On each of our new releases, you would redownload the product and add it on top of that unaltered repo. Github would tell you all the differences there are from one release to another. Best, Manu

hello, what difference developer packages and personal packages?

Hello there @rndika and thank you for your interest in working with our products. The Developer lets you create multiple projects for multiple clients, but only lets you to create just one SaaS application for you or your client, while with the personal package, you can only use it for one project - for you or your client - but this project cannot be a SaaS application. Hope this information was of help. Let us know if you have further questions. Best, Manu.