Hi littlejack001

Thanks for purchasing.

Please make sure to import defineMessages inside bracketimport { defineMessages } from 'react-intl'; And also between scope in messages.js and app/translation/[all-languages] must be match.

FYI: the translation is sensitive in json format. So if any miss indentation or dirty code will skipped then fallback to defaultMessages in messages.js. After make a changes in json, you can beautify and validate the json code to make sure no unexpected spacing orindentation.

Fell free if you have any further queries.

Regards.

I need a open modal before delete!

Hi fbenevides

To create modal please follow this docs https://material-ui.com/components/dialogs/ and http://dandelion.ux-maestro.com/app/ui/dialog-modal

You can remove the delete function and replace to showmodal. Then store the data(row) id in local state once modal open. Then you still can call delete function(i.e. on button in modal) when needed by put state.id as parameter.

Hope this can help.

Regards

Hi fbenevides,

Thanks for purchasing.

You can put any images with tag above “welcome” title, then remove div.openingHead

<div classname="{classes.openingWrap}">
                <img src="your-image.png" />
                <Typography variant="h3" component="h1" gutterBottom>
                  <FormattedMessage {...messages.welcomeTitle} />
                   
                  {brand.name}
                </Typography>
                <Typography variant="h6" component="p" className={classes.subpening}>
                  <FormattedMessage {...messages.welcomeSubtitle} />
                </Typography>
              </div>

The result should like this http://tinyurl.com/tldmgre

Hope this can help. Feel free if you have any further queries.

Regards

Hi fbenevides,

Thanks for purchasing.

To add .env file please follow this step:

1) npm install dotenv—save

2) Next add the following line to server/index.js bellow const app = express(); around line 18

require(‘dotenv’).config()

3) Then create a .env file at the root directory of your application and add the variables to it.

// sample contents of .env

REACT_APP_API_KEY = ‘my-secret-api-key’

4) Finally, add .env to your .gitignore file so that Git ignores it and it never ends up on GitHub.

Reference – https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

Feel free if you have further queries.

Regards

Hi fbenevides

Thanks for purchasing.

For multilingual router in react please take a look here https://dev.to/prototyp/multi-language-routing-in-react-k9l

And for breadcrumbs, you need to modify the breadcrumbs component in /app/components/BreadCrumb/BreadCrumb.js Please change the {place} variable with <FormattedMessage {...messages[place]} />

Note: Before do this you must register the localization text in messages.js. You can use the messages from ‘enl-api/ui/menuMessages’;

<span>
                {
                  parts.map((part, partIndex) => {
                    const path = ['', ...parts.slice(0, partIndex + 1)].join('/');
                    return (
                      <Fragment key={path}>
                        <Link to={path}>{part}</Link>
                        { separator }
                      </Fragment>
                    );
                  })
                }
                 
                <FormattedMessage {...messages[place]} />
              </span>

Hope this can help. Feel free if you have any further queries.

Regards.

Hi pabkub,

Thanks for reported issue, we can reproduce now.

So to fix it, in containers form submitForm function just get values from parameter only, don’t get valueForm from state.

submitForm(values) {
    const { valueForm } = this.state;
    setTimeout(() => {
      this.setState({ valueForm: values });
      console.log(`You submitted:\n\n${valueForm}`);
    }, 500); // simulate server latency
  }

then change to

submitForm(values) {
    setTimeout(() => {
      console.log(`You submitted:\n\n${values}`);
    }, 500); // simulate server latency
  }

You can find example form containers bellow, then try this method - /app/containers/Pages/Users/Login.js - /app/containers/Pages/Users/LockScreen.js - /app/containers/Pages/Users/Register.js - etc

We will make a patch for this in next release. Hope this can help you.

Regards.

I’ve changed but nothing to do.

Capture my video. Please see it. I can’t press Enter keyboard. So I’ve fill the field already. why it show required.

https://drive.google.com/file/d/1fsyg1v5gDXAaAvKGWutoLPOomPEgWe74/view?usp=sharing

Hi pabkub,

You can try by use single validation instead. By remove validate={required} So just use required only

<Field
                  name="password" 
                  component={TextFieldRedux}
                  type={showPassword ? 'text' : 'password'}
                  label={intl.formatMessage(messages.loginFieldPassword)}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton
                          aria-label="Toggle password visibility" 
                          onClick={this.handleClickShowPassword}
                          onMouseDown={this.handleMouseDownPassword}
                        >
                          {showPassword ? <VisibilityOff /> : <Visibility />}
                        </IconButton>
                      </InputAdornment>
                    )
                  }}
                  required
                  className={classes.field}

Hope this can help you.

Regards.

Hi marami52,

Thanks for purchasing.

Here’s the documentation from firebase to set email verification by use email link authentication https://firebase.google.com/docs/auth/web/email-link-auth

Hope this can help. Feel free if you have any further queries.

Kind regards.

Hi fbenevides,

Thanks for purchasing and the reported issue.

To make it responsive on mobile view properly please adjust this css bellow:

- replace this code in /app/containers/Tables/demos/AdvFilter.js line:9

table: {
    '& > div': {
      overflow: 'auto'
    },
    '& table': {
      '& td': {
        wordBreak: 'keep-all'
      },
      [theme.breakpoints.down('md')]: {
        '& td': {
          height: 60,
          overflow: 'hidden',
          textOverflow: 'ellipsis'
        }
      }
    }
  }

- add this code in /app/containers/Tables/demos/AdvFilter.js inside overrides: key, around line:93

overrides: {
  MUIDataTable: {
      responsiveStacked: {
        overflow: 'auto !important',
        overflowX: 'auto !important',
      },
      tableRoot: {
        minWidth: 360
      }
    },
    MUIDataTablePagination: {
      root: {
        padding: 0
      }
    }
}

But for the pagination, since it’s a third party (mui-datatables), we are still figuring out how to overide the style. We will let you know once finish.

We will update this issue in next release soon.

Feel free if you have any further queries.

Regards.

HI ilhammeidi,

We still get problem

Here is the original styles:

const styles = theme => ({ table: { ‘& > div’: { overflow: ‘auto’ }, ‘& table’: { ‘& td’: { wordBreak: ‘keep-all’ }, { ‘& td’: { height: 60, overflow: ‘hidden’, textOverflow: ‘ellipsis’ } } } }, });

In the project don have any overrides, so made this function:

const getMuiTheme = () => createMuiTheme({
  overrides: {
    MUIDataTable: {
      responsiveStacked: {
        overflow: 'auto !important',
        overflowX: 'auto !important',
      },
      tableRoot: {
        minWidth: 360
      }
    },
    MUIDataTablePagination: {
      root: {
        padding: 0
      }
    }
  }
})

and i put inside this component:

<MuiThemeProvider theme={getMuiTheme}> <MUIDataTable title={title} data={data} columns={columns} options={options} /> </MuiThemeProvider>

This is the result, tha table is still with blank spaces: https://ibb.co/cYXSNGf

Hi fbenevides,

This is need adjustment in table pagination. Please add the code in /app/styles/theme/applicationTheme.js in overrides: {}

I’m not sure if your project doesn’t have overrides: {} key. It suppose in /app/styles/theme/applicationTheme.js. But if you have create own function, that’s okay.

MUIDataTablePagination: {
      toolbar: {
        padding: 0,
        '& > p:nth-child(2)': {
          '@media (max-width: 400px)': {
            display: 'none'
          }
        },
      },
      root: {
        padding: 0
      }
    }

Hope this can help.

Regards.

Hi fbenevides,

Thanks for purchasing.

Yes we will adjust it. And the adjustment is more less like this:

