вооо крутооо 4

src/app/app-routing.module.ts

@@ -7,11 +7,11 @@ import {ProfilePageComponent} from "./pages/profile-page/profile-page.component"
 const routes: Routes = [
   { path: "", component: MainPageComponent},
   { path: "servers", component: ServersPageComponent },
-  { path: "profile", component: ProfilePageComponent }
+  { path: "profile/:steam64", component: ProfilePageComponent }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar>
-  <div (click)="go2root()" style="padding-left: calc((100% - 66%)/2); cursor: pointer">
+  <div (click)="go2url(['/'])" style="padding-left: calc((100% - 66%)/2); cursor: pointer">
     <span class="f13_color_primary lato" >факты</span><span class="f13_color_extra lato">13</span>
   </div>
   <span class="spacer"></span>
@@ -10,8 +10,15 @@
     (click)="baseUtils.openUrlInNewWindow(link.link)">
     {{link.name}}
   </button>
-  <button mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)">
-    Войти
+
+  <button *ngIf="auth_service.steamdata?.nickname == null" mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)" (click)="login()">Войти</button>
+  <button *ngIf="auth_service.steamdata?.nickname != null" mat-button mat-raised-button class="f13_color_primary" style="margin-right: calc((100% - 66%)/2)" [matMenuTriggerFor]="menu">
+    {{auth_service.steamdata?.nickname}}
   </button>
+  <mat-menu #menu="matMenu">
+    <button *ngIf="auth_service.steamIds != null" mat-menu-item (click)="go2url(['profile', auth_service.steamIds.steam64])">Мой профиль</button>
+    <button mat-menu-item>Привязать дискорд</button>
+    <button mat-menu-item (click)="logout()">Выйти</button>
+  </mat-menu>
 </mat-toolbar>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import {BaseUtils} from "./utils/BaseUtils";
 import {Router} from "@angular/router";
