Newer
Older
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
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'
// 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 firstName = useRef(null);
const lastName = useRef(null);
const reason = useRef(null);
// 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();
'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);
const socket = socketRef.current = socketRef.current || io();
// Define socketio events
socket.on('message', data => {
if (DEBUG) console.log(data + ' ' + socket.id);
if (DEBUG) console.log('on connect: ' + socket.id);
if (DEBUG) console.log('Account requested');
showModal();
});
socket.on('created', data => {
if (DEBUG) console.log('account has been created.')
(function countdown () {
setModalTitle("Your account is ready!");
setModalBody(`Will redirect in ${sec--} seconds.`);
myTimer = setTimeout(countdown, 1000);
if (sec < 0)
clearTimeout(myTimer);
if (DEBUG) console.log('Redirecting to ' + redir_url)
window.location = redir_url;
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>
<Button disabled={!aup} variant="success" type="submit">
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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>
</>
)