1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<ion-header>
<div class="nav_header">
<ion-grid class="no-gutter">
<ion-row class="no-gutter">
<ion-col class="no-gutter" size="2">
<button class="nav_btn nav_back floatLeft" (click)="goToPage('login')">
<img src="../assets/Group17_2.png" />
</button>
</ion-col>
<ion-col class="no-gutter" size="8">
<div class="nav_title floatLeft">
<h4>SIGN UP</h4>
</div>
</ion-col>
<ion-col class="no-gutter" size="2"></ion-col>
</ion-row>
</ion-grid>
</div>
</ion-header>
<ion-content>
<div class="login_wrapper">
<div class="logo_wrapper">
<img src="../assets/logo.png" />
</div>
<div class="form_div">
<form #signupForm="ngForm" novalidate>
<div class="row">
<input class="" type="text" placeholder="Your name" [(ngModel)]="signup.name" name="name" #name="ngModel" required />
<div class="md-errors-spacer" [hidden]="name.valid || submitted == false">
Name is required
</div>
</div>
<div class="row">
<input class="" type="email" placeholder="Email Address" [(ngModel)]="signup.emailId" name="emailId" #emailId="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required />
<div class="md-errors-spacer" [hidden]="emailId.valid || submitted == false">
<div *ngIf="emailId.errors && emailId.errors.required">
Email is required
</div>
<div *ngIf="emailId.errors && emailId.errors.pattern">
Email is invalid
</div>
</div>
</div>
<div class="row">
<input class="" type="text" placeholder="Phone number" [(ngModel)]="signup.phone" name="phone" #phone="ngModel" pattern="(\(+61\)|\+61|\(0[1-9]\)|0[1-9])?( ?-?[0-9]){6,9}" maxlength="10" required />
<div class="md-errors-spacer" [hidden]="phone.valid || submitted == false">
<div *ngIf="phone.errors && phone.errors.required">
Phone number is required
</div>
<div *ngIf="phone.errors && phone.errors.pattern">
Phone is invalid
</div>
</div>
</div>
<div class="row">
<input class="" type="password" placeholder="Create A Password" [(ngModel)]="signup.password" name="password" #password="ngModel" minlength="6" required />
<div class="md-errors-spacer" [hidden]="password.valid || submitted == false">
<div *ngIf="password.errors && password.errors.required">
Password is required
</div>
<div *ngIf="password.errors && password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="row">
<ion-datetime displayFormat="DD-MM-YYYY" [(ngModel)]="signup.dob" name="dob" #dob="ngModel" placeholder="Date of Birth" max="{{minDate}}" required></ion-datetime>
<div class="md-errors-spacer" [hidden]="dob.valid || submitted == false">
<div *ngIf="dob.errors && dob.errors.required">DOB is required</div>
</div>
</div>
<div class="row">
<h6>
<input class="styled-checkbox" id="styled-checkbox-1" type="checkbox" value="true" [(ngModel)]="signup.terms" required name="terms" #terms="ngModel" />
<label for="styled-checkbox-1"><span>I agree with
<a (click)="menuToggle()">Terms and Conditions</a></span></label>
</h6>
<div class="md-errors-spacer" [hidden]="terms.valid || submitted == false">
<div *ngIf="terms.errors && terms.errors.required">
Please accept Terms and Conditions
</div>
</div>
</div>
<div class="row">
<button class="login_btn" (click)="onSignup(signupForm)">
SIGN UP
</button>
</div>
</form>
<div class="row">
<hr />
<p><span>OR</span></p>
</div>
<div class="row">
<div class="social_div">
<div class="social_btn" style="border-right:1px solid rgba(215, 213, 228, 1);" (click)="register.facebook()">
Facebook
</div>
<div class="social_btn" (click)="register.google(2)">
Google
</div>
</div>
</div>
</div>
</div>
<div class="loader" *ngIf="register.loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
</ion-content>
<div class="terms_wrapper" *ngIf="menuShow" [@slideInOut]>
<div class="terms_inner">
<h5>Terms & Conditions</h5>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button class="accept" (click)="menuToggle()">I Accept</button>
</div>
</div>