From bb940e7d578ebbc80af6ec2fe6ea668b7b0a1aec Mon Sep 17 00:00:00 2001
From: Francesco Sciuti <fsciuti@gmail.com>
Date: Mon, 11 Nov 2019 22:39:15 +0100
Subject: [PATCH 01/13] docs(readme): update features list and add gif

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index b6becf2..26851d0 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,11 @@ _Redis Patterns Console_ is an interactive (and reactive) console, written in An
 - _Step by Step_ Patterns panel, with integrated command execution and detection of contextual official [Redis doc](https://github.com/antirez/redis-doc);
 - Command-line and history of Redis Server responses;
 - Command list (divided by categories) and detection of contextual official [Redis doc](https://github.com/antirez/redis-doc);
+- Interactive Command suggestion;
 - Isolated Client sessions.
 
+![redis-patterns-console](https://acadevmy.it/redis-patterns-console.gif "Redis Patterns Console")
+
 _Redis Patterns Console_ is inspired by [Try-Redis](https://try.redis.io/) project.
 
 ### Development server

From 9f418effe643a0508821addd2bd07bcadd2a5aa4 Mon Sep 17 00:00:00 2001
From: Francesco Sciuti <fsciuti@gmail.com>
Date: Tue, 12 Nov 2019 10:44:09 +0100
Subject: [PATCH 02/13] docs(readme): update todo roadmap

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 26851d0..e48bc1b 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ Thanks for your future contributions!
 - Stateless Components refactoring and improvements;
 - Continuous refactoring;
 - Blacklist Enum; [TBD]
+- Increase GitHub API calls (with GitHub login) to 5000 (per token);
 - Everythings you notice! 🙏
 
 &nbsp;

From a4614bb8721a31e912a63f3bf4dd93f4beabba8c Mon Sep 17 00:00:00 2001
From: Moreno Bruschi <moreno.bruschi@sodalisgroup.com>
Date: Tue, 12 Nov 2019 15:51:39 +0100
Subject: [PATCH 03/13] fix(header): changed title in header to "Redis Patterns
 Console"

Fix Title with full name of project as requested

Closes issue #3
---
 src/app/core/components/header/header.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index ad48b88..98c7f37 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -18,7 +18,7 @@ import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
   ]
 })
 export class HeaderComponent implements AfterViewInit {
-  title = 'Redis Patterns';
+  title = 'Redis Patterns Console';
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 

From 69deb23673ba17f7287b3d40a01a0d7aca6988d3 Mon Sep 17 00:00:00 2001
From: Moreno Bruschi <moreno.bruschi@sodalisgroup.com>
Date: Tue, 12 Nov 2019 16:39:19 +0100
Subject: [PATCH 04/13] feat(header): added application version label next to
 the title

Add version label next to title

Closes issue #2
---
 src/app/core/components/header/header.component.html | 2 +-
 src/app/core/components/header/header.component.ts   | 2 ++
 tsconfig.json                                        | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 5526b9d..e498172 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="d-md-flex justify-content-between align-items-center">
-  <h1 class="h3"><img src="assets/redis-white.png" />{{title}}</h1>
+  <h1 class="h3"><img src="assets/redis-white.png" />{{title}} {{version}}</h1>
   <nav>
       <ul class="nav">
           <li class="nav-item">
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index ad48b88..2f9df02 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,4 +1,5 @@
 import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { version } from '../../../../../package.json';
 
 @Component({
   selector: 'tr-header',
@@ -19,6 +20,7 @@ import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
 })
 export class HeaderComponent implements AfterViewInit {
   title = 'Redis Patterns';
+  version = version;
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
diff --git a/tsconfig.json b/tsconfig.json
index 6e14098..6272915 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
+    "resolveJsonModule": true,
     "target": "es2015",
     "typeRoots": [
       "node_modules/@types"

From 5c2ca6e2bc353e77c7e9d78a1e2889470c8d3ef7 Mon Sep 17 00:00:00 2001
From: Moreno Bruschi <bruschi.moreno@outlook.com>
Date: Tue, 12 Nov 2019 23:12:33 +0100
Subject: [PATCH 05/13] revision 1

---
 src/app/core/components/header/header.component.html | 2 +-
 src/app/core/components/header/header.component.ts   | 4 ++--
 src/environments/environment.prod.ts                 | 5 ++++-
 src/environments/environment.ts                      | 5 ++++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index e498172..c448864 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="d-md-flex justify-content-between align-items-center">
-  <h1 class="h3"><img src="assets/redis-white.png" />{{title}} {{version}}</h1>
+  <h1 class="h3"><img src="assets/redis-white.png" />{{title + ' ' + version}}</h1>
   <nav>
       <ul class="nav">
           <li class="nav-item">
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index 2f9df02..1325fbf 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
-import { version } from '../../../../../package.json';
+import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'tr-header',
@@ -20,7 +20,7 @@ import { version } from '../../../../../package.json';
 })
 export class HeaderComponent implements AfterViewInit {
   title = 'Redis Patterns';
-  version = version;
+  version = environment.version;
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 99f89f1..7d6f4cd 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,5 @@
+import { version } from 'package.json';
+
 export const environment = {
   production: true,
   redisServer: '', // ADD HERE YOUR WS SERVER URL
@@ -12,5 +14,6 @@ export const environment = {
     path: 'acadevmy/redis-patterns-cookbook',
     json: 'patterns.json'
   },
-  cacheableHeaderKey: 'cacheable-request'
+  cacheableHeaderKey: 'cacheable-request',
+  version: version
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index fe00646..8133b07 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,6 +1,8 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
+
+import { version } from 'package.json';
 ​
 export const environment = {
   production: false,
@@ -16,7 +18,8 @@ export const environment = {
     path: 'acadevmy/redis-patterns-cookbook',
     json: 'patterns.json'
   },
-  cacheableHeaderKey: 'cacheable-request'
+  cacheableHeaderKey: 'cacheable-request',
+  version: version
 };
 ​
 /*

From 2a8d395901c73c63cdb6f2dc5b12e245706dc04a Mon Sep 17 00:00:00 2001
From: Moreno Bruschi <moreno.bruschi@sodalisgroup.com>
Date: Wed, 13 Nov 2019 10:45:10 +0100
Subject: [PATCH 06/13] revision 2

---
 src/app/core/components/header/header.component.html | 2 +-
 src/app/core/components/header/header.component.ts   | 2 +-
 src/environments/environment.prod.ts                 | 2 +-
 src/environments/environment.ts                      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index c448864..5b645d5 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,5 +1,5 @@
 <div class="d-md-flex justify-content-between align-items-center">
-  <h1 class="h3"><img src="assets/redis-white.png" />{{title + ' ' + version}}</h1>
+  <h1 class="h3"><img src="assets/redis-white.png" />{{title}} <span class="h6">{{version}}</span></h1>
   <nav>
       <ul class="nav">
           <li class="nav-item">
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index 1325fbf..2b847ea 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,5 +1,5 @@
 import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
-import { environment } from '../../../../environments/environment';
+import { environment } from '@app/../environments/environment';
 
 @Component({
   selector: 'tr-header',
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 7d6f4cd..211fd04 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -15,5 +15,5 @@ export const environment = {
     json: 'patterns.json'
   },
   cacheableHeaderKey: 'cacheable-request',
-  version: version
+  version
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 8133b07..5eb86c6 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -19,7 +19,7 @@ export const environment = {
     json: 'patterns.json'
   },
   cacheableHeaderKey: 'cacheable-request',
-  version: version
+  version
 };
 ​
 /*

From 4bf08601c396bfc3ffe574d6c0ba2c8cab77f51a Mon Sep 17 00:00:00 2001
From: Andrea Ortis <andrea.ortis@gmail.com>
Date: Mon, 2 Dec 2019 10:13:51 +0100
Subject: [PATCH 07/13] feat: add login by github account closes issue #5

---
 .gitignore                                    |  8 +++++
 src/app/app.component.html                    |  2 +-
 src/app/app.component.ts                      |  3 ++
 src/app/app.module.ts                         |  4 ++-
 .../components/header/header.component.html   | 19 +++++++-----
 .../components/header/header.component.ts     |  8 ++++-
 .../core/interceptors/cache-interceptor.ts    |  7 +++--
 src/app/core/services/config.service.ts       | 25 +++++++++++++--
 src/app/core/services/github-data.service.ts  | 31 ++++++++++++++++---
 .../shared/models/github-content.interface.ts | 12 +++++++
 src/environments/environment.prod.ts          |  4 ++-
 src/environments/environment.ts               |  6 ++--
 12 files changed, 105 insertions(+), 24 deletions(-)

diff --git a/.gitignore b/.gitignore
index adb4979..36478d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,13 +3,17 @@
 /dist
 /tmp
 /out-tsc
+
 # Only exists if Bazel was run
 /bazel-out
+
 # dependencies
 /node_modules
+
 # profiling files
 chrome-profiler-events.json
 speed-measure-plugin.json
+
 # IDEs and editors
 /.idea
 .project
@@ -18,6 +22,7 @@ speed-measure-plugin.json
 *.launch
 .settings/
 *.sublime-workspace
+
 # IDE - VSCode
 .vscode/*
 !.vscode/settings.json
@@ -25,6 +30,7 @@ speed-measure-plugin.json
 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
+
 # misc
 /.sass-cache
 /connect.lock
@@ -34,6 +40,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+environment.local.ts
+
 # System Files
 .DS_Store
 Thumbs.db
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 15f42b9..b9ebbbe 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <div class="container-fluid d-flex h-100 flex-column">
   <div class="row">
-    <tr-header class="col"></tr-header>
+    <tr-header class="col" [isAuth]="isAuth$ | async"></tr-header>
   </div>
   <div class="row flex-fill" *ngIf="(commandService.commands$ | async) as commands; else loading">
     <div class="d-flex flex-lg-row flex-md-column flex-fill" *ngIf="{activeCommand: commandService.activeCommand$ | async} as data">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a48950..536ac41 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { Output } from '@app/shared/models/response.interface';
 import { Pattern } from '@app/shared/models/pattern.interface';
 import { CommandService } from '@app/core/services/command.service';
+import { GithubDataService } from '@app/core/services/github-data.service';
 import { PatternService } from '@app/core/services/pattern.service';
 import { RedisConnectService } from '@app/core/services/redis-connect.service';
 
@@ -17,8 +18,10 @@ export class AppComponent {
   activePattern: Pattern;
   newCommandForInput: string;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
+  isAuth$: Observable<boolean> = this.githubDataService.isAuth;
 
   constructor(
+    private githubDataService: GithubDataService,
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 91094c6..cdd2cb0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
 
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
@@ -17,7 +18,8 @@ import { AppComponent } from '@app/app.component';
     CoreModule,
     SharedModule,
     CommandModule,
-    PatternModule
+    PatternModule,
+    RouterModule.forRoot([]),
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index 5b645d5..3a10626 100644
--- a/src/app/core/components/header/header.component.html
+++ b/src/app/core/components/header/header.component.html
@@ -1,13 +1,16 @@
 <div class="d-md-flex justify-content-between align-items-center">
   <h1 class="h3"><img src="assets/redis-white.png" />{{title}} <span class="h6">{{version}}</span></h1>
   <nav>
-      <ul class="nav">
-          <li class="nav-item">
-              <a class="nav-link" target="_blank" href="https://www.acadevmy.it/intro">About Us</a>
-          </li>
-          <li class="nav-item">
-              <a class="nav-link" target="_blank" href="https://github.com/acadevmy/redis-patterns-console">GitHub</a>
-          </li>
-        </ul>
+    <ul class="nav">
+      <li class="nav-item">
+        <a class="nav-link" target="_blank" href="https://www.acadevmy.it/intro">About Us</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" target="_blank" href="https://github.com/acadevmy/redis-patterns-console">GitHub</a>
+      </li>
+      <li *ngIf="!this.isLogged">
+        <a class="nav-link btn-auth btn-github" [href]="loginUrl"> Sign in with <b>Github</b></a>
+      </li>
+    </ul>
   </nav>
 </div>
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index c82feb7..9124cb4 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/src/app/core/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
+import { Component, ChangeDetectorRef, AfterViewInit, Input } from '@angular/core';
 import { environment } from '@app/../environments/environment';
 
 @Component({
@@ -21,6 +21,12 @@ import { environment } from '@app/../environments/environment';
 export class HeaderComponent implements AfterViewInit {
   title = 'Redis Patterns Console';
   version = environment.version;
+  loginUrl = environment.loginFlowStart + environment.githubAppClientId;
+  isLogged: boolean;
+  @Input('isAuth') set islogged(data: boolean) {
+    this.isLogged = data;
+    this.changeDetectorRef.detectChanges();
+  }
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
diff --git a/src/app/core/interceptors/cache-interceptor.ts b/src/app/core/interceptors/cache-interceptor.ts
index fdf35d0..a21073d 100644
--- a/src/app/core/interceptors/cache-interceptor.ts
+++ b/src/app/core/interceptors/cache-interceptor.ts
@@ -11,17 +11,18 @@ import { tap } from 'rxjs/operators';
 ​
 import { environment } from '@app/../environments/environment';
 import { CachingService } from '@app/core/services/caching.service';
+import { GithubDataService } from '@app/core/services/github-data.service';
 ​
 @Injectable({
   providedIn: 'root'
 })
 export class CacheInterceptor implements HttpInterceptor {
 ​
-  constructor(private cachingService: CachingService) { }
+  constructor(private cachingService: CachingService, private githubDataService: GithubDataService) { }
 ​
   intercept(request: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> {
-    if (environment.basicAuth && environment.basicAuth.length) {
-      request = request.clone({ setHeaders: { Authorization: `Basic ${btoa(environment.basicAuth)}` } });
+    if (this.githubDataService.accessToken && this.githubDataService.accessToken.length) {
+      request = request.clone({ setHeaders: { Authorization: `token ${this.githubDataService.accessToken}` } });
     }
 ​
     if (!request.headers.has(environment.cacheableHeaderKey))  {
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
index 2f994f2..ece821a 100644
--- a/src/app/core/services/config.service.ts
+++ b/src/app/core/services/config.service.ts
@@ -1,4 +1,7 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, finalize, map, switchMap, take, tap } from 'rxjs/operators';
+import { iif, of } from 'rxjs';
 
 import { CommandService } from '@app/core/services/command.service';
 import { GithubDataService } from '@app/core/services/github-data.service';
@@ -10,12 +13,28 @@ import { PatternService } from '@app/core/services/pattern.service';
 
 export class ConfigService {
   constructor(
+    private injector: Injector,
     private githubDataService: GithubDataService,
     private commandService: CommandService,
     private patternService: PatternService) { }
 
   init() {
-    this.commandService.setCommands();
-    this.patternService.patterns$ = this.githubDataService.fetchPatterns();
+    const router = this.injector.get(Router);
+
+    router.events.pipe(
+      filter((event) => (event instanceof NavigationEnd && event.id <= 1)), // filter only first navigation end event
+      map((event: NavigationEnd) => new URLSearchParams(event.url.slice(1)).get('code')), // parse url to get the 'code' query param
+      switchMap((code) => iif(() => !code, of(null),  // if code exists get access token else emits null value
+        this.githubDataService.setAccessToken(code).pipe(
+          tap(() => router.navigate(['/']))
+        )
+      )),
+      take(1),
+      finalize(() => {
+        this.commandService.setCommands();
+        this.patternService.patterns$ = this.githubDataService.fetchPatterns();
+      })
+    ).subscribe();
+
   }
 }
diff --git a/src/app/core/services/github-data.service.ts b/src/app/core/services/github-data.service.ts
index 121b737..7f6f21a 100644
--- a/src/app/core/services/github-data.service.ts
+++ b/src/app/core/services/github-data.service.ts
@@ -1,23 +1,27 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
 
 import { environment } from '@app/../environments/environment';
 import { Command } from '@app/shared/models/command.interface';
 import { Pattern } from '@app/shared/models/pattern.interface';
 import { CachingService } from '@app/core/services/caching.service';
-import { GithubContent } from '@app/shared/models/github-content.interface';
+import { GithubContent, ITokenResponse } from '@app/shared/models/github-content.interface';
 
 @Injectable({
   providedIn: 'root'
 })
 
 export class GithubDataService {
+  authorized = new BehaviorSubject<boolean>(false);
+  accessToken: string;
   private redisDocPath = environment.redisDocRepo.path;
   private patternsPath = environment.patternsRepo.path;
 
-  constructor(private http: HttpClient, private cachingService: CachingService) { }
+  constructor(
+    private http: HttpClient,
+    private cachingService: CachingService) { }
 
   /**
    * Fetch all available commands from remote git repo
@@ -90,4 +94,23 @@ export class GithubDataService {
   private getEndpoint(repo: string, file: string): string {
     return environment.githubEndpoint.replace('_repo_', repo).replace('_file_', file);
   }
+
+  setAccessToken(code?: string): Observable<boolean> {
+    return this.http.get(environment.accessTokenRequestUrl + code).pipe(
+      switchMap((res: ITokenResponse) => {
+        const isToken = (res.data.access_token) ? true : false;
+        this.authorized.next(isToken);
+        this.accessToken = res.data && res.data.access_token;
+        return this.isAuth;
+      }),
+      catchError(() => {
+        this.authorized.next(false);
+        return this.isAuth;
+      })
+    );
+  }
+
+  get isAuth() {
+    return this.authorized.asObservable();
+  }
 }
diff --git a/src/app/shared/models/github-content.interface.ts b/src/app/shared/models/github-content.interface.ts
index 4e8c89e..ac16916 100644
--- a/src/app/shared/models/github-content.interface.ts
+++ b/src/app/shared/models/github-content.interface.ts
@@ -5,3 +5,15 @@ export interface GithubContent {
   download_url: string;
   encoding: string;
 }
+
+export interface ITokenResponse {
+  query: { code: string };
+  data: {
+    error?: string;
+    error_description?: string;
+    error_uri?: string;
+    access_token?: string;
+    token_type?: string;
+    scope?: string;
+  };
+}
\ No newline at end of file
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 211fd04..ba4e8f0 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -3,7 +3,9 @@ import { version } from 'package.json';
 export const environment = {
   production: true,
   redisServer: '', // ADD HERE YOUR WS SERVER URL
-  basicAuth: '', // ADD HERE YOUR GITHUB "user:token" to prevent API rate limit
+  githubAppClientId: '', // ADD HERE YOUR GITHUB APP CLIENT ID
+  accessTokenRequestUrl: 'https://redis-patterns-oauth.ac01.acadevmy.it/?code=',
+  loginFlowStart: 'https://github.com/login/oauth/authorize?client_id=',
   githubEndpoint: 'https://api.github.com/repos/_repo_/contents/_file_',
   redisDocRepo: {
     path: 'antirez/redis-doc',
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 5eb86c6..7fdefce 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,8 +6,10 @@ import { version } from 'package.json';
 ​
 export const environment = {
   production: false,
-  redisServer: 'ws://127.0.0.1:8080',
-  basicAuth: '', // ADD HERE YOUR GITHUB "user:token" to prevent API rate limit
+  redisServer: 'ws://127.0.0.1:8080', 
+  githubAppClientId: '',
+  accessTokenRequestUrl: 'https://redis-patterns-oauth.ac01.acadevmy.it/?code=',
+  loginFlowStart: 'https://github.com/login/oauth/authorize?client_id=',
   githubEndpoint: 'https://api.github.com/repos/_repo_/contents/_file_',
   redisDocRepo: {
     path: 'antirez/redis-doc',

From 7298d0cd4075699c78ae882a4ce57f71bdfca160 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 7 Dec 2019 15:01:14 +0100
Subject: [PATCH 08/13] feat(command-output): clear button

---
 src/app/app.component.html                    |  2 +-
 src/app/app.component.ts                      | 36 +++++++++++++------
 .../command-output.component.html             |  1 +
 .../command-output.component.ts               | 12 +++++--
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 15f42b9..f8c302a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,7 +37,7 @@
             </tr-command-list>
           </div>
           <div class="flex-grow-1 d-flex">
-            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses">
+            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses" (clearEvt)="clearOutput($event)">
             </tr-command-output>
           </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a48950..4254add 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,29 +1,33 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import {Component, OnDestroy} from '@angular/core';
 
-import { Output } from '@app/shared/models/response.interface';
-import { Pattern } from '@app/shared/models/pattern.interface';
-import { CommandService } from '@app/core/services/command.service';
-import { PatternService } from '@app/core/services/pattern.service';
-import { RedisConnectService } from '@app/core/services/redis-connect.service';
+import {Output} from '@app/shared/models/response.interface';
+import {Pattern} from '@app/shared/models/pattern.interface';
+import {CommandService} from '@app/core/services/command.service';
+import {PatternService} from '@app/core/services/pattern.service';
+import {RedisConnectService} from '@app/core/services/redis-connect.service';
+
+import {Observable, Subscription} from 'rxjs';
 
 @Component({
   selector: 'tr-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy {
+  private responseSub: Subscription = Subscription.EMPTY;
+
   responses: Output[] = [];
   selectedDoc: string;
   activePattern: Pattern;
   newCommandForInput: string;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
 
+
   constructor(
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-      this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
-    }
+    this.responseSub = this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
+  }
 
   /**
    * Set current command as the active one
@@ -63,9 +67,21 @@ export class AppComponent {
     this.selectActiveCommand(first);
   }
 
+  /**
+   * reset responses
+   *
+   */
+  clearOutput(): void {
+    this.responses = [];
+  }
+
   private updateResponses(command: Output) {
     const commands = [];
     Object.assign(commands, [...this.responses, command]);
     this.responses = commands;
   }
+
+  ngOnDestroy(): void {
+    this.responseSub.unsubscribe();
+  }
 }
diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 1301173..5ceefdf 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,4 +1,5 @@
 <h3 class="h4">Redis Responses</h3>
+<button (click)="clear()">clear</button>
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
diff --git a/src/app/features/command/command-output/command-output.component.ts b/src/app/features/command/command-output/command-output.component.ts
index 1486ad7..d4adf0c 100644
--- a/src/app/features/command/command-output/command-output.component.ts
+++ b/src/app/features/command/command-output/command-output.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, EventEmitter, Output} from '@angular/core';
 
-import { Output } from '@app/shared/models/response.interface';
+import {Output as OutputItf} from '@app/shared/models/response.interface';
 
 @Component({
   selector: 'tr-command-output',
@@ -9,5 +9,11 @@ import { Output } from '@app/shared/models/response.interface';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CommandOutputComponent {
-  @Input() commandsOutput: Array<Output> = [];
+  @Input() commandsOutput: Array<OutputItf> = [];
+  @Output()
+  clearEvt: EventEmitter<void> = new EventEmitter<void>();
+
+  clear(): void {
+    this.clearEvt.emit();
+  }
 }

From 044b58f1b96291e6e1937961c4cf80c4a53cf488 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sun, 8 Dec 2019 12:33:12 +0100
Subject: [PATCH 09/13] improvement(app-component): introduce response
 observables flow

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 31 +++++++++++++++++++------------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f8c302a..9e187a6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,7 +37,7 @@
             </tr-command-list>
           </div>
           <div class="flex-grow-1 d-flex">
-            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses" (clearEvt)="clearOutput($event)">
+            <tr-command-output class="d-flex flex-column h-auto w-100" [commandsOutput]="responses$|async" (clearEvt)="clearOutput($event)">
             </tr-command-output>
           </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4254add..612bac4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,9 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, Subscription} from 'rxjs';
+import {Observable, Subscription, BehaviorSubject} from 'rxjs';
+import {scan} from 'rxjs/operators';
+
 
 @Component({
   selector: 'tr-root',
@@ -15,18 +17,29 @@ import {Observable, Subscription} from 'rxjs';
 export class AppComponent implements OnDestroy {
   private responseSub: Subscription = Subscription.EMPTY;
 
-  responses: Output[] = [];
+  readonly responses$: Observable<Output[]>;
+
+  private currentResponseBs: BehaviorSubject<Output> = new BehaviorSubject<Output>(null);
+  get currentResponse$() {
+    return this.currentResponseBs.asObservable();
+  }
+
   selectedDoc: string;
   activePattern: Pattern;
   newCommandForInput: string;
   resetCommand$: Observable<number> = this.redisConnectService.execCommandTime$;
 
-
   constructor(
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-    this.responseSub = this.redisConnectService.response$.subscribe((response: Output) => this.updateResponses(response));
+    this.responseSub = this.redisConnectService.response$
+      .subscribe((response: Output) => this.currentResponseBs.next(response));
+
+    /** when currentResponse$ is null reset responses$ */
+    this.responses$ = this.currentResponse$.pipe(
+      scan((a, c) => c != null ? [...a, c] : [], []),
+    );
   }
 
   /**
@@ -61,7 +74,7 @@ export class AppComponent implements OnDestroy {
    */
   runCommand(commandString: string) {
     const newCommand: Output = {valid: true, output: commandString.toUpperCase(), type: 'command'};
-    this.updateResponses(newCommand);
+    this.currentResponseBs.next(newCommand);
     this.redisConnectService.send(commandString);
     const [first, ...second] = commandString.split(' ');
     this.selectActiveCommand(first);
@@ -72,13 +85,7 @@ export class AppComponent implements OnDestroy {
    *
    */
   clearOutput(): void {
-    this.responses = [];
-  }
-
-  private updateResponses(command: Output) {
-    const commands = [];
-    Object.assign(commands, [...this.responses, command]);
-    this.responses = commands;
+    this.currentResponseBs.next(null);
   }
 
   ngOnDestroy(): void {

From ce7a011dfd2804b31c5a678c58694a2aacdc2c35 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Thu, 12 Dec 2019 16:43:21 +0100
Subject: [PATCH 10/13] fix(command-output.component.html)clear button

---
 .../command-output.component.html             | 13 +++++++---
 .../command-output.component.scss             | 26 +++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 5ceefdf..372c237 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,5 +1,12 @@
-<h3 class="h4">Redis Responses</h3>
-<button (click)="clear()">clear</button>
+<h3 class="h4 flex-box">
+  <span class="flex-span">Redis Responses</span>
+  <button (click)="clear()" class="flex-button">
+    <i class="h7 material-icons">
+      clear
+    </i>
+  </button>
+</h3>
+
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
@@ -10,4 +17,4 @@ <h3 class="h4">Redis Responses</h3>
       </li>
     </ul>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/command/command-output/command-output.component.scss b/src/app/features/command/command-output/command-output.component.scss
index 68f9d09..b367d44 100644
--- a/src/app/features/command/command-output/command-output.component.scss
+++ b/src/app/features/command/command-output/command-output.component.scss
@@ -1,12 +1,12 @@
 ul {
   list-style: none;
-  padding: .5rem;
+  padding: 0.5rem;
 
   li {
     &.command {
       color: #736767;
-      font-size: .7rem;
-      padding-top: .6rem;
+      font-size: 0.7rem;
+      padding-top: 0.6rem;
 
       span {
         font-style: italic;
@@ -14,7 +14,7 @@ ul {
     }
 
     &.response {
-      padding-bottom: .6rem;
+      padding-bottom: 0.6rem;
       border-bottom: 1px solid #ccc;
 
       .run-command {
@@ -24,7 +24,7 @@ ul {
 
     span {
       display: inline-block;
-      padding: 0 .25rem;
+      padding: 0 0.25rem;
       margin-bottom: 0;
     }
   }
@@ -40,4 +40,20 @@ ul {
     padding-bottom: 2rem !important;
   }
 }
+.flex-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: flex-start;
 
+  .flex-button,
+  .flex-span {
+    flex: 0 1 auto;
+    align-self: auto;
+  }
+  .flex-span {
+    align-self: flex-end;
+  }
+}

From 5b67aac546f614c88ccbdd60692a9ffb8c15ea19 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 14 Dec 2019 11:40:13 +0100
Subject: [PATCH 11/13] fix(command-output.component.html)clear button

---
 .../command-output.component.html             | 13 +++++--
 .../command-output.component.scss             | 33 ++++++++++++++---
 src/styles/styles.scss                        | 37 +++++++++++--------
 3 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/app/features/command/command-output/command-output.component.html b/src/app/features/command/command-output/command-output.component.html
index 5ceefdf..372c237 100644
--- a/src/app/features/command/command-output/command-output.component.html
+++ b/src/app/features/command/command-output/command-output.component.html
@@ -1,5 +1,12 @@
-<h3 class="h4">Redis Responses</h3>
-<button (click)="clear()">clear</button>
+<h3 class="h4 flex-box">
+  <span class="flex-span">Redis Responses</span>
+  <button (click)="clear()" class="flex-button">
+    <i class="h7 material-icons">
+      clear
+    </i>
+  </button>
+</h3>
+
 <div class="flex-fill scroll-box-container">
   <div class="scroll-box" #scrollable [scrollTop]="scrollable.scrollHeight">
     <ul>
@@ -10,4 +17,4 @@ <h3 class="h4">Redis Responses</h3>
       </li>
     </ul>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/features/command/command-output/command-output.component.scss b/src/app/features/command/command-output/command-output.component.scss
index 68f9d09..942ea0a 100644
--- a/src/app/features/command/command-output/command-output.component.scss
+++ b/src/app/features/command/command-output/command-output.component.scss
@@ -1,12 +1,12 @@
 ul {
   list-style: none;
-  padding: .5rem;
+  padding: 0.5rem;
 
   li {
     &.command {
       color: #736767;
-      font-size: .7rem;
-      padding-top: .6rem;
+      font-size: 0.7rem;
+      padding-top: 0.6rem;
 
       span {
         font-style: italic;
@@ -14,7 +14,7 @@ ul {
     }
 
     &.response {
-      padding-bottom: .6rem;
+      padding-bottom: 0.6rem;
       border-bottom: 1px solid #ccc;
 
       .run-command {
@@ -24,7 +24,7 @@ ul {
 
     span {
       display: inline-block;
-      padding: 0 .25rem;
+      padding: 0 0.25rem;
       margin-bottom: 0;
     }
   }
@@ -40,4 +40,27 @@ ul {
     padding-bottom: 2rem !important;
   }
 }
+.flex-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: stretch;
+  align-items: flex-start;
 
+  .flex-button,
+  .flex-span {
+    flex: 0 1 auto;
+    align-self: auto;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .flex-span {
+    align-self: flex-end;
+  }
+
+  button:focus {
+    outline: 0;
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index bca2811..8fb3772 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,12 +1,13 @@
 @import "./variables";
 @import "./../../node_modules/bootstrap/scss/bootstrap.scss";
 
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
 
-html,body{
-  height:100%;
-  font-size: .9rem;
-  font-family: 'Open Sans', sans-serif;
+html,
+body {
+  height: 100%;
+  font-size: 0.9rem;
+  font-family: "Open Sans", sans-serif;
 }
 
 .scroll-box-container {
@@ -28,7 +29,7 @@ html,body{
 
 .col-center {
   background: #ebebeb;
-  border-color: #ccc!important;
+  border-color: #ccc !important;
 }
 
 code {
@@ -39,26 +40,29 @@ code {
   font-size: 0.8rem;
   text-transform: uppercase;
   border-bottom: 1px solid #ccc;
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 }
 
+.h7,
 h3.h4 {
   color: #7a0c00;
   font-weight: bolder;
 }
-
+.h7 {
+  font-size: 1rem;
+}
 tr-pattern-content h1 {
-  font-size: 1.3rem!important;
+  font-size: 1.3rem !important;
   font-weight: bold;
 }
 
 tr-pattern-content h2 {
-  font-size: 1.1rem!important;
+  font-size: 1.1rem !important;
   font-weight: bold;
 }
 
 tr-command-documentation h2 {
-  font-size: 1.1rem!important;
+  font-size: 1.1rem !important;
   font-weight: bold;
 }
 
@@ -73,7 +77,6 @@ tr-pattern-content {
   box-shadow: 0;
 }
 
-
 .scroll-box::-webkit-scrollbar {
   -webkit-appearance: none;
 }
@@ -89,7 +92,7 @@ tr-pattern-content {
 .scroll-box::-webkit-scrollbar-thumb {
   border-radius: 8px;
   border: 2px solid white; /* should match background, can't be transparent */
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .scroll-box::-webkit-scrollbar-track {
@@ -107,6 +110,10 @@ tr-pattern-content {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

From d65788644060c595ad3a794bbf916b224227132d Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sat, 14 Dec 2019 13:38:14 +0100
Subject: [PATCH 12/13] remove useless subscription

---
 src/app/app.component.ts | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 612bac4..4559ebb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,16 +6,15 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, Subscription, BehaviorSubject} from 'rxjs';
-import {scan} from 'rxjs/operators';
+import {Observable, BehaviorSubject, merge, of} from 'rxjs';
+import {scan, catchError} from 'rxjs/operators';
 
 
 @Component({
   selector: 'tr-root',
   templateUrl: './app.component.html'
 })
-export class AppComponent implements OnDestroy {
-  private responseSub: Subscription = Subscription.EMPTY;
+export class AppComponent {
 
   readonly responses$: Observable<Output[]>;
 
@@ -33,12 +32,13 @@ export class AppComponent implements OnDestroy {
     public commandService: CommandService,
     public patternService: PatternService,
     private redisConnectService: RedisConnectService) {
-    this.responseSub = this.redisConnectService.response$
-      .subscribe((response: Output) => this.currentResponseBs.next(response));
 
     /** when currentResponse$ is null reset responses$ */
-    this.responses$ = this.currentResponse$.pipe(
-      scan((a, c) => c != null ? [...a, c] : [], []),
+    this.responses$ = merge(
+      this.currentResponse$,
+      this.redisConnectService.response$.pipe(catchError(() =>  of(null)))
+      ).pipe(
+        scan((a, c) => c != null ? [...a, c] : [], [])
     );
   }
 
@@ -87,8 +87,4 @@ export class AppComponent implements OnDestroy {
   clearOutput(): void {
     this.currentResponseBs.next(null);
   }
-
-  ngOnDestroy(): void {
-    this.responseSub.unsubscribe();
-  }
 }

From be6d2b6cbb9fc20be1eef1b31c99763c46609885 Mon Sep 17 00:00:00 2001
From: peppedeka <peppedeka@gmail.com>
Date: Sun, 15 Dec 2019 10:51:55 +0100
Subject: [PATCH 13/13] refactor(app.component)move code to redis-connect
 service, remove useless getter

---
 src/app/app.component.ts                       | 12 +++++-------
 src/app/core/services/redis-connect.service.ts |  7 ++++---
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4559ebb..4c38adb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,8 +6,8 @@ import {CommandService} from '@app/core/services/command.service';
 import {PatternService} from '@app/core/services/pattern.service';
 import {RedisConnectService} from '@app/core/services/redis-connect.service';
 
-import {Observable, BehaviorSubject, merge, of} from 'rxjs';
-import {scan, catchError} from 'rxjs/operators';
+import {Observable, BehaviorSubject, merge} from 'rxjs';
+import {scan} from 'rxjs/operators';
 
 
 @Component({
@@ -19,9 +19,7 @@ export class AppComponent {
   readonly responses$: Observable<Output[]>;
 
   private currentResponseBs: BehaviorSubject<Output> = new BehaviorSubject<Output>(null);
-  get currentResponse$() {
-    return this.currentResponseBs.asObservable();
-  }
+
 
   selectedDoc: string;
   activePattern: Pattern;
@@ -35,8 +33,8 @@ export class AppComponent {
 
     /** when currentResponse$ is null reset responses$ */
     this.responses$ = merge(
-      this.currentResponse$,
-      this.redisConnectService.response$.pipe(catchError(() =>  of(null)))
+      this.currentResponseBs.asObservable(),
+      this.redisConnectService.response$
       ).pipe(
         scan((a, c) => c != null ? [...a, c] : [], [])
     );
diff --git a/src/app/core/services/redis-connect.service.ts b/src/app/core/services/redis-connect.service.ts
index 87fc07b..a1c7d39 100644
--- a/src/app/core/services/redis-connect.service.ts
+++ b/src/app/core/services/redis-connect.service.ts
@@ -1,8 +1,8 @@
 import * as uuid from 'uuid';
 
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { BehaviorSubject, Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
 import { webSocket } from 'rxjs/webSocket';
 
 import { environment } from '@app/../environments/environment';
@@ -21,7 +21,8 @@ export class RedisConnectService {
     map((response: any): Output => {
       const valid = response.status === 'ok';
       return { valid, type: 'response', output: response.output };
-    })
+    }),
+    catchError(() =>  of(null))
   );
 
   send(command: string) {