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_landing_background_2

letterkenny-chat_navbar_background.png letterkenny-chat_navbar_background

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