diff --git a/.gitignore b/.gitignore index 4d29575..588c4eb 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.firebaseConfig \ No newline at end of file diff --git a/public/register.html b/public/register.html new file mode 100644 index 0000000..80edee8 --- /dev/null +++ b/public/register.html @@ -0,0 +1,78 @@ +* {box-sizing: border-box} + +/* Add padding to containers */ +.container { + padding: 16px; +} + +/* Full-width input fields */ +input[type=text], input[type=password] { + width: 100%; + padding: 15px; + margin: 5px 0 22px 0; + display: inline-block; + border: none; + background: #f1f1f1; +} + +input[type=text]:focus, input[type=password]:focus { + background-color: #ddd; + outline: none; +} + +/* Overwrite default styles of hr */ +hr { + border: 1px solid #f1f1f1; + margin-bottom: 25px; +} + +/* Set a style for the submit/register button */ +.registerbtn { + background-color: #4CAF50; + color: white; + padding: 16px 20px; + margin: 8px 0; + border: none; + cursor: pointer; + width: 100%; + opacity: 0.9; +} + +.registerbtn:hover { + opacity:1; +} + +/* Add a blue text color to links */ +a { + color: dodgerblue; +} + +/* Set a grey background color and center the text of the "sign in" section */ +.signin { + background-color: #f1f1f1; + text-align: center; +} +
+
+

Register

+

Please fill in this form to create an account.

+
+ + + + + + + + + +
+ +

By creating an account you agree to our Terms & Privacy.

+ +
+ +
+

Already have an account? Sign in.

+
+
diff --git a/src/App.css b/src/App.css index 7c83bd9..7ecce6a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,5 @@ .App { - text-align: center; + text-align: right; } @@ -16,14 +16,14 @@ } .App-header { - background-color: #282c34; + background-image: url(./code.jpg); - min-height: 100vh; + min-height: 200vh; display: flex; flex-direction: column; align-items: center; justify-content: center; - font-size: calc(30px + 2vmin); + color: white; } @@ -52,7 +52,6 @@ } .boxone1{ width: 430px; - height:150px; font-size:25px; color: white; @@ -60,3 +59,9 @@ padding: 50px; margin: 20px; } + +.homecss{ + background-color: white; + + +} diff --git a/src/App.js b/src/App.js index 339daf8..e14bfaf 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,8 @@ import logo from './logo.svg'; import './App.css'; import Home from './components/HomeComponent'; import {WEB} from './components/webtools'; -import firebaseApp from './firebaseConfig' +import firebaseApp from './firebaseConfig'; + //const firebaseApp = firebase.(config); import code from './code.jpg' class App extends Component { @@ -26,29 +27,31 @@ class App extends Component { signInWithGoogle, } = this.props; + return (
-
-
-

WELCOME TO DEVCHAT!

-
+ { user ? - :

Please sign in.

+ :
+
+

WELCOME TO DEVCHAT!

+
+
} - { + { user - ? + ? : } -
+
diff --git a/src/components/Chat/Chat.css b/src/components/Chat/Chat.css new file mode 100644 index 0000000..b39ceb1 --- /dev/null +++ b/src/components/Chat/Chat.css @@ -0,0 +1,56 @@ + +.container { + border: 2px solid #dedede; + background-color: #f1f1f1; + border-radius: 5px; + padding: 10px; + margin: 10px 0; + } +img { + width: 100%; + } + + .message-left { + width: 30%; + display: block; + height:auto; + padding-top:5px; + padding-bottom:0px; + } + .message-right { + width: 30%; + float: right; + display: block; + height:auto; + padding:5px; + } + .text-area { + width: 90%; + height: 55px; + } + .send-btn { + margin-left: 5px; + margin-top: -60px; + } + .textarea-div { + overflow: hidden; + position:fixed; + } + .padding-13 { + padding: 13px; + } + .messages-div { + height: 500px; + overflow: auto; + } + .name-heading { + color: cadetblue; + font-size: 15px; + font-weight: 600; + } + .marg-left-10 { + margin-left: 10px; + font-size: 15px; + padding:0px; + } + \ No newline at end of file diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js index 6c34648..e8e455b 100644 --- a/src/components/Chat/Chat.js +++ b/src/components/Chat/Chat.js @@ -2,8 +2,10 @@ import React, { Component } from 'react'; //import { database } from '../../firebaseConfig'; import Firebase from 'firebase'; //import config from '../../firebaseConfig'; +import './Chat.css'; const database = Firebase.database(); + export default class Chat extends Component { constructor() { super(); @@ -20,7 +22,7 @@ export default class Chat extends Component { componentWillMount() { const username = localStorage.getItem('chat_username'); this.setState({username: username ? username : 'Unknown'}); - const groupname = localStorage.getItem('group_groupname'); + const groupname = localStorage.getItem('chat_groupname'); this.setState({groupname: groupname ? groupname : 'Unknown'}); const messagesRef = database.ref('messages') .orderByKey() @@ -46,7 +48,7 @@ export default class Chat extends Component { render() { return ( -
+
diff --git a/src/components/Chat/Group.js b/src/components/Chat/Group.js index 32d9692..7d5923f 100644 --- a/src/components/Chat/Group.js +++ b/src/components/Chat/Group.js @@ -6,12 +6,13 @@ import Firebase from 'firebase'; //import config from '../../firebaseConfig'; const database = Firebase.database(); export default class Group extends Component { + constructor() { super(); this.state = { groups: [], - groupname: '' + groupname: '' }; } @@ -41,7 +42,7 @@ export default class Group extends Component { render() { return(
-
+


@@ -52,4 +53,5 @@ export default class Group extends Component {
); } -} \ No newline at end of file + +} diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js index 676dea2..b75efe4 100644 --- a/src/components/Chat/index.js +++ b/src/components/Chat/index.js @@ -3,7 +3,8 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from '../App'; import User from './User'; - +import Chat from './Chat/Chat' + import Group from './Group'; import { HashRouter, Route } from 'react-router-dom' @@ -15,6 +16,8 @@ ReactDOM.render( -
+ + +
, document.getElementById('root')); registerServiceWorker.unregister(); \ No newline at end of file diff --git a/src/components/HomeComponent.js b/src/components/HomeComponent.js index fbe6601..0c13c30 100644 --- a/src/components/HomeComponent.js +++ b/src/components/HomeComponent.js @@ -1,6 +1,8 @@ import React , { Component } from 'react'; import 'bootstrap/dist/css/bootstrap.css'; //import { Button } from 'reactstrap'; +import '../App.css'; + import { Card, CardImg, CardImgOverlay, CardText,CardBody, CardTitle } from 'reactstrap'; import HomeDetail from './HomedetailedComponent'; class Home extends Component{ @@ -51,7 +53,7 @@ class Home extends Component{ ); }); return( -
+
{this.renderWeb(this.state.selectedWeb)}
diff --git a/src/components/HomedetailedComponent.js b/src/components/HomedetailedComponent.js index 717b5b5..58cfdf3 100644 --- a/src/components/HomedetailedComponent.js +++ b/src/components/HomedetailedComponent.js @@ -2,7 +2,12 @@ import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import { Button } from 'reactstrap'; import { Card, CardImg, CardText, CardBody, CardTitle } from 'reactstrap'; -import Group from './Chat/Group.js' +import Group from './Chat/Group' +import Chat from './Chat/Chat'; +import history from './history'; +import ReactDOM from 'react-dom'; +import './Chat/Chat' +import { BrowserRouter, Route, Switch } from 'react-router-dom'; function RenderWeb({web}) { return( @@ -18,15 +23,27 @@ import Group from './Chat/Group.js' } function renderWeb(web){ if(web!=null){ - return( + history.push('/'+web.name); + localStorage.setItem('chat_groupname', web.name); + /*return(
- +
- ); - } + );*/ + ReactDOM.render( + + +
} />
+ + + + , + document.getElementById('root') + ); + } else{ return ( -
+
hello
); } } @@ -41,7 +58,7 @@ import Group from './Chat/Group.js' -
diff --git a/src/components/history.js b/src/components/history.js new file mode 100644 index 0000000..af4ad1e --- /dev/null +++ b/src/components/history.js @@ -0,0 +1,3 @@ +import { createBrowserHistory as history} from 'history'; + +export default history(); \ No newline at end of file diff --git a/src/components/webtools.js b/src/components/webtools.js index fec37d6..c13815c 100644 --- a/src/components/webtools.js +++ b/src/components/webtools.js @@ -4,40 +4,40 @@ export const WEB = id: 0, name:'C++', image: 'assets/images/c++.png', - description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', + description:'C++ is an Object Oriented Programming Language (OOPL) and is a highly Flexible language with Versatility. It can be used for developing System Software.', }, { id: 1, name:'python', image: 'assets/images/python.jpg', - description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', + description:'Python is an interpreted, object-oriented programming language, that has gained popularity because of its clear syntax and readability. It is said to be relatively easy to learn and portable.', }, { id: 2, name:'react', image: 'assets/images/react.png', - description:'A quintessential ConFusion experience, is it a vada or is it a donut?', + description:'React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time.', }, { id: 3, name:'Android Studio', image: 'assets/images/android_studio.png', - description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms', + description:'Android Studio is Androids official IDE. It is purpose-built for Android to accelerate your development and help you build the highest-quality apps for every Android device.', }, { id: 4, name:'flutter', image: 'assets/images/flutter.png', - description:'A quintessential ConFusion experience, is it a vada or is it a donut?', + description:'Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web (beta), and desktop (technical preview) from a single codebase.', }, { id: 5, name:'django', image: 'assets/images/django.png', - description:'A quintessential ConFusion experience, django is a python framework', + description:'Django is a high-level Python web framework that enables rapid development of secure and maintainable websites.', } ]; \ No newline at end of file diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js index 2c3f759..c458b9b 100644 --- a/src/firebaseConfig.js +++ b/src/firebaseConfig.js @@ -6,10 +6,14 @@ import firebase from 'firebase'; const config = { - apiKey: '', - authDomain: '', - databaseURL: '', - storageBucket: '' + apiKey: "AIzaSyBbJrhBSj3QC924fQkbRY-L2FYuPutsanA", + authDomain: "intcom-a33ee.firebaseapp.com", + databaseURL: "https://intcom-a33ee.firebaseio.com", + projectId: "intcom-a33ee", + storageBucket: "intcom-a33ee.appspot.com", + messagingSenderId: "147925101589", + appId: "1:147925101589:web:67d769ac6f96b126d0f21c" + }; const firebaseApp = firebase.initializeApp(config); diff --git a/src/index.js b/src/index.js index f5185c1..0f138e0 100644 --- a/src/index.js +++ b/src/index.js @@ -3,9 +3,14 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; - +import { BrowserRouter, Route, Switch } from 'react-router-dom'; +import Chat from './components/Chat/Chat'; ReactDOM.render( + + + + , document.getElementById('root')