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

Umstellung auf firebase

Browse Source
This commit is contained in:
Andreas Knuth
2025-02-20 17:51:54 -06:00
parent f6d1b8623c
commit 521e799bff
40 changed files with 495 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
bizmatch/src/app/components/email-authorized/email-authorized.component.html Normal file
View File

@@ -0,0 +1,16 @@
<div class="container mx-auto p-4 text-center min-h-screen bg-gray-100">
<ng-container *ngIf="verificationStatus === 'pending'">
<p class="text-lg text-gray-600">Verifying your email...</p>
</ng-container>
<ng-container *ngIf="verificationStatus === 'success'">
<h2 class="text-2xl font-bold text-green-600 mb-5">Your email has been verified</h2>
<!-- <p class="text-gray-700 mb-4">You can now sign in with your new account</p> -->
<a routerLink="/account" class="inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">Follow this link to access your Account Page </a>
</ng-container>
<ng-container *ngIf="verificationStatus === 'error'">
<h2 class="text-2xl font-bold text-red-600 mb-2">Verification failed</h2>
<p class="text-gray-700">{{ errorMessage }}</p>
</ng-container>
</div>

47
bizmatch/src/app/components/email-authorized/email-authorized.component.ts Normal file
View File

@@ -0,0 +1,47 @@
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { environment } from '../../../environments/environment';
import { AuthService } from '../../services/auth.service';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-email-authorized',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './email-authorized.component.html',
})
export class EmailAuthorizedComponent implements OnInit {
verificationStatus: 'pending' | 'success' | 'error' = 'pending';
errorMessage: string | null = null;
constructor(private route: ActivatedRoute, private http: HttpClient, private authService: AuthService, private userService: UserService) {}
ngOnInit(): void {
const oobCode = this.route.snapshot.queryParamMap.get('oobCode');
const email = this.route.snapshot.queryParamMap.get('email');
const mode = this.route.snapshot.queryParamMap.get('mode');
if (mode === 'verifyEmail' && oobCode && email) {
this.verifyEmail(oobCode, email);
} else {
this.verificationStatus = 'error';
this.errorMessage = 'Invalid verification link';
}
}
private verifyEmail(oobCode: string, email: string): void {
this.http.post(`${environment.apiBaseUrl}/bizmatch/auth/verify-email`, { oobCode, email }).subscribe({
next: async () => {
this.verificationStatus = 'success';
await this.authService.refreshToken();
const user = await this.userService.getByMail(email);
},
error: err => {
this.verificationStatus = 'error';
this.errorMessage = err.error?.message || 'Verification failed';
},
});
}
}

95
bizmatch/src/app/components/login-register/login-register.component.html
View File

