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 mat-flat-button color="warn" (click)="close()">No</button>
-  <button mat-flat-button (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/dashboard/dashboard.component.html

@@ -1,14 +1,20 @@
 <div class="mx-auto container">
   <app-navbar></app-navbar>
-  <div class="overflow-x-auto">
-    <button
-      mat-flat-button
-      color="secondary"
-      class="my-3"
-      (click)="createLink()"
-    >
-      Create new Link
-    </button>
+  <div class="">
+    <div class="flex flex-row">
+      <button
+        mat-flat-button
+        color="secondary"
+        class="my-3"
+        (click)="createLink()"
+      >
+        Create new Link
+      </button>
+
+      <div class="ml-auto my-3">
+        <app-options-menu></app-options-menu>
+      </div>
+    </div>
 
     <mat-card appearance="outlined">
       <mat-card-content>

src/app/dashboard/dashboard.component.ts

@@ -10,10 +10,18 @@ import { MatButtonModule } from '@angular/material/button';
 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';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [NavbarComponent, MatTableModule, MatCardModule, MatButtonModule],
+  imports: [
+    NavbarComponent,
+    MatTableModule,
+    MatCardModule,
+    MatButtonModule,
+    OptionsMenuComponent,
+  ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.css',
 })

src/app/login/login.component.html

@@ -24,10 +24,17 @@
             placeholder="Aurelius14"
           />
         </mat-form-field>
-        <button class="mb-3" mat-flat-button type="submit" (click)="submit()">Login</button>
+        <button class="mb-3" mat-flat-button type="submit" (click)="submit()">
+          Login
+        </button>
         <mat-divider></mat-divider>
-        <button mat-flat-button [style.backgroundColor]="'#FD4B2D'" class="mt-3 mat-authentik" (click)="loginWithAuthentik()">
-        Log in with Authentik
+        <button
+          mat-flat-button
+          [style.backgroundColor]="'#FD4B2D'"
+          class="mt-3 mat-authentik"
+          (click)="loginWithAuthentik()"
+        >
+          Log in with Authentik
         </button>
       </form>
     </mat-card-content>

src/app/login/login.component.ts

@@ -13,7 +13,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule, MatLabel } from '@angular/material/input';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import {MatDividerModule} from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 
 @Component({
   selector: 'app-login',
@@ -38,7 +38,7 @@ export class LoginComponent {
   constructor(
     private router: Router,
     private snackBar: MatSnackBar,
-  ) { }
+  ) {}
 
   private validationErrorMessages: Record<string, string> = {
     required: 'This field is required',
@@ -78,7 +78,12 @@ export class LoginComponent {
   }
 
   loginWithAuthentik() {
-    this.pb.collection('users').authWithOAuth2({ provider: 'oidc' })
+    this.pb
+      .collection('users')
+      .authWithOAuth2({
+        provider: 'oidc',
+        scopes: ['openid', 'email', 'profile', 'avatar'],
+      })
       .then(() => {
         this.router.navigate(['dashboard']);
       })

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

@@ -0,0 +1,13 @@
+<button
+  mat-icon-button
+  [matMenuTriggerFor]="menu"
+  aria-label="Example icon-button with a menu"
+>
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  <button (click)="logout()" mat-menu-item>
+    <mat-icon>logout</mat-icon>
+    <span>Logout</span>
+  </button>
+</mat-menu>

src/app/options-menu/options-menu.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OptionsMenuComponent } from './options-menu.component';
+
+describe('OptionsMenuComponent', () => {
+  let component: OptionsMenuComponent;
+  let fixture: ComponentFixture<OptionsMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OptionsMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OptionsMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { LogoutService } from '../service/logout.service';
+
+@Component({
+  selector: 'app-options-menu',
+  imports: [MatIconModule, MatMenuModule, MatButtonModule],
+  templateUrl: './options-menu.component.html',
+  styleUrl: './options-menu.component.css',
+})
+export class OptionsMenuComponent {
+  constructor(private logoutService: LogoutService) {}
+
+  logout() {
+    this.logoutService.logout();
+  }
+}

src/app/service/logout.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import PocketBase from 'pocketbase';
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LogoutService {
+  private pb = new PocketBase(environment.POCKETBASE);
+
+  constructor(private router: Router) {}
+
+  logout() {
+    this.pb.authStore.clear();
+    this.router.navigate(['']);
+  }
+}

src/styles.scss

@@ -15,8 +15,6 @@ html {
   @apply underline text-blue-500 cursor-pointer;
 }
 
-
-
 html,
 body {
   height: 100%;