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

View file

@ -7,26 +7,19 @@
<h1>Register</h1> <h1>Register</h1>
<p class="text-muted">Create your account</p> <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> <span class="input-group-addon"><i class="icon-people"></i></span>
<select required class="form-control" type="text" formControlName="usertype"> <select required class="form-control" type="text" formControlName="usertype">
<option value=''>Please select</option> <option value=''>Please select</option>
<option value='customer'>Customer</option>
<option value='organisation'>Organisation</option> <option value='organisation'>Organisation</option>
<option value='customer'>Customer</option>
</select> </select>
</div> </div> -->
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<form *ngIf="showtradersignup" [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-key"></i></span> <span class="input-group-addon"><i class="icon-key"></i></span>
<input type="text" class="form-control" formControlName="token" placeholder="Token"> <input type="text" class="form-control" formControlName="token" placeholder="Token">
</div> </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"> <div class="input-group mb-3">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
@ -34,21 +27,6 @@
</div> </div>
<div class="input-group mb-3"> <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> <span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="password" placeholder="Password"> <input type="password" class="form-control" formControlName="password" placeholder="Password">
</div> </div>
@ -57,35 +35,28 @@
<span class="input-group-addon"><i class="icon-lock"></i></span> <span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password"> <input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password">
</div> </div>
<button type="submit" class="btn btn-block btn-success">Create Account</button>
</form>
<form *ngIf="showcustomersignup" [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-key"></i></span> <span class="input-group-addon"><i class="icon-people"></i></span>
<input type="text" class="form-control" formControlName="token" placeholder="Token"> <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]="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-user"></i></span>
<input type="text" class="form-control" formControlName="display_name" placeholder="Display Name">
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span> <span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" formControlName="name" placeholder="Organisation Name"> <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="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">
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3">
@ -100,18 +71,36 @@
</select> </select>
</div> </div>
<div class="input-group mb-3"> <button type="submit" class="btn btn-block btn-success">Create Account</button>
<span class="input-group-addon"><i class="icon-lock"></i></span> </form>
<input type="password" class="form-control" formControlName="password" placeholder="Password"> </div>
<div *ngSwitchCase="'organisation'">
<form [formGroup]="signup.getForm()" (ngSubmit)="onSubmit()">
<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>
<div class="input-group mb-4"> <div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-lock"></i></span> <span class="input-group-addon"><i class="icon-user"></i></span>
<input type="password" class="form-control" formControlName="confirmpassword" placeholder="Repeat password"> <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> </div>
<button type="submit" class="btn btn-block btn-success">Create Account</button> <button type="submit" class="btn btn-block btn-success">Create Account</button>
</form> </form>
</div>
<div heading="Pending" *ngSwitchDefault>Please Select a User Type</div>
</div>
</div> </div>
</div> </div>
</div> </div>