Syntax highlight in /auth

CHANGELOG.md

@@ -17,7 +17,7 @@ This project tries to follow [SemVer 2.0.0](https://semver.org/).
 - Added the ability to login. While logged in this will forward the OIDC
   access token to the backend such that a secure user access control is
   established. This is only performed when the following config value
-  is set: (#70, #137)
+  is set: (#70, #137, #138)
 
   ```json
   {

src/app/app.module.ts

@@ -10,7 +10,7 @@ import { NotificationModule } from './shared/notification/notification.module';
 import { MenuModule } from 'primeng/menu';
 import { TooltipModule } from 'primeng/tooltip';
 import { SyntaxHighlightService } from './shared/syntax-highlight/syntax-highlight.service';
-import { SharedModule } from './shared/pipes/shared.module';
+import { SharedModule } from './shared/shared.module';
 import { NavModule } from './nav/nav.module';
 import { LicensesModule } from './licenses/licenses.module';
 import { AuthModule } from './auth/auth.module';

src/app/auth/auth-oidc/oidc-auth.module.ts

@@ -9,6 +9,7 @@ import { OidcHomeComponent } from './oidc-home/oidc-home.component';
 import { OidcUnauthorizedComponent } from './oidc-unauthorized/oidc-unauthorized.component';
 import { OidcAutoLoginRoutesGuard } from './oidc-auto-login.guard';
 import { AuthGuard } from '../auth.guard';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import { AuthGuard } from '../auth.guard';
     RouterModule,
     ButtonModule,
     CardModule,
+    SharedModule,
 
     RouterModule.forChild([
       { path: '', component: OidcHomeComponent, canActivate: [AuthGuard] },

src/app/auth/auth-oidc/oidc-home/oidc-home.component.html

@@ -6,18 +6,16 @@
   <p-button (click)="revokeRefreshToken()">Revoke refresh token</p-button>
   <p-button (click)="refreshSession()">Refresh session</p-button>
   <hr />
-  <br />
-  Is Authenticated: {{ isAuthenticated$|async }}
-  <br />
-  userData
-  <pre>{{ userData$ | async | json }}</pre>
-  <br />
+  Is Authenticated: <code>{{ isAuthenticated$|async }}</code>
+  <h2>User data</h2>
+  <wh-syntax-highlight language="json" [code]="userData$ | async | json"></wh-syntax-highlight>
 </div>
 
 <ng-template #noAuth>
   <p-button (click)="login()">Login</p-button>
   <hr />
 </ng-template>
 
-Configuration loaded:
-<pre><code>{{ configuration | json }}</code></pre>
+<h2>Configuration loaded</h2>
+
+<wh-syntax-highlight language="json" [code]="configuration | json"></wh-syntax-highlight>

src/app/builds/builds.module.ts

@@ -1,4 +1,4 @@
-import { SharedModule } from '../shared/pipes/shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { ArtifactsModule } from './../artifacts/artifacts.module';
 import { TestResultsModule } from './../test-results/test-results.module';
 import { BuildService, ProjectService } from 'api-client';

src/app/licenses/licenses.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import { SharedModule } from '../shared/pipes/shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { LicensesComponent } from './licenses.component';
 import { AccordionModule } from 'primeng/accordion';
 import { TooltipModule } from 'primeng/tooltip';

src/app/nav/nav.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { NavComponent } from './nav.component';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { CommonModule } from '@angular/common';
-import { SharedModule } from '../shared/pipes/shared.module';
+import { SharedModule } from '../shared/shared.module';
 import { MenuModule } from 'primeng/menu';
 import { TooltipModule } from 'primeng/tooltip';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';

src/app/projects/projects.module.ts

@@ -23,23 +23,20 @@ import { ActionsModalComponent } from './actions-modal/actions-modal.component';
 import { LocalStorageProjectsService } from './local-storage-projects.service';
 import { ProjectListComponent } from './project-list/project-list.component';
 import { ProvidersModule } from '../providers/providers.module';
-import { WharfSpinnerAnimationComponent } from '../animations/wharf-spinner-animation/wharf-spinner-animation.component';
 import { ProjectListItemComponent } from './project-list/project-list-item.component';
 import {
   ProjectDetailsBuildComponent,
   ProjectDetailsComponent,
   ProjectDetailsScheduleComponent,
   ProjectDetailsConfigurationComponent,
 } from './project-details';
-import { SyntaxHighlightComponent } from '../shared/syntax-highlight/syntax-highlight.component';
 import {
   ProjectRefreshIconComponent,
   ProjectRefreshButtonComponent,
 } from './project-refresh';
 import { ProjectFavoriteButtonComponent } from './project-favorite/project-favorite-button.component';
 import { TabViewExtendedModule } from '../shared/tabview-x/tabview-x.module';
-import { TimerComponent } from '../shared/timer/timer.component';
-import { SharedModule } from '../shared/pipes/shared.module';
+import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
   declarations: [
@@ -53,9 +50,6 @@ import { SharedModule } from '../shared/pipes/shared.module';
     ProjectRefreshButtonComponent,
     ProjectRefreshIconComponent,
     ProjectFavoriteButtonComponent,
-    SyntaxHighlightComponent,
-    TimerComponent,
-    WharfSpinnerAnimationComponent,
   ],
   imports: [
     BrowserAnimationsModule,
@@ -80,6 +74,7 @@ import { SharedModule } from '../shared/pipes/shared.module';
     TabMenuModule,
     TabViewExtendedModule,
     TooltipModule,
+    SharedModule,
   ],
   providers: [
     ArtifactService,

src/app/shared/shared.module.ts

@@ -0,0 +1,36 @@
+import { DateFormatPipe } from './pipes/date.pipe';
+import { NgModule } from '@angular/core';
+import { IsValidBuildRefPipe, IsValidDatePipe, IsValidStringPipe } from './pipes/isvalid.pipe';
+import { SyntaxHighlightComponent } from './syntax-highlight/syntax-highlight.component';
+import { SyntaxHighlightService } from './syntax-highlight/syntax-highlight.service';
+import { TimerComponent } from './timer/timer.component';
+import { WharfSpinnerAnimationComponent } from './animations/wharf-spinner-animation/wharf-spinner-animation.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [
+    DateFormatPipe,
+    IsValidBuildRefPipe,
+    IsValidDatePipe,
+    IsValidStringPipe,
+    SyntaxHighlightComponent,
+    TimerComponent,
+    WharfSpinnerAnimationComponent,
+  ],
+  exports: [
+    DateFormatPipe,
+    IsValidBuildRefPipe,
+    IsValidDatePipe,
+    IsValidStringPipe,
+    SyntaxHighlightComponent,
+    TimerComponent,
+    WharfSpinnerAnimationComponent,
+  ],
+  imports: [
+    CommonModule,
+  ],
+  providers: [
+    SyntaxHighlightService,
+  ],
+})
+export class SharedModule { }

src/app/shared/syntax-highlight/syntax-highlight.component.ts

@@ -25,8 +25,8 @@ export class SyntaxHighlightComponent implements AfterViewChecked, OnChanges {
   @Input() language: string;
   @Input() code: string;
 
-  @ViewChild('codeElem', {static: false}) codeElem: ElementRef<HTMLElement>;
-  @ViewChild('template', {static: true, read: TemplateRef}) template: TemplateRef<any>;
+  @ViewChild('codeElem', { static: false }) codeElem: ElementRef<HTMLElement>;
+  @ViewChild('template', { static: true, read: TemplateRef }) template: TemplateRef<any>;
 
   private hasHighlighted = false;
 

src/app/shared/syntax-highlight/syntax-highlight.service.ts

@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import 'prismjs';
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-json';
 
 // Based on https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs/
 @Injectable()

src/scss/code-blocks.scss

@@ -1,4 +1,3 @@
-
 /* Inline code block */
 code,
 samp {
@@ -40,7 +39,7 @@ pre.code-block {
 }
 
 /* Prism classes coloring */
-.token {
+.language-yaml .token {
   &.comment,
   &.prolog,
   &.doctype,
@@ -58,3 +57,13 @@ pre.code-block {
     color: $wharf_code_token_keyword_color;
   }
 }
+
+.language-json .token {
+  &.punctuation {
+    color: $wharf_code_token_punctuation_color;
+  }
+
+  &.property {
+    color: $wharf_code_token_keyword_color;
+  }
+}