<Hidden mdUp>
          <div classname="{classes.headLogo}">
            <NavLink to="/" className={classes.brand}>
              <img src="{logo}" alt="{brand.name}" />
              {brand.name}
            </NavLink>
          </div>
        </Hidden>
        <div classname="{classes.topBar}">
          <Typography variant="h4" className={classes.title}>
            <FormattedMessage {...messages.register} />
          </Typography>
          <Button size="small" className={classes.buttonLink} component={LinkBtn} to="/login">
            <Icon className={classNames(classes.icon, classes.signArrow)}>arrow_forward</Icon>
            Login
          </Button>
        </div>

Feel free if you have any further queries.

Regards.

Hi DCKAPINC2,

Thanks for purchasing and the reported issue.

About those issue, in package.json first please remove the firebase package and change node-saas version to 4.12 "node-sass": "^4.11.0" Then run npm install again.

After finish please install firebase separately, then run npm run build:dll. It should solve the installation issue.

FYI: this issue happen probably from the latest windows 10 update. And we will make a patch for this issue as soon as possible.

Hope this can help. Feel free if you have any further queries.

Kind regards.

hopefully that issue way fixed but then file not found error is been displayed

Error: HtmlWebpackPlugin: could not load file /var/www/html/react/enlite-pr  ime_v125/enlite-prime/node_modules/react-boilerplate-dlls/reactBoilerplateD  eps.dll.js

- index.js:337

and removing firebase packages and setting “node-sass”: “^4.12” version in stater-project files running npm install throws this error

ERR! code ELIFECYCLE
ERR! errno 1
ERR! enlite_starter@1.2.0 start: `cross-env NODE_ENV=development node server`
ERR! Exit status 1
ERR! 
ERR! Failed at the enlite_starter@1.2.0 start script.
ERR! This is probably not a problem with npm. There is likely additional logging output above.
ERR! A complete log of this run can be found in:
ERR!     /home/dckap/.npm/_logs/2019-11-27T12_37_11_190Z-debug.log

Hi DCKAPINC2,

Sorry for the inconvenience,

For Error: HtmlWebpackPlugin: could not load file. Please run npm run build:dll after install new packages to genereate reactBoilerplateDeps.dll.js This file is used to optimize starting app process.

For the second error. Regarding error message above, we are not sure what caused it. We will figure out this and back to you tomorrow. And that would be great if you provide more error messages. So for now please try to continue install firebase, and npm run build:dll then start the project with npm start.

We can discuss privately via our profile https://themeforest.net/user/ilhammeidi then we will repply from email.

Regards.

Hi mike1793,

Thanks for purchasing.

For restriction page you can use authenticated-page withAuthorizationRouter Here’s the example http://enlite.ux-maestro.com/app/pages/authenticated-page And you need to login to access that page.

For the usage you check it in routing /app/containers/App/Application.js

Feel free if you have any further queries.

Regards.

Hi pabkub,

Thanks for reaching us.

First for auth by user type, you need to get user type from API, you can put user data as state in reducers. /app/redux/modules/authReducer.js

Then create a new condition in withAuthorizationRouter components then use it in route app/containers/App/Application.js Here’s the basic sample restricted page http://enlite.ux-maestro.com/app/pages/authenticated-page

Then for menu, you can create condition of user type in menu components, example for Left Sidebar Big template /app/containers/Templates/layouts/LeftSidebarBig.js

import menuAdmin from 'url/menuAdmin';
import menuOfficer from 'url/menuOfficer';
// and so on

const dataMenu = user => {
  switch(user){
    case 'admin':
        return menuAdmin;
    case 'officer':
        return menuOfficer;
    case 'system':
        return menuSystem;
    default:
        return menuDefault;
  }
}

render() {
      <SidebarBig dataMenu={dataMenu(props.userType)}/> // userType as props get from reducer state
}

The variable userType is as props, which is get from reducer state.

Hope this can help.

Regards.

Hi Atwau,

Here’s our answer bellow:

1. For overflow ellipsis text, you have to add display: block

