feat(avatar): default user avatar

src/api/db/migrations.ts

@@ -11,7 +11,7 @@ export function create(): Promise<null> {
       t.string('fullname').notNullable();
       t.string('password').notNullable();
       t.boolean('admin').notNullable().defaultTo(false);
-      t.string('avatar').notNullable().defaultTo('images/avatars/user.png');
+      t.string('avatar').notNullable().defaultTo('avatars/user.png');
       t.timestamps();
     })
     .then(() => schema.createTableIfNotExists('repositories', (t: knex.TableBuilder) => {

src/api/db/user.ts

@@ -13,6 +13,24 @@ export function getUser(id: number): Promise<any> {
   });
 }
 
+export function getUsers(): Promise<any> {
+  return new Promise((resolve, reject) => {
+    new User().fetchAll().then(users => {
+      if (!users) {
+        reject(users);
+      } else {
+        let data = users.toJSON();
+        data = data.map(user => {
+          delete user.password;
+          return user;
+        });
+
+        resolve(data);
+      }
+    });
+  });
+}
+
 export function updateUser(data: any): Promise<any> {
   return new Promise((resolve, reject) => {
     new User({ id: data.id }).save(data, { method: 'update', require: false })

src/api/server-routes.ts

@@ -7,7 +7,15 @@ import { Observable } from 'rxjs';
 import { exists } from './fs';
 import { getFilePath } from './utils';
 import { reinitializeDatabase } from './db/migrations';
-import { usersExists, createUser, login, getUser, updateUser, updateUserPassword } from './db/user';
+import {
+  usersExists,
+  createUser,
+  login,
+  getUser,
+  updateUser,
+  updateUserPassword,
+  getUsers
+} from './db/user';
 import { addRepository, getRepositories, getRepository, getRepositoryBadge } from './db/repository';
 import { getBuilds, getBuild } from './db/build';
 import { getJob } from './db/job';
@@ -20,6 +28,7 @@ export function webRoutes(): express.Router {
   router.use('/js', express.static(resolve(__dirname, '../app/js'), { index: false }));
   router.use('/images', express.static(resolve(__dirname, '../app/images'), { index: false }));
   router.use('/css/fonts', express.static(resolve(__dirname, '../app/fonts'), { index: false }));
+  router.use('/avatars', express.static(getFilePath('avatars'), { index: false }));
 
   router.get('/setup', index);
   router.get('/login', index);
@@ -61,6 +70,14 @@ export function jobRoutes(): express.Router {
 export function userRoutes(): express.Router {
   const router = express.Router();
 
+  router.get('/', (req: express.Request, res: express.Response) => {
+    getUsers().then(users => {
+      return res.status(200).json({ data: users });
+    }).catch(err => {
+      return res.status(200).json({ err: err });
+    });
+  });
+
   router.post('/login', (req: express.Request, res: express.Response) => {
     login(req.body).then(credentials => {
       res.status(200).json({ data: credentials });

src/api/utils.ts

@@ -37,6 +37,11 @@ export function initSetup(): Promise<null> {
       const srcDir = resolve(__dirname, '../../src/files');
       const destDir = getFilePath('docker-files');
       return copyFile(srcDir, destDir);
+    })
+    .then(() => {
+      const avatarDir = resolve(__dirname, '../../src/avatars');
+      const destDir = getFilePath('avatars');
+      return copyFile(avatarDir, destDir);
     });
 }
 

src/app/components/app-header/app-header.component.html

@@ -15,7 +15,7 @@
     </div>
     <div class="nav-right">
       <a class="nav-item user-item" (click)="toggleMenu()">
-        <img class="nav-avatar" src="https://avatars0.githubusercontent.com/u/1796022?v=3&s=460">
+        <img class="nav-avatar" [src]="user.avatar">
         <div class="nav-dropdown" *ngIf="menuDropped">
           <a class="nav-dropdown-item" routerLink="/settings">
             Settings

src/app/components/app-header/app-header.component.ts

@@ -1,18 +1,21 @@
-import { Component, HostListener, ElementRef } from '@angular/core';
+import { Component, HostListener, ElementRef, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { AuthService } from '../../services/auth.service';
+import { ConfigService } from '../../services/config.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: 'app-header.component.html'
 })
-export class AppHeaderComponent {
+export class AppHeaderComponent implements OnInit {
   menuDropped: boolean;
+  user: any;
 
   constructor(
     private authService: AuthService,
     private router: Router,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private config: ConfigService
   ) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -21,6 +24,11 @@ export class AppHeaderComponent {
     });
   }
 
+  ngOnInit() {
+    this.user = this.authService.getData();
+    this.user.avatar = this.config.url + '/' + this.user.avatar;
+  }
+
   toggleMenu() {
     this.menuDropped = !this.menuDropped;
   }

src/app/components/app-settings/app-settings.component.html

@@ -25,7 +25,7 @@ <h1>My Settings</h1>
     <div class="columns is-multiline">
       <div class="column is-4">
         <figure class="image profile-image">
-          <img src="https://avatars0.githubusercontent.com/u/1796022?v=3&s=460">
+          <img [src]="avatarUrl">
         </figure>
       </div>
       <div class="column is-8">

src/app/components/app-settings/app-settings.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { AuthService } from '../../services/auth.service';
+import { ConfigService } from '../../services/config.service';
 
 export interface IUser {
   id: number;
@@ -26,8 +27,9 @@ export class AppSettingsComponent implements OnInit {
   user: IUser;
   userPasswordSaved: boolean;
   userPass: IUserPass;
+  avatarUrl: string;
 
-  constructor(private api: ApiService, private auth: AuthService) { }
+  constructor(private api: ApiService, private auth: AuthService, private config: ConfigService) { }
 
   ngOnInit() {
     const data: any = this.auth.getData();
@@ -44,6 +46,8 @@ export class AppSettingsComponent implements OnInit {
       password: '',
       repeat_password: ''
     };
+
+    this.avatarUrl = this.config.url + '/' + data.avatar;
   }
 
   updateProfile(e: MouseEvent): void {

src/app/components/app-team/app-team.component.html

@@ -19,8 +19,46 @@ <h1>Team</h1>
   <div class="columns">
     <div class="column is-12">
       <div class="content">
+        <div *ngIf="loading">
+          <img src="images/icons/flickr.svg" class="main-loader">
+        </div>
 
+        <div class="columns is-multiline" *ngIf="!loading">
+          <div class="column is-12" *ngIf="!users || !users.length">
+            <div class="notification is-info">
+              No users found.
+            </div>
+          </div>
+
+          <div class="column is-12" *ngIf="users && users.length">
+            <div class="columns list-item list-item-slim" *ngFor="let user of users; let i = index;">
+              <div class="column is-3">
+                <span class="icon">
+                  <img src="images/icons/git-repository.svg">
+                </span>
+                <span class="bold">{{ user.full_name }}</span>
+              </div>
+              <div class="column is-5">
+                <span class="icon">
+                  <img src="images/icons/github-white.svg">
+                </span>
+                <span>{{ user.email }}</span>
+              </div>
+              <div class="column is-2">
+                <span class="icon">
+                  <img src="images/icons/git-branch.svg">
+                </span>
+                <span>{{ user.id }}</span>
+              </div>
+              <div class="column is-2 justify-end">
+                <!-- <img [src]="repo.status_badge"> -->
+              </div>
+            </div>
+          </div>
+
+        </div>
       </div>
     </div>
   </div>
 </div>
+

src/app/components/app-team/app-team.component.ts

@@ -1,7 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../services/api.service';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-team',
   templateUrl: 'app-team.component.html'
 })
-export class AppTeamComponent { }
+export class AppTeamComponent implements OnInit {
+  loading: boolean;
+  users: any[];
+
+  constructor(private api: ApiService, private auth: AuthService) {
+    this.loading = true;
+    this.users = [];
+  }
+
+  ngOnInit() {
+    this.fetch();
+  }
+
+  fetch(): void {
+    this.loading = true;
+    this.api.getUsers().subscribe(event => {
+      this.users = event;
+      this.loading = false;
+    });
+  }
+}

src/app/services/api.service.ts

@@ -59,6 +59,10 @@ export class ApiService {
     return this.post(`${this.url}/setup/db/init`, {});
   }
 
+  getUsers(): Observable<any> {
+    return this.get(`${this.url}/user`);
+  }
+
   getUser(id: number): Observable<any> {
     return this.get(`${this.url}/user/${id}`);
   }