Small UI fixes for the web

Author: Jonas Gauffin

src/Server/Coderr.Server.SqlServer/Modules/Whitelists/AddEntryHandler.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Linq;
 using System.Net;
 using System.Threading.Tasks;
 using Coderr.Server.Api.Modules.Whitelists.Commands;
@@ -55,8 +56,13 @@ public async Task HandleAsync(IMessageContext context, AddEntry message)
         private async Task LookupIps(AddEntry message, Whitelist entry)
         {
             var lookup = new LookupClient();
-            var result = await lookup.QueryAsync(message.DomainName, QueryType.ANY);
-            foreach (var record in result.AllRecords)
+            var result = await lookup.QueryAsync(message.DomainName, QueryType.A);
+            var result2 = await lookup.QueryAsync(message.DomainName, QueryType.AAAA);
+
+            var results = result.AllRecords.ToList();
+            results.AddRange(result2.AllRecords);
+
+            foreach (var record in results)
             {
                 switch (record)
                 {

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/apikeys/create/create.component.html

@@ -5,7 +5,7 @@ <h2 class="text-white text-shadow-1">Create an api key</h2>
   <div class="panels">
     <div class="panel">
       <div class="fill">
-        <div class="form-control">
+        <div class="form-group">
           <label>
             Name
           </label>
@@ -32,7 +32,7 @@ <h4 class="text-dark">Accessible applications</h4>
 
   </div>
 
-  <div class="form-control p-2">
+  <div class="form-group">
     <button class="btn">Save</button>
   </div>
 

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/apikeys/edit/edit.component.html

@@ -4,7 +4,7 @@ <h2 class="text-white text-shadow-1">Edit API key</h2>
     <div class="panels">
       <div class="panel ml-0">
         <div class="fill">
-          <div class="form-control">
+          <div class="form-group">
             <label>
               Name
             </label>

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/app-create/create.component.html

@@ -1,21 +1,21 @@
 <form id="app-create" class="form p-2" [formGroup]="createForm" (ngSubmit)="onSubmit()" [attr.disabled]="disabled">
 
-  <div class="form-control">
+  <div class="form-group">
     <label>
       Name
     </label>
     <input type="text" placeholder="Application name" formControlName="name" />
   </div>
-  <div class="form-control" *ngIf="showGroups">
+  <div class="form-group" *ngIf="showGroups">
     <label>Group</label>
     <select formControlName="groupId">
       <option *ngFor="let group of groups" [value]="group.id">{{group.name}}</option>
     </select>
   </div>
-  <div class="form-control">
+  <div class="form-group">
     <input type="checkbox" id="check1" class="inline" formControlName="trackStats" /><label class="inline" for="check1"><span></span>I want to compare our statistics with other companies</label>
   </div>
-  <div class="form-control">
+  <div class="form-group">
     <span class="error" style="white-space: pre-line">{{errorMessage}}</span>
     <button type="submit">Create application</button>
     <button type="reset" (click)="cancel()" class="btn dark">Cancel</button>

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/groups/add/add.component.html

@@ -1,12 +1,12 @@
 <form id="app-group-add" class="form p-2" [formGroup]="createForm" (ngSubmit)="onSubmit()" [attr.disabled]="disabled">
 
-  <div class="form-control">
+  <div class="form-group">
     <label>
       Name
     </label>
     <input type="text" placeholder="Group name" formControlName="name" />
   </div>
-  <div class="form-control">
+  <div class="form-group">
     <span class="error" style="white-space: pre-line">{{errorMessage}}</span>
     <button type="submit">Create</button>
     <button type="reset" (click)="cancel()">Cancel</button>

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/groups/add/add.component.ts

@@ -4,6 +4,17 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { ApplicationService } from "../../../applications/application.service";
 import { ApplicationGroupService } from "../application-groups.service";
 import { NavMenuService } from "../../../nav-menu/nav-menu.service";
+import { IGroupListItem } from "../group.model";
+import { ToastrService } from "ngx-toastr";
+
+export interface IGroupCreated {
+  success: boolean;
+  group?: IGroupListItem;
+  error?: Error;
+
+  /** Can be "Canceled" if aborted (success = false) */
+  message?: string;
+}
 
 @Component({
   selector: 'app-group-add',
@@ -17,10 +28,11 @@ export class GroupAddComponent implements OnInit, OnDestroy {
   errorMessage = '';
   returnUrl = '';
   disabled = false;
-  @Output() closed = new EventEmitter();
+  @Output() closed = new EventEmitter<IGroupCreated>();
 
   constructor(
     private formBuilder: FormBuilder,
+    private toastrService: ToastrService,
     private router: Router,
     private service: ApplicationGroupService,
     navMenuService: NavMenuService) {
@@ -50,6 +62,7 @@ export class GroupAddComponent implements OnInit, OnDestroy {
     this.disabled = true;
     this.service.create(this.createForm.value.name)
       .then(x => {
+        this.toastrService.success('Entry is being created..');
         this.createForm.reset();
         this.closed.emit({ success: true, group: x });
       }).catch(e => {

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/groups/edit/edit.component.html

@@ -2,11 +2,11 @@
   <div class="panel">
     <h2>Edit group '{{name}}'</h2>
     <div class="fill">
-      <div class="form-control">
+      <div class="form-group">
         <label class="label">Name</label>
         <input required type="text" name="name" [(ngModel)]="name" placeholder="Name describing this group" />
       </div>
-      <div class="form-control">
+      <div class="form-group">
         <label>Applications</label>
         <p>
           <em class="small">Application(s) that are displayed under this group.</em>

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/groups/list/list.component.html

@@ -20,6 +20,16 @@ <h2>Application groups</h2>
     </tbody>
   </table>
   <div>
-    <a [routerLink]="['new']" class="btn">Create</a>
+    <a (click)="createGroup()" class="btn">Create</a>
   </div>
 </div>
+
+<modal id="createNewGroupModal">
+  <div class="panel">
+    <h3>Create group</h3>
+    <div class="fill">
+      <p>Application groups are used to logically group applications into smaller lists.</p>
+      <app-group-add (closed)="onGroupCreated($event)"></app-group-add>
+    </div>
+  </div>
+</modal>

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/groups/list/list.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { IGroupListItem } from "../group.model";
 import { ApplicationGroupService } from "../application-groups.service";
 import { NavMenuService } from "../../../nav-menu/nav-menu.service";
+import { ModalService } from "../../../_controls/modal/modal.service";
+import { IGroupCreated } from "../add/add.component";
 
 @Component({
   selector: 'app-groups',
@@ -14,6 +16,7 @@ export class GroupListComponent implements OnInit, OnDestroy {
 
   constructor(
     private groupService: ApplicationGroupService,
+    private modalService: ModalService,
     navMenuService: NavMenuService) {
 
     navMenuService.updateNav([
@@ -32,4 +35,18 @@ export class GroupListComponent implements OnInit, OnDestroy {
     this.sub.unsubscribe();
   }
 
+  createGroup() {
+    this.modalService.open('createNewGroupModal');
+  }
+
+  onGroupCreated(e: IGroupCreated) {
+    console.log(e);
+    if (e.success) {
+      this.groups.push(e.group);
+    }
+    
+    this.modalService.close('createNewGroupModal');
+  }
+
+
 }

src/Server/Coderr.Server.WebSite/ClientApp/src/app/admin/whitelist/add/add.component.html

@@ -4,12 +4,12 @@
     <h2>New whitelist</h2>
 
     <div class="fill">
-      <div class="form-control">
+      <div class="form-group">
         <label class="label">Host name</label>
         <input required type="text" name="domainName" [(ngModel)]="domainName" placeholder="myapp.yourdomain.com" />
         <em class="small">Domain name, including the subdomain/host.</em>
       </div>
-      <div class="form-control">
+      <div class="form-group">
         <label>Applications</label>
         <p>
           <em class="small">Application(s) that the domain may report errors for. None marked = all are allowed.</em>
@@ -21,7 +21,7 @@ <h2>New whitelist</h2>
           </label>
         </div>
       </div>
-      <div class="form-control">
+      <div class="form-group">
         <label class="label">IP Addresses</label>
         <p>
           <em class="small">
@@ -41,7 +41,7 @@ <h2>New whitelist</h2>
         </table>
         <button type="button" (click)="showAddIp()">Add new IP</button>
       </div>
-      <div class="form-control">
+      <div class="form-group">
         <span class="error" style="white-space: pre-line">{{errorMessage}}</span>
       </div>
     </div>