+import {AuthService} from "./services/auth.service";
 
 @Component({
   selector: 'app-root',
@@ -15,11 +16,22 @@ export class AppComponent {
     {name: "Стим", link: "/steam"}
   ]
 
-  constructor(private router: Router) {
+  logined: string | null = null;
+
+  constructor(private router: Router,
+              public auth_service: AuthService) {
+  }
+
+  go2url(urls: string[]) {
+    this.router.navigate(urls)
+  }
+
+  logout() {
+    this.auth_service.logout()
   }
 
-  go2root() {
-    this.router.navigate(["/"])
+  login() {
+    this.auth_service.login()
   }
 
 

src/app/app.module.ts

@@ -16,13 +16,19 @@ import {MatChipsModule} from "@angular/material/chips";
 import { ServersPageComponent } from './pages/servers-page/servers-page.component';
 import {MatExpansionModule} from "@angular/material/expansion";
 import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
+import {NeedAuthToContinue} from "./pages/internal-components/NeedAuthToContinue";
+import {MatMenuModule} from "@angular/material/menu";
+import {HttpClientModule} from "@angular/common/http";
+import {PlayerServiceService} from "./services/player-service.service";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
 
 @NgModule({
   declarations: [
     AppComponent,
     MainPageComponent,
     ServersPageComponent,
-    ProfilePageComponent
+    ProfilePageComponent,
+    NeedAuthToContinue
   ],
   imports: [
     BrowserModule,
@@ -35,10 +41,14 @@ import { ProfilePageComponent } from './pages/profile-page/profile-page.componen
     MatCardModule,
     MatInputModule,
     MatChipsModule,
-    MatExpansionModule
+    MatExpansionModule,
+    MatMenuModule,
+    HttpClientModule,
+    MatSnackBarModule
   ],
   providers: [
-    AnnonceService
+    AnnonceService,
+    PlayerServiceService
   ],
   bootstrap: [AppComponent]
 })

src/app/entities/profile/PlayerProfile.ts

@@ -1,11 +1,14 @@
+import {SteamData} from "./SteamData";
+import {SteamIDs} from "./SteamIDs";
+
 export class PlayerProfile {
   ban: any|null = null;
   gametime: {[srv_name: string]: {[map_name: string]: number}} = {};
   lastplay: {[srv_name: string]: {[map_name: string]: number}} = {};
   permition: any|null = null;
   response_time: {[request: string]: number} = {};
-  steam_data: any|null = null;
-  steamids: any|null = null;
+  steam_data: SteamData|null = null;
+  steamids: SteamIDs|null = null;
   play_on: any|null = null;
   attached_discords: any[]|null = null;
   donates: any[]|null = null;

src/app/entities/profile/ProfileRequestData.ts

@@ -12,6 +12,12 @@ export class ProfileRequestData {
   static REPORTS: ProfileRequestData = new ProfileRequestData("reports", "Информация о количестве репортах");
   static MESSAGES: ProfileRequestData = new ProfileRequestData("messages", "Информация о количестве сообщений");
 
+  static BASIC_PROFILE: ProfileRequestData[] = [
+    ProfileRequestData.PLAY_ON,
+    ProfileRequestData.PERMITION,
+    ProfileRequestData.BAN,
+    ProfileRequestData.STEAM_DATA
+  ]
   param: string;
   description: string;
   default: boolean;

src/app/entities/profile/SteamData.ts

@@ -0,0 +1,5 @@
+export interface SteamData {
+  avatar: string;
+  nickname: string;
+  time:number;
+}

src/app/entities/profile/SteamIDs.ts

@@ -0,0 +1,7 @@
+export interface SteamIDs {
+  steam3: string;
+  steam2: string;
+  steam64: string;
+  community_url: string;
+  account_id: number;
+}

src/app/pages/internal-components/NeedAuthToContinue.ts

@@ -0,0 +1,24 @@
+import {Component} from "@angular/core";
+import {AuthService} from "../../services/auth.service";
+
+@Component({
+  selector: 'app-need-auth-to-continue',
+  template: `
+    <div style="display: flex; justify-content: center">
+      <div>
+        <img style="height: 200px" src="assets/images/stop.png">
+        <h4>Нужно сначала авторизоваться</h4>
+
+        <button style="width: 100%" mat-button mat-raised-button (click)="login()">Войти</button>
+      </div>
+    </div>
+  `
+})
+export class NeedAuthToContinue {
+  constructor(private authService: AuthService) {
+  }
+
+  login() {
+    this.authService.login()
+  }
+}

src/app/pages/profile-page/profile-page.component.html

@@ -1,7 +1,21 @@
 <div class="content-in-center-header" style="flex-direction: column;">
-  <h1>Вася убийца 2007</h1>
-  <h3>бибики</h3>
+  <div *ngIf="authService.steamdata == null && loading == null">
+    <h1>Профиль</h1>
+    <h3>Здесь можно увидеть профиль игрока на наших серверах с подробной информации о нем</h3>
+  </div>
+  <div *ngIf="loading == false && profile != null && profile.steam_data != null">
+    <h1>{{profile.steam_data.nickname}}</h1>
+    <h3>Открыть профиль в стиме</h3>
+  </div>
+  <div *ngIf="loading == true">
+    <h1>Загрузка данных о профиле</h1>
+    <h3>Пожалуйста подождите</h3>
+  </div>
 </div>
 
 <div class="content-in-center">
+  <app-need-auth-to-continue *ngIf="authService.steamdata == null && loading == null"></app-need-auth-to-continue>
+  <div *ngIf="loading == false">
+    <p>Профиль малютки</p>
+  </div>
 </div>

src/app/pages/profile-page/profile-page.component.ts

@@ -3,6 +3,8 @@ import {ActivatedRoute} from "@angular/router";
 import {PlayerServiceService} from "../../services/player-service.service";
 import {PlayerProfile} from "../../entities/profile/PlayerProfile";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {AuthService} from "../../services/auth.service";
+import {ProfileRequestData} from "../../entities/profile/ProfileRequestData";
 
 @Component({
   selector: 'app-profile-page',
@@ -12,20 +14,29 @@ import {MatSnackBar} from "@angular/material/snack-bar";
 export class ProfilePageComponent implements OnInit {
 
   profile: PlayerProfile|null = null;
+  loading: boolean | null = null;
 
   constructor(private route: ActivatedRoute,
               private playerService: PlayerServiceService,
-              private snack: MatSnackBar) { }
+              private snack: MatSnackBar,
+              public authService: AuthService) { }
 
   ngOnInit(): void {
-    const steam64: string|null = this.route.snapshot.queryParamMap.get("steam64");
-    this.loadPlayer(steam64);
+    const steam64: string|null = this.route.snapshot.paramMap.get("steam64");
+    if (steam64 != null)
+      this.loadPlayer(steam64);
+    else {
+
+    }
   }
 
-  loadPlayer(steam64: string|null) {
-    this.playerService.getProfile(steam64, []).subscribe(
+  loadPlayer(steam64: string) {
+    this.loading = true;
+    this.playerService.getProfile(steam64, ProfileRequestData.BASIC_PROFILE).subscribe(
       (res) => this.profile = res,
-      (err) => this.snack.open("Невозможно загрузить профиль")
+      (err) => {
+        console.log(err);
+      }, () => this.loading = false
     );
   }
 }

src/app/services/auth.service.ts

@@ -0,0 +1,30 @@
+import {Injectable, OnInit} from '@angular/core';
+import {PlayerServiceService} from "./player-service.service";
+import {ProfileRequestData} from "../entities/profile/ProfileRequestData";
+import {SteamData} from "../entities/profile/SteamData";
+import {SteamIDs} from "../entities/profile/SteamIDs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  static KEY: string = "steam_data";
+  steamdata: SteamData | null = null;
+  steamIds: SteamIDs | null = null;
+
+  constructor(private playerService: PlayerServiceService) {
+    this.playerService.getProfile(null, [ProfileRequestData.STEAM_DATA])
+      .subscribe((res) => {
+        this.steamdata = res.steam_data;
+        this.steamIds = res.steamids
+      })
+  }
+
+  login() {
+    window.open("api/auth/login?subdomain=tf2")
+  }
+
+  logout() {
+    window.open("api/auth/logout")
+  }
+}

src/app/services/player-service.service.ts

@@ -13,10 +13,7 @@ export class PlayerServiceService {
   constructor(private http: HttpClient) {}
 
   getProfile(steam64: string|null, request: ProfileRequestData[]): Observable<PlayerProfile> {
-    const params = {
-      requests: request.map((p) => p.param)
-    }
-    return this.http.get("api/profile/" + steam64 == null ? 'current' : 'web', {params: params})
+    return this.http.get(`api/profile/${steam64 == null ? 'current' : 'web'}?requests=${request.map((p) => p.param).join(',')}&steam64=${steam64}`)
       .pipe(map((r) => PlayerProfile.fromData(r)));
   }
 }