feat: User ban implemented

the css needs to be fixed but most of banning logic is implemented

front/src/app/admin/admin.module.ts

@@ -1,6 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
 import { AdminPanelComponent } from './pages/admin-panel/admin-panel.component';
 import { ChartComponent } from './components/chart/chart.component';
 import { ManageUsersComponent } from './components/manage-users/manage-users.component';
@@ -13,7 +16,10 @@ import { ManageTopicsComponent } from './components/manage-topics/manage-topics.
     ManageUsersComponent,
     ManageTopicsComponent,
   ],
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    HttpClientModule],
   exports: [AdminPanelComponent],
 })
 export class AdminModule {}

front/src/app/admin/components/chart/chart.component.html

@@ -1 +1,2 @@
-<p>chart works!</p>
+<p>chart works!</p>
+<div id="piechart" class="m-auto"></div>

front/src/app/admin/components/manage-users/manage-users.component.html

@@ -1 +1,29 @@
-<p>manage-users works!</p>
+<p>manage-users works!</p>
+
+<div class="feature-icon d-inline-flex align-items-center justify-content-center fs-2 mb-3">
+  <i class="fa-regular fa-solid fa-user fa-xl"></i>
+</div>
+<h3 class="fs-2">Manage Users</h3>
+
+<p>
+  Click on a user to ban their account. If a user is highlighted in red, that means their account is suspended.
+  Clicking on it again will unban the user.
+</p>
+
+<input type="text" #username>
+
+<button class="btn btn-primary mt-2" (click)="getUser(username.value)">
+  Search
+</button>
+<div *ngIf="userStared?.locked; else otherCont">
+  <a (click)="banUser()" class="listItem btn btn-primary mt-2">
+    {{userStared?.username}}
+  </a>
+</div>
+<ng-template #otherCont>
+  <div>
+    <a (click)="banUser()" class="listItemLocked btn btn-primary mt-2">
+      {{userStared?.username}}
+    </a>
+  </div>
+</ng-template>

front/src/app/admin/components/manage-users/manage-users.component.ts

@@ -1,8 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LoggedUser } from '../../interfaces/staredUser.interface';
+
+
+
+
 
 @Component({
   selector: 'app-manage-users',
   templateUrl: './manage-users.component.html',
   styleUrls: ['./manage-users.component.css'],
+
 })
-export class ManageUsersComponent {}
+
+export class ManageUsersComponent  {
+  userStared: LoggedUser | undefined;
+  username = '';
+
+  constructor(private httpClient: HttpClient) { }
+
+  getUser(username: String) {
+    this.httpClient.get<LoggedUser>("https://localhost:8443/api/users/" + username).subscribe(
+      response => {
+        this.userStared = response; 
+      }
+    )
+  }
+
+  banUser() {
+    this.httpClient.put("https://localhost:8443/api/users/" + this.userStared?.id, this.userStared).subscribe(
+      response => console.log(response),
+      error => console.error(error)
+    );
+  }
+
+
+}

front/src/app/admin/interfaces/staredUser.interface.ts

@@ -0,0 +1,23 @@
+export interface LoggedUser {
+  '@Id': number;
+  id: number;
+  date: Date;
+  username: string;
+  email: string;
+  role: string;
+  enabled: boolean;
+  locked: boolean;
+  bio: string;
+  imagePath: string;
+  posts: any[];
+  comments: any[];
+  admin: boolean;
+  accountNonExpired: boolean;
+  accountNonLocked: boolean;
+  credentialsNonExpired: boolean;
+  authorities: Authority[];
+}
+
+interface Authority {
+  authority: string;
+}

front/src/app/admin/pages/admin-panel/admin-panel.component.html

@@ -1,3 +1,17 @@
-<app-chart></app-chart>
-<app-manage-users></app-manage-users>
-<app-manage-topics></app-manage-topics>
+<div class="container px-4 py-5 text-center" id="featured-3">
+  <h1 class="pb-2 border-bottom">Admin Panel</h1>
+  <h5 class="mt-4 font-weight-bold">Topic popularity</h5>
+  <div class="row d-flex row-cols-1 row-cols-lg-3 m-auto">
+    <app-chart></app-chart>
+
+  </div>
+  <div class="row d-flex row-cols-1 row-cols-lg-3 m-auto">
+
+    <div class="feature col flex-grow-1">
+      <app-manage-users></app-manage-users>
+    </div>
+    <div class="feature col flex-grow-1">
+      <app-manage-topics></app-manage-topics>
+    </div>
+  </div>
+</div>