Add blazerid field to the form

react/src/components/Main.jsx

@@ -29,6 +29,7 @@ function Main(props) {
   const firstName = useRef(null);
   const lastName = useRef(null);
   const reason = useRef(null);
+  const blazerid = useRef(username);
 
   // Define functions
   const hideModal = () => setIsLoading(false);
@@ -47,7 +48,7 @@ function Main(props) {
       showModal();
       if (DEBUG) console.log('Modal showed')
       socketRef.current.emit('request', {
-        'username': username,
+        'username': blazerid.current.value,
         'firstName': firstName.current.value,
         'lastName': lastName.current.value,
         'reason': reason.current.value,
@@ -111,6 +112,13 @@ function Main(props) {
 
       <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" />