Main.jsx

import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import io from 'socket.io-client'
import Modal from 'react-bootstrap/Modal';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import React, { useRef, useState, useEffect } from 'react';
import Spinner from 'react-bootstrap/Spinner';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const DEBUG = true;
// use REMOTE_USER for production
const username = 'louistw';
const params = new URLSearchParams(window.location.search);
const redir_url = params.get('redir') || '/pun/sys/dashboard';

function Main(props) {
  // Setup states
  const [isLoading, setIsLoading] = useState(false);
  const [validated, setValidated] = useState(false);
  const [modalTitle, setModalTitle] = useState("Your account request has been submitted.");
  const [modalBody, setModalBody] = useState(<Spinner animation="border" variant="success" />);
  const [aup, setAup] = useState(false);

  // Setup refs for easy access
  const socketRef = useRef(null);
  const firstName = useRef(null);
  const lastName = useRef(null);
  const reason = useRef(null);
  const blazerid = useRef(username);

  // Define functions
  const hideModal = () => setIsLoading(false);
  const showModal = () => setIsLoading(true);
  const handleAup = (e) => {
    setAup(!aup)
  }
  const handleSubmit = (e) => {
    e.preventDefault();

    const form = e.currentTarget;
    setValidated(true);
    if (form.checkValidity() === false) {
      e.stopPropagation();
    } else {
      showModal();
      let message = {
        'username': blazerid.current.value,
        'firstName': firstName.current.value,
        'lastName': lastName.current.value,
        'reason': reason.current.value,
        'aup': aup
      };
      if (DEBUG) console.log('Modal showed')
      if (DEBUG) console.log('Message:')
      if (DEBUG) console.log(message)
      socketRef.current.emit('request', message);
    }
  }

  useEffect(() => {
    const socket = socketRef.current = socketRef.current || io();

    if (DEBUG) console.log(socket)

    // Define socketio events
    socket.on('message', data => {
      if (DEBUG) console.log(data + ' ' + socket.id);
    });
    socket.on('connect', data => {
      if (DEBUG) console.log('on connect: ' + socket.id);
      socket.emit('join_room', {username});
    });
    socket.on('requested', data => {
      if (DEBUG) console.log('Account requested');
      showModal();
    });
    socket.on('created', data => {
      if (DEBUG) console.log('account has been created.')
      let sec = 3;
      let myTimer;
      (function countdown () {
        setModalTitle("Your account is ready!");
        setModalBody(`Will redirect in ${sec--} seconds.`);
        myTimer = setTimeout(countdown, 1000);
        if (sec < 0)
          clearTimeout(myTimer);
      })()
      setTimeout(() => {
        if (DEBUG) console.log('Redirecting to ' + redir_url)
        window.location = redir_url;
      }, sec * 1000);
    });

    return () => socket.disconnect();
  }, []);

  return (
    <>
      <Navbar className="mb-4" bg="dark" variant="dark">
        <Container fluid>
          <Navbar.Brand href="#home">Self Registration</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <Nav.Link href="#docs">
                <FontAwesomeIcon icon={faInfoCircle} /> Online Documentation
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Container className="col-4">
        <Form noValidate validated={validated} onSubmit={handleSubmit}>
          <Form.Group controlId="formBlazerID">
            <Form.Label>BlazerID</Form.Label>
            <Form.Control required defaultValue={username} ref={blazerid} type="text" placeholder="BlazerID" />
            <Form.Control.Feedback type="invalid">
              Required
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group controlId="formFirstName">
            <Form.Label>First Name</Form.Label>
            <Form.Control required ref={firstName} type="text" placeholder="First Name" />
            <Form.Control.Feedback type="invalid">
              Required
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group controlId="formLastName">
            <Form.Label>Last Name</Form.Label>
            <Form.Control required ref={lastName} type="text" placeholder="Last Name" />
            <Form.Control.Feedback type="invalid">
              Required
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group controlId="formReason">
            <Form.Label>Reason</Form.Label>
            <Form.Control ref={reason} type="text" placeholder="Reason" />
          </Form.Group>
          <Form.Group controlId="formAUP">
            <Form.Check onClick={handleAup} type="checkbox" label="Agree to proceed" />
            <Form.Control.Feedback type="invalid">
              Required
            </Form.Control.Feedback>
          </Form.Group>
          <Form.Group controlId="formReason">
            <Button disabled={!aup} variant="success" type="submit">
              Submit
            </Button>
          </Form.Group>
        </Form>
      </Container>
      <Modal
        show={isLoading}
        onHide={hideModal}
        backdrop="static"
        animation={false}
        keyboard={false}
        centered
      >
        <Modal.Header>
          <Modal.Title>{modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body className="mx-auto">
          {modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={hideModal}>
            Close
          </Button>
          <Button variant="success">Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  )
}

export default Main;