Log out (S2)

[davidcr01]

Description

Players should have a "Log out" button inside the application after logging in. Same thing for the Administrators in the Admin site.

Tasks

• [x] Define the UI of the button. (H4-1)
• [x] Implement the logic of the button. (H4-2)

[davidcr01]

Update Report

Development

To implement the Logout button, a new component has been created. Components are reusable code that can be imported to pages. By this way, the Logout button can be used by any component that imports it.

The component is generated by ionic g component components/logout-button. The component will be stored in the components folder.

Basically, the HTML code is an ion-button: <ion-button class="logout-button" (click)="logout()">Log out</ion-button>

And the TS logic is:

export class LogoutButtonComponent {

  constructor(private storageService: StorageService, private router: Router) {}

  logout() {
    this.storageService.removeAccessToken();
    this.router.navigateByUrl('/login');
  }
}

It removes the token and redirects the user to the login page.

Tests

To test it, for example in the tab1 page, is necessary to import it in the tab1.module.ts:

import { LogoutButtonComponent } from '../components/logout-button/logout-button.component';

...

@NgModule({
  imports: [
     ...
  ],
  declarations: [Tab1Page, LogoutButtonComponent]
})

And to use it, simply add it to the HTML file as a tag. The tag is defined in the tab1.module.ts.

<app-logout-button></app-logout-button>

When clicking the button, the user is redirected to the login page and the token is removed.