121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import { Component } from '@angular/core';
|
|
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';
|
|
import { MatDividerModule } from '@angular/material/divider';
|
|
|
|
@Component({
|
|
selector: 'app-login',
|
|
imports: [
|
|
ReactiveFormsModule,
|
|
MatCardModule,
|
|
MatInputModule,
|
|
MatLabel,
|
|
MatFormFieldModule,
|
|
MatButtonModule,
|
|
MatDividerModule,
|
|
],
|
|
templateUrl: './login.component.html',
|
|
styleUrl: './login.component.css',
|
|
})
|
|
export class LoginComponent {
|
|
public loginForm!: FormGroup;
|
|
public invalidCredentials = false;
|
|
private pb = new PocketBase(environment.POCKETBASE);
|
|
public errorMessages: Record<string, string> = {};
|
|
|
|
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('', Validators.required),
|
|
password: new FormControl('', Validators.required),
|
|
});
|
|
|
|
if (this.pb.authStore.isValid) {
|
|
this.router.navigate(['dashboard']);
|
|
}
|
|
|
|
this.loginForm.valueChanges.subscribe(() => {
|
|
this.updateErrorMessages();
|
|
});
|
|
}
|
|
|
|
loginWithAuthentik() {
|
|
this.pb
|
|
.collection('users')
|
|
.authWithOAuth2({
|
|
provider: 'oidc',
|
|
scopes: ['openid', 'email', 'profile', 'avatar'],
|
|
})
|
|
.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();
|
|
}
|
|
|
|
this.pb
|
|
.collection('users')
|
|
.authWithPassword(
|
|
this.loginForm.get('email')?.value,
|
|
this.loginForm.get('password')?.value,
|
|
)
|
|
.then(() => {
|
|
this.router.navigate(['dashboard']);
|
|
})
|
|
.catch(() => {
|
|
this.invalidCredentials = true;
|
|
const error = this.snackBar.open('Invalid Credentials');
|
|
setTimeout(() => {
|
|
error.dismiss();
|
|
}, 5000);
|
|
});
|
|
}
|
|
}
|