React apagando o localStorage quando apertto F5

guilhermebhte · Novembro 9, 2021, 10:46pm

FormLogin.js

import { validate as isEmail } from "email-validator";
import $ from "jquery";
import React, { Component } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import { withRouter } from "react-router-dom";
import { loginMotorista } from "../../../actions/MotoristaActions";
class FormLogin extends Component {
  constructor(props) {
    super();
    this.state = {
      email: "",
      senha: "",
      captcha: false,
      valorCaptcha: "",
      codigoCapctha: process.env.REACT_APP_RECAPTCHA,
    };
    this.camposObrigatorios = ["email", "senha"];
  }
  recaptchaRef = React.createRef();
  onChange = async () => {
    const recaptchaValue = await this.recaptchaRef.current.getValue();
    this.setState({ captcha: true });
    this.setState({ valorCaptcha: recaptchaValue });
    console.log("recaptchaValue: " + recaptchaValue);
  };
  componentDidMount() {
    $(".box-input").click(function () {
      var label = $(this).find(".input-label");
      var input = $("#" + label.attr("for"));
      label.removeClass("input-label");
      label.addClass("input-label-sm");
      input.removeClass("input-hide");
      $(".box-input-sel").removeClass("box-input-sel");
      $(this).addClass("box-input-sel");
      input.trigger("click");
    });
    localStorage.removeItem("editar_meus_aplicativos");
    localStorage.removeItem("meus_aplicativos");
  }
  _logar = async () => {
    $(".alertCamposObrigatorios").hide();
    let formOk = true;
    console.log("email: " + this.state.email);
    console.log("senha: " + this.state.senha);
    console.log("captcha: " + this.state.captcha);
    this.camposObrigatorios.forEach(function (item) {
      if ($("#" + item).val() === "") {
        $(".alertCamposObrigatorios").show();
        formOk = false;
      }
    });
    if ($("#email").val() !== "" && !isEmail($("#email").val())) {
      $(".alertCamposObrigatorios").show();
      formOk = false;
    }
    if (!this.state.captcha) {
      $(".alertCamposObrigatorios").show();
      formOk = false;
    }
    if (formOk) {
      let { email, senha, captcha, valorCaptcha } = this.state;
      $(".loader-main").removeClass("loader-inactive");
      const retorno = await loginMotorista({
        email,
        senha,
        captcha,
        valorCaptcha,
      });
      if (retorno) {
        this.props.history.push("/primeiro-acesso");
      }
    }
  };
  _updateField = async function (event) {
    let dados = this.state;
    dados[event.target.id] = event.target.value.trim();
    await this.setState(dados);
  };
  _updateFieldEmail = async function (event) {
    if (/^[^ ,;:<>()[\]\\|/]*$/.test(event.target.value.trim())) {
      this._updateField(event);
    }
  };
  render() {
    return (
      <div className="page-content header-clear">
        <div className="title title-36">LOGIN</div>
        <div className="space-32"></div>
        <div className="cf-texto div-body margin-30">
          Insira seus dados para entrar
        </div>
        <div className="space-71"></div>
        <div
          className="alertCamposObrigatorios alert-danger margin-25"
          style={{ padding: "6px", display: "none" }}
        >
          Todos campos são obrigatórios.
        </div>
        <div
          className="alert alert-danger margin-25"
          style={{ padding: "6px", display: "none" }}
        >
          Login ou senha inválidos.
        </div>
        <div className="box-input-only2 margin-25">
          <input
            type="text"
            id="email"
            className="box-input-only input2"
            value={this.state.email}
            onChange={(e) => {
              this._updateFieldEmail(e);
            }}
          />
          <label
            className={
              this.state.email === "" ? "input-label2" : "input-label-sm2"
            }
            htmlFor="email"
          >
            E-mail
          </label>
        </div>
        <div className="box-input-only2 margin-25 space-12">
          <input
            type="password"
            id="senha"
            className="box-input-only input2"
            value={this.state.senha}
            onChange={(e) => {
              this._updateField(e);
            }}
          />
          <label
            className={
              this.state.email === "" ? "input-label2" : "input-label-sm2"
            }
            htmlFor="senha"
          >
            Senha
          </label>
        </div>
        <div className="box-input-only2 margin-25 space-12">
          <ReCAPTCHA
            id="captcha"
            ref={this.recaptchaRef}
            value={this.state.captcha}
            sitekey={this.state.codigoCapctha}
            onChange={(e) => {
              this.onChange(e);
            }}
          />
        </div>
        <div className="space-12"></div>
        <div className="cf-texto div-body margin-27">
          <a href="/esqueci-senha" className="label-purple">
            ESQUECI MINHA SENHA &nbsp;
            <i className="fas fa-chevron-right icon-14"></i>
          </a>
        </div>
        <div className="space-26"></div>
        <div className="div-center">
          <button className="bt-login margin-30" onClick={() => this._logar()}>
            ENTRAR <i className="fas fa-chevron-right icon-14 float-right"></i>
          </button>
        </div>
        <div className="space-26"></div>
      </div>
    );
  }
}
export default withRouter(FormLogin);

