From b2186978673e5223e5d10c7b1dfdc0326acf00a3 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 14:10:39 +0100
Subject: [PATCH 1/2] feat(login): update login form with material design
 elements

---
 src/app/login/login.component.html | 92 ++++++------------------------
 src/app/login/login.component.ts   | 50 ++++++++++++++--
 2 files changed, 64 insertions(+), 78 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ef35d97..4706676 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,75 +1,21 @@
-<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
-  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-    <img
-      class="mx-auto h-10 w-auto"
-      src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
-      alt="Your Company"
-    />
-    <h2
-      class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900"
-    >
-      Sign in to your account
-    </h2>
-  </div>
+<div class="mx-auto pt-3 container">
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <h1>Login</h1>
 
-  <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-    <form [formGroup]="loginForm" class="space-y-6" action="#" method="POST">
-      @if (invalidCredentials) {
-        <div class="mt-2">
-          <p
-            class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-red-500 outline outline-red-500 outline-2 -outline-offset-2 sm:text-sm/6"
-          >
-            Invalid Credentials
-          </p>
-        </div>
-      }
-      <div>
-        <label for="email" class="block text-sm/6 font-medium text-gray-900"
-          >Email address</label
-        >
-        <div class="mt-2">
-          <input
-            formControlName="email"
-            type="email"
-            name="email"
-            id="email"
-            autocomplete="email"
-            required
-            class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-          />
-        </div>
-      </div>
-
-      <div>
-        <div class="flex items-center justify-between">
-          <label
-            for="password"
-            class="block text-sm/6 font-medium text-gray-900"
-            >Password</label
-          >
-        </div>
-        <div class="mt-2">
-          <input
-            formControlName="password"
-            type="password"
-            name="password"
-            id="password"
-            autocomplete="current-password"
-            required
-            class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
-          />
-        </div>
-      </div>
-
-      <div>
-        <button
-          (click)="submit()"
-          type="submit"
-          class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-        >
-          Sign in
-        </button>
-      </div>
-    </form>
-  </div>
+      <form class="flex flex-col" [formGroup]="loginForm">
+        <mat-form-field appearance="outline">
+          <mat-error>{{ errorMessages["email"] }}</mat-error>
+          <mat-label>Email</mat-label>
+          <input formControlName="email" type="email" matInput placeholder="banana@banana.com" />
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-error>{{ errorMessages["password"] }}</mat-error>
+          <mat-label>Password</mat-label>
+          <input formControlName="password" matInput type="password" placeholder="Aurelius14" />
+        </mat-form-field>
+        <button mat-flat-button type="submit" (click)="submit()">Login</button>
+      </form>
+    </mat-card-content>
+  </mat-card>
 </div>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 5faad83..8f9c5ab 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import PocketBase from 'pocketbase';
 import { environment } from '../../environments/environment';
 import { Router } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+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';
 
 @Component({
   selector: 'app-login',
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, MatCardModule, MatInputModule, MatLabel, MatFormFieldModule, MatButtonModule],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css',
 })
