ThinksterIO RealTime Webapp

<!DOCTYPE html>
<html class="no-js">

  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width" />
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body ng-app="app">
    <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
    <!-- Add your site or application content here -->
		<div class="navbar" ui-view="navbar"></div>
		<div class="container" ui-view=""></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-resource.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-cookies.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-sanitize.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-animate.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-touch.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
    <script src="https://cdn.firebase.com/js/client/1.1.2/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.8.2/angularfire.min.js"></script>
    <script src="https://cdn.firebase.com/js/simple-login/1.6.4/firebase-simple-login.js"></script>
    <!-- App files -->
    <script src="app.js"></script>
    <script src="posts.ctrl.js"></script>
    <script src="postview.ctrl.js"></script>
    <script src="auth.ctrl.js"></script>
    <script src="profile.ctrl.js"></script>
    <script src="nav.ctrl.js"></script>
    <script src="post.serv.js"></script>
    <script src="auth.serv.js"></script>
    <script src="url.fltr.js"></script>

  </body>

</html>

var app = angular.module('app', [
		'ui.router',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
		'firebase'
  ])
	.constant('FIREBASE_URL', 'https://angfirenews.firebaseio.com/')
	.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

		$urlRouterProvider.otherwise('/');

		var posts = {
			name: 'posts',
			url: '/posts',
			views: {
				'navbar': {
					templateUrl: 'nav.tpl.html',
					controller: 'NavCtrl'
				},
				'': {
					templateUrl: 'posts.tpl.html',
					controller: 'PostsCtrl'
				}
			}
		};

		var profile = {
			name: 'profile',
			url: '/users/:userId',
			views: {
				'navbar@': {
					templateUrl: 'nav.tpl.html',
					controller: 'NavCtrl'
				},
				'': {
					templateUrl: 'profile.tpl.html',
					controller: 'ProfileCtrl'
				}
			}
		};

		var postView = {
			name: 'posts.postview',
			parent: posts,
			url: '/:postId',
			views: {
				'navbar@': {
					templateUrl: 'nav.tpl.html',
					controller: 'NavCtrl'
				},
				'@posts.postview': {
					templateUrl: 'postview.tpl.html',
					controller: 'PostViewCtrl'
				}
			}
		};

		$stateProvider
			.state(posts)
			.state(postView)
			.state(profile);
}]);

app.controller('PostsCtrl', function ($scope, $location, Post, Auth) {
		$scope.posts = Post.all;
		$scope.user = Auth.user;

		$scope.post = {url: 'http://', title: ''};


		$scope.deletePost = function (post) {
			Post.delete(post);
		};
	});

app.controller('PostViewCtrl', function ($scope, $routeParams, Post, Auth) {
		$scope.post = Post.get($routeParams.postId);
		$scope.comments = Post.comments($routeParams.postId);

		$scope.user = Auth.user;
		$scope.signedIn = Auth.signedIn;

		$scope.addComment = function () {
			if(!$scope.commentText || $scope.commentText === '') {
				return;
			}

			var comment = {
				text: $scope.commentText,
				creator: $scope.user.profile.username,
				creatorUID: $scope.user.uid
			};
			$scope.comments.$add(comment);

			$scope.commentText = '';
		};

		$scope.deleteComment = function (comment) {
			$scope.comments.$remove(comment);
		};

	});

app.controller('AuthCtrl', function ($scope, $location, Auth, user) {
		if (user) {
			$location.path('/');
		}

		$scope.login = function () {
			Auth.login($scope.user).then(function () {
				$location.path('/');
			}, function (error) {
				$scope.error = error.toString();
			});
		};

		$scope.register = function () {
			Auth.register($scope.user).then(function(user) {
				return Auth.login($scope.user).then(function() {
					user.username = $scope.user.username;
					return Auth.createProfile(user);
				}).then(function() {
					$location.path('/');
				});
			}, function(error) {
				$scope.error = error.toString();
			});
		};
	});

app.controller('ProfileCtrl', function ($scope, $routeParams, Profile) {
		var uid = $routeParams.userId;

		$scope.profile = Profile.get(uid);
		Profile.getPosts(uid).then(function(posts) {
			$scope.posts = posts;
		});
	});

app.controller('NavCtrl', function ($scope, $location, Post, Auth) {
		$scope.post = {url: 'http://', title: ''};
		$scope.user = Auth.user;

		$scope.submitPost = function () {
			console.log($scope.user);
			$scope.post.creator = $scope.user.profile.username;
			$scope.post.creatorUID = $scope.user.uid;
			Post.create($scope.post).then(function (ref) {
				$location.path('/posts/' + ref.name());
				$scope.post = {url: 'http://', title: ''};
			});
		};

		$scope.signedIn = Auth.signedIn;
		$scope.logout = Auth.logout;
	});

app.factory('Post', function ($firebase, FIREBASE_URL) {
		var ref = new Firebase(FIREBASE_URL);
		var posts = $firebase(ref.child('posts')).$asArray();
		// console.log($firebase(ref.child('posts')).$asArray());

		var Post = {
			all: posts,
			create: function (post) {
				return posts.$add(post).then(function(postRef) {
					$firebase(ref.child('user_posts').child(post.creatorUID))
														.$push(postRef.name());
					return postRef;
				});
			},
			get: function (postId) {
				return $firebase(ref.child('posts').child(postId)).$asObject();
			},
			delete: function (post) {
				return posts.$remove(post);
			},
			comments: function (postId) {
				return $firebase(ref.child('comments').child(postId)).$asArray();
			}
		};

		return Post;
	});