MotoristaActions.js

import axios from "axios";
import $ from "jquery";
import auth from "../auth/initAuth";
const config = {
  headers: { Authorization: "Bearer " + localStorage.getItem("id_token") },
};
const urlAPI = process.env.REACT_APP_URL_API_BASE;
const servico = "/motorista/";
export const loginMotorista = async ({
  email,
  senha,
  captcha,
  valorCaptcha,
}) => {
  return await axios
    .post(
      urlAPI + servico + "login",
      { email: email, password: senha, captcha, valorCaptcha },
      config
    )
    .then((response) => {
      if (response.data && response.data.isOk) {
        localStorage.setItem("motorista_logado", JSON.stringify(response.data));
        if (response.data.primeiro_acesso) {
          return response.data;
        } else {
          auth.login(email, senha, (err, authResult) => {
            if (err) {
              $(".alert").show();
              $(".loader-main").addClass("loader-inactive");
              localStorage.removeItem("motorista_logado");
              return true;
            }
            if (authResult && authResult.idToken && authResult.accessToken) {
              this.setToken(authResult.accessToken, authResult.idToken);
              window.location = window.location.origin;
            }
          });
        }
      } else {
        $(".alert").show();
        $(".loader-main").addClass("loader-inactive");
      }
    })
    .catch((error) => {
      if (error.response && error.response.data) {
        $(".alert").show();
        $(".loader-main").addClass("loader-inactive");
      }
    });
};

App.js

export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
          <Route path="/como-funciona" component={ComoFunciona} />
          <Route path="/login" component={Login} />
          <Route path="/esqueci-senha" component={EsqueciSenha} />
          <Route path="/recadastrar-senha" component={RecadastrarSenha} />
          <Route path="/meu-perfil" component={MeuPerfil} />
          <Route path="/fale-conosco" component={FaleConosco} />
          <Route path="/cadastro" component={Cadastro} />
          <Route
            path="/cadastro-acompanhamento"
            component={CadastroAcompanhamento}
          />
          <Route path="/termos-servico" component={TermosServico} />
          <Route exact path="/agendamento" component={Agendamento} />
          <Route exact path="/agendamento/:passo" component={Agendamento} />
          <Route
            path="/agendamento/:passo/:reagendar"
            component={Agendamento}
          />
          <Route path="/dados-pessoais" component={MeusDados} />
          <Route path="/endereco" component={MeuEndereco} />
          <Route path="/minha-senha" component={MinhaSenha} />
          <Route path="/meus-aplicativos" component={MeusAplicativos} />
          <Route path="/verificacao" component={Verificacao} />
          <Route path="/ativar-equipamento" component={AtivarEquipamento} />
          <Route path="/callback" component={Callback} />
          <Route exact path="/primeiro-acesso" component={PrimeiroAcesso} />
          <Route component={ErrorPage} />
        </Switch>
      </BrowserRouter>
    );
  }
}

primeiro-acesso
index.js

import React, { Component } from "react";
import { Route, Switch, withRouter } from "react-router-dom";
import TopoSemMenu from "../../components/TopoSemMenu";
import FormPrimeiroAcesso from "./components/FormPrimeiroAcesso";
class PrimeiroAcesso extends Component {
  render() {
    return (
      <div>
        <TopoSemMenu />
        <Switch>
          <Route
            exact
            path="/primeiro-acesso"
            component={() => <FormPrimeiroAcesso />}
          />
        </Switch>
      </div>
    );
  }
}
export default withRouter(PrimeiroAcesso);

FormPrimeiroAcesso.js