@@ -14,21 +19,52 @@ export class LoginComponent {
   public loginForm!: FormGroup;
   public invalidCredentials = false;
   private pb = new PocketBase(environment.POCKETBASE);
+  public errorMessages: Record<string, string> = {};
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private snackBar: MatSnackBar) { }
+
+  private validationErrorMessages: Record<string, string> = {
+    required: 'This field is required',
+  };
+
+  updateErrorMessages(): void {
+    this.errorMessages = {};
+
+    Object.keys(this.loginForm.controls).forEach((field) => {
+      const control = this.loginForm.get(field);
+
+      if (control && control.errors) {
+        this.errorMessages[field] = Object.keys(control.errors)
+          .map(
+            (errorKey) =>
+              this.validationErrorMessages[errorKey] ||
+              `Unknown error: ${errorKey}`,
+          )
+          .join(' ');
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.loginForm = new FormGroup({
-      email: new FormControl(''),
-      password: new FormControl(''),
+      email: new FormControl('', Validators.required),
+      password: new FormControl('', Validators.required),
     });
 
     if (this.pb.authStore.isValid) {
       this.router.navigate(['dashboard']);
     }
+
+    this.loginForm.valueChanges.subscribe(() => {
+      this.updateErrorMessages();
+    });
   }
 
   submit() {
+    if (!this.loginForm.valid) {
+      this.updateErrorMessages();
+    }
+
     this.pb
       .collection('users')
       .authWithPassword(
@@ -40,6 +76,10 @@ export class LoginComponent {
       })
       .catch(() => {
         this.invalidCredentials = true;
+        const error = this.snackBar.open('Invalid Credentials');
+        setTimeout(() => {
+          error.dismiss();
+        }, 5000);
       });
   }
 }

From cb658a77210499a2d731d4448f4030f01c5fc160 Mon Sep 17 00:00:00 2001
From: Jan Klattenhoff <jan@kjan.de>
Date: Tue, 21 Jan 2025 14:48:09 +0100
Subject: [PATCH 2/2] feat(login): add Authentik login button and functionality

---
 src/app/login/login.component.html | 20 +++++++++++++---
 src/app/login/login.component.ts   | 37 +++++++++++++++++++++++++++---
 src/styles.scss                    |  2 ++
 3 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 4706676..c4ad87b 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -7,14 +7,28 @@
         <mat-form-field appearance="outline">
           <mat-error>{{ errorMessages["email"] }}</mat-error>
           <mat-label>Email</mat-label>
-          <input formControlName="email" type="email" matInput placeholder="banana@banana.com" />
+          <input
+            formControlName="email"
+            type="email"
+            matInput
+            placeholder="banana@banana.com"
+          />
         </mat-form-field>
         <mat-form-field appearance="outline">
           <mat-error>{{ errorMessages["password"] }}</mat-error>
           <mat-label>Password</mat-label>
-          <input formControlName="password" matInput type="password" placeholder="Aurelius14" />
+          <input
+            formControlName="password"
+            matInput
+            type="password"
+            placeholder="Aurelius14"
+          />
         </mat-form-field>
-        <button 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>
       </form>
     </mat-card-content>
   </mat-card>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 8f9c5ab..11435df 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
 import PocketBase from 'pocketbase';
 import { environment } from '../../environments/environment';
 import { Router } from '@angular/router';
@@ -8,10 +13,19 @@ 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';
 
 @Component({
   selector: 'app-login',
-  imports: [ReactiveFormsModule, MatCardModule, MatInputModule, MatLabel, MatFormFieldModule, MatButtonModule],
+  imports: [
+    ReactiveFormsModule,
+    MatCardModule,
+    MatInputModule,
+    MatLabel,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatDividerModule,
+  ],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css',
 })
@@ -21,7 +35,10 @@ export class LoginComponent {
   private pb = new PocketBase(environment.POCKETBASE);
   public errorMessages: Record<string, string> = {};
 
-  constructor(private router: Router, private snackBar: MatSnackBar) { }
+  constructor(
+    private router: Router,
+    private snackBar: MatSnackBar,
+  ) { }
 
   private validationErrorMessages: Record<string, string> = {
     required: 'This field is required',
@@ -60,6 +77,20 @@ export class LoginComponent {
     });
   }
 
+  loginWithAuthentik() {
+    this.pb.collection('users').authWithOAuth2({ provider: 'oidc' })
+      .then(() => {
+        this.router.navigate(['dashboard']);
+      })
+      .catch(() => {
+        this.invalidCredentials = true;
+        const error = this.snackBar.open('Invalid Credentials');
+        setTimeout(() => {
+          error.dismiss();
+        }, 5000);
+      });
+  }
+
   submit() {
     if (!this.loginForm.valid) {
       this.updateErrorMessages();
diff --git a/src/styles.scss b/src/styles.scss
index 5ef6f19..b1a863c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -15,6 +15,8 @@ html {
   @apply underline text-blue-500 cursor-pointer;
 }
 
+
+
 html,
 body {
   height: 100%;