+ Eum ipsam laborum deleniti velit pariatur architecto aut nihil
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
deleted file mode 100644
index b505c2e..0000000
--- a/frontend/src/App.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import './App.scss';
-import {
- Button,
- Container
-} from 'react-bootstrap';
-
-function App() {
- return (
-
- Hello!
-
-
- );
-}
-
-export default App;
diff --git a/frontend/src/auth/PrivateRoute.js b/frontend/src/auth/PrivateRoute.js
new file mode 100644
index 0000000..0da83a7
--- /dev/null
+++ b/frontend/src/auth/PrivateRoute.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Route, Redirect, BrowserRouter as Router } from 'react-router-dom'
+import LoadingPage from '../pages/LoadingPage';
+
+class PrivateRoute extends React.Component {
+ state = {
+ authorized: false,
+ waiting: true
+ }
+ componentDidMount() {
+ fetch('/api')
+ .then(res => res.json())
+ .then(res => {
+ this.setState({ authorized: res.loggedIn, waiting: false })
+ });
+ }
+
+ render() {
+ let { component: Component, ...rest} = this.props;
+ let { authorized, waiting } = this.state;
+
+ if (waiting)
+ return authorized === true
+ ?
,
document.getElementById('root')
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index ec2585e..5ca8a3f 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -11,3 +11,5 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
diff --git a/frontend/src/pages/App.js b/frontend/src/pages/App.js
deleted file mode 100644
index 267e090..0000000
--- a/frontend/src/pages/App.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import './App.scss';
-import {
- Button,
- Container
-} from 'react-bootstrap';
-
-function App() {
- return (
-
- Hello!
-
-
- );
-}
-
-export default App;
diff --git a/frontend/src/pages/App.scss b/frontend/src/pages/App.scss
deleted file mode 100644
index 93c4b1c..0000000
--- a/frontend/src/pages/App.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
new file mode 100644
index 0000000..335abe4
--- /dev/null
+++ b/frontend/src/pages/Home.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+ Container,
+ Button
+} from 'react-bootstrap';
+
+class Home extends React.Component {
+ state = {
+ web: ''
+ }
+ componentDidMount() {
+ fetch('/home.html')
+ .then(res => res.text())
+ .then(body => this.setState({ web: body }))
+ }
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default Home;
\ No newline at end of file
diff --git a/frontend/src/pages/LoadingPage.js b/frontend/src/pages/LoadingPage.js
new file mode 100644
index 0000000..a13835f
--- /dev/null
+++ b/frontend/src/pages/LoadingPage.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+ Spinner
+} from 'react-bootstrap';
+
+function LoadingPage() {
+ return (
+
+
+
+ );
+}
+
+export default LoadingPage;
\ No newline at end of file
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.js
new file mode 100644
index 0000000..9d181da
--- /dev/null
+++ b/frontend/src/pages/Login.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+ Container,
+ Alert,
+ Button,
+ Form
+} from 'react-bootstrap';
+
+class Login extends React.Component {
+ state = {
+ showDialog: false,
+ username: '',
+ password: ''
+ }
+
+ componentDidMount() {
+ console.log(this.props)
+ if (this.props.location.state)
+ this.setState({ showDialog: this.props.location.state.redirectFromUnauthorized });
+ }
+
+ render() {
+ return (
+
+
+ {this.state.showDialog && ( +
+ You must be logged in to access that page.
+
+ )}
+
+
+ );
+ }
+}
+
+ export default Login;
\ No newline at end of file
diff --git a/frontend/src/pages/User.js b/frontend/src/pages/User.js
index 104af4e..e97522d 100644
--- a/frontend/src/pages/User.js
+++ b/frontend/src/pages/User.js
@@ -2,13 +2,75 @@ import React from 'react';
import {
Container
} from 'react-bootstrap';
+import { connect, createLocalTracks } from 'twilio-video';
+
+
+class User extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ token: null,
+ tracks: []
+ }
+ this.participantJoined = this.participantJoined.bind(this);
+
+ this.mainVideo = React.createRef();
+ }
+
+ componentDidMount() {
+ fetch('/api/token')
+ .then(res => res.json())
+ .then(res => {
+ this.setState({ token: res.jwt }, this.connectRoom);
+ });
+ }
+
+ participantJoined(participant) {
+ console.log(`A remote Participant connected: ${participant}`);
+ participant.tracks.forEach(publication => {
+ if (publication.isSubscribed) {
+ const track = publication.track;
+ // document.getElementById('remote-media-div').appendChild(track.attach());
+ }
+ });
+
+ participant.on('trackSubscribed', track => {
+ // document.getElementById('remote-media-div').appendChild(track.attach());
+ });
+ }
+
+ connectRoom() {
+ connect(this.state.token, {
+ audio: 'true',
+ name: 'LectureOne',
+ video: { width: 1080 }
+ }).then(room => {
+ console.log(`Successfully joined a Room: ${room}`);
+ room.on('participantConnected', this.participantJoined);
+
+ const localParticipant = room.localParticipant;
+ console.log(`Connected to the Room as LocalParticipant "${localParticipant.identity}"`);
+
+ localParticipant.videoTracks.forEach(publication => {
+ console.log(publication)
+ publication.track.attach(this.mainVideo.current);
+ });
+ }, error => {
+ console.error(`Unable to connect to Room: ${error.message}`);
+ });
+ }
+
+ render() {
+ return (
+
- This is the User page
-
- );
}
-export default App;
+export default User;
+
+
+
diff --git a/frontend/src/pages/VideoChat.js b/frontend/src/pages/VideoChat.js
new file mode 100644
index 0000000..bb5370c
--- /dev/null
+++ b/frontend/src/pages/VideoChat.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+ Container
+} from 'react-bootstrap';
+
+function VideoChat() {
+ return (
+
+ This is the Video Chat page
+
+ );
+}
+
+ export default VideoChat;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 92577f9..98a138b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,11 +31,6 @@
"lodash-es": "^4.17.15"
}
},
- "@twilio/webrtc": {
- "version": "4.3.2",
- "resolved": "https://registry.npmjs.org/@twilio/webrtc/-/webrtc-4.3.2.tgz",
- "integrity": "sha512-3gIq7XDI3vBoikRBchCnocFmlRQt45KC7v0DKkat+TV6WBXYJx+Hub22PR18PAROkwl5dAmIziByjYWWVhCHgA=="
- },
"@types/classnames": {
"version": "2.2.10",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.10.tgz",
@@ -144,11 +139,6 @@
"resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
"integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
},
- "async-limiter": {
- "version": "1.0.1",
- "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
- "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
- },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -164,14 +154,6 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz",
"integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA=="
},
- "backoff": {
- "version": "2.5.0",
- "resolved": "https://registry.npmjs.org/backoff/-/backoff-2.5.0.tgz",
- "integrity": "sha1-9hbtqdPktmuMp/ynn2lXIsX44m8=",
- "requires": {
- "precond": "0.2"
- }
- },
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1129,11 +1111,6 @@
"pinkie": "^2.0.0"
}
},
- "precond": {
- "version": "0.2.3",
- "resolved": "https://registry.npmjs.org/precond/-/precond-0.2.3.tgz",
- "integrity": "sha1-qpWRvKokkj8eD0hJ0kD0fvwQdaw="
- },
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -1599,22 +1576,6 @@
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
},
- "twilio-video": {
- "version": "2.7.2",
- "resolved": "https://registry.npmjs.org/twilio-video/-/twilio-video-2.7.2.tgz",
- "integrity": "sha512-x9Y7P03uc9xWwAIvKLLWsGRILOcAG88M5qH1p0K6DKGRCzfcX356K0rv25UINAmdq5uOOHlqaCYYUG1aVo7B5w==",
- "requires": {
- "@twilio/webrtc": "4.3.2",
- "backoff": "^2.5.0",
- "ws": "^3.3.1",
- "xmlhttprequest": "^1.8.0"
- }
- },
- "ultron": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
- "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
- },
"uncontrollable": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
@@ -1731,21 +1692,6 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
},
- "ws": {
- "version": "3.3.3",
- "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
- "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
- "requires": {
- "async-limiter": "~1.0.0",
- "safe-buffer": "~5.1.0",
- "ultron": "~1.1.0"
- }
- },
- "xmlhttprequest": {
- "version": "1.8.0",
- "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
- "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
- },
"y18n": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
diff --git a/package.json b/package.json
index 5cdbe33..591d1a5 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
"concurrency": "^0.1.4",
"concurrently": "^5.3.0",
"node-sass": "^4.14.1",
- "react-bootstrap": "^1.3.0",
- "twilio-video": "^2.7.2"
+ "react-bootstrap": "^1.3.0"
}
}
About
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
-
+ 01 Non consectetur a erat nam at lectus urna duis?
+ ++
+ Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. +
+
+
+ -
+ 02 Feugiat scelerisque varius morbi enim nunc?
+ ++
+ Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui. +
+
+
+ -
+ 03 Dolor sit amet consectetur adipiscing elit?
+ ++
+ Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi quis +
+
+
+
+
+
+
+
+
+ Team
+Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Walter White
+ Chief Executive Officer +Explicabo voluptatem mollitia et repellat qui dolorum quasi
+ +
+
+
+
+ 
+
+
+
+ Sarah Jhonson
+ Product Manager +Aut maiores voluptates amet et quis praesentium qui senda para
+ +
+
+
+
+ 
+
+
+
+ William Anderson
+ CTO +Quisquam facilis cum velit laborum corrupti fuga rerum quia
+ +
+
+
+
+ 
+
+
+
+ Amanda Jepson
+ Accountant +Dolorum tempora officiis odit laborum officiis et et accusamus
+ +
+
+
+
+
+
+ Contact
+Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Location:
+A108 Adam Street, New York, NY 535022
+
+
+
+
+ Email:
+info@example.com
+
+
+
+
+
+ Call:
++1 5589 55488 55s
+
+
+
+
+
-
|
+ |
+
+ {this.state.showDialog && ( +
+
+
+ );
+ }
-function App() {
- return (
-