BETTERZON-120: wip: auth components created.

Frontend/package.json

@@ -7,7 +7,8 @@
         "build": "ng build",
         "test": "ng test",
         "lint": "ng lint",
-        "e2e": "ng e2e"
+        "e2e": "ng e2e",
+        "postinstall": "ngcc"
     },
     "private": true,
     "dependencies": {

Frontend/src/app/app.module.ts

@@ -13,7 +13,7 @@ import {NgApexchartsModule} from 'ng-apexcharts';
 import {ProductSearchPageComponent} from './pages/product-search-page/product-search-page.component';
 import {HeaderComponent} from './components/header/header.component';
 import {NewestPricesListComponent} from './components/newest-prices-list/newest-prices-list.component';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 import {MatMenuModule} from '@angular/material/menu';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -31,6 +31,10 @@ import {MatListModule} from "@angular/material/list";
 import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component';
 import { HotDealsWidgetComponent } from './components/hot-deals-widget/hot-deals-widget.component';
 import { SliderForProductsComponent } from './components/slider-for-products/slider-for-products.component';
+import { RegistrationComponent } from './components/auth/registration/registration.component';
+import { SigninComponent } from './components/auth/signin/signin.component';
+import { MatCardModule } from "@angular/material/card";
+import {MatFormField} from "@angular/material/form-field";
 
 
 // For cookie popup
@@ -89,7 +93,9 @@ const cookieConfig: NgcCookieConsentConfig = {
         TopBarComponent,
         BottomBarComponent,
         HotDealsWidgetComponent,
-        SliderForProductsComponent
+        SliderForProductsComponent,
+        RegistrationComponent,
+        SigninComponent,
     ],
     imports: [
         BrowserModule,
@@ -107,9 +113,12 @@ const cookieConfig: NgcCookieConsentConfig = {
         MatListModule,
         MatButtonModule,
         MatIconModule,
+        MatFormField,
         RouterModule.forRoot([
             {path: '', component: LandingpageComponent},
         ]),
+        MatCardModule,
+        ReactiveFormsModule,
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/app/components/auth/auth-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import {RegistrationComponent} from "./registration/registration.component";
+import {SigninComponent} from "./signin/signin.component";
+import {ResetpasswortComponent} from "./resetpasswort/resetpasswort.component";
+
+const routes: Routes = [
+    {
+        path: 'registration',
+        component: RegistrationComponent
+    },
+    {
+        path: 'signin',
+        component: SigninComponent
+    },
+    {
+        path: 'resetpasswort',
+        component: ResetpasswortComponent
+    },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AuthRoutingModule { }

Frontend/src/app/components/auth/auth.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AuthRoutingModule } from './auth-routing.module';
+import { SigninComponent } from "./signin/signin.component";
+import { RegistrationComponent } from './registration/registration.component';
+import { ResetpasswortComponent } from './resetpasswort/resetpasswort.component';
+
+
+@NgModule({
+  declarations: [SigninComponent, RegistrationComponent, ResetpasswortComponent],
+  imports: [
+    CommonModule,
+    AuthRoutingModule,
+  ],
+  exports: [
+      SigninComponent,
+      RegistrationComponent,
+      ResetpasswortComponent,
+  ],
+})
+export class AuthModule { }

Frontend/src/app/components/auth/registration/registration.component.html

@@ -0,0 +1 @@
+<p>registration works!</p>

Frontend/src/app/components/auth/registration/registration.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrationComponent } from './registration.component';
+
+describe('RegistrationComponent', () => {
+  let component: RegistrationComponent;
+  let fixture: ComponentFixture<RegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegistrationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/registration/registration.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-registration',
+  templateUrl: './registration.component.html',
+  styleUrls: ['./registration.component.css']
+})
+export class RegistrationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.html

@@ -0,0 +1 @@
+<p>resetpasswort works!</p>

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetpasswortComponent } from './resetpasswort.component';
+
+describe('ResetpasswortComponent', () => {
+  let component: ResetpasswortComponent;
+  let fixture: ComponentFixture<ResetpasswortComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ResetpasswortComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetpasswortComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/resetpasswort/resetpasswort.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resetpasswort',
+  templateUrl: './resetpasswort.component.html',
+  styleUrls: ['./resetpasswort.component.css']
+})
+export class ResetpasswortComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

Frontend/src/app/components/auth/signin/signin.component.css

@@ -0,0 +1,9 @@
+mat-card {
+    max-width: 400px;
+    margin: 2em auto;
+    text-align: center;
+}
+
+mat-form-field {
+    display: block;
+}

Frontend/src/app/components/auth/signin/signin.component.html

@@ -0,0 +1,23 @@
+<mat-card>
+    <mat-card-content>
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+            <h2>Log In</h2>
+            <mat-error *ngIf="loginInvalid">
+                The username and password were not recognized
+            </mat-error>
+            <mat-form-field class="full-width-input">
+                <input matInput placeholder="Email" formControlName="username" required>
+                <mat-error>
+                    Please provide a valid email address
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="full-width-input">
+                <input matInput type="password" placeholder="Password" formControlName="password" required>
+                <mat-error>
+                    Please provide a valid password
+                </mat-error>
+            </mat-form-field>
+            <button mat-raised-button color="primary">Login</button>
+        </form>
+    </mat-card-content>
+</mat-card>

Frontend/src/app/components/auth/signin/signin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SigninComponent } from './signin.component';
+
+describe('SigninComponent', () => {
+  let component: SigninComponent;
+  let fixture: ComponentFixture<SigninComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SigninComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SigninComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/components/auth/signin/signin.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-signin',
+  templateUrl: './signin.component.html',
+  styleUrls: ['./signin.component.css']
+})
+export class SigninComponent implements OnInit {
+    form: any;
+    loginInvalid: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+    onSubmit() {
+        
+    }
+}

Frontend/src/app/components/top-bar/top-bar.component.html

@@ -1,10 +1,10 @@
 <div class="top-bar-wrapper">
-    <div class="<top-logo>">
+    <div class="<top-logo>" routerLink=''>
         <a><span id="better">BETTER</span><span id="zon">ZON</span></a>
     </div>
     <div class="links">
         <nav class="_links">
-            <a>KONTAKTIERE UNS</a>
+            <a routerLink="signin">KONTAKTIERE UNS</a>
             <a>KUNDEN</a>
             <a>FAQ</a>
         </nav>
@@ -19,8 +19,8 @@
     </div>
     <div class="links">
         <nav class="_signing_links">
-            <a>SIGN UP</a>
+            <a routerLink="signup" routerLinkActive="acitve">SIGN UP</a>
-            <a><span id="signin">SIGN IN</span></a>
+            <a routerLink="singin" routerLinkActive="acitve"><span id="signin">SIGN IN</span></a>
         </nav>
     </div>
 </div>

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,5 +1,5 @@
 <app-hot-deals-widget></app-hot-deals-widget>
-
+<app-signin></app-signin>
 <!--<div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">

Frontend/src/index.html

@@ -11,6 +11,6 @@
         <script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
     </head>
     <body>
-        <app-root></app-root>
+        <app-root>Loading...</app-root>
     </body>
 </html>

Frontend/src/styles.css

@@ -1,4 +1,5 @@
 /* general settings */
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
 
 * {
     box-sizing: border-box;