Letterkenny Chat App Structure & Data Pathways (AngularJS/Firebase)
Templates
JS
Assets
controllers
services
directives
HomeControl.js
UserCtrl.js
ModalCtrl.js
AuthenticationService.js
RoomService.js
MessageService.js
home.html
createRoomModal.html
directives
login.html
app.js
loginDirective.js
styles
images
home.css
main.css
normalize.css
letterkenny-chat_landing_background_2.png
letterkenny-chat_navbar_background.png
Build
index.html
firebaserules.txt
README.md
LICENSE
package.json
server.js
node_modules
application entry point [ui-view]
load styles & scripts
configure firebase connection
create app object with name, author info, repo info and dependencies
sets up routing, local port and route error messaging
contains dependency packages not accessed via CDN, stored in local machine or server
<nav>
<btn-group>
chat-dropdown [utilizes Bootstrap uib-dropdown]
'CHAT' <button> [uib-dropdown toggle]
<ul> [rooms-list dropdown menu]
'New Room' <button> [ng-click="home.addRoom()"]
menu item <li> [ng-repeat="room in home.rooms"]
'{{room.name}}' <button> [ng-click="home.setCurrentRoom(room)"]
messages [utilizes ng-show *dependent on status of uib dd toggle]
'{{home.currentRoom.name}}' <div> [messages-header]
<table> [messages-body]
<tr> [messages-row ng-repeat="message in home.messages"]
'{{message.username}}' <td>
'{{message.content}}' <td>
'{{message.sent_at}}' <td>
<table> [send-new-message]
<form> [send-new-message]
<tr> [single-message-row]
'{{home.userName}}' || 'You must be logged in to chat!' <td> [message-author]
<td> [message-input ng-model="home.text"]
'Submit' <td><button> [ng-disabled="!home.userIsLoggedIn" and ng-click="home.send()"]
login-dropdown [utilizes ng-show *dependent on status of !home.userIsLoggedIn]
'LOGIN' <button> [uib-dropdown toggle]
<ul> <login> [load login directive template]
<table> [current-username-display ng-show *dependent on status of home.userIsLoggedIn]
<tr>
'{{home.userName}}' <td>
'LOGOUT' <td><button> [ng-click="home.logout()"]
<section> [modal-box]
'Create New Room' <div> [modal-header]
'Enter a Room Name' <div> [modal-body]
<input> [ng-model="modal.newRoom.$value"]
<div> [modal-footer]
'Cancel' <button> [ng-click="modal.cancel()"]
'Create Room' <button> [ng-click="modal.createRoom()"]
<form> [login-form ng-submit="vm.login()"] form validation enforced with *ng-class
<div> [form-group username]
'Username' <label>
<input> [ng-model="vm.username.$value"]
<span> [ng-show error msg 'Username is required']
<div> [form-group email]
'Email' <label>
<input> [ng-model="vm.email.$value"]
<span> [ng-show error msg 'Email address is required']
<div> [form-group password]
<input> [ng-model="vm.password.$value"]
'Password' <label>
<span> [ng-show error msg 'Password is required']
<div> [form-actions]
'Submit' <button>
Firebase
function config [$locationProvider(html5mode) & $stateProvider(set home url, controller & templateUrl)]
dependencies [ui.router, firebase, ui.bootstrap, ngCookies]
declared vars: var home = this, $scope.authObj = $firebaseAuth() & var firebaseUser = $scope.authObj.$getAuth();
local vars: home.rooms = Room.all, home.currentRoom = null, home.messages = null, home.firebaseUser = firebaseUser, home.currentUser, home.userIsLoggedIn
Authentication methods
home.clearUserAuth() {AuthService.isUserLoggedIn(firebaseUser, home);
if (firebaseUser) { //sign user out of Firebase// $scope.authObj.$signOut();
home.userIsLoggedIn = false; }}
home.logout() { home.clearUserAuth();
//clear cookies// AuthService.clearCredentials();
//get user object from cookies to set currentUser to undefined ?? is this 2nd step actually happening??// AuthService.getUserObject(); }
Room/Message methods
home.setCurrentRoom(room) { home.currentRoom = room; home.messages = Message.getByRoomID(home.currentRoom.$id); }
home.addRoom() { $uib.Modal.open({ templateUrl: '/templates/createRoomModal.html', size: 'sm', controller: 'ModalCtrl as modal'}); }
//listens for sign in & sign out// $scope.authObj.$onAuthStateChanged(function(firebaseUser) { if (firebaseUser != undefined) { currentUser.$cookies.getObject('currentUser'); home.firebaseUser = firebaseUser; home.userName = currentUser.username; home.userIsLoggedIn = true; } else { home.userIsLoggedIn = false; } // ?? is this working properly??// }); }
methods called on page load
//if there's a current firebaseUser, log them out and set home.userIsLoggedIn to false// home.clearUserAuth()
//clear cookies// AuthService.clearCredentials()
home.send() { if (home.text && home.currentRoom) { Message.send(home.userName, home.text, home.currentRoom); home.text = ' '; } else { alert("You must choose a room to chat!); } }
DD Menu methods
home.status = { isopen1: false, isopen2: false }
home.toggled(open) { $log.log('Dropdown is now: ', open); }
home.toggleDropdown = function($event) { $event.preventDefault(); $event.stopPropagation(); home.status.isopen = !home.status.isopen; }
home.appendtoEl = angular.element(document.querySelector('$dropdown-long-content'));
dependencies [Room, Message, AuthService, $log, $uibModal, $scope, $firebaseAuth, $cookies]
declared vars: var vm = this; var userEmail = null; var userPassword = null; var userName = null; $scope.authObj = $firebaseAuth(); & var firebaseUser = $scope.authObj.$getAuth();
local vars: vm.userIsLoggedIn = false; vm.currentUser;
methods
vm.login() { //grab & store user info from login form// userEmail = vm.email.$value; userName = vm.username.$value; userPassword = vm.password.$value; //authenticate user with AngularFire// var credential = firebase.auth.EmailAuthProvider.credential( userEmail, userPassword); $scope.authObj.$signInWithCredental(credential).then(function(firebaseUser) { var userUID = firebaseUser.uid; //store user info locally// AuthService.storeUserLocally(userEmail, userName, userPassword, userUID); //double check that user is logged in and set userIsLoggedIn to true// AuthService.isUserLoggedIn(firebaseUser, vm); //get user object from cookies to set currentUser to object value// AuthService.getUserObject(); vm.currentUser = AuthService.currentUser; }).catch(function(error) { //?? nothing is happening here ??// } except { register(); }); }
var register() { //create & login new user with AngularFire// $scope.authObj.$createUserWithEmailandPassword(userEmail, userPassword) .then( function(firebaseUser) { var userUID = firebaseUser.uid; //store user info locally// AuthService.storeUserLocally(userEmail, userName, userPassword, userUID); //double check that user is logged in and set userIsLoggedIn to true// AuthService.isUserLoggedIn(firebaseUser, vm); //add user to firebase db// AuthService.addUser(); //get user object from cookies and set currentUser to object value// AuthService.getUserObject(); vm.currentUser = AuthService.currentUser; }).catch( function(error) { //console msg & alert only, no explicit redirect??// });
dependencies [AuthService, $scope, $uibModal, $firebaseAuth, $cookies] looks like $uibModal & $cookies is never used??
dependencies [Room, AuthService, $uibModal, $cookies] looks like AuthService & $cookies is never used??
methods
this.cancel() { $uibModalInstance.dismiss(); };
this.createRoom() { Room.add(this.newRoom.$value); $uibModalInstance.close(); }
dependencies: [$firebaseArray]
declared vars: var Message = {}; var ref = firebase.database().ref().child("messages"); var messages = $firebaseArray(ref);
local vars: Message.all = messages;
methods
Message.getByRoomID(roomID) { return $firebaseArray(ref.orderByChild('roomID').equalTo(roomID); }
Message.send(userName, content, room) { messages.$add({ username: userName, content: content, sent_at: firebase.database.ServerValue.TIMESTAMP, roomID: room.$id }); }
dependencies [$firebaseArray]
declared vars: var Room = {}; var ref = firebase.database().ref().child("rooms"); var rooms = $firebaseArray(ref);
local vars = Room.all = rooms;
methods
Room.add(room) { rooms.$add({ name: room, created_at: firebase.database.ServerValue.TIMESTAMP }); }
dependencies [$firebaseArray, $cookies]
declared vars: var AuthService = {}; var ref = firebase.database().ref().child("users"); var users = $firebaseArray(ref)
local vars: AuthService.all = users;
methods
AuthService.getUserObject() { AuthService.currentUser = $cookies.getObject('currentUser'); return AuthService.currentUser; }
AuthService.clearCredentials() { $cookies.remove('currentUser'); }
AuthService.storeUserLocally(userEmail, userName, userPassword, userUID) { var currentUser = { email: userEmail, username: userName, password: userPassword, uid: userUID }; $cookies.putObject('currentUser', currentUser); }
AuthService.isUserLoggedIn(firebaseUser, root) { if (firebaseUser) root.userIsLoggedIn = true; return; //need this return??// } else { root.userIsLoggedIn = false; } }
AuthService.addUser() { var currentUser = $cookies.getObject('currentUser'); user.$add({ email: currentUser.email, username: currentUser.username, password: currentUser.password, uid: currentUser.uid, account_created: firebase.database.ServerValue.TIMESTAMP }).then( function() { //only thing here is console msg??// }) }
login() { return { restrict: 'E', scope: {}, templateUrl: 'templates/directives/login.html', controller: 'UserCtrl', controllerAs: 'vm' }; }