advancing

proxy.conf.json

@@ -19,7 +19,7 @@
         "changeOrigin": true,
         "logLevel": "info"
      },
-    "/login": {
+    "/log.*": {
       "target":  {
         "host": "172.27.0.1",
         "protocol": "http:",

src/app/client-download/client-download.component.html

@@ -1,16 +1,23 @@
-    <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
-      <h1 class="display-4"><uds-translate>UDS Plugin</uds-translate></h1>
-      <p class="lead"><uds-translate>Download uds plugin for your platform</uds-translate></p>
-    </div>
+<div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+  <h1 class="display-4">
+    <uds-translate>UDS Plugin</uds-translate>
+  </h1>
+  <p class="lead">
+    <uds-translate>Download UDS client plugin for your platform</uds-translate>
+  </p>
+</div>
 
-    <div class="container">
-      <div class="card-deck mb-3">
-        <div class="card mb-4" *ngFor="let p of plugins">
-            <img class="card-img-top" src="/static/modern/img/{{ p.os }}.png">
-          <div class="card-body d-flex flex-column">
-            <h4 class="card-title">{{ p.os }}</h4>
-            <p class="card-text">{{ p.description }}</p>
-            <a class="btn btn-lg btn-block btn-outline-primary mt-auto" href="{{ p.url }}"><uds-translate>Download</uds-translate></a>
-          </div>
-        </div>
+<div class="container">
+  <div class="card-deck mb-3">
+    <div class="card mb-4" *ngFor="let p of api.plugins">
+      <img class="card-img-top" src="/static/modern/img/{{ p.name }}.png">
+      <div class="card-body d-flex flex-column">
+        <h4 class="card-title">{{ p.name }}</h4>
+        <p class="card-text">{{ p.description }}</p>
+        <a class="btn btn-lg btn-block btn-outline-primary mt-auto" href="{{ p.url }}">
+          <uds-translate>Download</uds-translate>
+        </a>
       </div>
+    </div>
+  </div>
+</div>

src/app/client-download/client-download.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService, Plugin } from '../uds-api.service';
+import { UdsApiService, Downloadable } from '../uds-api.service';
 
 @Component({
   selector: 'uds-client-download',
@@ -8,10 +8,9 @@ import { UdsApiService, Plugin } from '../uds-api.service';
 })
 export class ClientDownloadComponent implements OnInit {
 
-  plugins: Plugin[];
+  plugins: Downloadable[];
 
-  constructor(private api: UdsApiService) {
-    this.plugins = api.getPlugins();
+  constructor(public api: UdsApiService) {
   }
 
   ngOnInit() {

src/app/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService, Plugin } from '../uds-api.service';
+import { UdsApiService, Downloadable } from '../uds-api.service';
 
 @Component({
   selector: 'uds-login',
@@ -8,7 +8,7 @@ import { UdsApiService, Plugin } from '../uds-api.service';
 })
 export class LoginComponent implements OnInit {
 
-  constructor(private api: UdsApiService) { }
+  constructor(public api: UdsApiService) { }
 
   ngOnInit() {
   }

src/app/navbar/navbar.component.html

@@ -3,10 +3,10 @@
       <img alt="Universal Desktop Services" src="/static/modern/img/udsicon.png" class="navbar-img pull-left">
       Universal Desktop Services
   </a>
-  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarUDS" aria-controls="navbarUDS" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarsExampleDefault">
+  <div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarUDS">
     <ul class="navbar-nav ml-auto">
       <li class="nav-item">
         <a class="nav-link" routerLink="/client-download"><i class="fa fa-download"></i> UDS Plugin</a>
@@ -15,11 +15,22 @@
         <a class="nav-link" href="#"><uds-translate>About</uds-translate></a>
       </li>
       <li class="nav-item dropdown dropdown-menu-right" ngbDropdown>
-        <a class="nav-link dropdown-toggle" id="dropdown01" ngbDropdownToggle>{{ lang }}</a>
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01" ngbDropdownMenu>
+        <a class="nav-link dropdown-toggle" id="navbarLangDropdown" ngbDropdownToggle>{{ lang }}</a>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarLangDropdown" ngbDropdownMenu>
           <a class="dropdown-item" href="#" *ngFor="let l of langs">{{ l.name }}</a>
         </div>
       </li>
+
+      <li *ngIf="api.user.isLogged" class="nav-item dropdown dropdown-menu-right" ngbDropdown>
+        <a class="nav-link dropdown-toggle" id="navbarUserDropdown" ngbDropdownToggle>{{ api.user.user }}</a>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarUserDropdown" ngbDropdownMenu>
+          <a class="dropdown-item" href="#"><uds-translate>Preferences</uds-translate></a>
+          <a class="dropdown-item" href="#"><uds-translate>Dashboard</uds-translate></a>
+          <a class="dropdown-item" href="#"><uds-translate>Downloads</uds-translate></a>
+          <a class="dropdown-item" href="{{ api.urls.logout }}"><uds-translate>Logout</uds-translate></a>
+        </div>
+      </li>
+      
     </ul>
   </div>
 </nav>

src/app/navbar/navbar.component.ts

@@ -12,10 +12,11 @@ export class NavbarComponent implements OnInit {
   langs: Lang[]; // Available languages
   isNavbarCollapsed = true;
 
-  constructor(api: UdsApiService) {
-    const lang = api.getCurrentLanguage();
+  constructor(public api: UdsApiService) {
+    const lang = api.currentLanguage;
+    // Add "non current lang" to list
     this.langs = [];
-    for (const l of api.getAvailableLanguages()) {
+    for (const l of api.availableLanguages) {
       if (l.id === lang) {
         this.lang = l.name;
       } else {

src/app/services/services.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService, Plugin } from '../uds-api.service';
+import { UdsApiService, Downloadable } from '../uds-api.service';
 import { Router } from '@angular/router';
 
 @Component({
@@ -13,7 +13,8 @@ export class ServicesComponent implements OnInit {
    }
 
   ngOnInit() {
-    if (this.api.userLoggedIn() === false) {
+    // Redirect, if not logged in, to login screen
+    if (!this.api.user.isLogged) {
       this.router.navigate(['login']);
     }
   }

src/app/uds-api.service.ts

@@ -2,34 +2,67 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 export interface Lang {
-  id: string;
-  name: string;
+  readonly id: string;
+  readonly name: string;
 }
 
-export interface Plugin {
-  url: string;
-  description: string;
-  os: string;
+export interface Downloadable {
+  readonly url: string;
+  readonly description: string;
+  readonly name: string;
+}
+
+export interface Profile {
+  readonly user: string;
+  readonly role: string;
+}
+
+// User related
+export class User {
+  readonly user: string;
+  readonly role: string;
+
+  constructor(profile: Profile) {
+    this.user = profile.user;
+    this.role = profile.role;
+  }
+
+  get isStaff(): boolean {
+    return this.role === 'staff';
+  }
+
+  get isLogged(): boolean {
+    return this.user != null;
+  }
+}
+
+// URLs related
+export interface UDSUrls {
+  readonly lang: string;
+  readonly logout: string;
 }
 
 @Injectable()
 export class UdsApiService {
+  readonly user: User;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+    this.user = new User(udsData.profile);
+   }
 
-  getCurrentLanguage(): string {
+  get currentLanguage(): string {
     return udsData.config.language;
   }
 
-  getAvailableLanguages(): Lang[] {
+  get availableLanguages(): Lang[] {
     return udsData.config.available_languages;
   }
 
-  getPlugins(): Plugin[] {
+  get plugins(): Downloadable[] {
     return udsData.plugins;
   }
 
-  userLoggedIn(): boolean {
-    return udsData.profile.user != null;
+  get urls(): UDSUrls {
+    return udsData.config.urls;
   }
 }