Created policy module.

src/app/app.component.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms'
 import { HermesClientService } from './hermes-client.service';
 import { AuthUserGuard } from './shared/auth/auth.user.guard'
 import { Subscription } from 'rxjs';
-import { PolicyComponent } from "./policy/policy.component";
+import { PolicyComponent } from "./policies/policy/policy.component";
 import { NavigationComponent } from "./navigation/navigation.component";
 import EventService from './shared/services/EventService';
 import { ApiAuthenticationService } from './shared/services/api/api-authentication.service';

src/app/app.routes.ts

@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { PolicyComponent } from './policy/policy.component';
+import { PolicyComponent } from './policies/policy/policy.component';
 import { AuthUserGuard } from './shared/auth/auth.user.guard';
 import { LoginComponent } from './login/login.component';
 import { TtsLoginComponent } from './tts-login/tts-login.component';

src/app/policies/policies.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class PoliciesModule { }

src/app/policies/policy-add-form/policy-add-form.component.html

@@ -1,6 +1,5 @@
 <div>
     <form
-        class="example-form"
         standalone>
         <mat-form-field class="example-full-width">
             <input
@@ -18,7 +17,7 @@
             </mat-autocomplete>
         </mat-form-field>
         <button
-            mat-raised-button
+            mat-flat-button
             (click)="addNewPolicy()">
             Add
         </button>

src/app/policies/policy-add-form/policy-add-form.component.ts

@@ -4,10 +4,10 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { Policy } from '../shared/models/policy';
+import { Policy } from '../../shared/models/policy';
-import EventService from '../shared/services/EventService';
+import EventService from '../../shared/services/EventService';
 import { map, Observable, startWith } from 'rxjs';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 
 const Policies = [
     { path: "tts", description: "Anything to do with TTS" },

src/app/policies/policy-table/policy-table.component.ts

@@ -1,11 +1,11 @@
 import { Component, ElementRef, Input, isDevMode, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
-import EventService from '../shared/services/EventService';
+import EventService from '../../shared/services/EventService';
-import { Policy } from '../shared/models/policy';
+import { Policy } from '../../shared/models/policy';
 import { Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 
 @Component({
     selector: 'policy-table',

src/app/policies/policy/policy.component.html

@@ -1,4 +1,4 @@
-Policies
+<h4>Policies</h4>
 <div>
     <policy-add-form />
 </div>

src/app/policies/policy/policy.component.scss

@@ -0,0 +1,7 @@
+div {
+    background-color: black;
+}
+
+h4 {
+    text-align: center;
+}

src/app/policies/policy/policy.component.ts

@@ -1,11 +1,11 @@
 import { Component, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { PolicyAddFormComponent } from "../policy-add-form/policy-add-form.component";
 import { PolicyTableComponent } from "../policy-table/policy-table.component";
-import { Policy, PolicyScope } from '../shared/models/policy';
+import { Policy, PolicyScope } from '../../shared/models/policy';
 import { DatePipe, isPlatformBrowser } from '@angular/common';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Subscription } from 'rxjs';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 import { Router, RouterModule } from '@angular/router';
 
 @Component({

src/app/tts-login/tts-login.component.html

@@ -1,13 +1,14 @@
-<div>
 <h4>TTS Login</h4>
+<div class="main-div">
+    <mat-card class="main-card">
         <mat-form-field>
             <mat-label>API Key</mat-label>
-        <mat-select
+            <mat-select [(value)]="selected_api_key">
-            [(value)]="selected_api_key">
                 @for (key of api_keys; track key.id) {
                 <mat-option [value]="key.id">{{key.label}}</mat-option>
                 }
             </mat-select>
         </mat-form-field>
         <button mat-raised-button (click)="login()">Log In</button>
+    </mat-card>
 </div>

src/app/tts-login/tts-login.component.scss

@@ -0,0 +1,14 @@
+.main-div {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+h4 {
+    text-align: center;
+}
+
+.main-card {
+    width: 20%;
+}

src/app/tts-login/tts-login.component.ts

@@ -10,11 +10,12 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { HermesClientService } from '../hermes-client.service';
+import { MatCard } from '@angular/material/card';
 
 @Component({
     selector: 'tts-login',
     standalone: true,
-    imports: [MatButtonModule, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
+    imports: [MatButtonModule, MatCard, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
     templateUrl: './tts-login.component.html',
     styleUrl: './tts-login.component.scss'
 })