Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
Raed committed Oct 29, 2016
0 parents commit b1b4f3c
Show file tree
Hide file tree
Showing 15 changed files with 1,603 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
@@ -0,0 +1,3 @@
.idea
.firebaserc
bower_components
5 changes: 5 additions & 0 deletions README.md
@@ -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.
122 changes: 122 additions & 0 deletions about.html
@@ -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&amp;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>
14 changes: 14 additions & 0 deletions firebase-debug.log
@@ -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
10 changes: 10 additions & 0 deletions firebase.json
@@ -0,0 +1,10 @@
{
"hosting": {
"public": "./",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules"
]
}
}
Binary file added images/profile_placeholder.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
175 changes: 175 additions & 0 deletions index.html
@@ -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&amp;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>
7 changes: 7 additions & 0 deletions manifest.json
@@ -0,0 +1,7 @@
{
"name": "Friendly Chat",
"short_name": "Friendly Chat",
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait"
}
22 changes: 22 additions & 0 deletions manifest.webapp
@@ -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"
}
}
}

0 comments on commit b1b4f3c

Please sign in to comment.