diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cda731b..0ee9598 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,9 @@ import { AuthGuard } from './_guards/auth.guard'; import { FullLayoutComponent } from './layouts/full-layout.component'; import { SimpleLayoutComponent } from './layouts/simple-layout.component'; +// Submodules +import { AuthModule } from './auth/auth.module'; + @NgModule({ imports: [ BrowserModule, @@ -28,7 +31,8 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component'; HttpModule, BsDropdownModule.forRoot(), TabsModule.forRoot(), - ChartsModule + ChartsModule, + AuthModule, ], declarations: [ AppComponent, diff --git a/src/app/auth/auth.module.ts b/src/app/auth/auth.module.ts new file mode 100644 index 0000000..3a4b1f7 --- /dev/null +++ b/src/app/auth/auth.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { LoginComponent } from './login.component'; +import { RegisterComponent } from './register.component'; +import { AuthRoutingModule } from './auth.routing'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule, + AuthRoutingModule, + ], + declarations: [ + LoginComponent, + RegisterComponent, + ] +}) +export class AuthModule {} diff --git a/src/app/auth/auth.routing.ts b/src/app/auth/auth.routing.ts new file mode 100644 index 0000000..3e54596 --- /dev/null +++ b/src/app/auth/auth.routing.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { LoginComponent } from './login.component'; +import { RegisterComponent } from './register.component'; + +const authRoutes: Routes = [ + { path: 'login', component: LoginComponent }, + { path: 'register', component: RegisterComponent }, +]; + +@NgModule({ + imports: [ RouterModule.forChild(authRoutes) ], + exports: [ RouterModule ], +}) +export class AuthRoutingModule {} diff --git a/src/app/auth/login.component.html b/src/app/auth/login.component.html new file mode 100644 index 0000000..277c26c --- /dev/null +++ b/src/app/auth/login.component.html @@ -0,0 +1,43 @@ +
+
+
+
+
+
+
+

Login

+

Sign In to your account

+
+
+ @ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+

Sign up

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+ +
+
+
+
+
+
+
+
diff --git a/src/app/auth/login.component.ts b/src/app/auth/login.component.ts new file mode 100644 index 0000000..49ba758 --- /dev/null +++ b/src/app/auth/login.component.ts @@ -0,0 +1,64 @@ +import { Component, OnInit } from '@angular/core'; +import { Validators, FormBuilder, FormGroup } from '@angular/forms'; +import { Http, Response } from '@angular/http'; +import { ApiService } from '../providers/api-service'; +import { Router, ActivatedRoute } from '@angular/router'; +import 'rxjs/add/operator/map'; + +@Component({ + templateUrl: 'login.component.html', + providers: [ApiService] +}) +export class LoginComponent implements OnInit { + signin: FormGroup; + returnUrl: string; + + constructor( + private route: ActivatedRoute, + private http: Http, + private formBuilder: FormBuilder, + private router: Router, + private api: ApiService + ) { + this.signin = this.formBuilder.group({ + email: ['', [Validators.required]], + password: ['', [Validators.required]], + }); + } + + ngOnInit() { + // reset login status + this.api + .logout() + .subscribe( + result => { + console.log('Logged out!'); + } + ); + + this.api.graph_data(undefined).subscribe( + result => { console.log(result) } + ) + + // get return url from route parameters or default to '/' + this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; + } + + onSubmit() { + console.log(this.signin.value); + + this.api + .login(this.signin.value) + .subscribe( + result => { + console.log('logged in!'); + this.router.navigate([this.returnUrl]); + }, + error => { + console.log( error._body ); + } + ); + } + + +} diff --git a/src/app/auth/register.component.html b/src/app/auth/register.component.html new file mode 100644 index 0000000..e311d4b --- /dev/null +++ b/src/app/auth/register.component.html @@ -0,0 +1,142 @@ +
+
+
+
+
+
+

Register

+

Create your account

+ + +
+
+ + +
+ +
+ @ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ Year of Birth + +
+ + +
+
+
+
+
+ + +
+ + + +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
Please Select a User Type
+
+
+
+
+
+
+
diff --git a/src/app/auth/register.component.ts b/src/app/auth/register.component.ts new file mode 100644 index 0000000..eeb4c7e --- /dev/null +++ b/src/app/auth/register.component.ts @@ -0,0 +1,124 @@ +import { Component } from '@angular/core'; +import { Validators, FormBuilder, FormGroup } from '@angular/forms'; +import { ValidationManager } from "ng2-validation-manager"; +import { Http, Response } from '@angular/http'; +import { ApiService } from '../providers/api-service'; +import {Router } from '@angular/router'; +import 'rxjs/add/operator/map'; + +@Component({ + templateUrl: 'register.component.html', + providers: [ApiService] +}) + +export class RegisterComponent { + signupForm: ValidationManager; + customerForm: ValidationManager; + organisationForm: ValidationManager; + years: Object[]; + + constructor( + private http: Http, + private formBuilder: FormBuilder, + private router: Router, + private api: ApiService, + ) { + this.years = []; + let max = new Date().getFullYear() - 10, + min = max - 140; + + for (let i = max; i>=min; i--){ + this.years.push(i); + } + this.signupForm = new ValidationManager({ + token: 'required', + usertype: 'required', + email: 'required|email', + password: 'required', + confirmpassword: 'required|equalTo:password' + }); + this.customerForm = new ValidationManager({ + display_name: 'required', + full_name: 'required', + postcode: 'required', + year_of_birth:'required', + }); + this.organisationForm = new ValidationManager({ + name: 'required', + sector: 'required', + street_name: 'required', + town: 'required', + postcode: 'required', + }); + } + + onSubmitCustomer() { + + console.log(this.signupForm.isValid()); + if (!this.signupForm.isValid() && !this.customerForm.isValid()) { + console.log("Not Valid!"); + return; + } + let signupForm = this.signupForm.getForm().value; + let customerForm = this.customerForm.getForm().value; + + let data = { + token: signupForm.token, + usertype: signupForm.usertype, + email: signupForm.email, + password: signupForm.password, + display_name: customerForm.display_name, + full_name: customerForm.full_name, + postcode: customerForm.postcode, + year_of_birth:customerForm.year_of_birth, + }; + console.log(data); + this.api + .register(data) + .subscribe( + result => { + console.log('registered!'); + this.router.navigate(['/dashboard']); + }, + error => { + console.log( error._body ); + } + ); + } + onSubmitOrganisation() { + + console.log(this.signupForm.isValid()); + if (!this.signupForm.isValid() || !this.organisationForm.isValid()) { + console.log("Not Valid!"); + return; + } + let signupForm = this.signupForm.getForm().value; + let organisationForm = this.organisationForm.getForm().value; + + let data = { + token: signupForm.token, + usertype: signupForm.usertype, + email: signupForm.email, + password: signupForm.password, + name: organisationForm.name, + sector: organisationForm.sector, + street_name: organisationForm.street_name, + town: organisationForm.town, + postcode: organisationForm.postcode, + }; + console.log(data); + this.api + .register(data) + .subscribe( + result => { + console.log('registered!'); + this.router.navigate(['/dashboard']); + }, + error => { + console.log( error._body ); + } + ); + } + + +} \ No newline at end of file