Example Login Screen for adminlte-2-react with formik and yup validation.

Readme.md

A example login screen for adminlte-2-react with formik and yup https://github.com/sd1337/adminlte-2-react

Require Formik and Yup: https://github.com/jaredpalmer/formik https://github.com/jquense/yup

npm install formik or yarn add formik and npm install yup or yarn add yup

App.js

//Using:
import React, { Component } from "react";
import AdminLTE from "adminlte-2-react";

//import the login component
import Login from "./LoginAdminLTE";

//receive the json returned after form submit
 handleLogin = values => {
    alert(JSON.stringify(values));
    //api.post('/login', values);
  };

//initial values for login inputs 
const loginInitial = {
      email: "",
      password: ""
    };
  return (
      <AdminLTE
        title={["Admin", " LTE"]}
        titleShort={["A", "LTE"]}
        theme="blue"
      >
        <Login
          handleSubmit={this.handleLogin}
          initialValues={loginInitial}
          path="/login"
        />
      </AdminLTE>
...

LoginAdminLTE.js

import React from "react";
import { Content, Row, Col, Inputs, LoginCore } from "adminlte-2-react";
import * as yup from "yup"; // for everything
import { ErrorMessage, Formik, Form as FormikForm, Field } from "formik";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const { Text } = Inputs;

const validation = yup.object().shape({
  email: yup
    .string()
    .email("Invalid email")
    .required(),
  password: yup.string().required()
});

const LoginForm = ({ handleSubmit, initialValues }) => (
   <Content
    title="Cadastro de Usuarios"
    subTitle=""
    browserTitle="Cadastro de Usuarios"
  >
    <Row>
      <Col xs={12} md={8}>
        <LoginCore>
          <p className="login-box-msg">Faça login para continuar</p>
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            validationSchema={validation}
          >
            <FormikForm className="Form">
              <Field
                name="email"
                label="E-mail"
                labelPosition="above"
                placeholder="email@email.com"
                iconRight="fas-envelope"
                component={InputValidation}
              />
              <ErrorMessage
                className="help-block validacao-erro"
                component="span"
                name="email"
              />

              <Field
                name="password"
                label="Senha"
                labelPosition="above"
                placeholder="Password"
                iconRight="fas-lock"
                component={InputValidation}
              />
              <ErrorMessage
                className="help-block text-center validacao-erro "
                component="span"
                name="password"
              />
              <button
                type="submit"
                className="btn btn-primary btn-block btn-flat"
              >
                Entrar
              </button>
            </FormikForm>
          </Formik>

          <p>- OR -</p>

          <a href="#" class="btn btn-block btn-social btn-facebook btn-flat">
            <FontAwesomeIcon
              style={{ marginTop: 5 }}
              icon={["fab", "facebook"]}
            />
            Sign in using Facebook
          </a>
          <a href="#" class="btn btn-block btn-social btn-google btn-flat">
            <FontAwesomeIcon
              style={{ marginTop: 5 }}
              icon={["fab", "google-plus"]}
            />
            Sign in using Google+
          </a>
        </LoginCore>
      </Col>
    </Row>
  </Content>
);

LoginForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  initialValues: PropTypes.object.isRequired
};

export const InputValidation = ({
  className,
  placeholder,
  label,
  labelPosition,
  iconLeft,
  iconRight,
  field,
  form,
  value
}) => {
  const onChange = valor => {
    form.setFieldValue(field.name, valor.target.value);
  };

  const onBlur = e => {
    const { handleBlur } = form;
    handleBlur(e);
  };

  const getValue = () => {
    return value;
  };

  return (
    <Text
      className={className}
      name={field.name}
      value={getValue()}
      onChange={onChange}
      onBlur={onBlur}
      placeholder={placeholder}
      label={label}
      labelPosition={labelPosition}
      iconLeft={iconLeft}
      iconRight={iconRight}
    />
  );
};

export default LoginForm;

where i find <LoginCore>

where i find <LoginCore>

Is a component of adminlte-2-react:
https://github.com/sd1337/adminlte-2-react#logincore

the title on the code you provide is Sperat how to change to AdminLTE
or please send me a example on how to use the adminlte-2-react

is formik better than redux forms

In the render of my Login class component I do something like bellow:
...
render() {
if(this.state.refererURL){
console.log(this.state.refererURL);
return ;
}
...
where this.state.refererURL = "/dashboard"
but I get a rendered blank page :( Any ideea please ?

In the render of my Login class component I do something like bellow:
...
render() {
if(this.state.refererURL){
console.log(this.state.refererURL);
return ;
}
...
where this.state.refererURL = "/dashboard"
but I get a rendered blank page :( Any ideea please ?

you are stopping the render when you make this early return.
what you wanna do?