Adding toggle for keycloak integration

src/app/about/about.component.html

@@ -1,9 +1,18 @@
-<div class="container-fluid">
-  <div class="text-center">
-    <h1>
-      <span translate>Random Cat</span>
-    </h1>
-    <img src="https://cataas.com/cat" alt="rando-cat" />
-    <p>Thanks to <a href="url">Cat-as-a-Service</a> for this</p>
+<main class="container">
+  <div class="alert alert-primary" role="alert">
+    <h5 class="text-center mt-3 text-uppercase">Random Cat </h5>
   </div>
-</div>
+
+  <div class="card">
+    <div class="card-title">
+    </div>
+    <div class="d-flex justify-content-center">
+      <img src="https://cataas.com/cat" alt="rando-cat" />
+    </div>
+    <div class="card-body">
+      <div class="alert alert-success text-center" role="alert">
+        Thanks to <a href="url">Cat-as-a-Service</a> for this
+      </div>
+    </div>
+    </div>
+</main>

src/app/app.module.ts

@@ -11,7 +11,6 @@ import { HomeModule } from './home/home.module';
 import { ShellModule } from './shell/shell.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-
 import { AuthConfigModule } from '@app/auth/auth.config.module';
 import { MatomoModule } from 'ngx-matomo-v9';
 

src/app/auth/auth.config.module.ts

@@ -14,18 +14,20 @@ import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
         return () => {
           // to ensure the config for keycloak is avail prior to trying to connect to it....
           return configSvc.loadConfiguration().then((allConfig: Configuration) => {
-            return keycloak.init({
-              config: {
-                url: allConfig.keycloak.url,
-                realm: allConfig.keycloak.realm,
-                clientId: allConfig.keycloak.clientId
-              },
-              initOptions: {
-                onLoad: 'check-sso',
-                enableLogging: true || allConfig.keycloak.enableLogging,
-                silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html'
-              }
-            });
+            if (allConfig.keycloak.enabled) {
+              return keycloak.init({
+                config: {
+                  url: allConfig.keycloak.url,
+                  realm: allConfig.keycloak.realm,
+                  clientId: allConfig.keycloak.clientId
+                },
+                initOptions: {
+                  onLoad: 'check-sso',
+                  enableLogging: true || allConfig.keycloak.enableLogging,
+                  silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html'
+                }
+              });
+            }
           });
         };
       },

src/app/cats/cat-card/catcard.component.html

@@ -7,9 +7,6 @@
     <p class="card-text justify-content-center" [hidden]="!compOver">🐈 No cats left in the competition 🐈</p>
     <!-- <p >Is this the cat for you?</p> -->
     <button (click)="this.getNewCat(true)" [disabled]="compOver">👍</button>
-
-    <button (click)="this.getNewCat(false)" [disabled]="compOver">👎</button>
-
     <span class="cats-float-right">🐾 {{ currentVoteCount }} </span>
   </div>
 </div>

src/app/cats/cat-card/catcard.component.scss

@@ -1,3 +1,9 @@
 cats-float-right {
   float: right;
 }
+
+img{
+
+  width: 200px;
+  height: 300px;
+}

src/app/cats/cat-card/catcard.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { CatsService } from '../cats.service';
 import { ConfigurationLoader } from '@app/config/configuration-loader.service';
 import { MatomoTracker } from 'ngx-matomo-v9';