@@ -1,7 +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">
<h2 class="text-2xl font-bold mb-6 text-center">
{{ isLoginMode ? 'Login' : 'Registrierung' }}
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-center text-gray-800">
{{ isLoginMode ? 'Login' : 'Sign Up' }}
</h2>
<!-- Toggle Switch mit Flowbite -->
@@ -18,34 +18,99 @@
<!-- 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" />
<label for="email" class="block text-gray-700 mb-2 font-medium">E-Mail</label>
<div class="relative">
<input
id="email"
type="email"
[(ngModel)]="email"
placeholder="Please enter E-Mail Address"
class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>
</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" />
<label for="password" class="block text-gray-700 mb-2 font-medium">Password</label>
<div class="relative">
<input
id="password"
type="password"
[(ngModel)]="password"
placeholder="Please enter Password"
class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>
</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" />
<label for="confirmPassword" class="block text-gray-700 mb-2 font-medium">Confirm Password</label>
<div class="relative">
<input
id="confirmPassword"
type="password"
[(ngModel)]="confirmPassword"
placeholder="Repeat Password"
class="w-full px-3 py-2 pl-10 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
</div>
</div>
<div *ngIf="errorMessage" class="text-red-500 text-center mb-4">
<!-- Fehlermeldung -->
<div *ngIf="errorMessage" class="text-red-500 text-center mb-4 text-sm">
{{ errorMessage }}
</div>
<button (click)="onSubmit()" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg mb-4">
<!-- Submit Button -->
<button (click)="onSubmit()" class="w-full flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-lg mb-4 transition-colors duration-200">
<!-- <fa-icon [icon]="isLoginMode ? 'fas fas-user-plus' : 'userplus'" class="mr-2"></fa-icon> -->
<i *ngIf="isLoginMode" class="fa-solid fa-user-plus mr-2"></i>
<i *ngIf="!isLoginMode" class="fa-solid fa-arrow-right mr-2"></i>
{{ isLoginMode ? 'Sign in with Email' : 'Register' }}
</button>
<!-- Trennlinie -->
<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>
<span class="border-b w-1/5 md:w-1/4 border-gray-300"></span>
<span class="text-xs text-gray-500 uppercase mx-2">or</span>
<span class="border-b w-1/5 md:w-1/4 border-gray-300"></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>
<!-- Google Button -->
<button (click)="loginWithGoogle()" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 py-2.5 rounded-lg transition-colors duration-200">
<!-- <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.24 10.32V13.8H15.48C15.336 14.688 14.568 16.368 12.24 16.368C10.224 16.368 8.568 14.688 8.568 12.672C8.568 10.656 10.224 8.976 12.24 8.976C13.32 8.976 14.16 9.432 14.688 10.08L16.704 8.208C15.528 7.032 14.04 6.384 12.24 6.384C8.832 6.384 6 9.216 6 12.672C6 16.128 8.832 18.96 12.24 18.96C15.696 18.96 18.12 16.656 18.12 12.672C18.12 11.952 18.024 11.28 17.88 10.656L12.24 10.32Z"
fill="currentColor"
/>
</svg> -->
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="#FFC107"
d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
/>
<path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
<path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
<path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
</svg>
Continue with Google
</button>
<!-- <button (click)="loginWithGoogle()" class="bg-white text-blue-600 px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
<svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
fill="#FFC107"
d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
/>
<path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" />
<path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0124 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" />
<path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 01-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" />
</svg>
Continue with Google
</button> -->
</div>
</div>

18
bizmatch/src/app/components/login-register/login-register.component.ts
View File

@@ -2,12 +2,14 @@ import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faArrowRight, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import { AuthService } from '../../services/auth.service';
import { LoadingService } from '../../services/loading.service';
@Component({
selector: 'app-login-register',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, FontAwesomeModule],
templateUrl: './login-register.component.html',
})
export class LoginRegisterComponent {
@@ -16,8 +18,11 @@ export class LoginRegisterComponent {
confirmPassword: string = '';
isLoginMode: boolean = true; // true: Login, false: Registration
errorMessage: string = '';
constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router) {}
envelope = faEnvelope;
lock = faLock;
arrowRight = faArrowRight;
userplus = faUserPlus;
constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router, private loadingService: LoadingService) {}
ngOnInit(): void {
// Set mode based on query parameter "mode"
@@ -53,12 +58,16 @@ export class LoginRegisterComponent {
this.errorMessage = 'Passwords do not match.';
return;
}
this.loadingService.startLoading('googleAuth');
this.authService
.registerWithEmail(this.email, this.password)
.then(userCredential => {
console.log('Successfully registered:', userCredential);
this.loadingService.stopLoading('googleAuth');
this.router.navigate(['emailVerification']);
})
.catch(error => {
this.loadingService.stopLoading('googleAuth');
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.';
@@ -76,6 +85,7 @@ export class LoginRegisterComponent {
.loginWithGoogle()
.then(userCredential => {
console.log('Successfully logged in with Google:', userCredential);
this.router.navigate([`home`]);
})
.catch(error => {
console.error('Error during Google login:', error);