Refactoring, adding some login logic stuff

This commit is contained in:
Patrick Müller 2022-09-03 13:01:54 +02:00
parent 47c494653c
commit 7b17b9b28a
Signed by: Paddy
GPG Key ID: 37ABC11275CAABCE
13 changed files with 60 additions and 13 deletions

View File

@ -1,5 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {Player} from './models/player'; import {Player} from './models/doppelkopf/player';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',

View File

@ -1,8 +1,8 @@
<div id="header"> <div id="header">
<p id="header-title">Doppelkopf-Stats</p> <p id="header-title">Doppelkopf-Stats</p>
<span id="user-info"> <span id="user-info">
<p>Paddy</p> <p>{{getUserName()}}</p>
<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()"> <img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
</span> </span>
<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover"></app-profile> <app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover" [user]="this.user"></app-profile>
</div> </div>

View File

@ -1,4 +1,6 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {User} from '../../models/user';
import {StorageService} from '../../services/storage.service';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
@ -8,8 +10,10 @@ import {Component, OnInit} from '@angular/core';
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
showProfilePopover: boolean = false; showProfilePopover: boolean = false;
user?: User;
constructor() { constructor() {
this.user = StorageService.getUserInfo();
} }
ngOnInit(): void { ngOnInit(): void {
@ -22,4 +26,8 @@ export class HeaderComponent implements OnInit {
closeProfile(): void { closeProfile(): void {
this.showProfilePopover = false; this.showProfilePopover = false;
} }
getUserName(): string {
return this.user ? this.user.firstName : 'Logged out';
}
} }

View File

@ -1,10 +1,10 @@
<div id="profile-popover"> <div id="profile-popover">
<div *ngIf="isLoggedIn"> <div *ngIf="this.user">
<h2 class="heading">Hello, Paddy!</h2> <h2 class="heading">Hello, {{this.user!.firstName}}!</h2>
<p>You're successfully logged in.</p> <p>You're successfully logged in.</p>
<p>Your id is: 1</p> <p>Your id is: {{this.user!.firebonkId}}</p>
</div> </div>
<div *ngIf="!isLoggedIn"> <div *ngIf="!this.user">
<h2 class="heading">Not logged in</h2> <h2 class="heading">Not logged in</h2>
<p>Please log in to continue</p> <p>Please log in to continue</p>
</div> </div>

View File

@ -1,4 +1,5 @@
import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core'; import {Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';
import {User} from '../../models/user';
@Component({ @Component({
selector: 'app-profile', selector: 'app-profile',
@ -8,6 +9,7 @@ import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from
export class ProfileComponent implements OnInit { export class ProfileComponent implements OnInit {
initialClick = true; initialClick = true;
@Input() user?: User;
@Output() showProfilePopoverChange = new EventEmitter<boolean>(); @Output() showProfilePopoverChange = new EventEmitter<boolean>();
isLoggedIn = true; isLoggedIn = true;

View File

@ -1,5 +1,8 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {User} from '../../models/user';
import {ApiService} from '../../services/api.service';
import {StorageService} from '../../services/storage.service';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -14,9 +17,25 @@ export class HomeComponent implements OnInit {
} }
ngOnInit(): void { ngOnInit(): void {
this.route.queryParams.subscribe(params => { this.authenticateUser();
// Read params
});
} }
/**
* Reads authentication details from query parameters and tries to authenticate the user with the API.
* @private
*/
private authenticateUser() {
this.route.queryParams.subscribe(params => {
let user: User = {
firebonkId: params['firebonkId'],
uuid: '',
firstName: params['firstName'],
token: params['token'],
sessionKey: ''
};
let authenticatedUser = ApiService.performAuthentication(user);
StorageService.setUserInfo(authenticatedUser);
});
}
} }

View File

@ -0,0 +1,13 @@
import {User} from '../models/user';
export class ApiService {
static apiUrl = 'https://api.plutodev.de/fbcards/';
/**
* Sends user info to API to retrieve a session key.
* @param user
*/
static performAuthentication(user: User): User {
return user;
}
}

View File

@ -1,7 +1,11 @@
import {User} from '../models/user'; import {User} from '../models/user';
export class StorageService { export class StorageService {
getUserInfo(): User { static getUserInfo(): User | undefined {
if(localStorage.getItem('user_loggedIn') !== '1') {
return undefined;
}
const firebonkId = parseInt((localStorage.getItem('user_firebonkId') ?? '-1'), 10); const firebonkId = parseInt((localStorage.getItem('user_firebonkId') ?? '-1'), 10);
const uuid = localStorage.getItem('user_uuid') ?? ''; const uuid = localStorage.getItem('user_uuid') ?? '';
const firstName = localStorage.getItem('user_firstName') ?? ''; const firstName = localStorage.getItem('user_firstName') ?? '';
@ -17,7 +21,8 @@ export class StorageService {
}; };
} }
setUserInfo(user: User): void { static setUserInfo(user: User): void {
localStorage.setItem('user_loggedIn', '1');
localStorage.setItem('user_firebonkId', String(user.firebonkId)); localStorage.setItem('user_firebonkId', String(user.firebonkId));
localStorage.setItem('user_uuid', String(user.uuid)); localStorage.setItem('user_uuid', String(user.uuid));
localStorage.setItem('user_firstName', String(user.firstName)); localStorage.setItem('user_firstName', String(user.firstName));