Merge pull request #57 from MycroftAI/bugfix/mark-ii-device-edit

Bugfix/mark ii device edit

projects/account/src/app/core/http/device.service.ts

@@ -32,6 +32,7 @@ const geographyUrl = 'api/geographies';
 const pairingCodeUrl = '/api/pairing-code';
 const preferencesUrl = '/api/preferences';
 const softwareUpdateUrl = '/api/software-update';
+const sshKeyUrl = '/api/ssh-key';
 const voicesUrl = '/api/voices';
 const wakeWordUrl = '/api/wake-words';
 
@@ -90,6 +91,10 @@ export class DeviceService {
         return this.http.get<Observable<any>>(pairingCodeUrl + '/' + pairingCode);
     }
 
+    validateSshKey(sshKey: string): Observable<any> {
+        return this.http.get<Observable<any>>(sshKeyUrl + '/' + sshKey);
+    }
+
     getGeographies() {
         return this.http.get<DeviceAttribute[]>(geographyUrl);
     }

projects/account/src/app/modules/device/components/card/ssh-card/ssh-card.component.html

@@ -1,15 +1,13 @@
 <mat-card class="mat-elevation-z0" [formGroup]="sshForm">
     <mat-card-content>
-        <h2 class="mat-h2">SSH</h2>
-        <mat-slide-toggle color="primary" [checked]="sshEnabled" (change)="onSshEnabledChange($event)">
-            Enable remote device access using SSH
-        </mat-slide-toggle>
-        <p [hidden]="hideSshInput">
-            <mat-form-field appearance="outline">
-                <mat-label>Public SSH Key</mat-label>
-                <textarea matInput required formControlName="sshPublicKey"></textarea>
-                <mat-hint>{{sshKeyHint}}</mat-hint>
-            </mat-form-field>
-        </p>
+        <h2 class="mat-h2">Command Line Access</h2>
+        <mat-form-field appearance="outline">
+            <mat-label>Public SSH Key</mat-label>
+            <textarea matInput formControlName="sshPublicKey"></textarea>
+            <mat-error *ngIf="sshForm.controls['sshPublicKey'].invalid">
+                Invalid RSA public key format
+            </mat-error>
+            <mat-hint>{{sshKeyHint}}</mat-hint>
+        </mat-form-field>
     </mat-card-content>
 </mat-card>

projects/account/src/app/modules/device/components/card/ssh-card/ssh-card.component.ts

@@ -27,20 +27,11 @@ import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 })
 export class SshCardComponent implements OnInit {
     @Input() sshForm: FormGroup;
-    public sshEnabled = false;
     public sshKeyHint: string;
-    public hideSshInput = true;
 
     constructor() {
         this.sshKeyHint = 'Paste the public SSH key of the computer used to to login to this device';
     }
     ngOnInit() {
-        this.sshEnabled = !!this.sshForm.controls.sshPublicKey.value;
-        this.hideSshInput = !this.sshEnabled;
-    }
-
-    onSshEnabledChange(changeEvent: MatSlideToggleChange) {
-        this.sshEnabled = changeEvent.checked;
-        this.hideSshInput = !this.sshEnabled;
     }
 }

projects/account/src/app/modules/device/pages/device-edit/device-edit.component.ts

@@ -17,17 +17,30 @@ and limitations under the License.
 ***************************************************************************** */
 
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, AsyncValidatorFn, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { DeviceService } from '@account/http/device.service';
 import { Device } from '@account/models/device.model';
-import { Observable } from 'rxjs';
-import { switchMap, tap } from 'rxjs/operators';
+import { Observable, of } from 'rxjs';
+import { catchError, map, switchMap, tap } from 'rxjs/operators';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 
 const fiveSeconds = 5000;
 
+export function sshKeyValidator(deviceService: DeviceService): AsyncValidatorFn {
+    return (control: AbstractControl): Observable<ValidationErrors | null> => {
+        if (control.value) {
+            return deviceService.validateSshKey(control.value).pipe(
+                map((response) => response.isValid ? null : {invalidSshKey: true}),
+                catchError(() => null),
+            );
+        } else {
+            return of(null);
+        }
+    };
+}
+
 @Component({
     selector: 'account-device-edit',
     templateUrl: './device-edit.component.html',
@@ -77,7 +90,7 @@ export class DeviceEditComponent implements OnInit {
                 voice: [device.voice.displayName, Validators.required],
                 autoUpdate: [device.pantacorConfig.autoUpdate],
                 releaseChannel: [device.pantacorConfig.releaseChannel],
-                sshPublicKey: [device.pantacorConfig.sshPublicKey]
+                sshPublicKey: [device.pantacorConfig.sshPublicKey, [], [ sshKeyValidator(this.deviceService) ]]
             }
         );
     }