Added proper switch for user form

switch between customer and organisation
This commit is contained in:
piratefinn 2017-06-01 17:03:16 +01:00
parent 53a759a2f9
commit 9dc82fb4fe
2 changed files with 47 additions and 56 deletions

View file

@ -8,6 +8,7 @@ import { LoginComponent } from './login.component';
import { RegisterComponent } from './register.component';
import { PagesRoutingModule } from './pages-routing.module';
import { TabsModule } from 'ngx-bootstrap/tabs';
@NgModule({
imports: [
@ -15,6 +16,7 @@ import { PagesRoutingModule } from './pages-routing.module';
PagesRoutingModule,
FormsModule,
ReactiveFormsModule,
TabsModule
],
declarations: [
P404Component,

View file

@ -7,47 +7,25 @@
<h1>Register</h1>
<p class="text-muted">Create your account</p>
<div class="input-group mb-3">
<!-- <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='customer'>Customer</option>
<option value='organisation'>Organisation</option>
<option value='customer'>Customer</option>
</select>
</div>
<form *ngIf="showtradersignup" [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
</div> -->
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<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"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="name" placeholder="Organisation Name">
</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-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="postcode" placeholder="Postcode">
</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">
@ -58,34 +36,27 @@
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
</div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>
<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>
<form *ngIf="showcustomersignup" [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<div [ngSwitch]="signup.getForm().value.usertype">
<div *ngSwitchCase="'customer'" >
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<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">
<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="name" placeholder="Organisation 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="Username">
</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="display_name" placeholder="Full Name">
</div>
<div class="input-group mb-3">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" formControlName="email" placeholder="Email">
<input type="text" class="form-control" formControlName="full_name" placeholder="Full Name">
</div>
<div class="input-group mb-3">
@ -100,19 +71,37 @@
</select>
</div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>
</form>
</div>
<div *ngSwitchCase="'organisation'">
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<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">
<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-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
<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>
<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>