added credentials ask dialog

.hintrc

@@ -4,6 +4,7 @@
   ],
   "hints": {
     "axe/forms": "off",
-    "axe/text-alternatives": "off"
+    "axe/text-alternatives": "off",
+    "button-type": "off"
   }
 }

src/app/app.module.ts

@@ -39,6 +39,7 @@ import { AboutComponent } from './pages/about/about.component';
 import { DownloadsComponent } from './pages/downloads/downloads.component';
 import { LauncherComponent } from './pages/launcher/launcher.component';
 import { FilterComponent } from './gui/components/filter/filter.component';
+import { CredentialsModalComponent } from './gui/credentials-modal/credentials-modal.component';
 
 
 @NgModule({
@@ -52,6 +53,7 @@ import { FilterComponent } from './gui/components/filter/filter.component';
     ServiceComponent,
     ServicesGroupComponent,
     ModalComponent,
+    CredentialsModalComponent,
     SafeHtmlPipe,
     FooterComponent,
     ErrorComponent,

src/app/gui/credentials-modal/credentials-modal.component.html

@@ -0,0 +1,26 @@
+<h2 mat-dialog-title><uds-translate>Please, enter access credentials</uds-translate></h2>
+<mat-dialog-content>
+    <mat-form-field appearance="standard">
+        <mat-label>
+            {{ labels.username }}
+        </mat-label>
+        <input matInput [placeholder]="labels.username" [(ngModel)]="username">
+    </mat-form-field>
+    <mat-form-field appearance="standard">
+        <mat-label>
+            {{ labels.password }}
+        </mat-label>
+        <input matInput [placeholder]="labels.password" [(ngModel)]="password" type="password">
+    </mat-form-field>
+    <mat-form-field appearance="standard">
+        <mat-label>
+            {{ labels.domain }}
+        </mat-label>
+        <input matInput [placeholder]="labels.domain" [(ngModel)]="domain">
+    </mat-form-field>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="{'username': username, 'domain': domain, 'password': password}">Accept</button>
+</mat-dialog-actions>

src/app/gui/credentials-modal/credentials-modal.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field {
+	width: 100%;
+}

src/app/gui/credentials-modal/credentials-modal.component.ts

@@ -0,0 +1,27 @@
+import {Component, Inject} from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+declare const django: any;
+
+@Component({
+  selector: 'uds-credentials-modal',
+  templateUrl: './credentials-modal.component.html',
+  styleUrls: ['./credentials-modal.component.scss']
+})
+export class CredentialsModalComponent {
+  username: string;
+  password: string;
+  domain: string;
+  labels = {
+    username: django.gettext('Username'),
+    password: django.gettext('Password'),
+    domain: django.gettext('Domain'),
+  };
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {username: string; domain: string}) {
+    this.username = data.username;
+    this.domain = data.domain;
+    this.password = '';
+  }
+}
+

src/app/gui/uds-gui.service.ts

@@ -1,19 +1,30 @@
 import { Injectable } from '@angular/core';
 
 import { ModalComponent, DialogType } from './modal/modal.component';
+import { CredentialsModalComponent } from './credentials-modal/credentials-modal.component';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
 @Injectable()
 export class UDSGuiService {
+  constructor(public dialog: MatDialog) {}
 
-  constructor(public dialog: MatDialog) { }
-
-  alert(title: string, message: string, autoclose = 0, checkClose: Observable<boolean> = null ) {
+  alert(
+    title: string,
+    message: string,
+    autoclose = 0,
+    checkClose: Observable<boolean> = null
+  ) {
     const width = window.innerWidth < 800 ? '80%' : '40%';
     const dialogRef = this.dialog.open(ModalComponent, {
       width,
-      data: { title, body: message, autoclose, checkClose, type: DialogType.alert },
+      data: {
+        title,
+        body: message,
+        autoclose,
+        checkClose,
+        type: DialogType.alert,
+      },
       disableClose: true,
     });
     return dialogRef;
@@ -30,13 +41,13 @@ export class UDSGuiService {
     return dialogRef.componentInstance.yesno;
   }
 
-  askCredentials(username: string, domain: string) {
-    const width = window.innerWidth < 800 ? '80%' : '40%';
-    const dialogRef = this.dialog.open(ModalComponent, {
-      width,
-      data: { title: 'Credentials', body: 'Please enter your credentials', type: DialogType.credentials, username, domain },
+  askCredentials(username: string, domain: string): Observable<{username: string; password: string; domain: string}> {
+    const dialogRef = this.dialog.open(CredentialsModalComponent, {
+      data: {
+        username,
+        domain,
+      },
     });
-
-    return dialogRef.componentInstance.subscription;
+    return dialogRef.afterClosed();
   }
 }

src/app/helpers/plugin.ts

@@ -55,12 +55,11 @@ export class Plugin {
               // Not closed dialog...
               this.api.status(params[0], params[1]).subscribe(
                 (data) => {
-                  if (data. status === 'ready') {
+                  if (data.status === 'ready') {
                     if (!readyTime) {
                       readyTime = Date.now(); // Milisecodns
-                      alert.componentInstance.data.title = django.gettext(
-                        'Service ready'
-                      );
+                      alert.componentInstance.data.title =
+                        django.gettext('Service ready');
                       alert.componentInstance.data.body = django.gettext(
                         'Launching UDS Client, almost done.'
                       );
@@ -109,9 +108,9 @@ export class Plugin {
             }
           };
           const init = () => {
-            if( state === 'init' ) {
+            if (state === 'init') {
               window.setTimeout(init, this.delay);
-            } else if( state === 'error' || state === 'stop' ) {
+            } else if (state === 'error' || state === 'stop') {
               return;
             } else {
               window.setTimeout(checker);
@@ -121,36 +120,39 @@ export class Plugin {
         })
       );
 
-      this.api.enabler(params[0], params[1]).subscribe((data) => {
-        if (data.error) {
-          state = 'error';
-          // TODO: show the error correctly
-          this.api.gui.alert(
-            django.gettext('Error launching service'),
-            data.error
-          );
-        } else {
-          // Is HTTP access the service returned, or for UDS client?
-          if (data.url.startsWith('/')) {
-            // If running message window, close it first...
-            if ( alert.componentInstance ) {
-              alert.componentInstance.close();
+      this.api.enabler(params[0], params[1]).subscribe(
+        (data) => {
+          if (data.error) {
+            state = 'error';
+            // TODO: show the error correctly
+            this.api.gui.alert(
+              django.gettext('Error launching service'),
+              data.error
+            );
+          } else {
+            // Is HTTP access the service returned, or for UDS client?
+            if (data.url.startsWith('/')) {
+              // If running message window, close it first...
+              if (alert.componentInstance) {
+                alert.componentInstance.close();
+              }
+              state = 'stop';
+              this.launchURL(data.url);
+              return;
             }
-            state = 'stop';
-            this.launchURL(data.url);
-            return;
+            if (window.location.protocol === 'https:') {
+              // Ensures that protocol is https also for plugin, fixing if needed UDS provided info
+              data.url = data.url.replace('uds://', 'udss://');
+            }
+            state = 'enabled';
+            this.doLaunch(data.url);
           }
-          if (window.location.protocol === 'https:') {
-            // Ensures that protocol is https also for plugin, fixing if needed UDS provided info
-            data.url = data.url.replace('uds://', 'udss://');
-          }
-          state = 'enabled';
-          this.doLaunch(data.url);
+        },
+        (error) => {
+          // Any error on requests will redirect to login
+          this.api.logout();
         }
-      }, (error) => {
-        // Any error on requests will redirect to login
-        this.api.logout();
-      });
+      );
     } else {
       // Custom url, http/https
       const alert = this.showAlert(
@@ -173,6 +175,8 @@ export class Plugin {
                     let username = '';
                     let domain = '';
                     let askCredentials = false;
+                    let ticket = '';
+                    let scrambler = '';
 
                     if (data.url.indexOf('&creds=') !== -1) {
                       askCredentials = true;
@@ -186,6 +190,10 @@ export class Plugin {
                       }
                       // Remove credentials from url
                       data.url = data.url.split('&creds=')[0];
+                      // From "data=..." extract ticket and scrambler that is ticket.scrambler
+                      const values = data.url.split('data=')[1].split('&')[0].split('.');
+                      ticket = values[0];
+                      scrambler = values[1];
                     }
 
                     let wnd = 'global';
@@ -224,23 +232,18 @@ export class Plugin {
                         );
                       }
                     };
-                    
+
                     // If credentials required, ask for them
                     if (askCredentials) {
                       this.api.gui
-                        .askCredentials(
-                          username,
-                          domain
-                        )
-                        .subscribe((data) => {
-                          if (data) {
-                            // Credentials provided, add them to url
-                            location += '&creds=' + data.username;
-                            if (data.domain) {
-                              location += '@' + data.domain;
+                        .askCredentials(username, domain)
+                        .subscribe((result) => {
+                          // Update transport credentials
+                          this.api.updateTransportTicket(ticket, scrambler,result.username, result.password, result.domain).subscribe(
+                            () => {
+                              openWindow();
                             }
-                            openWindow();
-                          }
+                          );
                         });
                     }
                   } else if (!data.running) {

src/app/types/config.ts

@@ -31,6 +31,7 @@ export interface UDSUrls {
     readonly transportIcon: string;
     readonly clientDownload: string;
     readonly error: string;
+    readonly updateTransportTicket: string;
 
     readonly launch: string;
 }

src/app/uds-api.service-type.ts

@@ -33,6 +33,9 @@ export interface UDSApiServiceType {
   /* transport url */
   transportUrl(url: string): Observable<JSONTransportURLService>;
 
+  /* Transport ticket credentials updater */
+  updateTransportTicket(ticketId: string, scrambler: string, username: string, password: string, domain: string): Observable<any>;
+
   /* Go to admin dashboard */
   gotoAdmin(): void;
 

src/app/uds-api.service.ts

@@ -114,6 +114,17 @@ export class UDSApiService implements UDSApiServiceType {
     return this.http.get<JSONTransportURLService>(url);
   }
 
+  updateTransportTicket(ticketId: string, scrambler: string, username: string, password: string, domain: string): Observable<any> {
+    const url = this.config.urls.updateTransportTicket
+        .replace('param1', ticketId)
+        .replace('param2', scrambler);
+    return this.http.post<any>(url, {
+      username,
+      password,
+      domain,
+    });
+  }
+
   /* Images & static related */
   galleryImageURL(imageId: string) {
     return this.config.urls.galleryImage.replace('param1', imageId);