Create new auth module for login and register components
This commit is contained in:
Tom Bloor
parent
398cfc764a
commit
20330bc220
7 changed files with 414 additions and 1 deletions
|
|
@ -21,6 +21,9 @@ import { AuthGuard } from './_guards/auth.guard';
|
||||||
import { FullLayoutComponent } from './layouts/full-layout.component';
|
import { FullLayoutComponent } from './layouts/full-layout.component';
|
||||||
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||||
|
|
||||||
|
// Submodules
|
||||||
|
import { AuthModule } from './auth/auth.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
|
@ -28,7 +31,8 @@ import { SimpleLayoutComponent } from './layouts/simple-layout.component';
|
||||||
HttpModule,
|
HttpModule,
|
||||||
BsDropdownModule.forRoot(),
|
BsDropdownModule.forRoot(),
|
||||||
TabsModule.forRoot(),
|
TabsModule.forRoot(),
|
||||||
ChartsModule
|
ChartsModule,
|
||||||
|
AuthModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
|
|
|
||||||
21
src/app/auth/auth.module.ts
Normal file
21
src/app/auth/auth.module.ts
Normal file
|
|
@ -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 {}
|
||||||
15
src/app/auth/auth.routing.ts
Normal file
15
src/app/auth/auth.routing.ts
Normal file
|
|
@ -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 {}
|
||||||
43
src/app/auth/login.component.html
Normal file
43
src/app/auth/login.component.html
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<div class="app flex-row align-items-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="card-group mb-0">
|
||||||
|
<div class="card p-4">
|
||||||
|
<div class="card-block">
|
||||||
|
<h1>Login</h1>
|
||||||
|
<p class="text-muted">Sign In to your account</p>
|
||||||
|
<form [formGroup]="signin" (ngSubmit)="onSubmit()">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon">@</span>
|
||||||
|
<input type="text" class="form-control" formControlName="email" placeholder="Email">
|
||||||
|
</div>
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||||
|
<input type="password" class="form-control" formControlName="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6">
|
||||||
|
<button type="submit" class="btn btn-primary px-4">Login</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 text-right">
|
||||||
|
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
|
||||||
|
<div class="card-block text-center">
|
||||||
|
<div>
|
||||||
|
<h2>Sign up</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
|
<button type="button" class="btn btn-primary active mt-3" routerLinkActive="active" [routerLink]="['/pages/register']">Register Now!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
64
src/app/auth/login.component.ts
Normal file
64
src/app/auth/login.component.ts
Normal file
|
|
@ -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 );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
142
src/app/auth/register.component.html
Normal file
142
src/app/auth/register.component.html
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
<div class="app flex-row align-items-center">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="card mx-4">
|
||||||
|
<div class="card-block p-4">
|
||||||
|
<h1>Register</h1>
|
||||||
|
<p class="text-muted">Create your account</p>
|
||||||
|
|
||||||
|
<!-- <div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-people"></i></span>
|
||||||
|
<select required class="form-control" type="text" formControlName="usertype">
|
||||||
|
<option value=''>Please select</option>
|
||||||
|
<option value='organisation'>Organisation</option>
|
||||||
|
<option value='customer'>Customer</option>
|
||||||
|
</select>
|
||||||
|
</div> -->
|
||||||
|
<form [formGroup]="signupForm.getForm()">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-key"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="token" placeholder="Token">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon">@</span>
|
||||||
|
<input type="text" class="form-control" formControlName="email" placeholder="Email">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||||
|
<input type="password" class="form-control" formControlName="password" placeholder="Password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-4">
|
||||||
|
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||||
|
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-people"></i></span>
|
||||||
|
<select required class="form-control" type="text" formControlName="usertype">
|
||||||
|
<option value=''>Please select</option>
|
||||||
|
<option value='organisation'>Organisation</option>
|
||||||
|
<option value='customer'>Customer</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div [ngSwitch]="signupForm.getForm().value.usertype">
|
||||||
|
<div *ngSwitchCase="'customer'" >
|
||||||
|
<form [formGroup]="customerForm.getForm()" (ngSubmit)="onSubmitCustomer()">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="display_name" placeholder="Display Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="full_name" placeholder="Full Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon">Year of Birth</span>
|
||||||
|
<select class="form-control" type="text" formControlName="year_of_birth">
|
||||||
|
<option *ngFor="let range of years" [value]="range">{{ range }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-block btn-success">Create Account</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div *ngSwitchCase="'organisation'">
|
||||||
|
<form [formGroup]="organisationForm.getForm()" (ngSubmit)="onSubmitOrganisation()">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Uses the UK SIC 2007 classifications for sector as used by ONS -->
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<select required class="form-control" type="text" formControlName="sector">
|
||||||
|
<option value=''>Select Organisation Sector</option>
|
||||||
|
<option value='A'>Agriculture, Forestry & Fishing</option>
|
||||||
|
<option value='B'>Mining & Quarrying</option>
|
||||||
|
<option value='C'>Manufacturing</option>
|
||||||
|
<option value='D'>Electricity, Gas, Steam & Air Conditiioning</option>
|
||||||
|
<option value='E'>Water & Waste Management</option>
|
||||||
|
<option value='F'>Construction</option>
|
||||||
|
<option value='G'>Wholesale & Retail Trade</option>
|
||||||
|
<option value='H'>Transportation & Storage</option>
|
||||||
|
<option value='I'>Accomodation & Food Services</option>
|
||||||
|
<option value='J'>Information & Communication</option>
|
||||||
|
<option value='K'>Financial & Insurance Activities</option>
|
||||||
|
<option value='L'>Real Estate</option>
|
||||||
|
<option value='M'>Professional, Scientfic & Technical</option>
|
||||||
|
<option value='N'>Administrative & Support Services</option>
|
||||||
|
<option value='O'>Public Administration, Defence & Social Security</option>
|
||||||
|
<option value='P'>Education</option>
|
||||||
|
<option value='Q'>Human Health & Social Work</option>
|
||||||
|
<option value='R'>Arts, Entertainment & Recreation</option>
|
||||||
|
<option value='S'>Other Service Activities</option>
|
||||||
|
<option value='T'>Household Domestic Business</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="street_name" placeholder="Street Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="town" placeholder="Town">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="town" placeholder="Town">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<span class="input-group-addon"><i class="icon-user"></i></span>
|
||||||
|
<input type="text" class="form-control" formControlName="postcode" placeholder="Postcode">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-block btn-success">Create Account</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div heading="Pending" *ngSwitchDefault>Please Select a User Type</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
124
src/app/auth/register.component.ts
Normal file
124
src/app/auth/register.component.ts
Normal file
|
|
@ -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 );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Reference in a new issue