added config component

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { UnauthGuard } from './auth/unauth.guard';
 import { AuthGuard } from './auth/auth.guard';
 import { ConfirmCodeComponent } from './auth/confirm-code/confirm-code.component';
 import { ProfileComponent } from './auth/profile/profile.component';
+import { ConfigsComponent } from './configs/configs.component';
 
 const routes: Routes = [
   { path: 'auth', component: AuthComponent, children: [
@@ -32,6 +33,7 @@ const routes: Routes = [
         canActivate: [AuthGuard]
      }
   ]},
+  { path: 'configs', component: ConfigsComponent, canActivate: [AuthGuard]},
   { path: '', component: HomeComponent, canActivate: [AuthGuard] }];
 
 @NgModule({

src/app/app.component.ts

@@ -18,6 +18,10 @@ export class AppComponent {
     {
       title: 'Account Settings',
       path: '/auth'
+    },
+    {
+      title: 'Device Configs',
+      path: '/configs'
     }
   ];
   private mobileQueryListener: () => void;

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { ProfileComponent } from './auth/profile/profile.component';
 import { AvatarComponent } from './auth/profile/avatar/avatar.component';
 import { NgxGaugeModule} from 'ngx-gauge';
 import { MatSortModule, MatTableModule } from '@angular/material';
+import { ConfigsComponent } from './configs/configs.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,7 +33,8 @@ import { MatSortModule, MatTableModule } from '@angular/material';
     SignUpComponent,
     ConfirmCodeComponent,
     ProfileComponent,
-    AvatarComponent
+    AvatarComponent,
+    ConfigsComponent
   ],
   imports: [
     BrowserModule,

src/app/configs/configs.component.html

@@ -0,0 +1,34 @@
+<div class="container">
+    <h2>Configuration</h2>
+    <form [formGroup]="configForm">
+        <mat-form-field>
+            <input matInput placeholder="Certificate ID" type="text" formControlName="certificateID" required>
+            <mat-hint *ngIf="!certificateIDInput.value">Certificate ID</mat-hint>
+        </mat-form-field>
+        <h2>Device 1</h2>
+        <mat-form-field>
+            <input matInput placeholder="Application Name" type="text" formControlName="d1appname" required>
+            <mat-hint *ngIf="!d1appnameInput.value">Application Name</mat-hint>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Certificate ID" type="text" formControlName="d1certificateID" required>
+            <mat-hint *ngIf="!certificateIDInput.value">Certificate ID</mat-hint>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Company" type="text" formControlName="d1company" required>
+            <mat-hint *ngIf="!d1companyInput.value">Company</mat-hint>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Location" type="text" formControlName="d1location" required>
+            <mat-hint *ngIf="!d1locationInput.value">Location</mat-hint>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Field" type="text" formControlName="d1field" required>
+            <mat-hint *ngIf="!d1fieldInput.value">Field</mat-hint>
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput placeholder="Device Type" type="text" formControlName="d1devicetype" required>
+            <mat-hint *ngIf="!d1devicetypeInput.value">Device Type</mat-hint>
+        </mat-form-field>
+     </form>
+</div>

src/app/configs/configs.component.scss

@@ -0,0 +1,22 @@
+.container {
+    width: 100%;
+}
+form {
+    width: 100%;
+}
+
+form > * {
+    margin-bottom: 1.5em;
+    width: 100%;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+@media (min-width: 900px) { 
+    .container {
+        margin: 0 auto;
+        width: 75%;
+    }
+}

src/app/configs/configs.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigsComponent } from './configs.component';
+
+describe('ConfigsComponent', () => {
+  let component: ConfigsComponent;
+  let fixture: ComponentFixture<ConfigsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfigsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/configs/configs.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Certificate } from 'crypto';
+@Component({
+  selector: 'app-configs',
+  templateUrl: './configs.component.html',
+  styleUrls: ['./configs.component.scss']
+})
+export class ConfigsComponent implements OnInit {
+
+  constructor(private builder: FormBuilder) {   }
+
+  ngOnInit() {  }
+  
+  configForm = this.builder.group({
+    certificateID: '',
+    d1appname: 'hpiot',
+    d1certificateID: '',
+    d1company: '',
+    d1location: '',
+    d1field: '',
+    d1devicetype: ''
+  });
+
+  get certificateIDInput() {return this.configForm.get('certificateID')}
+  get d1appnameInput() {return this.configForm.get('d1appname')}
+  get d1certificateIDInput() {return this.configForm.get('certificateID')}
+  get d1companyInput() {return this.configForm.get('d1company')}
+  get d1locationInput() {return this.configForm.get('d1location')}
+  get d1fieldInput() {return this.configForm.get('d1field')}
+  get d1devicetypeInput() {return this.configForm.get('d1devicetype')}
+  
+}