language description

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.firebaseConfig

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;
+}
+<form action="action_page.php">
+  <div class="container">
+    <h1>Register</h1>
+    <p>Please fill in this form to create an account.</p>
+    <hr>
+
+    <label for="email"><b>Email</b></label>
+    <input type="text" placeholder="Enter Email" name="email" id="email" required>
+
+    <label for="psw"><b>Password</b></label>
+    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
+
+    <label for="psw-repeat"><b>Repeat Password</b></label>
+    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
+    <hr>
+
+    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
+    <button type="submit" class="registerbtn">Register</button>
+  </div>
+
+  <div class="container signin">
+    <p>Already have an account? <a href="#">Sign in</a>.</p>
+  </div>
+</form>

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,11 +52,16 @@
 }
 .boxone1{
   width: 430px;
-
   height:150px;
   font-size:25px;
   color: white;
   background-color:hsla(0, 100%, 0%);
   padding: 50px;
   margin: 20px;
 }
+
+.homecss{
+  background-color: white;
+
+
+}

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 (
 
       <div className="App" >
 
         <header className="App-header" >
 
-        <div className="boxone">
-         <div className="boxone1">
-         <p>WELCOME TO DEVCHAT!</p>
-         </div>
+
 
           {
             user
               ? <Home  webs={this.state.web} />
-              : <p>Please sign in.</p>
+              :  <div className="boxone">
+                 <div className="boxone1">
+                 <p>WELCOME TO DEVCHAT!</p>
+                 </div>
+                 </div>
           }
 
-          {
+          { 
             user
-              ? <button onClick={signOut}>Sign out</button>
+              ? <button onClick={signOut} className="btn-success">Sign out</button>
               : <button  onClick={signInWithGoogle} className="btn-success" >Sign in with Google</button>
           }
-           </div>
+
         </header>
       </div>
 

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;
+  }
+

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 (
-      <div>
+      <div id="chat">
         <nav class="navbar"><a href="http://localhost:3000/group#/chat">{this.state.groupname}</a></nav>
         <div className="padding-13 messages-div">
 

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(
       <div class="card">
-    <div className="form-group card-body">
+     <div className="form-group card-body">
         <label >Group name: </label>
         <input className="form-control input-sm" type="text"  onChange={this.onNameChange.bind(this)}/>
         <br></br>
@@ -52,4 +53,5 @@ export default class Group extends Component {
     </div>
     );
   }
-}
+
+}

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(
 
     <Route exact path="/" component={App}></Route>
     <Route exact path="/group/" component={Group}></Route>
-    <Route exact path="/chat" name="chat" component={Chat}></Route></div>
+    <Route exact path="/chat" name="chat" component={Chat}></Route>
+    <Route exact path="/python" component={Chat}></Route>
+    </div>
 </HashRouter>, document.getElementById('root'));
 registerServiceWorker.unregister();

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(
-            <div className="container">
+            <div className="container homecss">
                 <div className="row">
                     {this.renderWeb(this.state.selectedWeb)}
                 </div>

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(
                 <div>
-                    <Group selectedWeb={web} />
+                    <Chat  />
                 </div>
-            );
-        }
+            );*/
+            ReactDOM.render(
+                <React.StrictMode>
+                    <BrowserRouter>
+                    <div><Route exact path="/" component={() => <Chat groupname={web.name}/>} /></div>
+
+                  </BrowserRouter>
+
+                </React.StrictMode>,
+                document.getElementById('root')
+              );
+            }
         else{
             return (
-                <div></div>
+                <div>hello</div>
             );
         }
     }
@@ -41,7 +58,7 @@ import Group from './Chat/Group.js'
                           </CardBody>
 
                 </Card>
-                 <Button color="success" size="lg" block onClick={() => this.renderWeb(web)}>
+                 <Button color="success" size="lg" block onClick={() => renderWeb(web)}>
                           Join
                 </Button>
             </div>  

src/components/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory as history} from 'history';
+
+export default history();