app.factory('Auth', function ($firebaseSimpleLogin, FIREBASE_URL, $rootScope, $firebase) {
		var ref = new Firebase(FIREBASE_URL);
		var auth = $firebaseSimpleLogin(ref);

		var Auth = {
			register: function (user) {
				return auth.$createUser(user.email, user.password);
			},
			createProfile: function (user) {
				var profile = {
					username: user.username,
					md5_hash: user.md5_hash
				};

				var profileRef = $firebase(ref.child('profile'));
				return profileRef.$set(user.uid, profile);
			},
			login: function (user) {
				return auth.$login('password', user);
			},
			logout: function () {
				auth.$logout();
			},
			resolveUser: function() {
				return auth.$getCurrentUser();
			},
			signedIn: function() {
				return !!Auth.user.provider;
			},
			user: {}
		};

		$rootScope.$on('$firebaseSimpleLogin:login', function(e, user) {
			angular.copy(user, Auth.user);
			Auth.user.profile = $firebase(ref.child('profile').child(Auth.user.uid)).$asObject();

			console.log(Auth.user);
		});
		$rootScope.$on('$firebaseSimpleLogin:logout', function() {
			console.log('logged out');

			if(Auth.user && Auth.user.profile) {
				Auth.user.profile.$destroy();
			}
			angular.copy({}, Auth.user);
		});

		return Auth;
	});

app.filter('hostnameFromUrl', function () {
		return function (str) {
			var url = document.createElement('a');

			url.href = str;

			return url.hostname;
		};
	});

<div class="container posts-page">
  <div class="post row" ng-repeat="post in posts">
    <div class="col-xs-1">
    </div>
    <div class="col-md-9 col-xs-11">

      <div class="info">
        <a ng-href="{{post.url}}">
          {{ post.title }}
          <span class="url">{{ post.url | hostnameFromUrl }}</span>
        </a>
      </div>
      <div>
        <span>submitted by <a ui-sref="profile({userId:post.creatorUID})">{{ post.creator }}</a></span>
				<!-- <p>{{ post.creatorUID }}</p> -->
        &mdash;
        <a ui-sref="posts({postId:post.$id})">comments</a>
				<a ng-click="deletePost(post)" ng-show="user.uid === post.creatorUID">delete</a>
      </div>
    </div>
  </div>
</div>

<div class="container posts-page">

  <div class="post row">
    <div class="col-xs-1">
    </div>
    <div class="col-md-9 col-xs-11">
      <div class="info">
				<a ng-href="{{post.url}}">
          {{ post.title }}
          <span class="url">{{ post.url | hostnameFromUrl }}</span>
        </a>
      </div>
      <div>
        <span>
          submitted by
          <a ui-sref="users({post.creatorUID})">
            {{ post.creator }}
          </a>
        </span>
      </div>
    </div>
    <div class="col-md-2">
    </div>
  </div>

	<div ng-repeat="comment in comments" class="row cmt">
		<div class="col-md-12">
			<p>{{ comment.text }}</p>
			<p class="author">posted by
				<a ui-sref="users({comment.creatorUID})">
					{{ comment.creator }}
				</a>
				<a ng-href=""
					ng-click="deleteComment(comment)"
					ng-show="signedIn() && comment.creatorUID === user.uid"
					>
					(delete)
				</a>
			</p>
		</div>
	</div>

  <div class="cmt-form">
    <div ng-hide="signedIn()">
      <p><a href="#/login">Sign in</a> to post a comment</p>
    </div>

    <form ng-show="signedIn()" ng-submit="addComment()">
      <textarea
        ng-model="commentText"
        placeholder="Post a Comment"
        class="form-control"></textarea><br />
      <input type="submit" value="Post Comment" class="btn btn-primary" />
    </form>
  </div>

</div>

<div class="container profile">
  <div class="row">
    <div class="col-sm-1">
      <img ng-src="http://www.gravatar.com/avatar/{{ profile.md5_hash }}" class="prof-img" />
    </div>

    <div class="col-sm-10">
      <span class="name">
        {{ profile.username }}
      </span>
    </div>
  </div>

  <div class="post row" ng-repeat="(key,post) in posts">
    <div class="col-md-8 col-xs-10">
      <div class="info">
        <a ng-href="{{ post.url }}">
          {{ post.title }}
          <span class="url">({{ post.url | hostnameFromUrl }})</span>
        </a>
      </div>
      <div>
        <a ui-sref="posts({postID:post.$id})">comments</a>
      </div>
    </div>
  </div>
</div>

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" ui-sref="home">ng-news</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div ng-controller="NavCtrl" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		<form class="navbar-form navbar-left" role="search" ng-submit="submitPost()" ng-show="signedIn()">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Title" ng-model="post.title">
      </div>
      <div class="form-group">
      <input type="text" class="form-control" placeholder="Link" ng-model="post.url">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

		<ul class="nav navbar-nav navbar-right" >
			<li ng-show="signedIn()">
				<p class="navbar-text">{{ user.profile.username }}</p>
			</li>
			<li ng-show="signedIn()">
				<a ui-sref="profile({userProfile:user.profile.uid})">
					<img ng-src="http://www.gravatar.com/avatar/{{ user.profile.md5_hash }}" class="nav-pic" />
					{{ currentUser.username }}
				</a>
			</li>
			<li ng-show="signedIn()">
				<a ui-sref="home" ng-click="logout()">Logout</a>
			</li>
			<li ng-hide="signedIn()">
				<a ui-sref="login">Login</a>
			</li>
			<li ng-hide="signedIn()">
				<a ui-sref="register">Register</a>
			</li>
		</ul>

  </div><!-- /.navbar-collapse -->
</nav>