From 56cb68a3ce05d4ad82fe5edde3c2918e48a2ca25 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 14:57:49 +0100
Subject: [PATCH 1/4] style: format HTML and TypeScript files for consistency

---
 .../confirmation-modal.component.html               |  4 ++--
 src/app/login/login.component.html                  | 13 ++++++++++---
 src/app/login/login.component.ts                    |  8 +++++---
 src/styles.scss                                     |  2 --
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/confirmation-modal/confirmation-modal.component.html b/src/app/confirmation-modal/confirmation-modal.component.html
index 419add9..c294827 100644
--- a/src/app/confirmation-modal/confirmation-modal.component.html
+++ b/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>
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index c4ad87b..701eebe 100644
--- a/src/app/login/login.component.html
+++ b/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>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 11435df..77cf73e 100644
--- a/src/app/login/login.component.ts
+++ b/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,9 @@ export class LoginComponent {
   }
 
   loginWithAuthentik() {
-    this.pb.collection('users').authWithOAuth2({ provider: 'oidc' })
+    this.pb
+      .collection('users')
+      .authWithOAuth2({ provider: 'oidc' })
       .then(() => {
         this.router.navigate(['dashboard']);
       })
diff --git a/src/styles.scss b/src/styles.scss
index b1a863c..5ef6f19 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -15,8 +15,6 @@ html {
   @apply underline text-blue-500 cursor-pointer;
 }
 
-
-
 html,
 body {
   height: 100%;
-- 
2.45.3


From ba520eea10ab32e8d76a09454033080843b87f47 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 15:21:55 +0100
Subject: [PATCH 2/4] feat(dashboard): add options menu and improve layout

---
 src/app/dashboard/dashboard.component.html    | 31 +++++++------------
 src/app/dashboard/dashboard.component.ts      |  4 ++-
 .../options-menu/options-menu.component.css   |  0
 .../options-menu/options-menu.component.html  |  9 ++++++
 .../options-menu.component.spec.ts            | 23 ++++++++++++++
 .../options-menu/options-menu.component.ts    | 19 ++++++++++++
 src/app/service/logout.service.ts             | 18 +++++++++++
 7 files changed, 84 insertions(+), 20 deletions(-)
 create mode 100644 src/app/options-menu/options-menu.component.css
 create mode 100644 src/app/options-menu/options-menu.component.html
 create mode 100644 src/app/options-menu/options-menu.component.spec.ts
 create mode 100644 src/app/options-menu/options-menu.component.ts
 create mode 100644 src/app/service/logout.service.ts

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 4041018..1f3040c 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -1,14 +1,15 @@
 <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>
@@ -42,11 +43,7 @@
           <ng-container matColumnDef="shortLink">
             <th mat-header-cell *matHeaderCellDef>Short link</th>
             <td mat-cell *matCellDef="let element">
-              <button
-                mat-flat-button
-                class="my-3"
-                (click)="copyLink(element.id)"
-              >
+              <button mat-flat-button class="my-3" (click)="copyLink(element.id)">
                 Copy short link
               </button>
             </td>
@@ -55,11 +52,7 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef>Actions</th>
             <td mat-cell *matCellDef="let element">
-              <button
-                mat-flat-button
-                color="warn"
-                (click)="deleteLink(element)"
-              >
+              <button mat-flat-button color="warn" (click)="deleteLink(element)">
                 Delete
               </button>
             </td>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 8644256..4864573 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -10,10 +10,12 @@ 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',
 })
diff --git a/src/app/options-menu/options-menu.component.css b/src/app/options-menu/options-menu.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/options-menu/options-menu.component.html b/src/app/options-menu/options-menu.component.html
new file mode 100644
index 0000000..310c5cb
--- /dev/null
+++ b/src/app/options-menu/options-menu.component.html
@@ -0,0 +1,9 @@
+<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>
diff --git a/src/app/options-menu/options-menu.component.spec.ts b/src/app/options-menu/options-menu.component.spec.ts
new file mode 100644
index 0000000..1023094
--- /dev/null
+++ b/src/app/options-menu/options-menu.component.spec.ts
@@ -0,0 +1,23 @@
+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();
+  });
+});
diff --git a/src/app/options-menu/options-menu.component.ts b/src/app/options-menu/options-menu.component.ts
new file mode 100644
index 0000000..a7d1fbf
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/src/app/service/logout.service.ts b/src/app/service/logout.service.ts
new file mode 100644
index 0000000..018b187
--- /dev/null
+++ b/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(['']);
+  }
+}
-- 
2.45.3


From 739475ffcf1f85f7a8944b60193ae29e193423ff Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 15:32:49 +0100
Subject: [PATCH 3/4] style: format HTML and TypeScript code for consistency

---
 src/app/dashboard/dashboard.component.html    | 19 ++++++++++++++++---
 src/app/dashboard/dashboard.component.ts      |  8 +++++++-
 src/app/login/login.component.ts              |  4 ++--
 .../options-menu/options-menu.component.html  |  6 +++++-
 .../options-menu.component.spec.ts            |  5 ++---
 .../options-menu/options-menu.component.ts    |  8 ++++----
 src/app/service/logout.service.ts             |  8 ++++----
 7 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 1f3040c..f989d96 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -2,7 +2,12 @@
   <app-navbar></app-navbar>
   <div class="">
     <div class="flex flex-row">
-      <button mat-flat-button color="secondary" class="my-3" (click)="createLink()">
+      <button
+        mat-flat-button
+        color="secondary"
+        class="my-3"
+        (click)="createLink()"
+      >
         Create new Link
       </button>
 
@@ -43,7 +48,11 @@
           <ng-container matColumnDef="shortLink">
             <th mat-header-cell *matHeaderCellDef>Short link</th>
             <td mat-cell *matCellDef="let element">
-              <button mat-flat-button class="my-3" (click)="copyLink(element.id)">
+              <button
+                mat-flat-button
+                class="my-3"
+                (click)="copyLink(element.id)"
+              >
                 Copy short link
               </button>
             </td>
@@ -52,7 +61,11 @@
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef>Actions</th>
             <td mat-cell *matCellDef="let element">
-              <button mat-flat-button color="warn" (click)="deleteLink(element)">
+              <button
+                mat-flat-button
+                color="warn"
+                (click)="deleteLink(element)"
+              >
                 Delete
               </button>
             </td>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 4864573..000f514 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -15,7 +15,13 @@ import { LogoutService } from '../service/logout.service';
 
 @Component({
   selector: 'app-dashboard',
-  imports: [NavbarComponent, MatTableModule, MatCardModule, MatButtonModule, OptionsMenuComponent],
+  imports: [
+    NavbarComponent,
+    MatTableModule,
+    MatCardModule,
+    MatButtonModule,
+    OptionsMenuComponent,
+  ],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.css',
 })
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 77cf73e..fbccfe1 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -38,7 +38,7 @@ export class LoginComponent {
   constructor(
     private router: Router,
     private snackBar: MatSnackBar,
-  ) {}
+  ) { }
 
   private validationErrorMessages: Record<string, string> = {
     required: 'This field is required',
@@ -80,7 +80,7 @@ export class LoginComponent {
   loginWithAuthentik() {
     this.pb
       .collection('users')
-      .authWithOAuth2({ provider: 'oidc' })
+      .authWithOAuth2({ provider: 'oidc', scopes: ['openid', 'email', 'profile', 'avatar'] })
       .then(() => {
         this.router.navigate(['dashboard']);
       })
diff --git a/src/app/options-menu/options-menu.component.html b/src/app/options-menu/options-menu.component.html
index 310c5cb..ca0b865 100644
--- a/src/app/options-menu/options-menu.component.html
+++ b/src/app/options-menu/options-menu.component.html
@@ -1,4 +1,8 @@
-<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+<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">
diff --git a/src/app/options-menu/options-menu.component.spec.ts b/src/app/options-menu/options-menu.component.spec.ts
index 1023094..615eec6 100644
--- a/src/app/options-menu/options-menu.component.spec.ts
+++ b/src/app/options-menu/options-menu.component.spec.ts
@@ -8,9 +8,8 @@ describe('OptionsMenuComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [OptionsMenuComponent]
-    })
-    .compileComponents();
+      imports: [OptionsMenuComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(OptionsMenuComponent);
     component = fixture.componentInstance;
diff --git a/src/app/options-menu/options-menu.component.ts b/src/app/options-menu/options-menu.component.ts
index a7d1fbf..554bb57 100644
--- a/src/app/options-menu/options-menu.component.ts
+++ b/src/app/options-menu/options-menu.component.ts
@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
-import {MatIconModule} from '@angular/material/icon';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatButtonModule} from '@angular/material/button';
+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'
+  styleUrl: './options-menu.component.css',
 })
 export class OptionsMenuComponent {
   constructor(private logoutService: LogoutService) {}
diff --git a/src/app/service/logout.service.ts b/src/app/service/logout.service.ts
index 018b187..6c76d09 100644
--- a/src/app/service/logout.service.ts
+++ b/src/app/service/logout.service.ts
@@ -1,7 +1,7 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import PocketBase from 'pocketbase';
-import { environment } from "../../environments/environment";
-import { Router } from "@angular/router";
+import { environment } from '../../environments/environment';
+import { Router } from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
@@ -9,7 +9,7 @@ import { Router } from "@angular/router";
 export class LogoutService {
   private pb = new PocketBase(environment.POCKETBASE);
 
-  constructor(private router: Router) { }
+  constructor(private router: Router) {}
 
   logout() {
     this.pb.authStore.clear();
-- 
2.45.3


From e3f35699b7f4de5c226cd0d8a53a742044f06fd3 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 15:38:24 +0100
Subject: [PATCH 4/4] style(login): format code and improve readability

---
 src/app/login/login.component.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index fbccfe1..8d2b906 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -38,7 +38,7 @@ export class LoginComponent {
   constructor(
     private router: Router,
     private snackBar: MatSnackBar,
-  ) { }
+  ) {}
 
   private validationErrorMessages: Record<string, string> = {
     required: 'This field is required',
@@ -80,7 +80,10 @@ export class LoginComponent {
   loginWithAuthentik() {
     this.pb
       .collection('users')
-      .authWithOAuth2({ provider: 'oidc', scopes: ['openid', 'email', 'profile', 'avatar'] })
+      .authWithOAuth2({
+        provider: 'oidc',
+        scopes: ['openid', 'email', 'profile', 'avatar'],
+      })
       .then(() => {
         this.router.navigate(['dashboard']);
       })
-- 
2.45.3