-
+import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';
 @Component({
   selector: 'app-catcard',
   templateUrl: './catcard.component.html',
@@ -15,7 +15,8 @@ export class CatcardComponent implements OnInit {
   public compOver = false;
   private catId: string;
   private analytics = false;
-
+  private faThumbsup = faThumbsUp;
+  private faThumbsdown=faThumbsDown;
   constructor(
     private catsService: CatsService,
     private configSvc: ConfigurationLoader,

src/app/cats/cats.component.html

@@ -1,16 +1,31 @@
-<div class="container">
+<div>
+  <div class="row">
+    <div class="col-sm-4 text-center"></div>
+    <div class="col-sm-4 text-center">
+      <img style="width: 80%" src="../../assets/podium.jpg"/>
+      <h1> Leader board</h1>
+      </div>
+      </div>
+<div class="jumbotron-fluid p-3 p-md-5 text-white rounded btn-light leaderbackground">
+
+  <div class="container">
+
   <div class="row mt-5 mb-3">
     <div class="col-sm-4">
-      <div class="card text-center">
-        <img class="card-img-top" [src]="first" alt="Current Top Cat 👑" />
-        <div class="card-body">
-          <h3 class="card-title">🥇</h3>
+    </div>
+    <div class="col-sm-4 ">
+      <div class="card text-center gframe">
+        <img class="card-img-top"  [src]="first" alt="Current Top Cat 👑" />
+        <div class="card-body ">
+          <h5 class="card-title">🥇</h5>
           <p class="card-text">👑 Current TopCat 🐾 {{ firstCount }}</p>
         </div>
       </div>
     </div>
+    </div>
+    <div class="row mt-5 mb-3">
     <div class="col-sm-4">
-      <div class="card text-center">
+      <div class="card text-center sframe">
         <img class="card-img-top" [src]="second" alt="🏵️ Second Place Cat" />
         <div class="card-body">
           <h3 class="card-title">🥈</h3>
@@ -19,7 +34,9 @@ <h3 class="card-title">🥈</h3>
       </div>
     </div>
     <div class="col-sm-4">
-      <div class="card text-center">
+      </div>
+    <div class="col-sm-4 ">
+      <div class="card text-center bframe">
         <img class="card-img-top" [src]="third" alt="Third place cat 🏵️" />
         <div class="card-body">
           <h3 class="card-title">🥉</h3>
@@ -35,11 +52,18 @@ <h3 class="card-title">🥉</h3>
       <span class="spinner-grow spinner-grow-sm" role="status" [hidden]="refreshing" aria-hidden="true"></span>
     </button>
   </div>
+</div>
+</div>
+<br>
+<div class="container-fluid">
 
-  <h5 class="text-center mt-3">Upvote or Downvote your favourite cat to reveal another one ...</h5>
-  <div class="row mt-5">
-    <div class="col-sm-3" *ngFor="let cat of listOfCatCards">
-      <app-catcard *ngIf="gotCats"></app-catcard>
-    </div>
+<div class="alert alert-primary" role="alert">
+<h5 class="text-center mt-3">Upvote or Downvote your favourite cat to reveal another one ...</h5>
+</div>
+<div class="row mt-5">
+  <div class="col-sm-3" *ngFor="let cat of listOfCatCards">
+    <app-catcard *ngIf="gotCats"></app-catcard>
   </div>
 </div>
+</div>
+</div>

src/app/cats/cats.component.scss

@@ -0,0 +1,38 @@
+.golden{
+    background-image: url('../../assets/goldenframe.png');
+    background-repeat:no-repeat;
+    background-size: contain;
+}
+
+.gframe {
+    border: 10px solid rgba(212, 175, 55, 0.76);
+    background-color: rgba(212, 175, 55, 0.76);
+  }
+
+  .sframe {
+    border: 10px solid rgba(248,248,255);
+    background-color: rgba(248,248,255);
+    color: grey;
+  }
+
+  .bframe {
+    border: 10px solid rgba(80.4, 49.8, 19.6);
+    background-color: rgba(80.4, 49.8, 19.6);
+  }
+
+  .imgframe {
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center;
+    width: 100%;
+    height: 100%;
+    background-size: contain;
+
+   }
+
+   .leaderbackground{
+
+    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
+
+   }
+

src/app/config/config.model.ts

@@ -12,4 +12,5 @@ export interface KeycloakOpts {
   clientId: string;
   redirectUri: string;
   enableLogging?: boolean;
+  enabled?: boolean;
 }

src/app/home/home.component.html

@@ -1,14 +1,24 @@
-<div class="container-fluid">
-  <h4 class="text-center">It's Cat Vs Cat in this purrfect competition.</h4>
-  <p class="text-center">
-    The challenge is tough as these cats are all very fur-midable! There can be only one winner in this a-paw-ling
-    competition, could you pawsibly choose just one cat?? You must be kitten-me!!
+<div class="container">
+  <div class="jumbotron-fluid p-3 p-md-5 text-white rounded headerbackground row ">
+    <div class="col-sm">
+      <h1 class="display-12 text-center ">It's Cat Vs Cat in this purrfect competition.</h1>
+      <p class="lead my-3">
+        The challenge is tough as these cats are all very fur-midable! There can be only one winner in this a-paw-ling
+        competition, could you pawsibly choose just one cat?? You must be kitten-me!!
   </p>
 
-  <div class="text-center">
-    <button type="button" class="btn btn-primary" (click)="open(content)">🐈 Add your cat the competition 🐈</button>
-  </div>
+ </div>
+ <div class="col-sm overlay">
+  <img style="width: 80%" src="../../assets/pet_component_logo.jpg">
+  <p class="tagline"> Do you have the cutest pet?</p>
+ <div class="text-center">
+    <button type="button" class="btn btn-danger btn-sm btn-contest " (click)="open(content)">🐈 ENTER YOUR CAT TO CLAIM THE TITLE 🐈</button>
+  </div>   
 
+</div>
+  </div>
+</div>
+<main class="container" role="main">
   <app-cats></app-cats>
 
   <ng-template #content let-modal>
@@ -39,4 +49,4 @@ <h4 class="modal-title">Add your cat 🐈</h4>
       </span>
     </div>
   </ng-template>
-</div>
+</main>

src/app/home/home.component.scss

@@ -4,3 +4,32 @@
   height: auto;
   max-height: 300px;
 }
+
+
+.overlay
+{
+background-color: rgba(50,50,52,0.7);
+border: 3px solid #fff;
+border-radius: 5px;
+float: right;
+margin: 0 auto;
+max-width: 570px;
+padding: 20px 0 50px;
+text-align: center;
+width: 100%;
+}
+
+.btn-contest {
+  background-color: #F78020;
+  //border: 3px solid #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.35),0 -5px 0 rgba(0,0,0,0.2) inset;
+  color: #fff;
+  font: 14px/1.7 'odudabold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-transform: uppercase;
+  width: 70%;
+}
+.headerbackground
+{
+ background-image: linear-gradient( 64.3deg,  rgba(254,122,152,0.81) 17.7%, rgba(255,206,134,1) 64.7%, rgba(172,253,163,0.64) 112.1% );
+}

src/app/shell/header/header.component.html

@@ -1,12 +1,15 @@
-<header>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<div class="container">
+<header class="py-3">
+<div class=" row flex-nowrap justify-content-between align-items-center  header-main-wrap ">
+
+  <nav class="navbar navbar-expand-lg header-main-wrap navbar-dark justify-content-between d-flex">
     <!-- PB - Purple -->
     <!--  <nav class="navbar  navbar-expand-lg navbar-dark" style="background-color: #563D7C;"> -->
     <!-- Red #E00201-->
     <!-- <nav class="navbar  navbar-expand-lg navbar-dark" style="background-color: #E00201;"> -->
     <!-- Green #009B00 -->
     <!-- <nav class="navbar  navbar-expand-lg navbar-dark" style="background-color: #009B00;"> -->
-    <a class="navbar-brand" href="/home">Pet Battle</a>
+
     <button
       class="navbar-toggler"
       type="button"
@@ -17,30 +20,38 @@
     >
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div id="navbar-menu" class="collapse navbar-collapse float-xs-none" [ngbCollapse]="menuHidden">
-      <div class="navbar-nav">
+    <a class="navbar-brand" href="#">
+      <img src="../../../assets/pet_battle_logo.jpg" width="80" height="80" class="d-inline-block align-top" alt=" Pet Battle">
+
+    </a>
+    <!-- fix link hover issue-->
+    <div id="navbar-menu" class="collapse navbar-collapse float-xs-none header-main" [ngbCollapse]="menuHidden">
+      <div class="navbar-nav align-items-center">
         <a class="nav-item nav-link text-uppercase" routerLink="/home" routerLinkActive="active">
-          <i class="fas fa-home"></i>
+         <!-- <i class="fas fa-home"></i>-->
           <span translate> Home</span>
         </a>
-        <a class="nav-item nav-link text-uppercase" routerLink="/about" routerLinkActive="active">
-          <i class="fas fa-question-circle"></i>
+          <a class="nav-item nav-link text-uppercase" routerLink="/about" routerLinkActive="active">
+          <!--     <i class="fas fa-question-circle"></i> -->
           <span translate> Random Cat</span>
         </a>
         <a class="nav-item nav-link text-uppercase" routerLink="/winner" routerLinkActive="active">
-          <i class="fas fa-crown"></i>
+         <!--      <i class="fas fa-crown"></i> -->
           <span translate> Cat of the Week</span>
         </a>
         <a class="nav-item nav-link text-uppercase" routerLink="/tournament" routerLinkActive="active">
-          <i class="fas fa-gamepad "></i>
+          <!--     <i class="fas fa-gamepad "></i> -->
           <span translate> Tournament</span>
         </a>
         <a class="nav-item nav-link text-uppercase" (click)="logout()">
-          <i class="fas fa-sign-out-alt "></i>
+            <!--   <i class="fas fa-sign-out-alt "></i> -->
           <span translate> {{ buttonText }}</span>
         </a>
       </div>
       <div class="navbar-nav ml-auto "></div>
     </div>
   </nav>
+</div>
 </header>
+
+</div>