<commit_before>import React, { useState } from "react";
import Button from "@agir/front/genericComponents/Button";
import TextField from "@agir/front/formComponents/TextField";
import Toast from "@agir/front/genericComponents/Toast";
import style from "@agir/front/genericComponents/_variables.scss";
import styled from "styled-components";
import Link from "@agir/front/app/Link";
import { signUp } from "@agir/front/authentication/api";
import { routeConfig } from "@agir/front/app/routes.config";
import { useHistory, useLocation } from "react-router-dom";
import { BlockSwitchLink } from "./styledComponents";

const InputGroup = styled.div`
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.25rem;
  > div:nth-child(1) {
    width: 340px;
  }
  > div:nth-child(2) {
    width: 140px;
  }

  @media (max-width: ${style.collapse}px) {
    display:block;
    > div:nth-child(1) {
      width: 100%;
    }
`;

const fromGroupEvent = false;

const defaultData = {
  email: "",
  postalCode: "",
};

const SignUp = () => {
  const history = useHistory();
  const location = useLocation();
  const [rgpdChecked, setRgpdChecked] = useState(false);
  const [formData, setFormData] = useState(defaultData);
  const [error, setError] = useState({});

  const handleRgpdCheck = () => {
    setRgpdChecked(!rgpdChecked);
    setError({ ...error, rgpd: null });
  };

  const handleChange = (e) => {
    const newFormData = { ...formData };
    newFormData[e.target.name] = e.target.value;
    setFormData(newFormData);
  };

  const handleSubmit = async () => {
    setError({});
    if (!rgpdChecked) {
      setError({
        rgpd:
          "Vous devez accepter la politique de conservation des données pour continuer",
      });
      return;
    }
    const data = await signUp(formData);
    if (data.error) {
      setError(data.error);
      return;
    }
    location.state.email = formData.email;
    const route = routeConfig.codeSignup.getLink();
    history.push(route);
  };

  return (
    <div style={{ width: "500px", maxWidth: "100%", paddingBottom: "1.5rem" }}>
      {!fromGroupEvent ? (
        <h1>Je m'inscris</h1>
      ) : (
        <h1 style={{ fontSize: "26px" }}>
          Je m’inscris pour participer à l’événement
        </h1>
      )}

      <BlockSwitchLink>
        <span>Déjà inscrit·e ?</span>
        &nbsp;
        <span>
          <Link route="login">Je me connecte</Link>
        </span>
      </BlockSwitchLink>

      <InputGroup>
        <div>
          <TextField
            label="Email"
            name="email"
            error={error && error.email}
            placeholder=""
            onChange={handleChange}
            value={formData.email}
          />
        </div>
        <div>
          <TextField
            label="Code postal"
            name="postalCode"
            error={error && error.location_zip}
            placeholder=""
            onChange={handleChange}
            value={formData.postalCode}
          />
        </div>
      </InputGroup>

      <div
        onClick={handleRgpdCheck}
        style={{
          marginTop: "1rem",
          cursor: "pointer",
          userSelect: "none",
        }}
      >
        <input type="checkbox" checked={rgpdChecked} onChange={() => {}} />
        &nbsp;J'accepte que mes informations soient traitées par Action
        Populaire, conformément à la&nbsp;
        <a
          href="https://infos.actionpopulaire.fr/mentions-legales/"
          target="_blank"
        >
          politique de conservation des données
        </a>
      </div>

      {error && !!error.rgpd && <Toast>{error.rgpd}</Toast>}

      <Button
        onClick={handleSubmit}
        color="primary"
        style={{<commit_msg>fix: signup success redirection error<commit_after>import React, { useState } from "react";
import Button from "@agir/front/genericComponents/Button";
import TextField from "@agir/front/formComponents/TextField";
import Toast from "@agir/front/genericComponents/Toast";
import style from "@agir/front/genericComponents/_variables.scss";
import styled from "styled-components";
import Link from "@agir/front/app/Link";
import { signUp } from "@agir/front/authentication/api";
import { routeConfig } from "@agir/front/app/routes.config";
import { useHistory, useLocation } from "react-router-dom";
import { BlockSwitchLink } from "./styledComponents";

const InputGroup = styled.div`
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1.25rem;
  > div:nth-child(1) {
    width: 340px;
  }
  > div:nth-child(2) {
    width: 140px;
  }

  @media (max-width: ${style.collapse}px) {
    display:block;
    > div:nth-child(1) {
      width: 100%;
    }
`;

const fromGroupEvent = false;

const defaultData = {
  email: "",
  postalCode: "",
};

const SignUp = () => {
  const history = useHistory();
  const location = useLocation();
  const [rgpdChecked, setRgpdChecked] = useState(false);
  const [formData, setFormData] = useState(defaultData);
  const [error, setError] = useState({});

  const handleRgpdCheck = () => {
    setRgpdChecked(!rgpdChecked);
    setError({ ...error, rgpd: null });
  };

  const handleChange = (e) => {
    const newFormData = { ...formData };
    newFormData[e.target.name] = e.target.value;
    setFormData(newFormData);
  };

  const handleSubmit = async () => {
    setError({});
    if (!rgpdChecked) {
      setError({
        rgpd:
          "Vous devez accepter la politique de conservation des données pour continuer",
      });
      return;
    }
    const data = await signUp(formData);
    if (data.error) {
      setError(data.error);
      return;
    }
    const route = routeConfig.codeSignup.getLink();
    history.push(route, { ...location.state, email: formData.email });
  };

  return (
    <div style={{ width: "500px", maxWidth: "100%", paddingBottom: "1.5rem" }}>
      {!fromGroupEvent ? (
        <h1>Je m'inscris</h1>
      ) : (
        <h1 style={{ fontSize: "26px" }}>
          Je m’inscris pour participer à l’événement
        </h1>
      )}

      <BlockSwitchLink>
        <span>Déjà inscrit·e ?</span>
        &nbsp;
        <span>
          <Link route="login">Je me connecte</Link>
        </span>
      </BlockSwitchLink>

      <InputGroup>
        <div>
          <TextField
            label="Email"
            name="email"
            error={error && error.email}
            placeholder=""
            onChange={handleChange}
            value={formData.email}
          />
        </div>
        <div>
          <TextField
            label="Code postal"
            name="postalCode"
            error={error && error.location_zip}
            placeholder=""
            onChange={handleChange}
            value={formData.postalCode}
          />
        </div>
      </InputGroup>

      <div
        onClick={handleRgpdCheck}
        style={{
          marginTop: "1rem",
          cursor: "pointer",
          userSelect: "none",
        }}
      >
        <input type="checkbox" checked={rgpdChecked} onChange={() => {}} />
        &nbsp;J'accepte que mes informations soient traitées par Action
        Populaire, conformément à la&nbsp;
        <a
          href="https://infos.actionpopulaire.fr/mentions-legales/"
          target="_blank"
          rel="noopener noreferrer"
        >
          politique de conservation des données
        </a>
      </div>

      {error && !!error.rgpd && <Toast>{error.rgpd}</Toast>}

      <Button
        onClick={handleSubmit}
        color="primary"
        style={{
{'fraction_non_alphanumeric': 0.14236797049914396, 'fraction_numerical': 0.00869221651521138, 'mean_word_length': 2.332163229486617, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 75, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '252889', 'n_tokens_mistral': 2402, 'n_tokens_neox': 2372, 'n_words': 500}