Commit 37b45122 authored by Krish Moodbidri's avatar Krish Moodbidri
Browse files

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

Feat update ui

See merge request !3
parents 59ee94ac ebe4830c
This diff is collapsed.
......@@ -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"
}
}
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;
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;
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
);
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');
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment