[FEATURE] Add logout link

santifinland · Dec 7, 2020 · 0d42296 · 0d42296
1 parent f68f4cc
commit 0d42296
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 22 deletions.
diff --git a/frontend/referenda/src/app/header/header.component.css b/frontend/referenda/src/app/header/header.component.css
@@ -51,37 +51,37 @@
 
 .votaciones {
   width: 111px;
-  left: calc(50% - 111px/2 - 82.5px);
 }
 
 .resultados {
   width: 111px;
-  left: calc(50% - 111px/2 + 28.5px);
 }
 
 .delegar {
   width: 134px;
-  left: calc(50% - 134px/2 + 151px);
 }
 
 .partidos {
   width: 93px;
-  left: calc(50% - 93px/2 + 264.5px);
 }
 
 .estadisticas {
   width: 121px;
-  left: calc(50% - 121px/2 + 371.5px);
 }
 
 .sesion {
+  position: relative;
   width: 160px;
-  left: calc(50% - 96px/2 + 544px);
+  left: -2px;
 }
 
 .vertical-line {
+  position: relative;
   border-left: thick solid #FFF;
   border-left-width: 1px;
+  padding: 10px 0 10px 0;
+  margin: 10px 0 10px 0;
+  left: -1px;
 }
 
 a {

diff --git a/frontend/referenda/src/app/header/header.component.html b/frontend/referenda/src/app/header/header.component.html
@@ -15,10 +15,12 @@
        [ngClass]="{active: section==='parties'}" (click)="section='parties';">PARTIDOS</a>
     <a class="seccion estadisticas" routerLink="/estadisticas"
        [ngClass]="{active: section==='estadisticas'}" (click)="section='estadisticas';">ESTAD&Iacute;STICAS</a>
-    <div class="seccion sesion vertical-line" (click)="section='';">
-      <a routerLink="/home" *ngIf="currentUser">{{currentUser.username}}</a>
-      <a routerLink="/login" *ngIf="!currentUser">MI SESI&Oacute;N</a>
-      <div class="dropdown-sesion" *ngIf="!currentUser">
+    <div class="vertical-line">
+    </div>
+    <a class="seccion sesion" routerLink="/home" *ngIf="currentUser" (click)="section='';">{{currentUser.username}}</a>
+    <div class="seccion sesion" *ngIf="!currentUser" (click)="section='';">
+      <a routerLink="/login">MI SESI&Oacute;N</a>
+      <div class="dropdown-sesion">
         <div class="dropdown-sesion-content">
           <div class="dropdown-iniciar">
             <a routerLink="/login">INICIAR SESI&Oacute;N</a>
@@ -55,7 +57,8 @@
   <a class="menu-item" routerLink="/estadisticas" (click)="showSmartphoneMenu(false); section='estadisticas';">
     ESTAD&Iacute;STICAS
   </a>
-  <a class="menu-item" (click)="showSmartphoneSession()">MI SESI&Oacute;N</a>
+  <a class="menu-item" routerLink="/home" *ngIf="currentUser">{{currentUser.username}}</a>
+  <a class="menu-item" *ngIf="!currentUser" (click)="showSmartphoneSession()">MI SESI&Oacute;N</a>
   <a class="menu-item" routerLink="/login" (click)="showSmartphoneMenu(false); section='';"
      *ngIf="smartphoneSession">
     INICIAR SESI&Oacute;N

diff --git a/frontend/referenda/src/app/header/header.component.ts b/frontend/referenda/src/app/header/header.component.ts
@@ -83,15 +83,4 @@ export class HeaderComponent implements OnInit {
   showSmartphoneSession() {
     this.smartphoneSession = !this.smartphoneSession;
   }
-
-  logout() {
-    this.authenticationService.logout();
-    this.currentUserSubscription.unsubscribe();
-    if (this.socialUser) {
-      this.socialUserLoggedIn = false;
-      this.socialUser = null;
-      this.authService.signOut();
-    }
-    location.reload(true);
-  }
 }
diff --git a/frontend/referenda/src/app/home/home.component.html b/frontend/referenda/src/app/home/home.component.html
@@ -39,6 +39,9 @@ <h5 class="card-title">Delegación a usuario</h5>
           <a routerLink="/delegar" class="btn btn-outline-secondary">Modificar</a>
         </div>
       </div>
+      <button type="button" class="btn btn-outline-danger btn-lg btn-block" (click)="logout()">
+        Finalizar sesi&oacute;n
+      </button>
       <br>
       <br>
       <br>

diff --git a/frontend/referenda/src/app/home/home.component.spec.ts b/frontend/referenda/src/app/home/home.component.spec.ts
@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule, RouterTestingModule],
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/referenda/src/app/home/home.component.ts b/frontend/referenda/src/app/home/home.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
+import { SocialAuthService, SocialUser } from 'angularx-social-login';
+
 import { AuthenticationService } from '../_services';
 import { Party } from '../_models';
 import { User } from '../_models';
@@ -19,8 +21,13 @@ export class HomeComponent implements OnInit, OnDestroy {
   delegatedPartyValue: Party;
   delegatedUserValue: User;
 
+  private socialUser: SocialUser;
+  private socialUserLoggedIn: boolean;
+  private socialProvider: string;
+
   constructor(
     private authenticationService: AuthenticationService,
+    private authService: SocialAuthService,
     private userService: UserService) {
     this.currentUserSubscription = this.authenticationService.currentUser.subscribe(user => {
       console.log(user);
@@ -66,4 +73,15 @@ export class HomeComponent implements OnInit, OnDestroy {
         err => {}
       );
   }
+
+  logout() {
+    this.authenticationService.logout();
+    this.currentUserSubscription.unsubscribe();
+    if (this.socialUser) {
+      this.socialUserLoggedIn = false;
+      this.socialUser = null;
+      this.authService.signOut();
+    }
+    location.reload();
+  }
 }