change to firebase auth

bizmatch/src/app/components/login-register/login-register.component.html

@@ -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>