added about page, fixed up a lot of minor things, cool error page

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { ServicesGroupComponent } from './gui/components/services-group/services
 
 import { ModalComponent } from './gui/modal/modal.component';
 import { SafeHtmlPipe } from './gui/safe-html.pipe';
+import { AboutComponent } from './pages/about/about.component';
 
 
 @NgModule({
@@ -48,6 +49,7 @@ import { SafeHtmlPipe } from './gui/safe-html.pipe';
     SafeHtmlPipe,
     FooterComponent,
     ErrorComponent,
+    AboutComponent,
   ],
   imports: [
     BrowserModule,

src/app/gui/components/service/service.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="service.transports.length > 0">
   <mat-menu #transports>
-    <button mat-menu-item *ngFor="let trans of service.transports">
+    <button mat-menu-item *ngFor="let trans of service.transports" (click)="launch(trans)">
       <div class="transport-item">
         <img [src]="getTransportIcon(trans.id)">
         {{ trans.name }}
@@ -30,7 +30,7 @@
 
   <div [ngClass]="serviceClass" [matTooltipDisabled]="serviceTooltip===''" 
     [matTooltip]="serviceTooltip" matTooltipShowDelay="1000" matTooltipPosition="above">
-    <div class="icon" (click)="launch()">
+    <div class="icon" (click)="launch(null)">
       <img [src]="serviceImage">
     </div>
     <div class="name">

src/app/gui/components/service/service.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { JSONService } from '../../../types/services';
+import { JSONService, JSONTransport } from '../../../types/services';
 import { UDSApiService } from '../../../uds-api.service';
 
 const MAX_NAME_LENGTH = 56;
@@ -36,7 +36,7 @@ export class ServiceComponent implements OnInit {
     } else if (this.service.maintenance) {
       return django.gettext('Service is in maintenance');
     } else if (this.service.not_accesible) {
-      return django.gettext('Service access is not allowed at this time');
+      return django.gettext('Access to the service is restricted at this time');
     }
     return '';
   }
@@ -80,7 +80,7 @@ export class ServiceComponent implements OnInit {
     this.api.gui.alert('<p align="center"><b>' + django.gettext('Launcher') + '</b></p>', message);
   }
 
-  launch() {
+  launch(transport: JSONTransport) {
     if (this.service.maintenance ) {
       this.notifyNotLaunching(django.gettext('Service is in maintenance and cannot be launched'));
     } else if (this.service.not_accesible) {
@@ -91,7 +91,10 @@ export class ServiceComponent implements OnInit {
       '</p>'
       );
     } else {
-      this.api.launchURL(this.service.transports[0].link);
+      if (transport === null) {
+        transport = this.service.transports[0];
+      }
+      this.api.launchURL(transport.link);
     }
   }
 }

src/app/modules/app-routing.module.ts

@@ -5,7 +5,7 @@ import { LoginComponent } from '../pages/login/login.component';
 import { ClientDownloadComponent } from '../pages/client-download/client-download.component';
 import { ServicesComponent } from '../pages/services/services.component';
 import { ErrorComponent } from '../pages/error/error.component';
-
+import { AboutComponent } from '../pages/about/about.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'services', pathMatch: 'full' },
@@ -16,7 +16,7 @@ const routes: Routes = [
 
   { path: 'client-download', component: ClientDownloadComponent },
   { path: 'error/:id', component: ErrorComponent },
-  { path: 'about', component: ServicesComponent },
+  { path: 'about', component: AboutComponent },
 
   // Placeholder, maybe we change it to "page not found"
   { path: '**', redirectTo: 'services' },

src/app/pages/about/about.component.css

@@ -0,0 +1,53 @@
+:host {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.about h3 {
+    text-align: center;
+}
+
+.about h4 {
+    text-align: center;
+    font-size: 1em;
+    font-weight: normal;
+}
+
+.about h2 {
+    text-align: center;
+}
+
+/* List part */
+
+ul {
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+ul li {}
+
+ul li a {
+  display: block;
+  text-decoration: none;
+  color: #000000;
+  background-color: #FFFFFF;
+  line-height: 30px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: #CCCCCC;
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+ul li a:hover {
+  color: rgb(62, 107, 45);
+}
+
+ul li a strong {
+  margin-right: 10px;
+}

src/app/pages/about/about.component.html

@@ -0,0 +1,41 @@
+<div class="about">
+  <h1>Universal Desktop Services {{ api.config.version }} build {{ api.config.version_stamp }}</h1>
+  <h3><a href="http://www.udsenterprise.com" target="_blank"> &copy; 2012-2018 Virtual Cable S.L.U.</a></h3>
+  <h4>
+    <uds-translate>You can access UDS Open Source code at</uds-translate> <a href="https://github.com/dkmstr/openuds"
+      target="_blank"> OpenUDS github repository</a>
+  </h4>
+  <div class="components">
+    <h2>
+      <uds-translate>UDS has been developed using these components:</uds-translate>
+    </h2>
+    <ul>
+      <li><a href="https://www.python.org/">Python 3.5</a></li>
+      <li><a href="https://www.djangoproject.com/" target="_blank">Django</a></li>
+      <li><a href="https://www.djangoproject.com/" target="_blank">Django</a></li>
+      <li><a href="http://angular.io" target="_blank">Angular</a></li>
+      <li><a href="http://guac-dev.org/" target="_blank">Guacamole</a></li>
+      <li><a href="http://weasyprint.org/" target="_blank">weasyprint</a></li>
+      <li><a href="https://github.com/django-compressor/django-compressor" target="_blank">Django compressor</a></li>
+      <li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
+      <li><a href="http://www.bootstrap-switch.org/" target="_blank">Bootstrap switch</a></li>
+      <li><a href="http://silviomoreto.github.io/bootstrap-select/" target="_blank">Bootstrap select</a></li>
+      <li><a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/" target="_blank">Bootstrap touchspin</a></li>
+      <li><a href="http://fontawesome.io" target="_blank">Font Awesome by Dave Gandy</a></li>
+      <li><a href="http://coffeescript.org/" target="_blank">Coffescript</a></li>
+      <li><a href="http://jquery.com/" target="_blank">jQuery</a></li>
+      <li><a href="http://handlebarsjs.com/" target="_blank">Handlebars</a></li>
+      <li><a href="https://github.com/carhartl/jquery-cookie" target="_blank">jQuery cookie</a></li>
+      <li><a href="http://jqueryvalidation.org/" target="_blank">jQuery validator</a></li>
+      <li><a href="http://malsup.com/jquery/block/" target="_blank">jQuery blockui</a></li>
+      <li><a href="http://www.flotcharts.org/" target="_blank">flot</a></li>
+      <li><a href="https://datatables.net/" target="_blank">jQuery datatables</a></li>
+      <li><a href="https://github.com/eligrey/Blob.js/" target="_blank">Blob</a></li>
+      <li><a href="https://github.com/eligrey/FileSaver.js/" target="_blank">Filesaver</a></li>
+      <li><a href="http://kde-look.org/content/show.php/Crystal+Project?content=60475)" target="_blank">Crystal project
+          icons</a></li>
+      <li><a href="https://github.com/NitruxSA/flattr-icons" target="_blank">Flattr Icons</a></li>
+    </ul>
+    <p><small>* <uds-translate>If you find that we missed any component, please let us know</uds-translate></small></p>
+  </div>
+</div>

src/app/pages/about/about.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { UDSApiService } from '../../uds-api.service';
+
+@Component({
+  selector: 'uds-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor(public api: UDSApiService) { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/error/error.component.html

@@ -10,7 +10,7 @@
   </div>
 
   <h1 class="title">
-    An error has occurred
+    <uds-translate>An error has occurred</uds-translate>
   </h1>
   <p class="description" [innerHTML]="this.error | safeHtml">
   </p>

src/styles.css

@@ -1,6 +1,6 @@
 /* You can add global styles to this file, and also import other style files */
 /* Materials */
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
 
 /* Cookie consent */
 @import "~cookieconsent/build/cookieconsent.min.css";