This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
FoodLoop-Web/src/app/pages/register.component.html
piratefinn d8ff4064e2 Proper Working Validation added
Still needs visual validation
2017-06-05 15:22:51 +01:00

110 lines
4.8 KiB
HTML

<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">Age Range</span>
<select class="form-control" type="text" formControlName="age_range">
<option *ngFor="let range of ageRanges" [value]="range.id">{{ range.string }}</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>
<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>
<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>