Блог

 import { Component } from "react"; import { RouteComponentProps } from "react-router-dom"; import * as Yup from "yup"; import { Formik, Field, Form, ErrorMessage } from "formik"; import "./login.css"; import AuthService from "../services/auth.services";  type Field = {  value?: any;  error?: string;  isValid?: boolean; };  type Props = {};  type State = {  civility: any;  first_name: string;  last_name: string;  message: string;  successful: boolean; };  export default class Register extends Componentlt;Props, Stategt; {  constructor(props: Props) {  super(props);  this.handleRegister = this.handleRegister.bind(this);   this.state = {  civility: "",  first_name: "",  message: "",  successful: false,  };  }   validationSchema() {  return Yup.object().shape({  civility: Yup.string().required("Champ obligatoire !"),  first_name: Yup.string().required("Champ obligatoire !"),  });  }   handleRegister(formValue: {  civility: any;  first_name: string;  }) {  const {  civility,  first_name,  last_name,  } = formValue;   this.setState({  message: "",  successful: false,  });   AuthService.register(  civility,  first_name,  ).then(  (response) =gt; {  this.setState({  message: response.data.message,  successful: true,  });  },  (error) =gt; {  const resMessage =  (error.response amp;amp;  error.response.data amp;amp;  error.response.data.message) ||  error.message ||  error.toString();   this.setState({  message: resMessage,  successful: true,  });  }  );  }   render() {  const { successful, message } = this.state;   const initialValues = {  civility: "",  first_name: "",  message: "",  }; return ( lt;Formik  initialValues={initialValues}  validationSchema={this.validationSchema}  onSubmit={this.handleRegister}  gt;  lt;Formgt;  {!successful amp;amp; (  lt;div className="login"gt;  lt;div className="box-registration"gt;  lt;div className="log-box-title"gt;Registerlt;/divgt;  lt;Field as="select" name="civility" className="nuage"gt;  lt;option disabled={true} value="choose"gt;  Choose an option  lt;/optiongt;  lt;option value="MR"gt;Mrlt;/optiongt;  lt;option value="MME"gt;Mmelt;/optiongt;  lt;option value="DR"gt;Drlt;/optiongt;  lt;/Fieldgt;  lt;Field  name="first_name"  type="text"  placeholder="Name"  className="input-login"  /gt;  lt;br /gt;  lt;button type="submit" className="login-button"gt;  lt;spangt;Registerlt;/spangt;  lt;/buttongt;  lt;br /gt;  lt;/divgt;  lt;/divgt;  )}  {message amp;amp; (  lt;div className="form-group"gt;  lt;div  className={  successful ? "alert alert-success" : "alert alert-danger"  }  role="alert"  gt;  {message}  lt;/divgt;  lt;/divgt;  )}  lt;/Formgt;  lt;/Formikgt; 

 import axios from "axios";  const REG_URL = "https://localhost:3001/wp-json/app/v2";  class AuthService { register(civility: [], first_name: string) {  return axios  .post(REG_URL, {  civility,  first_name  })  .then(response =gt; {  if (response.data.token) {  localStorage.setItem("user", JSON.stringify(response.data));  }   return response.data;  });  }