2. The search results are get from /app/api/ui/menu.js If there’s some repetition, probably there’s some redundant objects. So please make sure all object are have unique key, name and link.

3. All users credential stored in authReducer app/redux/modules/authReducer.js in user and loggedIn state You can get them by call

// example file: /app/containers/Templates/Dashboard.js
Dashboard.propTypes = {
  isAuthenticated: PropTypes.bool,
  user: PropTypes.object,
};

const reducerAuth = 'authReducer';
const mapStateToProps = state => ({
  isAuthenticated: state.get(reducerAuth).loggedIn,
  user: state.get(reducerAuth).user,
  ...state,
});

Hope this can help you.

Kind regards.

Hi pabkub,

About redux-persist we haven’t try it before. And we got a discussion how to integrate it with react-boilerplate https://github.com/react-boilerplate/react-boilerplate/issues/2294

And here’s the sample source https://github.com/hendrathings/react-boilerplate-redux-persist-sample

Kind regards.

Hi thiagoabrum,

Thanks for purchasing.

This template built with react-boilerplate and not support SSR. For SSR you need to use SSR framework. You can try to use next.js or razzle (https://github.com/jaredpalmer/razzle).

To migrate it, need to take out the components, containers and reducers and move to the SSR framework structure.

Feel free if you have any further queries.

Regards.

Hi Atwau,

Thanks for the reported issue and sorry for the inconveniences.

This issue is because since update dropzone version, which is the preview image need to convert as base64 first to display as preview. To fix this issue. Please follow this guide:
- Open /app/components/Forms/MaterialDropZone.js
- In const previews please make like this:

const previews = filesArray => filesArray.map((file, index) => {
// ------------- Create base64 image
      const base64Img = URL.createObjectURL(file);
      if (isImage(file)) {
        return (
          <div key="{index.toString()}">
            <div classname="imageContainer col fileIconImg">
// ------------- put base64Img in src
              <figure className="imgWrap"><img classname="smallPreviewImg" src="{base64Img}" alt="preview" /></figure>
              {deleteBtn(file, index)}
            </div>
          </div>
        );
      }
      return (
        ..... 
// the rest code
      );
    });

Hope this can help. And we will patch this issue for upcoming release soon.

Kind regards.

Thanks ilhammeidi the image appears, but unfortunately the delete button disappears and am forced to refresh the page to change image.

Hi Atwau,

The delete button component is in /app/components/Forms/MaterialDropZone.js:111 around line: 111

Here’s the code

const deleteBtn = (file, index) => (
      <div classname="middle">
        <IconButton onClick={() => this.handleRemove(file, index)}>
          <ActionDelete className="removeBtn" />
        </IconButton>
      </div>
    );

For image changes, it should not related by the force reload. Here’s the sample usage in edit contact form.

//app/components/Contact/AddContactForm.js

- static: http://enlite.ux-maestro.com/app/pages/contact
- use firebase db: http://enlite.ux-maestro.com/app/pages/contact-firebase

Hope this can help.

Regards.

Hi lsekhara,

Thanks for purchasing.

To change layout type, you can change in /app/redux/modules/uiReducer.js

in initial state:

layout: 'big-sidebar',

This template has only 4 accepted values: sidebar, big-sidebar, top-navigation, mega-menu. If got a blank page, please check also in /app/containers/Templates/Dashboard.js it should be

layout === 'big-sidebar' && (
            <LeftSidebarBigLayout />
)

Hope this can help. Feel free if you have any further queries.

Kind regards.

Hi fodukuye,

Thanks for purchasing,

Those errors seem’s there’s are missing files. Please make sure in folder /app/redux/modules/ like this:

- modules
|-- authReducer.js
|-- authReducer.js
|-- initFormReducer.js
|-- uiReducer

If something incomplete, maybe there’s problem when unziping process. Please try extract the zip again, or re-download this template form you’re themeforest account.

Hope this can help. Feel free if you have any further queries.

Kind regards.