\ No newline at end of file
diff --git a/src/app/firebase-auth/firebase-auth.component.scss b/src/app/firebase-auth/firebase-auth.component.scss
new file mode 100644
index 0000000..46abda6
--- /dev/null
+++ b/src/app/firebase-auth/firebase-auth.component.scss
@@ -0,0 +1,29 @@
+.main{
+ background-color: rgb(58, 104, 191);
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+
+.loginContainer{
+ background-color: cornflowerblue;
+ border: 2px solid rgb(121, 120, 120);
+ border-radius: 15px;
+ display: flex;
+ flex-direction: column;
+ width: 50%;
+ height: 50%;
+ padding:20px;
+ justify-content: center;
+ align-items: center;
+}
+
+.inputField{
+background-color: transparent;
+width: 80%;
+margin-bottom: 25px;
+
+}
\ No newline at end of file
diff --git a/src/app/firebase-auth/firebase-auth.component.spec.ts b/src/app/firebase-auth/firebase-auth.component.spec.ts
new file mode 100644
index 0000000..a7235b5
--- /dev/null
+++ b/src/app/firebase-auth/firebase-auth.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FirebaseAuthComponent } from './firebase-auth.component';
+
+describe('FirebaseAuthComponent', () => {
+ let component: FirebaseAuthComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ FirebaseAuthComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(FirebaseAuthComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/firebase-auth/firebase-auth.component.ts b/src/app/firebase-auth/firebase-auth.component.ts
new file mode 100644
index 0000000..4615cf5
--- /dev/null
+++ b/src/app/firebase-auth/firebase-auth.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+
+import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+@Component({
+ selector: 'app-firebase-auth',
+ templateUrl: './firebase-auth.component.html',
+ styleUrls: ['./firebase-auth.component.scss']
+})
+export class FirebaseAuthComponent implements OnInit {
+
+ constructor() {
+ /*
+ const firebaseConfig = {
+ apiKey: "AIzaSyCYOq1jv8IRfGhs2NPoXhmOUSPVnyxq3vw",
+ authDomain: "angular-login-abe92.firebaseapp.com",
+ projectId: "angular-login-abe92",
+ storageBucket: "angular-login-abe92.appspot.com",
+ messagingSenderId: "1050503165651",
+ appId: "1:1050503165651:web:894ceb5c86ada15a2ac626",
+ measurementId: "G-N34588MQT5",
+
+ };
+
+ // Initialize Firebase
+ const app = initializeApp(firebaseConfig);
+
+ const auth = getAuth();
+ createUserWithEmailAndPassword(auth, "marcus@weifer.de", "abcdefgh")
+ .then((userCredential) => {
+
+ const user = userCredential.user;
+ alert(userCredential.user.toJSON)
+ console.log("New user added!")
+ })
+ .catch((error) => {
+ const errorCode = error.code;
+ const errorMessage = error.message;
+
+ });
+ */
+ }
+
+ ngOnInit(): void {
+
+ }
+
+}
diff --git a/src/app/firebase-auth/firebase.ts b/src/app/firebase-auth/firebase.ts
new file mode 100644
index 0000000..723474d
--- /dev/null
+++ b/src/app/firebase-auth/firebase.ts
@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+
+const firebaseConfig = {
+ apiKey: "AIzaSyCYOq1jv8IRfGhs2NPoXhmOUSPVnyxq3vw",
+ authDomain: "angular-login-abe92.firebaseapp.com",
+ projectId: "angular-login-abe92",
+ storageBucket: "angular-login-abe92.appspot.com",
+ messagingSenderId: "1050503165651",
+ appId: "1:1050503165651:web:894ceb5c86ada15a2ac626",
+ measurementId: "G-N34588MQT5",
+
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
\ No newline at end of file
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000..4f5a95d
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1 @@
+
header works!
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
new file mode 100644
index 0000000..1fd30b4
--- /dev/null
+++ b/src/app/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+ let component: HeaderComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ HeaderComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(HeaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
new file mode 100644
index 0000000..7ab4cf7
--- /dev/null
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-header',
+ templateUrl: './header.component.html',
+ styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/index.html b/src/index.html
index 9b66663..d1fd452 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,11 @@
+
+
+
-
+
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..d2149b1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,39 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$Angular_Firebase_Login-primary: mat.define-palette(mat.$indigo-palette);
+$Angular_Firebase_Login-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$Angular_Firebase_Login-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$Angular_Firebase_Login-theme: mat.define-light-theme((
+ color: (
+ primary: $Angular_Firebase_Login-primary,
+ accent: $Angular_Firebase_Login-accent,
+ warn: $Angular_Firebase_Login-warn,
+ )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($Angular_Firebase_Login-theme);
+
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
-