import $ from "jquery";
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import auth from "../../../auth/initAuth";
const validations = require("../validations");
const formHelp = require("../../../helpers/FormHelpMsg");
const MotoristaActions = require("../../../actions/MotoristaActions");
class FormPrimeiroAcesso extends Component {
  constructor(props) {
    super();
    this.state = {
      novaSenha: "",
      confNovaSenha: "",
      ZreceberWhatsApp: false,
      showForm: true,
      show: false,
      error: false,
    };
    this.camposObrigatorios = ["novaSenha", "confNovaSenha"];
  }
  componentDidMount = async () => {
    $(".loader-main").addClass("loader-inactive");
    let motorista_logado = localStorage.getItem("motorista_logado");
    if (typeof motorista_logado !== "undefined" && motorista_logado !== null) {
      motorista_logado = JSON.parse(motorista_logado);
    } else {
      window.location = "/login";
    }
  };
  _updateField = async (event) => {
    let dados = this.state;
    dados[event.target.id] = event.target.value;
    await this.setState(dados);
  };
  _gravar = () => {
    let formOk = true;
    this.camposObrigatorios.forEach(function (item) {
      if ($("#" + item).val() === "") {
        $("#" + item)
          .parent()
          .addClass("box-input-required");
        formOk = false;
      }
    });
    if (this.state.novaSenha !== this.state.confNovaSenha) {
      $("#confNovaSenha").parent().addClass("box-input-required");
      this.setState({
        error: "Senha e confirmação da nova senha devem ser iguais.",
      });
      formOk = false;
    }
    if (this.state.novaSenha !== "") {
      let strongRegex = new RegExp(
        "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
      );
      if (!strongRegex.test(this.state.novaSenha)) {
        this.setState({
          error:
            'A senha deve combinar letras maiúsculas, minúsculas, números e um dos seguintes caracteres "!@#$%^&*".',
        });
        formOk = false;
      }
    }
    if (formOk) {
      $(".loader-main").removeClass("loader-inactive");
      const motorista = JSON.parse(localStorage.getItem("motorista_logado"));
      let { novaSenha } = this.state;
      auth.signup(motorista.email, novaSenha, function (err) {
        if (err) {
          this.setState({
            error: "Erro ao alterar sua senha, tente novamente mais tarde.",
          });
          formOk = false;
        } else {
          MotoristaActions.alterarSenhaPrimeiroAcesso(motorista.email)
            .then((response) => {
              if (response.data.isOk) {
              } else {
                if (response.data.message) {
                  this.setState({ error: response.data.message });
                } else {
                  this.setState({
                    error:
                      "Erro ao alterar sua senha, tente novamente mais tarde.",
                  });
                }
              }
              $(".loader-main").addClass("loader-inactive");
            })
            .catch((error) => {
              this.setState({ error: error.message });
              $(".loader-main").addClass("loader-inactive");
            });
        }
      });
    }
  };
  _validarCampo = async (event) => {
    let campo = event.target.id;
    let valor = event.target.value;
    formHelp.hideHelp(campo, "box-input-required");
    if (campo === "novaSenha") {
      validations.validarCampoSenha(valor);
    } else if (campo === "senha_confirma") {
      validations.validarCampoConfirmaSenha($("#senha").val(), valor);
    }
  };
  render() {
    return (
      <div className="page-content header-clear cadastro">
        <div className="title title-32 text-center text-destaque">
          Alterar sua senha primeiro neste primeiro acesso !
        </div>
        <div className="div-separator">
          <div className="div-progress" style={{ width: "50%" }}></div>
          <div className="div-progress-bullet"></div>
        </div>
        <div className="space-16"></div>
        <div className="box-input margin-25" id="senhaInputContainer">
          <label className="input-label" htmlFor="novaSenha">
            Nova senha
          </label>
          <input
            type="password"
            id="novaSenha"
            className="input input-hide"
            placeholder="Mínimo de 6 dígitos"
            value={this.state.novaSenha}
            onChange={(e) => {
              this._updateField(e);
            }}
            onBlur={(e) => {
              this._validarCampo(e);
            }}
          />
          <span className="help-inline"></span>
        </div>
        <div
          className="box-input margin-25"
          style={this.state.showForm ? {} : { display: "none" }}
        >
          <label className="input-label" htmlFor="confNovaSenha">
            Confirme a nova senha
          </label>
          <input
            type="password"
            id="confNovaSenha"
            className="input input-hide"
            value={this.state.confNovaSenha}
            placeholder="Mínimo de 6 dígitos"
            onChange={(e) => {
              this._updateField(e);
            }}
            onBlur={(e) => {
              this._validarCampo(e);
            }}
          />
        </div>
        <div className="space-26"></div>
        <div className="div-center">
          <button
            className="bt-login margin-30"
            onClick={() => this._gravar()}
            style={this.state.showForm ? {} : { display: "none" }}
          >
            ALTERAR A SENHA
          </button>
        </div>
      </div>
    );
  }
}
export default withRouter(FormPrimeiroAcesso);

Toda a execução está correta, quando é para ir para FormPrimeiroAcesso, só que não consigo digitar nada no componente e quando aperto F5, ele limpa localStorage.getItem(“motorista_logado”) e volta para a tela de logn

O que pode ser ?

rodriguesabner · Novembro 10, 2021, 11:56am

cara, olhando assim é bem complicado te dizer algo, ainda mais que vc ta usando uma sintaxe antiga do react, então fica mais complicado ainda.

de qlqer forma, sera q nao ta caindo nesse if aqui?

if (err) { 
   $(".alert").show(); 
   $(".loader-main").addClass("loader-inactive"); 
   localStorage.removeItem("motorista_logado"); 
   return true; 
}

*algum motivo especial pra misturar jquery com react?

React apagando o localStorage quando apertto F5

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI