Hi,

The only one we have experienced with is rewriting urls from server to client and let React handle it. For this to work, you will need a basic url rewrite to direct all urls to index.html page, then javascript will handle the rest.

If your application is a hybrid one, you might need a bit more complicated rewriting and separate your routes which should direct to an actual server side page.

Have a good one.

Hi,

There is not any built in solution for it but you may make it work with below approach. Please keep in mind that menu is quite complex so this might have some side effects. Have not experienced anything though.

Adding “tosub” key to main menu item. (src/constants/menu.js)

Checking tosub in “openSubMenu” function and loading the page just under e.preventDefault(). (src/containers/navs/Sidebar.js)

It seems to be working. Let us know if you have any problem with it.

Have a good one.

Hi,

I have not understand the problem very well, would you elaborate it a little more?

Is it available in demo? If not how may we replicate the issue.

Please let us know. Cheers.

We downloaded the theme and just started it through yarn after install. Went to “Form Wizard” and the Top navigation UI is crumbled. There is an bar over name of the page and that happens because active class is automatically added with “nav-link”. Following is the link for screenshot “https://drive.google.com/open?id=1QTqiX4bOv5D87pctWmrWtTMBaQIRC1Pz”

Hi,

In template preview, you may change it on the top nav language with rhe choice En Rtl.

Hi,

Are you using the latest version since if I remember correctly we have fixed it with the latest one(Version 4.2.2 ). Please check the version at our preview here for the error you are having: https://gogo-react.coloredstrategies.com/user/login

If you are using the latest version and don’t think it’s an implementation issue please share the code so we may take look into it.

Cheers.

import React, { Component } from “react”; import { Row, Card, CardTitle, Label, FormGroup, Button } from “reactstrap”; import { NavLink } from “react-router-dom”; import { connect } from “react-redux”;

import { NotificationManager } from ”../../components/common/react-notifications”; import { Formik, Form, Field } from “formik”;

import { loginUser } from ”../../redux/actions”; import { Colxx } from ”../../components/common/CustomBootstrap”; import IntlMessages from ”../../helpers/IntlMessages”;

class Login extends Component { constructor(props) { super(props); this.state = { email: ””, password: ”” }; } const mapStateToProps = ({ authUser }) => { const { user, loading, error } = authUser; return { user, loading, error }; };

$('#st-2').addClass('d-none');
}

onUserLogin = () => {
    let values = { };
}

values.email = this.state.email;
values.password = this.state.password;

if (!this.props.loading) {
    if (values.email !== "" && values.password !== "") {
        this.props.loginUser(values, this.props.history);
    }
}

changeHandler = event => {
    event.preventDefault();
    this.setState({ [event.target.name]: (event.target.value !== '') ? event.target.value : event.target.innerHTML });
};

validateEmail = () => {
    let error;
    let value = this.state.email;
}

if (!value) {
    error = "Please enter your email address";
} else if (!/^[A-Z0-9._%]@[A-Z0-9.]+\.[A-Z]{2,4}$/i.test(value)) {
    error = "Invalid email address";
}
return error;

validatePassword = () => {
    let error;
    let value = this.state.password;
}

if (!value) {
    error = "Please enter your passworrd";
} else if (value.length < 4) {
    error = "Value must be longer than 4 characters";
}
return error;

componenetDidMount() {        
    $('#st-2').addClass('d-none');
}

componentDidUpdate() {
    let notiCount = $('.notification').length;
}

if (this.props.error && notiCount === 0) {
    NotificationManager.warning(
        this.props.error,
        "Login Error",
        7000,
        null,
        null,
        ''
    );
}

render() {
    const { password, email } = this.state;
    const initialValues = { email, password };
}

return (
    <Row className="h-100">
        <Colxx xxs="12" md="10" className="mx-auto my-auto">
            <Card className="auth-card">
                 
                    
PLEASE LOGIN BELOW
                    

                        Please use your credentials to login.
                    

                        If you are not a member, please{" "}
                        <NavLink to={`/user/register`} className="text-white" style={{textDecoration: 'underline'}}>
                            join us now
        </NavLink>
                        .
      
                 
                 
                    <NavLink to={`/`} className="text-white">
                         
                    </NavLink>
                    <CardTitle className="mb-4">
                        <IntlMessages id="user.login-title" />
                    </CardTitle>
);

<Formik
                    initialValues={initialValues}
                    onSubmit={this.onUserLogin}>
                    {({ errors, touched }) => (
                        <Form className="av-tooltip tooltip-label-bottom">
                            <FormGroup className="form-group has-float-label">
                                <Label>
                                    <IntlMessages id="user.email" />
                                </Label>
                                <Field
                                    className="form-control" 
                                    name="email" 
                                    value={this.state.email}
                                    onChange={this.changeHandler}
                                    validate={this.validateEmail}
                                />
                                {errors.email && touched.email && (
                                     
                                        {errors.email}
                                     
                                )}
                            </FormGroup>
                            <FormGroup className="form-group has-float-label">
                                <Label>
                                    <IntlMessages id="user.password" />
                                </Label>
                                <Field
                                    className="form-control" 
                                    type="password" 
                                    name="password" 
                                    value={this.state.password}
                                    onChange={this.changeHandler}
                                    validate={this.validatePassword}
                                />
                                {errors.password && touched.password && (
                                     
                                        {errors.password}
                                     
                                )}
                            </FormGroup>
                             
                                <NavLink to={`/user/forgot-password`}>
                                    <IntlMessages id="user.forgot-password-question" />
                                </NavLink>
                                <Button
                                    color="primary" 
                                    className={`btn-shadow btn-multiple-state btn-sm ${this.props.loading ? "show-spinner" : ""}`}
                                    size="lg" 
                                >
                                     
                                         
                                         
                                         
                                     
                                     <IntlMessages id="user.login-button" /> 
                                </Button>
                             
</Row>

</Form>
                )}
            </Formik>
         
    </Card>
</Colxx>

export default connect( mapStateToProps, { loginUser } )(Login);

Hi,

It looks like you are updating the state on every input change and that is causing componentDidUpdate firing and that is showing the notification.

And it seems you are updating the state on every change to get values for validation. You really don’t need to this since Formik provides those values under the hood if setup correctly.

Please check and use the code at login.js provided with the latest version of template. Only difference I have noticed that you have provided empty strings for email and password.

Regards