Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Raed
committed
Oct 29, 2016
0 parents
commit b1b4f3c
Showing
15 changed files
with
1,603 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.idea | ||
.firebaserc | ||
bower_components |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Firebase: Build a Real Time Web Chat App Codelab - Start code | ||
|
||
This folder contains the starting code for the [Firebase: Build a Real Time Web Chat App Codelab](https://codelabs.developers.google.com/codelabs/firebase-web/). | ||
|
||
If you'd like to jump directly to the end and see the finished code head to the [web](../web) directory. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | ||
<title>CryptoFire Chat - How it works</title> | ||
<link rel="stylesheet" | ||
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.teal-red.min.css"> | ||
<link rel="stylesheet" href="styles/about.css"> | ||
</head> | ||
<body> | ||
<div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100"> | ||
<header class="demo-header mdl-layout__header mdl-layout__header--scroll mdl-color--grey-100 mdl-color-text--grey-800"> | ||
<div class="mdl-layout__header-row"> | ||
<span class="mdl-layout-title"> | ||
<a href="index.html" class="mdl-button mdl-js-button mdl-button--fab"> | ||
<i class="material-icons">chevron_left</i> | ||
</a> | ||
FireCrypto Chat - How it works</span> | ||
<div class="mdl-layout-spacer"></div> | ||
</div> | ||
</header> | ||
<div class="demo-ribbon"></div> | ||
<main class="demo-main mdl-layout__content"> | ||
<div class="demo-container mdl-grid"> | ||
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> | ||
<div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col"> | ||
<h3>General</h3> | ||
<p> | ||
This is a weekend project that is meant to test the <a target="_blank" | ||
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">WebCryptoAPI</a> | ||
and <a target="_blank" | ||
href="https://firebase.google.com/">Firebase</a>. | ||
Messages are end-to-end encrypted between the users. Furthermore, messages are destroyed on the | ||
server | ||
as soon as they reach their destination. | ||
<br> | ||
The app is based on the <a href="https://codelabs.developers.google.com/codelabs/firebase-web/">Firebase | ||
Friendly Chat</a> starter project. | ||
</p> | ||
<p> | ||
Conversations are organized into chat rooms. Each room is identified by a unique name in the URL | ||
that can be shared with another person to start a conversation. | ||
<br> | ||
Each room supports (for now) 2 users: | ||
<ul> | ||
<li><b>Host</b>: Creates the room, with a unique id.</li> | ||
<li><b>Guest</b>: Joins a room after receiving a room id (or stumbling onto one).</li> | ||
</ul> | ||
|
||
</p> | ||
<hr> | ||
<h3>Firebase</h3> | ||
<p> | ||
I have picked Firebase as a backend for this app because it offered a simple integration for user | ||
profiles | ||
and a real-time database to exchange messages. | ||
<br> | ||
I used to be a Parse fanboy for a long time, and Firebase seemed lacking before, but I'm starting to | ||
see its appeal. | ||
<br> | ||
However, the plan is to move away from centralized solutions to a p22p one | ||
(WebRTC maybe, if I ever manage to get it to work). | ||
</p> | ||
<hr> | ||
<h3> | ||
Why login with Google? | ||
</h3> | ||
<p> | ||
I needed a way to uniquely identify users, Google is the default integration with Firebase but I | ||
will | ||
add other providers like Github, Twitter and Facebook. | ||
<br> | ||
The chat can function purely on usernames but that would be done later. | ||
</p> | ||
<h3>Can I use this?</h3> | ||
<p> | ||
Use it for fun, experiments and break it! | ||
<br> | ||
This is <b>NOT meant for any serious use!</b> This is just an experiment. | ||
</p> | ||
<p> | ||
If you find a bug, <a href="mailto:raed.chammam@gamil.com">email me</a>. | ||
</p> | ||
<p> | ||
If you feel like contributing, the code is <a href="https://github.com/RaedsLab/CryptoFire-Chat">available</a>. | ||
</p> | ||
<hr> | ||
</div> | ||
</div> | ||
<footer class="demo-footer mdl-mini-footer"> | ||
<div class="mdl-mini-footer--left-section"> | ||
<ul class="mdl-mini-footer--link-list"> | ||
<li><a href="https://raed.it"><b>Raed Chammam</b></a></li> | ||
</ul> | ||
All rights reserved to their respective owners (Google Inc / François Pirsch / etc). | ||
</div> | ||
</footer> | ||
</main> | ||
</div> | ||
<script> | ||
(function (i, s, o, g, r, a, m) { | ||
i['GoogleAnalyticsObject'] = r; | ||
i[r] = i[r] || function () { | ||
(i[r].q = i[r].q || []).push(arguments) | ||
}, i[r].l = 1 * new Date(); | ||
a = s.createElement(o), | ||
m = s.getElementsByTagName(o)[0]; | ||
a.async = 1; | ||
a.src = g; | ||
m.parentNode.insertBefore(a, m) | ||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); | ||
ga('create', 'UA-68678399-1', 'auto'); | ||
ga('send', 'pageview'); | ||
</script> | ||
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
[debug] ---------------------------------------------------------------------- | ||
[debug] Command: C:\Program Files\nodejs\node.exe C:\Users\Lenovo\AppData\Roaming\npm\node_modules\firebase-tools\bin\firebase serve | ||
[debug] CLI Version: 3.0.8 | ||
[debug] Platform: win32 | ||
[debug] Node Version: v4.4.0 | ||
[debug] Time: Sat Oct 29 2016 09:07:00 GMT+0100 (W. Europe Standard Time) | ||
[debug] ---------------------------------------------------------------------- | ||
[debug] | ||
[info] Starting Firebase development server... | ||
[info] | ||
[info] Project Directory: C:\Users\Lenovo\Desktop\chat | ||
[info] Public Directory: ./ | ||
[info] | ||
[info] Server listening at: http://localhost:5000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"hosting": { | ||
"public": "./", | ||
"ignore": [ | ||
"firebase.json", | ||
"database-rules.json", | ||
"storage.rules" | ||
] | ||
} | ||
} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,175 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="description" content="Encrypted chat experiment using Firebase and WebCrypto API."> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>CryptoFire Chat</title> | ||
<!-- Web Application Manifest --> | ||
<link rel="manifest" href="manifest.json"> | ||
|
||
<!-- Material Design Lite --> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-pink.min.css"/> | ||
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> | ||
|
||
<!-- App Styling --> | ||
<link rel="stylesheet" | ||
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en"> | ||
<link rel="stylesheet" href="styles/main.css"> | ||
</head> | ||
<body> | ||
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header"> | ||
|
||
<!-- Header section containing logo --> | ||
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"> | ||
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid"> | ||
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"> | ||
<h3><i class="material-icons">chat_bubble_outline</i><span style="color: red; text-decoration: double;">CryptoFire</span> | ||
Chat</h3> | ||
</div> | ||
<div id="user-container"> | ||
<div hidden id="user-pic"></div> | ||
<div hidden id="user-name"></div> | ||
<div id="room"></div> | ||
<button hidden id="sign-out" | ||
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> | ||
Sign-out | ||
</button> | ||
</div> | ||
</div> | ||
</header> | ||
|
||
<main class="mdl-layout__content mdl-color--grey-100"> | ||
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid"> | ||
<!-- Messages container --> | ||
<div id="messages-card" | ||
class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop"> | ||
<div class="mdl-card__supporting-text mdl-color-text--grey-600"> | ||
<div id="messages"> | ||
<div class='noselect' id='signInMessage'>Sign-in to be able to view and send messages</div> | ||
<span id="message-filler"></span> | ||
</div> | ||
<form id="message-form" action="#"> | ||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> | ||
<input class="mdl-textfield__input" type="text" id="message"> | ||
<label class="mdl-textfield__label" for="message">Message...</label> | ||
</div> | ||
<button id="submit" disabled type="submit" | ||
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> | ||
Send | ||
</button> | ||
</form> | ||
</div> | ||
</div> | ||
|
||
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar"> | ||
<div class="mdl-snackbar__text"></div> | ||
<button class="mdl-snackbar__action" type="button"></button> | ||
</div> | ||
</div> | ||
</main> | ||
</div> | ||
|
||
<dialog id="newRoomModal" class="mdl-dialog"> | ||
<h4 class="mdl-dialog__title">New room?</h4> | ||
<div class="mdl-dialog__content"> | ||
<p id="newMessage"> | ||
</p> | ||
<p>Join a random room:<br> <span id="rooms"><a href="#">blablah</a>, <a href="#">blablahx</a></span></p> | ||
<p>Or create new chat room.</p> | ||
<p> | ||
<button id="createNewRoom" style="display: block; width: 95%;" | ||
class="mdl-button mdl-js-button mdl-button--colored">New chat | ||
</button> | ||
</p> | ||
</div> | ||
</dialog> | ||
|
||
<dialog id="LoginModal" class="mdl-dialog"> | ||
<h4 class="mdl-dialog__title">Sign-in</h4> | ||
<div class="mdl-dialog__content"> | ||
<p> | ||
Sign in to join the chat room. | ||
</p> | ||
|
||
<h4>What is this?</h4> | ||
<p> | ||
This is a simple chat application based on <a target="_blank" | ||
href="https://firebase.google.com/">Firebase</a> and the <a | ||
target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">Web Crypto | ||
API</a>. | ||
|
||
This is an <a href="https://github.com/RaedsLab/CryptoFire-Chat" target="_blank">open-source</a> end-to-end encryption solution, where the content of | ||
messages is completely hidden from the sever. | ||
<hr> | ||
Check <a href="about.html">How it works</a> | ||
</p> | ||
</div> | ||
<div class="mdl-dialog__actions"> | ||
<button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue"> | ||
<i class="material-icons">account_circle</i>Sign-in with Google | ||
</button> | ||
</div> | ||
</dialog> | ||
|
||
<dialog id="encryptionModal" class="mdl-dialog"> | ||
<h4 class="mdl-dialog__title">Encryption</h4> | ||
<div class="mdl-dialog__content"> | ||
<p> | ||
This password protects private conversations. | ||
</p> | ||
<br> | ||
<input class="mdl-textfield__input" placeholder="Encryption password" id="encryptionPassword" type="password"/> | ||
<br> | ||
<p id="status"> | ||
</p> | ||
<div id="passwordProgress" class="mdl-progress mdl-js-progress"></div> | ||
<div id="oldPassword"> | ||
If you forgot your password, you can reset your ID. | ||
</div> | ||
</div> | ||
<div class="mdl-dialog__actions"> | ||
<button id="passwordSubmitButton" type="button" class="mdl-button">Join</button> | ||
<button id="resetIdButton" type="button" class="mdl-button mdl-button--accent">Reset ID</button> | ||
</div> | ||
</dialog> | ||
|
||
<!-- Firebase --> | ||
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script> | ||
<script type="text/javascript" src="bower_components/chance/chance.js"></script> | ||
<script type="text/javascript" src="bower_components/js-sha512/build/sha512.min.js"></script> | ||
<script src="scripts/twin-bcrypt.min.js"></script> | ||
<script> | ||
// Initialize Firebase | ||
var config = { | ||
apiKey: "AIzaSyB9_xpk55KwO3F0EnkCEUKa9raJeQC5WU0", | ||
authDomain: "chat-a9892.firebaseapp.com", | ||
databaseURL: "https://chat-a9892.firebaseio.com", | ||
storageBucket: "chat-a9892.appspot.com", | ||
messagingSenderId: "926103648345" | ||
}; | ||
firebase.initializeApp(config); | ||
|
||
(function (i, s, o, g, r, a, m) { | ||
i['GoogleAnalyticsObject'] = r; | ||
i[r] = i[r] || function () { | ||
(i[r].q = i[r].q || []).push(arguments) | ||
}, i[r].l = 1 * new Date(); | ||
a = s.createElement(o), | ||
m = s.getElementsByTagName(o)[0]; | ||
a.async = 1; | ||
a.src = g; | ||
m.parentNode.insertBefore(a, m) | ||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); | ||
|
||
ga('create', 'UA-68678399-1', 'auto'); | ||
ga('send', 'pageview'); | ||
|
||
</script> | ||
<script src="scripts/util.js"></script> | ||
<script src="scripts/webCrypto.js"></script> | ||
<script src="scripts/main.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"name": "Friendly Chat", | ||
"short_name": "Friendly Chat", | ||
"start_url": "/index.html", | ||
"display": "standalone", | ||
"orientation": "portrait" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
{ | ||
"version": "1.0.0", | ||
"name": "CryptoFire Chat", | ||
"launch_path": "/index.html", | ||
"description": "Chat with friends using Firebase and WebCrypto", | ||
"developer": { | ||
"name": "Raed Chammam", | ||
"url": "https://raed.it" | ||
}, | ||
"installs_allowed_from": [ | ||
"*" | ||
], | ||
"default_locale": "en", | ||
"permissions": { | ||
}, | ||
"locales": { | ||
"en": { | ||
"name": "CryptoFire", | ||
"description": "Chat with friends using Firebase and WebCrypto" | ||
} | ||
} | ||
} |
Oops, something went wrong.