feat: profile basis

front/src/app/profile/pages/profile/profile.component.css

@@ -0,0 +1,94 @@
+.body {
+  overflow-x: hidden;
+}
+
+main {
+  height: 100vh;
+  padding: 0 1rem;
+}
+
+.profile-container {
+  max-width: none;
+}
+
+.prof-pic {
+  height: 60vw;
+  width: 60vw;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 20px;
+}
+
+.prof-pic:before {
+  /* Responsive trick */
+  padding-top: 100%;
+}
+
+.btn-setting .btn-primary {
+  border: 1px solid white;
+  background-color: inherit;
+  color: white;
+}
+
+.btn-setting .btn-primary:hover {
+  background-color: black;
+}
+
+.btn-setting .dropdown-menu {
+  --bs-dropdown-link-active-bg: #63b1b1;
+}
+
+.btn-following {
+  background-color: #63b1b1;
+}
+
+.btn-following:after {
+  content: 'Following';
+}
+
+.btn-following:hover,
+.btn-following:active:focus {
+  background-color: red;
+}
+
+.btn-following:hover:after,
+.btn-following:active:focus:after {
+  content: 'Unfollow';
+}
+
+.dropdown-item {
+  cursor: pointer;
+}
+
+.follow a {
+  color: gray;
+  font-size: medium;
+  text-decoration: none;
+}
+
+.follow a:hover {
+  text-decoration: underline;
+}
+
+.bio-container {
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+.vl {
+  border-left: 1px solid gray;
+  height: 100%;
+  width: 1px;
+}
+
+@media only screen and (min-width: 768px) {
+  /* For desktop: */
+  .profile-container {
+    max-width: 23vw;
+    height: 100%;
+  }
+  .prof-pic {
+    height: 15vw;
+    width: 15vw;
+  }
+}

front/src/app/profile/pages/profile/profile.component.html

@@ -1 +1,67 @@
-<p>profile works!</p>
+<div class="body">
+  <main>
+    <form class="row bg-black pt-3">
+      <div class="profile-container col-md-4 text-white text-center">
+        <div class="profile-pic text-center pt-2">
+          <!-- TODO: profile pic display -->
+          <!-- <img src="{{user.imagePath}}" alt="profilePic" class="prof-pic"> -->
+        </div>
+        <div class="row text-inherit m-0 d-flex align-items-center">
+          <div class="col prof-name fs-2">
+            {{user.username}}
+          </div>
+          <ng-container *ngIf="notGuest">
+            <div class="col btn-setting" *ngIf="ownProfile">
+              <div class="dropdown">
+                <button class="btn btn-primary dropdown-toggle" type="button" id="settingsButton"
+                  data-bs-toggle="dropdown" aria-expanded="false">
+                  <i class="fa-solid fa-gear"></i>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="settingsButton">
+                  <li>
+                    <a class="dropdown-item" id="admin-panel" [routerLink]="['/admin']" *ngIf="user.admin">
+                      Admin Panel
+                    </a>
+                  </li>
+                  <li><a class="dropdown-item" id="sign-out" (click)="logout()">Log-out</a></li>
+                </ul>
+              </div>
+            </div>
+            <div class="col" *ngIf="!ownProfile">
+              <!-- TODO: followed -->
+              <!-- {{#followed}} -->
+              <!-- <a class="btn btn-primary btn-round btn-following" type="button"
+                href="/user/{{user.username}}/unfollow"></a> -->
+              <!-- {{/followed}} -->
+              <!-- {{^followed}} -->
+              <!-- <a class="btn btn-primary btn-round" type="button" href="/user/{{user.username}}/follow">Follow</a> -->
+              <!-- {{/followed}} -->
+            </div>
+          </ng-container>
+        </div>
+        <div class="row fs-5 mt-1">
+          <div class="col follow">
+            <!-- TODO: following list count -->
+            <!-- <a type="button" href="/user/{{user.username}}/following">
+              <strong class="text-white">{{user.following.size}}</strong> Following
+            </a> -->
+          </div>
+          <div class="col follow">
+            <!-- TODO: followers list count -->
+            <!-- <a type="button" href="/user/{{user.username}}/followers">
+              <strong class="text-white">{{user.followers.size}}</strong> Followers
+            </a> -->
+          </div>
+        </div>
+        <hr>
+        <div class="bio-container">
+          <p>{{user.bio}}</p>
+        </div>
+      </div>
+      <div class="post-container col-md-9 p-0">
+        <!-- TODO: posts user display -->
+        <!-- {{>post}} -->
+      </div>
+    </form>
+  </main>
+</div>

front/src/app/profile/pages/profile/profile.component.ts

@@ -1,8 +1,46 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { UserService } from '../../services/user.service';
+import { Router } from '@angular/router';
+import { AuthService } from 'src/app/auth/services/auth.service';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.css'],
 })
-export class ProfileComponent {}
+export class ProfileComponent implements OnInit {
+  user: any;
+  notGuest: boolean = false;
+  ownProfile: boolean = false;
+
+  constructor(
+    private router: Router,
+    private authService: AuthService,
+    private userService: UserService
+  ) {}
+
+  ngOnInit(): void {
+    const username: string = this._getUsernameFormURL(this.router.url);
+    this._checkLoggedUser(username);
+    this.userService.getUser(username).subscribe({
+      next: user => (this.user = user),
+      error: _ => this.router.navigate(['/error']),
+    });
+  }
+
+  private _getUsernameFormURL(url: string): string {
+    return url.split('/')[2];
+  }
+
+  private _checkLoggedUser(username: string) {
+    if (!this.authService.isLoggedIn()) return;
+    this.notGuest = true;
+    const loggedUser = this.authService.loggedUser;
+    if (loggedUser!.username === username) this.ownProfile = true;
+  }
+
+  logout() {
+    this.authService.logout();
+    this.router.navigate(['/']);
+  }
+}

front/src/app/profile/services/user.service.ts

@@ -0,0 +1,13 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  constructor(private http: HttpClient) {}
+
+  getUser(username: string) {
+    return this.http.get(`/api/users/${username}`);
+  }
+}