profiles wired up

Author: EricSimons

src/js/app.js

@@ -15,6 +15,7 @@ import './profile';
 import './article';
 import './services';
 import './auth';
+import './settings';
 
 
 // Create and bootstrap application
@@ -27,7 +28,8 @@ const requires = [
   'app.profile',
   'app.article',
   'app.services',
-  'app.auth'
+  'app.auth',
+  'app.settings'
 ];
 
 // Mount on window for testing

src/js/auth/auth.config.js

@@ -7,14 +7,24 @@ function AuthConfig($stateProvider, $httpProvider) {
     url: '/login',
     controller: 'AuthCtrl as $ctrl',
     templateUrl: 'auth/auth.html',
-    title: 'Sign in'
+    title: 'Sign in',
+    resolve: {
+      auth: function(User) {
+        return User.ensureAuthIs(false);
+      }
+    }
   })
 
   .state('app.register', {
     url: '/register',
     controller: 'AuthCtrl as $ctrl',
     templateUrl: 'auth/auth.html',
-    title: 'Sign up'
+    title: 'Sign up',
+    resolve: {
+      auth: function(User) {
+        return User.ensureAuthIs(false);
+      }
+    }
   });
 
 };

src/js/auth/auth.controller.js

@@ -3,6 +3,7 @@ class AuthCtrl {
     'ngInject';
 
     this._User = User;
+    this._$state = $state;
 
     this.title = $state.current.title;
     this.authType = $state.current.name.replace('app.', '');
@@ -14,8 +15,7 @@ class AuthCtrl {
 
     this._User.attemptAuth(this.authType, this.formData).then(
       (res) => {
-        this.isSubmitting = false;
-        console.log(res);
+        this._$state.go('app.home');
       },
       (err) => {
         this.isSubmitting = false;

src/js/config/app.config.js

@@ -1,6 +1,10 @@
+import authInterceptor from './auth.interceptor'
+
 function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterProvider) {
   'ngInject';
 
+  $httpProvider.interceptors.push(authInterceptor);
+
   /*
     If you don't want hashbang routing, uncomment this line.
     Our tutorial will be using hashbang routing though :)
@@ -10,7 +14,12 @@ function AppConfig($httpProvider, $stateProvider, $locationProvider, $urlRouterP
   $stateProvider
   .state('app', {
     abstract: true,
-    templateUrl: 'layout/app-view.html'
+    templateUrl: 'layout/app-view.html',
+    resolve: {
+      auth: function(User) {
+        return User.verifyAuth();
+      }
+    }
   });
 
   $urlRouterProvider.otherwise('/');

src/js/config/auth.interceptor.js

@@ -0,0 +1,27 @@
+function authInterceptor(JWT, AppConstants, $window, $q) {
+  'ngInject'
+
+  return {
+    // automatically attach Authorization header
+    request: function(config) {
+      if(config.url.indexOf(AppConstants.api) === 0 && JWT.get()) {
+        config.headers.Authorization = 'Token ' + JWT.get();
+      }
+      return config;
+    },
+
+    // Handle 401
+    responseError: function(rejection) {
+      if (rejection.status === 401) {
+        // clear any JWT token being stored
+        JWT.destroy();
+        // do a hard page refresh
+        $window.location.reload();
+      }
+      return $q.reject(rejection);
+    }
+
+  }
+}
+
+export default authInterceptor;

src/js/layout/header.component.js

@@ -1,8 +1,13 @@
 class AppHeaderCtrl {
-  constructor(AppConstants) {
+  constructor(AppConstants, User, $scope) {
     'ngInject';
 
     this.appName = AppConstants.appName;
+    this.currentUser = User.current;
+
+    $scope.$watch('User.current', (newUser) => {
+      this.currentUser = newUser;
+    })
   }
 }
 

src/js/layout/header.html

@@ -59,8 +59,17 @@
       <li class="nav-item">
         <a class="nav-link"
           ui-sref-active="active"
-          ui-sref="app.profile">
-          My Profile
+          ui-sref="app.settings">
+          <i class="ion-gear-a"></i>&nbsp;Settings
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link"
+          ui-sref-active="active"
+          ui-sref="app.profile({ username: $ctrl.currentUser.username})">
+          <img ng-src="{{$ctrl.currentUser.image}}" class="user-pic" />
+          {{ $ctrl.currentUser.username }}
         </a>
       </li>
 

src/js/profile/profile.config.js

@@ -3,10 +3,19 @@ function ProfileConfig($stateProvider) {
 
   $stateProvider
   .state('app.profile', {
-    url: '/profile',
+    url: '/@:username',
     controller: 'ProfileCtrl',
     controllerAs: '$ctrl',
-    templateUrl: 'profile/profile.html'
+    templateUrl: 'profile/profile.html',
+    resolve: {
+      profile: function(Profile, $state, $stateParams) {
+        return Profile.get($stateParams.username).then(
+          (profile) => profile,
+          (err) => $state.go('app.home')
+        )
+      }
+    }
+
   });
 
 };

src/js/profile/profile.controller.js

@@ -1,7 +1,15 @@
 class ProfileCtrl {
-  constructor() {
+  constructor(profile, User) {
     'ngInject';
 
+    this.profile = profile;
+
+    if (User.current) {
+      this.isUser = (User.current.username === this.profile.username);
+    } else {
+      this.isUser = false;
+    }
+
   }
 }
 

src/js/profile/profile.html

@@ -6,14 +6,21 @@
       <div class="row">
         <div class="col-xs-12 col-md-10 offset-md-1">
 
-          <img class="user-img" />
-          <h4>BradGreen</h4>
-          <p>I'm the dude running the Angular team at Google, yo.</p>
+          <img ng-src="{{::$ctrl.profile.image}}" class="user-img" />
+          <h4 ng-bind="::$ctrl.profile.username"></h4>
+          <p ng-bind="::$ctrl.profile.bio"></p>
 
-          <button class="btn btn-sm btn-outline-secondary action-btn">
+          <a ui-sref="app.settings"
+            class="btn btn-sm btn-outline-secondary action-btn"
+            ng-show="$ctrl.isUser">
+            <i class="ion-gear-a"></i> Edit Profile Settings
+          </a>
+
+          <button class="btn btn-sm btn-outline-secondary action-btn"
+            ng-hide="$ctrl.isUser">
             <i class="ion-plus-round"></i>
             &nbsp;
-            Follow BradGreen
+            Follow
           </button>
 
         </div>