mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-12 17:43:57 +00:00
BETTERZON-120: wip: auth components created.
This commit is contained in:
parent
f28dae3272
commit
7f9e6e5197
11816
Frontend/package-lock.json
generated
11816
Frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -7,7 +7,8 @@
|
|||
"build": "ng build",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
"e2e": "ng e2e",
|
||||
"postinstall": "ngcc"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
|
|
@ -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]
|
||||
|
|
26
Frontend/src/app/components/auth/auth-routing.module.ts
Normal file
26
Frontend/src/app/components/auth/auth-routing.module.ts
Normal file
|
@ -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 { }
|
22
Frontend/src/app/components/auth/auth.module.ts
Normal file
22
Frontend/src/app/components/auth/auth.module.ts
Normal file
|
@ -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 { }
|
|
@ -0,0 +1 @@
|
|||
<p>registration works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
<p>resetpasswort works!</p>
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
mat-card {
|
||||
max-width: 400px;
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
display: block;
|
||||
}
|
|
@ -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>
|
|
@ -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();
|
||||
});
|
||||
});
|
20
Frontend/src/app/components/auth/signin/signin.component.ts
Normal file
20
Frontend/src/app/components/auth/signin/signin.component.ts
Normal file
|
@ -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() {
|
||||
|
||||
}
|
||||
}
|
|
@ -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><span id="signin">SIGN IN</span></a>
|
||||
<a routerLink="signup" routerLinkActive="acitve">SIGN UP</a>
|
||||
<a routerLink="singin" routerLinkActive="acitve"><span id="signin">SIGN IN</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
/* general settings */
|
||||
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
Loading…
Reference in New Issue
Block a user