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%;