Login to Github before entering repository name

src/app/app.module.ts

@@ -64,7 +64,18 @@ import { SharedModule } from './shared/shared.module';
     {
       provide: AuthService,
       useFactory: AuthServiceFactory,
-      deps: [Router, NgZone, GithubService, UserService, IssueService, PhaseService, GithubEventService, Title, LoggingService]
+      deps: [
+        Router,
+        NgZone,
+        GithubService,
+        UserService,
+        IssueService,
+        PhaseService,
+        GithubEventService,
+        Title,
+        ErrorHandlingService,
+        LoggingService
+      ]
     },
     {
       provide: IssueService,

src/app/auth/auth.component.html

@@ -1,13 +1,16 @@
 <div *ngIf="isUserNotAuthenticated()" class="login-page">
-  <app-session-selection [urlEncodedSessionName]="this.urlEncodedSessionName" [urlEncodedRepo]="this.urlEncodedRepo">
-  </app-session-selection>
+  <mat-card class="login-card">
+    <mat-card-header style="margin-bottom: 20px">
+      <mat-card-title class="login-title"> WATcher </mat-card-title>
+    </mat-card-header>
+    <app-auth-login></app-auth-login>
+  </mat-card>
 </div>
 
 <div *ngIf="isUserAuthenticating() || isAwaitingOAuthUserConfirm()" class="login-page">
   <mat-card class="login-card">
     <mat-card-header style="margin-bottom: 20px">
       <mat-card-title class="login-title"> Confirm Login Account </mat-card-title>
-      <mat-card-subtitle> Session on {{ currentSessionOrg }} </mat-card-subtitle>
     </mat-card-header>
 
     <div style="position: absolute; top: 15px; left: 15px">
@@ -24,3 +27,8 @@
     </div>
   </mat-card>
 </div>
+
+<div *ngIf="isUserAuthenticated() && !isRepoSet()" class="login-page">
+  <app-session-selection [urlEncodedSessionName]="this.urlEncodedSessionName" [urlEncodedRepo]="this.urlEncodedRepo">
+  </app-session-selection>
+</div>

src/app/auth/auth.component.ts

@@ -134,6 +134,14 @@ export class AuthComponent implements OnInit, OnDestroy {
     return this.authState === AuthState.ConfirmOAuthUser;
   }
 
+  isUserAuthenticated(): boolean {
+    return this.authState === AuthState.Authenticated;
+  }
+
+  isRepoSet(): boolean {
+    return this.phaseService.isRepoSet();
+  }
+
   get currentSessionOrg(): string {
     if (!this.sessionInformation) {
       // Retrieve org details of session information from local storage

src/app/auth/auth.module.ts

@@ -4,12 +4,20 @@ import { SharedModule } from '../shared/shared.module';
 import { AuthRoutingModule } from './auth-routing.module';
 import { AuthComponent } from './auth.component';
 import { ConfirmLoginComponent } from './confirm-login/confirm-login.component';
+import { LoginComponent } from './login/login.component';
 import { JsonParseErrorDialogComponent } from './profiles/json-parse-error-dialog/json-parse-error-dialog.component';
 import { ProfilesComponent } from './profiles/profiles.component';
 import { SessionSelectionComponent } from './session-selection/session-selection.component';
 
 @NgModule({
   imports: [AuthRoutingModule, SharedModule, CommonModule],
-  declarations: [AuthComponent, ProfilesComponent, JsonParseErrorDialogComponent, ConfirmLoginComponent, SessionSelectionComponent]
+  declarations: [
+    AuthComponent,
+    ProfilesComponent,
+    JsonParseErrorDialogComponent,
+    LoginComponent,
+    ConfirmLoginComponent,
+    SessionSelectionComponent
+  ]
 })
 export class AuthModule {}

src/app/auth/confirm-login/confirm-login.component.ts

@@ -1,15 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable, of } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-import { Phase } from '../../core/models/phase.model';
-import { Repo } from '../../core/models/repo.model';
 import { AuthService, AuthState } from '../../core/services/auth.service';
 import { ErrorHandlingService } from '../../core/services/error-handling.service';
-import { GithubService } from '../../core/services/github.service';
-import { GithubEventService } from '../../core/services/githubevent.service';
 import { LoggingService } from '../../core/services/logging.service';
-import { PhaseService } from '../../core/services/phase.service';
 import { UserService } from '../../core/services/user.service';
 
 @Component({
@@ -23,13 +15,9 @@ export class ConfirmLoginComponent implements OnInit {
 
   constructor(
     private authService: AuthService,
-    private phaseService: PhaseService,
     private userService: UserService,
     private errorHandlingService: ErrorHandlingService,
-    private githubEventService: GithubEventService,
     private logger: LoggingService,
-    private router: Router,
-    public githubService: GithubService
   ) {}
 
   ngOnInit() {}
@@ -44,49 +32,23 @@ export class ConfirmLoginComponent implements OnInit {
     this.authService.startOAuthProcess();
   }
 
-  /**
-   * Handles the clean up required after authentication and setting up of user data is completed.
-   */
-  handleAuthSuccess() {
-    this.authService.setTitleWithPhaseDetail();
-    this.router.navigateByUrl(Phase.issuesViewer);
-    this.authService.changeAuthState(AuthState.Authenticated);
-  }
-
   /**
    * Will complete the process of logging in the given user.
    */
   completeLoginProcess(): void {
     this.authService.changeAuthState(AuthState.AwaitingAuthentication);
-    this.phaseService.initializeCurrentRepository();
-    this.logger.info(`ConfirmLoginComponent: Current repo is ${this.phaseService.currentRepo}`);
+    this.logger.info(`ConfirmLoginComponent: Completing login process`);
     this.userService
       .createUserModel(this.username)
-      .pipe(
-        mergeMap(() => {
-          const currentRepo = this.phaseService.currentRepo;
-          if (Repo.isInvalidRepoName(currentRepo)) {
-            return of(false);
-          }
-          return this.githubService.isRepositoryPresent(currentRepo.owner, currentRepo.name);
-        }),
-        mergeMap((isValidRepository) => {
-          if (!isValidRepository) {
-            return new Observable();
-          }
-          return this.githubEventService.setLatestChangeEvent();
-        })
-      )
       .subscribe(
         () => {
-          this.handleAuthSuccess();
+          this.authService.changeAuthState(AuthState.Authenticated);
         },
         (error) => {
           this.authService.changeAuthState(AuthState.NotAuthenticated);
           this.errorHandlingService.handleError(error);
           this.logger.info(`ConfirmLoginComponent: Completion of login process failed with an error: ${error}`);
         }
       );
-    this.handleAuthSuccess();
   }
 }

src/app/auth/login/login.component.css

@@ -0,0 +1,18 @@
+.login-button {
+  background: #f7fcfe;
+  line-height: 45px;
+  border: 1px solid currentColor;
+  width: 100%;
+}
+
+.logo {
+  align-items: center;
+  display: inline-flex;
+  margin: 0 3px 3px 3px;
+}
+
+.github-logo {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}

src/app/auth/login/login.component.html

@@ -0,0 +1,4 @@
+<button mat-stroked-button class="login-button" color="primary" (click)="startLoginProcess()">
+  <span class="logo"> <img class="github-logo" src="./assets/images/github-logo.png" alt="github-logo" /> </span>
+  <span> Login </span>
+</button>

src/app/auth/login/login.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService, AuthState } from '../../core/services/auth.service';
+import { ErrorHandlingService } from '../../core/services/error-handling.service';
+import { LoggingService } from '../../core/services/logging.service';
+
+@Component({
+  selector: 'app-auth-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+
+export class LoginComponent implements OnInit {
+  constructor(
+    private authService: AuthService,
+    private errorHandlingService: ErrorHandlingService,
+    private logger: LoggingService
+  ) {}
+
+  ngOnInit() {}
+
+  startLoginProcess() {
+    this.logger.info('LoginComponent: Beginning login process');
+    try {
+      this.authService.startOAuthProcess();
+    } catch (error) {
+      this.authService.changeAuthState(AuthState.NotAuthenticated);
+      this.errorHandlingService.handleError(error);
+      this.logger.info(`LoginComponent: Login process failed with an error: ${error}`);
+    }
+  }
+}

src/app/auth/session-selection/session-selection.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { Profile } from '../../core/models/profile.model';
-import { AuthService, AuthState } from '../../core/services/auth.service';
+import { AuthService } from '../../core/services/auth.service';
 import { ErrorHandlingService } from '../../core/services/error-handling.service';
 import { LoggingService } from '../../core/services/logging.service';
 import { RepoUrlCacheService } from '../../core/services/repo-url-cache.service';
@@ -78,13 +78,9 @@ export class SessionSelectionComponent implements OnInit {
 
     this.logger.info(`SessionSelectionComponent: Selected Repository: ${repoInformation}`);
 
-    try {
-      this.authService.startOAuthProcess();
-    } catch (error) {
-      this.errorHandlingService.handleError(error);
-      this.authService.changeAuthState(AuthState.NotAuthenticated);
-      this.isSettingUpSession = false;
-    }
+    this.authService.setRepo();
+
+    this.isSettingUpSession = false;
   }
 
   /**

src/app/core/services/auth.service.ts

@@ -2,10 +2,12 @@ import { Injectable } from '@angular/core';
 import { NgZone } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 import { AppConfig } from '../../../environments/environment';
 import { generateSessionId } from '../../shared/lib/session';
 import { uuid } from '../../shared/lib/uuid';
+import { Phase } from '../models/phase.model';
 import { GithubService } from './github.service';
 import { GithubEventService } from './githubevent.service';
 import { IssueService } from './issue.service';
@@ -46,7 +48,7 @@ export class AuthService {
     private githubEventService: GithubEventService,
     private titleService: Title,
     private logger: LoggingService
-  ) {}
+    ) {}
 
   /**
    * Will store the OAuth token.
@@ -133,6 +135,37 @@ export class AuthService {
     this.logger.info(`AuthService: Redirecting for Github authentication`);
   }
 
+  /**
+   * Handles the clean up required after authentication and setting up of repository is completed.
+   */
+  handleSetRepoSuccess() {
+    this.setTitleWithPhaseDetail();
+    this.router.navigateByUrl(Phase.issuesViewer);
+  }
+
+  /**
+   * Setup repository after authentication.
+   */
+  setRepo(): void {
+    this.phaseService.initializeCurrentRepository();
+    const currentRepo = this.phaseService.currentRepo;
+    this.githubService.isRepositoryPresent(currentRepo.owner, currentRepo.name)
+      .pipe(
+        mergeMap((isValidRepository) => {
+          if (!isValidRepository) {
+            return new Observable();
+          }
+          return this.githubEventService.setLatestChangeEvent();
+        })
+      )
+      .subscribe(
+        () => {
+          this.handleSetRepoSuccess();
+        }
+      );
+    this.handleSetRepoSuccess();
+  }
+
   /**
    * Will redirect to GitHub OAuth page
    */

src/app/core/services/factories/factory.auth.service.ts

@@ -3,6 +3,7 @@ import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 // import { AppConfig } from '../../../../environments/environment';
 import { AuthService } from '../auth.service';
+import { ErrorHandlingService } from '../error-handling.service';
 import { GithubService } from '../github.service';
 import { GithubEventService } from '../githubevent.service';
 import { IssueService } from '../issue.service';
@@ -20,6 +21,7 @@ export function AuthServiceFactory(
   phaseService: PhaseService,
   githubEventService: GithubEventService,
   titleService: Title,
+  errorHandlingService: ErrorHandlingService,
   logger: LoggingService
 ) {
   // TODO: Write Mocks
@@ -37,5 +39,15 @@ export function AuthServiceFactory(
   //   );
   // }
   console.log(logger);
-  return new AuthService(router, ngZone, githubService, userService, issueService, phaseService, githubEventService, titleService, logger);
+  return new AuthService(
+    router,
+    ngZone,
+    githubService,
+    userService,
+    issueService,
+    phaseService,
+    githubEventService,
+    titleService,
+    logger
+    );
 }

src/app/core/services/phase.service.ts

@@ -45,6 +45,9 @@ export class PhaseService {
   public currentRepo: Repo; // current or main repository of current phase
   public otherRepos: Repo[]; // more repositories relevant to this phase
 
+  repoSetSource = new BehaviorSubject(false);
+  repoSetState = this.repoSetSource.asObservable();
+
   /**
    * Expose an observable to track changes to currentRepo
    *
@@ -58,7 +61,10 @@ export class PhaseService {
 
   public sessionData = STARTING_SESSION_DATA; // stores session data for the session
 
-  constructor(private githubService: GithubService, private repoUrlCacheService: RepoUrlCacheService, public logger: LoggingService) {}
+  constructor(
+    private githubService: GithubService,
+    private repoUrlCacheService: RepoUrlCacheService,
+    public logger: LoggingService) {}
 
   /**
    * Sets the current main repository and additional repos if any.
@@ -132,6 +138,11 @@ export class PhaseService {
     }
     this.logger.info(`PhaseService: Repo is ${repo}`);
     this.setRepository(repo);
+    this.repoSetSource.next(true);
+  }
+
+  isRepoSet(): boolean {
+    return this.repoSetSource.getValue();
   }
 
   /**