aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

change to firebase auth

Browse Source
This commit is contained in:
Andreas Knuth
2025-02-18 18:05:51 -06:00
parent b9a9b983e9
commit a2e6243e93
34 changed files with 465 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bizmatch/src/app/components/email-verification/email-verification.component.html Normal file
View File

@@ -0,0 +1,7 @@
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-4">Email Verification</h2>
<p class="mb-4">A verification email has been sent to your email address. Please check your inbox and click the link to verify your account.</p>
<p>Once verified, please return to the application.</p>
</div>
</div>

9
bizmatch/src/app/components/email-verification/email-verification.component.ts Normal file
View File

@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-email-verification',
standalone: true,
imports: [],
templateUrl: './email-verification.component.html',
})
export class EmailVerificationComponent {}

2
bizmatch/src/app/components/footer/footer.component.html
View File

@@ -11,7 +11,7 @@
<div class="flex flex-col lg:flex-row items-center order-3 lg:order-2">
<a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="terms-of-use" data-drawer-show="terms-of-use" aria-controls="terms-of-use">Terms of use</a>
<a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" data-drawer-target="privacy" data-drawer-show="privacy" aria-controls="privacy">Privacy statement</a>
<a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" routerLink="/pricingOverview">Pricing</a>
<!-- <a class="text-sm text-blue-600 hover:underline hover:cursor-pointer mx-2" routerLink="/pricingOverview">Pricing</a> -->
</div>
<div class="flex flex-col lg:flex-row items-center order-2 lg:order-3">

4
bizmatch/src/app/components/header/header.component.html
View File

@@ -135,10 +135,10 @@
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a (click)="login()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
<a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
</li>
<li>
<a routerLink="/pricing" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
<a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Register</a>
</li>
</ul>
<ul class="py-2 md:hidden">

5
bizmatch/src/app/components/header/header.component.ts
View File

@@ -11,6 +11,7 @@ import { filter, Observable, Subject, Subscription } from 'rxjs';
import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../environments/environment';
import { AuthService } from '../../services/auth.service';
import { CriteriaChangeService } from '../../services/criteria-change.service';
import { SearchService } from '../../services/search.service';
import { SelectOptionsService } from '../../services/select-options.service';
@@ -56,6 +57,7 @@ export class HeaderComponent {
private searchService: SearchService,
private criteriaChangeService: CriteriaChangeService,
public selectOptions: SelectOptionsService,
private authService: AuthService,
) {}
@HostListener('document:click', ['$event'])
handleGlobalClick(event: Event) {
@@ -65,7 +67,8 @@ export class HeaderComponent {
}
}
async ngOnInit() {
const token = await this.keycloakService.getToken();
//const token = await this.keycloakService.getToken();
const token = await this.authService.getToken();
this.keycloakUser = map2User(token);
if (this.keycloakUser) {
this.user = await this.userService.getByMail(this.keycloakUser?.email);

51
bizmatch/src/app/components/login-register/login-register.component.html Normal file
View File

@@ -0,0 +1,51 @@
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center">
{{ isLoginMode ? 'Login' : 'Registrierung' }}
</h2>
<!-- Toggle Switch mit Flowbite -->
<div class="flex items-center justify-center mb-6">
<span class="mr-3 text-gray-700 font-medium">Login</span>
<label for="toggle-switch" class="inline-flex relative items-center cursor-pointer">
<input type="checkbox" id="toggle-switch" class="sr-only peer" [checked]="!isLoginMode" (change)="toggleMode()" />
<div
class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
></div>
</label>
<span class="ml-3 text-gray-700 font-medium">Sign Up</span>
</div>
<!-- E-Mail Eingabe -->
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">EMail</label>
<input id="email" type="email" [(ngModel)]="email" placeholder="Please enter EMail Address" class="w-full px-3 py-2 border rounded focus:outline-none focus:border-blue-500" />
</div>
<!-- Passwort Eingabe -->
<div class="mb-4">
<label for="password" class="block text-gray-700 mb-2">Password</label>
<input id="password" type="password" [(ngModel)]="password" placeholder="Please enter Passwort" class="w-full px-3 py-2 border rounded focus:outline-none focus:border-blue-500" />
</div>
<!-- Passwort-Bestätigung nur im Registrierungsmodus -->
<div *ngIf="!isLoginMode" class="mb-6">
<label for="confirmPassword" class="block text-gray-700 mb-2">Confirm Password</label>
<input id="confirmPassword" type="password" [(ngModel)]="confirmPassword" placeholder="Repeat Password" class="w-full px-3 py-2 border rounded focus:outline-none focus:border-blue-500" />
</div>
<div *ngIf="errorMessage" class="text-red-500 text-center mb-4">
{{ errorMessage }}
</div>
<button (click)="onSubmit()" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg mb-4">
{{ isLoginMode ? 'Sign in with Email' : 'Register' }}
</button>
<div class="flex items-center justify-center my-4">
<span class="border-b w-1/5 md:w-1/4"></span>
<span class="text-xs text-center text-gray-500 uppercase mx-2">or</span>
<span class="border-b w-1/5 md:w-1/4"></span>
</div>
<button (click)="loginWithGoogle()" class="w-full bg-red-500 hover:bg-red-600 text-white py-2 rounded-lg">Continue with Google</button>
</div>
</div>

85
bizmatch/src/app/components/login-register/login-register.component.ts Normal file
View File

@@ -0,0 +1,85 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../../services/auth.service';
@Component({
selector: 'app-login-register',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './login-register.component.html',
})
export class LoginRegisterComponent {
email: string = '';
password: string = '';
confirmPassword: string = '';
isLoginMode: boolean = true; // true: Login, false: Registration
errorMessage: string = '';
constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router) {}
ngOnInit(): void {
// Set mode based on query parameter "mode"
this.route.queryParamMap.subscribe(params => {
const mode = params.get('mode');
this.isLoginMode = mode !== 'register';
});
}
toggleMode(): void {
this.isLoginMode = !this.isLoginMode;
this.errorMessage = '';
}
// Login with Email
onSubmit(): void {
this.errorMessage = '';
if (this.isLoginMode) {
this.authService
.loginWithEmail(this.email, this.password)
.then(userCredential => {
console.log('Successfully logged in:', userCredential);
this.router.navigate([`home`]);
})
.catch(error => {
console.error('Error during email login:', error);
this.errorMessage = error.message;
});
} else {
// Registration mode: also check if passwords match
if (this.password !== this.confirmPassword) {
console.error('Passwords do not match');
this.errorMessage = 'Passwords do not match.';
return;
}
this.authService
.registerWithEmail(this.email, this.password)
.then(userCredential => {
console.log('Successfully registered:', userCredential);
})
.catch(error => {
console.error('Error during registration:', error);
if (error.code === 'auth/email-already-in-use') {
this.errorMessage = 'This email address is already in use. Please try logging in.';
} else {
this.errorMessage = error.message;
}
});
}
}
// Login with Google
loginWithGoogle(): void {
this.errorMessage = '';
this.authService
.loginWithGoogle()
.then(userCredential => {
console.log('Successfully logged in with Google:', userCredential);
})
.catch(error => {
console.error('Error during Google login:', error);
this.errorMessage = error.message;
});
}
}

11
bizmatch/src/app/components/logout/logout.component.ts
View File

@@ -1,7 +1,8 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Router, RouterModule } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';
import { AuthService } from '../../services/auth.service';
@Component({
selector: 'logout',
@@ -10,8 +11,10 @@ import { KeycloakService } from 'keycloak-angular';
template: ``,
})
export class LogoutComponent {
constructor(public keycloakService: KeycloakService) {
sessionStorage.removeItem('USERID');
keycloakService.logout(window.location.origin + '/home');
constructor(public keycloakService: KeycloakService, private authService: AuthService, private router: Router) {
//sessionStorage.removeItem('USERID');
//keycloakService.logout(window.location.origin + '/home');
this.authService.logout();
this.router.navigate(['/home']);
}
}