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>

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();

src/styles.scss

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