RegisterPage.js

RegisterPage.js

import React, { useState } from 'react';
import { Formik } from 'formik';
import axios from 'axios';

import { Modal, ModalBody } from 'reactstrap';
import Header from '../lib/Header/Header';
import validate from './ValidateSchema/validate-spected';
import getValidationSchema from './ValidateSchema/getValidationSchema-spected';

import './RegisterPage.scss'
import brable from '../../assets/logoBrable.png'


const styleInput = {
	background: 'white',
	height: '72px',
	width: '119px',
	borderRadius: '20px',
	textAlign: 'center',
	border: 'none',
	fontSize: '30px',
}

const initialValues = {
	username: '',
	phone: '',
	password: '',
	passwordConfirmation: '',
	consent: false,
}


export default function RegisterPageContainer() {
	const [modalOpen, setModalOpen] = useState(false);

	const onSubmit = async function onSubmit(values) {
		axios({
			method: 'POST',
			url: 'http://localhost:4242/registerUser',
			data: values,
			headers: { 'Content-Type': 'application/json' },
		})
			.then((res) => {
				localStorage.setItem("token", res.headers["x-access-token"])
				setModalOpen(true);
				// setTimeout(() => this.setState({ redirect: true }), 1400);
			})
			.catch(function (erreur) {
				//On traite ici les erreurs éventuellement survenues
				console.log(erreur);
			})
	}

	return (
		<div className="container-all-form">
			<Header text="Création de compte" />
			<Formik
				initialValues={initialValues}
				validate={validate(getValidationSchema)}
				onSubmit={onSubmit}
			>
				{({ isSubmitting, errors, handleChange, handleSubmit }) => (
					<div className="form-create-account">
						<div className="col-md-6 offset-md-3">

							<div className="title-name-register">
								<label htmlFor="username">Choisi un identifiant</label>
							</div>

							<input className="form-input-name"
								placeholder="Pseudo"
								name="username"
								type="username"
								onChange={handleChange}
							/>
							<div className="form-field-error">{errors.username}</div>

							<div className="title-phone-register">
								<label htmlFor="phone">Entrée ton numéro de téléphone</label>
							</div>
							<input className="form-input-name"
								placeholder="06 XX XX XX XX"
								name="phone"
								type="phone"
								onChange={handleChange}
							/>
							<div className="form-field-error">{errors.phone}</div>

							<label className="title-password">Saisi ton code à 4 chiffres</label>
							<div name="pincode" className="pincode-input-container" onChange={handleChange} >
								<label className="form-field" htmlFor="password">
									<input className="box-holder" placeholder="0  0  0  0" maxlength="4" style={styleInput} name="password" type="password" />
								</label>
							</div>
							<div className="form-field-error">{errors.password}</div>


							<label className="title-password">Confirme le code</label>

							<div className="pincode-input-container" onChange={handleChange}>
								<label className="form-field" htmlFor="passwordConfirmation">
									<input className="box-holder" placeholder="0  0  0  0" maxlength="4" style={styleInput} name="passwordConfirmation" type="password" />
								</label>
							</div>
							<div className="form-field-error">{errors.passwordConfirmation}</div>
						</div>


						<label className="forget-password" htmlFor="consent">
							<span>Je reconnais...</span>
							<input
								name="consent"
								type="checkbox"
								onChange={handleChange}
							/>
						</label>
						<div className="form-field-error">{errors.consent}</div>

						<div className="container-check-button">
							<button className="button-create-account" type="submit" onClick={handleSubmit}>{isSubmitting ? 'Redirection' : 'Je créer mon compte'}</button>
						</div>
					</div>
				)}</Formik>
			<Modal className="modalValidateRegister" isOpen={modalOpen} toggle={() => setModalOpen(!modalOpen)} >
				<p className="modalValidateTitle" toggle={() => setModalOpen(!modalOpen)}>Compte créé !</p>
				<ModalBody>

					<h1 className="welcomeRegister">Bienvenue {`${initialValues.username}`} chez <img className="iconBrableRegister" src={brable} alt="icone-user" /></h1>
				</ModalBody>
			</Modal>
		</div>
	)
};