src/app/confirmation-modal/confirmation-modal.component.html

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>{{ data.title }}</h2>
 <mat-dialog-content>{{ data.description }}</mat-dialog-content>
 <mat-dialog-actions>
+  <button [style.backgroundColor]="'#FFFFFF'" [style.color]="'#000000'" mat-stroked-button color="warn" (click)="accept()">Yes</button>
   <button mat-flat-button (click)="close()">No</button>
-  <button mat-flat-button color="warn" (click)="accept()">Yes</button>
 </mat-dialog-actions>

src/app/create-link/create-link.component.html

@@ -1,6 +1,6 @@
 <div class="mx-auto container">
   <app-navbar></app-navbar>
-  <button mat-flat-button class="mt-3" color="warn" (click)="back()">
+  <button [style.backgroundColor]="'#FFFFFF'" [style.color]="'#000000'" mat-stroked-button class="mt-3" color="warn" (click)="back()">
     Back
   </button>
   <mat-card class="mt-3 p-3" appearance="outlined">

src/app/dashboard/dashboard.component.html

@@ -1,5 +1,6 @@
 <div class="mx-auto container">
   <app-navbar></app-navbar>
+  <h1>Hello {{user?.['name']}}!</h1>
   <div class="">
     <div class="flex flex-row">
       <button

src/app/dashboard/dashboard.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { LinkService } from '../service/link.service';
-import { RecordModel } from 'pocketbase';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { Router, RouterLink } from '@angular/router';
 import { MatRow, MatTableModule } from '@angular/material/table';
@@ -11,7 +10,8 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { ConfirmationModalComponent } from '../confirmation-modal/confirmation-modal.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { OptionsMenuComponent } from '../options-menu/options-menu.component';
-import { LogoutService } from '../service/logout.service';
+import { UserService } from '../service/user.service';
+import { AuthRecord } from 'pocketbase';
 
 @Component({
   selector: 'app-dashboard',
@@ -28,12 +28,14 @@ import { LogoutService } from '../service/logout.service';
 export class DashboardComponent {
   public links: Link[] = [];
   displayedColumns: string[] = ['id', 'name', 'link', 'shortLink', 'actions'];
+  public user!: AuthRecord;
 
   constructor(
     private linkService: LinkService,
     private router: Router,
     private dialog: MatDialog,
     private snackBar: MatSnackBar,
+    private userService: UserService,
   ) {}
 
   copyLink(id: string) {
@@ -65,6 +67,8 @@ export class DashboardComponent {
     this.linkService.getLinks().then((links) => {
       this.links = links;
     });
+
+    this.user = this.userService.getUser();
   }
 
   createLink() {

src/app/options-menu/options-menu.component.html

@@ -5,7 +5,7 @@
 >
   <mat-icon>more_vert</mat-icon>
 </button>
-<mat-menu #menu="matMenu">
+<mat-menu #menu="matMenu" xPosition="before">
   <button (click)="logout()" mat-menu-item>
     <mat-icon>logout</mat-icon>
     <span>Logout</span>

src/app/service/user.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from "@angular/core";
+import PocketBase, { AuthRecord } from 'pocketbase';
+import { environment } from "../../environments/environment";
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserService {
+  private pb = new PocketBase(environment.POCKETBASE);
+
+  getUser(): AuthRecord {
+    return this.pb.authStore.record;
+  }
+}