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 @@
{{ errorMessages["email"] }}
Email
-
+
{{ errorMessages["password"] }}
Password
-
+
-
+
+
+
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 = {};
- constructor(private router: Router, private snackBar: MatSnackBar) { }
+ constructor(
+ private router: Router,
+ private snackBar: MatSnackBar,
+ ) { }
private validationErrorMessages: Record = {
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%;