Merge branch 'feat-update-ui' into 'react-frontend'

Feat update ui

See merge request rc/self-reg-form!3

react/package.json

@@ -2,23 +2,31 @@
   "name": "form-react",
   "version": "0.1.0",
   "private": true,
+  "homepage": "/register",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "@types/socket.io-client": "^1.4.33",
+    "bootstrap": "^4.5.0",
+    "jquery": "^3.5.1",
+    "popper.js": "^1.16.1",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
-    "react-loader-spinner": "^3.1.14",
-    "react-promise-tracker": "^2.1.0",
     "react-scripts": "3.4.1",
-    "socket.io-client": "^2.3.0"
+    "socket.io-client": "^2.3.0",
+    "typescript": "^3.9.6"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -35,5 +43,8 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:5000",
+  "devDependencies": {
+    "socket.io": "^2.3.0"
+  }
 }

react/src/App.js

 import React from 'react';
 import Main from './components/Main';
 
-import io from 'socket.io-client'
-const socket = io('http://localhost:5000')
-
-const App = () => (
-  <div>
-    <h1>Self user reg</h1>
-    <Main />
-  </div>
-);
+const App = () => <Main />;
 
 export default App;

react/src/components/Main.jsx

-import React from 'react';
-import { trackPromise } from 'react-promise-tracker';
-
+import Button from 'react-bootstrap/Button';
+import Container from 'react-bootstrap/Container';
+import Form from 'react-bootstrap/Form';
 import io from 'socket.io-client'
-const socket = io('http://localhost:5000')
-let file_name = null;
-let room=null;
+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'
 
-class Main extends React.Component {
-  constructor(props) {
-    super(props);
+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';
 
-    this.state = {
-      imageURL: '',
-      isLoading: false,
-      isDownloadValid: false,
-    };
-  this.handleUpload = this.handleUpload.bind(this);
-  }
+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" />);
 
-request_account(ev) {
-    ev.preventDefault();
-    this.setState({ isLoading: true });
-    const data = new FormData();
-    console.log(this.first_name.value)
-    data.append('first_name', this.first_name.value);
-    data.append('last_name', this.last_name.value);
-    data.append('message', this.message.value);
-    socket.emit('request account',{})
+  // Setup refs for easy access
+  const socketRef = useRef(null);
+  const firstName = useRef(null);
+  const lastName = useRef(null);
+  const reason = useRef(null);
 
-  }
+  // Define functions
+  const hideModal = () => setIsLoading(false);
+  const showModal = () => setIsLoading(true);
+  const handleSubmit = (e) => {
+    e.preventDefault();
 
-joinRoom (username) {
-    room =  username
-    socket.emit('join_room', { username })
+    const form = e.currentTarget;
+    setValidated(true);
+    if (form.checkValidity() === false) {
+      e.stopPropagation();
+    } else {
+      showModal();
+      if (DEBUG) console.log('Modal showed')
+      socketRef.current.emit('request', {
+        'username': username,
+        'firstName': firstName.current.value,
+        'lastName': lastName.current.value,
+        'reason': reason.current.value
+      });
+    }
   }
 
+  useEffect(() => {
+    const socket = socketRef.current = socketRef.current || io();
 
-handleUpload(ev) {
-    ev.preventDefault();
-    this.setState({ isLoading: true });
-    const data = new FormData(); 
-    console.log(this.first_name.value)
-    data.append('first_name', this.first_name.value);
-    data.append('last_name', this.last_name.value);
-    data.append('message', this.message.value);
-    joinRoom(this.first_name.value); 
-  }
+    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();
+  }, []);
 
-  render() {
-    const { isLoading, isDownloadValid } = this.state;
-    let download_link = null;
-    let file_path = '/return-files/' + file_name;
-    //let file_path = '../downloads' + this.uploadInput.files[0] ;
-    //if (isLoading) {
-    //  return <p>Loading ...</p>;
-    //}
+  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>
 
-    if (isDownloadValid) {
-      download_link = <a href={file_path} download>Download File</a>;
-    } else {
-      download_link = null;
-    }
-
-    return (
-    <form onSubmit={this.request_account}> 
-        <div>
-          <input ref={(ref) => { this.first_name = ref; }} type="text" placeholder="First Name" />
-        </div>
-        <div>
-          <input ref={(ref) => { this.last_name = ref; }} type="text" placeholder="Last Name" />
-        </div>
-        <div>
-          <textarea ref={(ref) => { this.message = ref; }} placeholder="Reason" />
-        </div>
-        <div>
-          <button>Submit</button>
-        </div>
-      </form>
-      
-    );
-  }
+      <Container className="col-4">
+        <Form noValidate validated={validated} onSubmit={handleSubmit}>
+          <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="formReason">
+            <Button 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;

react/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import { usePromiseTracker } from "react-promise-tracker";
-import Loader from 'react-loader-spinner';
-
-const LoadingIndicator = props => {
-  const { promiseInProgress } = usePromiseTracker();
-  return (
-    promiseInProgress &&
-    <div
-      style={{
-        width: "100%",
-        height: "100",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      }}
-    >
-      <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
-    </div>
-  );  
-}
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
-    <LoadingIndicator />
   </React.StrictMode>,
   document.getElementById('root')
-);
\ No newline at end of file
+);

react/test-server.js

+const server = require('http').createServer();
+const io = require('socket.io')(server);
+
+// in seconds
+const creationTime = 2.5;
+
+io.on('connection', socket => {
+  console.log('A client has connected - ID: ' + socket.id);
+  socket.send('io connected');
+
+  socket.on('join_room', data => {
+    console.log("Join_room:")
+    console.log(data);
+
+    let room = data.username;
+
+    socket.join(room);
+
+    console.log(socket.rooms)
+    console.log(socket.id+ " has joined room: " + room);
+    io.in(room).clients((err, clients) => {
+      console.log("clients:\n" + clients);
+      socket.send('Room \'' + room + '\' has ' + clients.length + ' user(s)')
+    });
+    socket.send('room \'' + room + '\' joined');
+  });
+
+  socket.on('request', data => {
+    console.log('requested: ' + socket.id)
+    console.log(socket.rooms)
+    console.log(data);
+
+    let room = data.username;
+
+    console.log(`socket.to(${room}).emit('requested')`);
+    socket.to(room).emit('requested');
+
+    setTimeout(() => {
+      console.log(socket.rooms)
+      io.to(room).emit('created');
+    }, creationTime * 1000);
+  });
+
+  socket.on('disconnect', () => {
+    console.log('disconnect: ' + socket.id);
+  });
+});
+
+server.listen(5000, () => {
+  console.log('listening on *.5000');
+});