new device add component

projects/account/src/app/modules/device/device-add/device-add.component.html

@@ -0,0 +1,64 @@
+
+    <!-- Show a horizontal stepper on larger devices -->
+    <mat-horizontal-stepper *ngIf="!alignVertical" labelPosition="bottom" [linear]="true">
+        <!-- Use font awesome icons in the stepper to indicate progress -->
+        <ng-template matStepperIcon="done">
+            <fa-icon [icon]="stepDoneIcon"></fa-icon>
+        </ng-template>
+        <ng-template matStepperIcon="edit">
+            <fa-icon [icon]="stepDoneIcon"></fa-icon>
+        </ng-template>
+
+        <mat-step label="Pairing" [stepControl]="pairDeviceForm">
+            <form [formGroup]="pairDeviceForm" (ngSubmit)="onPairingSubmit()">
+                <account-device-pairing [pairingCodeControl]="pairingCodeControl"></account-device-pairing>
+                <button mat-button matStepperNext [disabled]="!pairDeviceForm.valid">
+                    Next
+                </button>
+            </form>
+        </mat-step>
+
+        <mat-step *ngIf="!preferences" label="Preferences" [stepControl]="preferencesForm">
+            <form [formGroup]="preferencesForm" (ngSubmit)="onPreferencesSubmit()">
+                <account-device-preferences
+                        [preferencesForm]="preferencesForm"
+                        [deviceSetup]="true"
+                >
+                </account-device-preferences>
+                <button mat-button matStepperNext [disabled]="!preferencesForm.valid">
+                    Next
+                </button>
+            </form>
+        </mat-step>
+
+        <!--<mat-step label="Device" [stepControl]="preferencesForm">-->
+            <!--<form [formGroup]="preferencesForm" (ngSubmit)="onPreferencesSubmit()">-->
+                <!--<account-device-preferences-->
+                        <!--[preferencesForm]="preferencesForm"-->
+                        <!--[deviceSetup]="true"-->
+                <!--&gt;-->
+                <!--</account-device-preferences>-->
+                <!--<button mat-button matStepperNext [disabled]="!preferencesForm.valid">-->
+                    <!--Next-->
+                <!--</button>-->
+            <!--</form>-->
+        <!--</mat-step>-->
+    </mat-horizontal-stepper>
+
+    <!-- Show a vertical stepper on smaller devices -->
+    <mat-vertical-stepper *ngIf="alignVertical" [linear]="true">
+        <!-- Use font awesome icons in the stepper to indicate progress -->
+        <ng-template matStepperIcon="done">
+            <fa-icon [icon]="stepDoneIcon"></fa-icon>
+        </ng-template>
+        <ng-template matStepperIcon="edit">
+            <fa-icon [icon]="stepDoneIcon"></fa-icon>
+        </ng-template>
+
+        <mat-step label="Pairing" [stepControl]="pairDeviceForm">
+            <account-device-pairing></account-device-pairing>
+            <button mat-button matStepperNext type="button" [disabled]="!pairDeviceForm.valid">
+                Next
+            </button>
+        </mat-step>
+    </mat-vertical-stepper>

projects/account/src/app/modules/device/device-add/device-add.component.scss

@@ -0,0 +1,5 @@
+mat-horizontal-stepper {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 800px;
+}

projects/account/src/app/modules/device/device-add/device-add.component.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
+import {
+    AbstractControl,
+    FormBuilder,
+    FormGroup,
+    Validators
+} from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { Subscription } from 'rxjs';
+
+import { AccountPreferences, DeviceService } from '../../../core/http/device.service';
+
+@Component({
+  selector: 'account-device-add',
+  templateUrl: './device-add.component.html',
+  styleUrls: ['./device-add.component.scss']
+})
+export class DeviceAddComponent implements OnInit {
+    public alignVertical: boolean;
+    public deviceForm: FormGroup;
+    private mediaWatcher: Subscription;
+    public pairingCodeControl: AbstractControl;
+    public pairDeviceForm: FormGroup;
+    public preferencesForm: FormGroup;
+    public preferences: AccountPreferences;
+    public stepDoneIcon = faCheck;
+
+    constructor(
+        private formBuilder: FormBuilder,
+        public mediaObserver: MediaObserver,
+        private deviceService: DeviceService,
+        private route: ActivatedRoute
+    ) {
+        this.mediaWatcher = mediaObserver.media$.subscribe(
+            (change: MediaChange) => {
+                this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
+            }
+        );
+    }
+
+    ngOnInit() {
+        this.getAccountPreferences();
+        this.buildForms();
+        this.setControlFormAliases();
+    }
+
+    private buildForms() {
+        this.preferencesForm = this.deviceService.buildPreferencesForm(this.preferences);
+        this.pairDeviceForm = this.formBuilder.group({
+            pairingCode: ['', Validators.required],
+        });
+        this.deviceForm = this.formBuilder.group(
+            {
+                name: ['', Validators.required],
+                placement: [''],
+                country: ['', Validators.required],
+                region: ['', Validators.required],
+                city: ['', Validators.required],
+                timeZone: ['', Validators.required]
+            }
+        );
+    }
+
+    getAccountPreferences() {
+        this.route.data.subscribe(
+            (data: {preferences: AccountPreferences}) => {
+                this.preferences = data.preferences;
+            }
+        );
+    }
+
+    private setControlFormAliases() {
+        this.pairingCodeControl = this.pairDeviceForm.controls['pairingCode'];
+    }
+
+    onPairingSubmit() {
+        console.log('attempting to pair device');
+    }
+
+    onPreferencesSubmit() {
+        console.log('attempting to pair device');
+    }
+}

projects/account/src/app/modules/device/device-add/pairing/pairing.component.html

@@ -0,0 +1,10 @@
+<mat-card class="mat-elevation-z0">
+    <mat-card-title>Verify your pairing code</mat-card-title>
+    <mat-card-content>
+        <p>Enter the code spoken by your device:</p>
+        <mat-form-field [appearance]="'outline'">
+            <mat-label>Pairing Code</mat-label>
+            <input matInput required type="text" [formControl]="pairingCodeControl">
+        </mat-form-field>
+    </mat-card-content>
+</mat-card>

projects/account/src/app/modules/device/device-add/pairing/pairing.component.scss

@@ -0,0 +1,8 @@
+@import "../../../../../../../../node_modules/@angular/material/theming";
+@import "mycroft-colors";
+
+mat-card {
+    mat-card-title {
+        color: mat-color($mycroft-primary)
+    }
+}

projects/account/src/app/modules/device/device-add/pairing/pairing.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+
+@Component({
+    selector: 'account-device-pairing',
+    templateUrl: './pairing.component.html',
+    styleUrls: ['./pairing.component.scss']
+})
+export class PairingComponent implements OnInit {
+    @Input() pairingCodeControl: AbstractControl;
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}