register_component.html 2.93 KB
Newer Older
Siedschlag, Lennart's avatar
Siedschlag, Lennart committed
1
<div *ngIf="user != null">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
2
<h3>Register</h3>
Siedschlag, Lennart's avatar
Siedschlag, Lennart committed
3
    <form #registerForm="ngForm">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
4
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
5
6
7
8
9
            <label for="nickname">Nickname&nbsp;*</label>
            <input type="text" class="form-control" id="nickname" required placeholder="Nickname"
                   #nickname="ngForm"
                   [class.is-valid]="nickname.valid"
                   [class.is-invalid]="!nickname.valid"
10
                   [(ngModel)]="user.nickname"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
11
                   ngControl="nickname">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
12
13
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
14
15
16
17
18
            <label for="surname">Surname&nbsp;*</label>
            <input type="text" class="form-control" id="surname" required placeholder="Surname"
                   #surename="ngForm"
                   [class.is-valid]="surename.valid"
                   [class.is-invalid]="!surename.valid"
19
                   [(ngModel)]="user.surname"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
20
                   ngControl="surename">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
21
22
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
23
24
25
26
27
            <label for="name">Name&nbsp;*</label>
            <input type="text" class="form-control" id="name" required placeholder="Name"
                   #name="ngForm"
                   [class.is-valid]="name.valid"
                   [class.is-invalid]="!name.valid"
28
                   [(ngModel)]="user.name"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
29
                   ngControl="name">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
30
31
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
32
33
34
35
36
            <label for="name">Email&nbsp;*</label>
            <input type="email" class="form-control" id="email" required placeholder="Email"
                   #email="ngForm"
                   [class.is-valid]="email.valid"
                   [class.is-invalid]="!email.valid"
37
                   [(ngModel)]="user.email"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
38
                   ngControl="email">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
39
40
41
        </div>
        <div class="form-group">
            <label for="mobileNo">Mobile Number</label>
42
            <input type="text" class="form-control" id="mobileNo" placeholder="Mobile Number" [(ngModel)]="user.mobileNo">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
43
44
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
45
46
47
48
49
50
            <label for="password">Password&nbsp;*</label>
            <input type="password" class="form-control" id="password" required placeholder="Password"
                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                   #password="ngForm"
                   [class.is-valid]="password.valid"
                   [class.is-invalid]="!password.valid"
51
                   [(ngModel)]="user.password"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
52
53
54
55
56
57
                   ngControl="password">
            <div [hidden]="password.valid || password.pristine" class="invalid-feedback">
                Password must contain at least one number and one uppercase and lowercase letter,
                and at least 8 or more characters
            </div>

Wosiek, Oliver's avatar
Wosiek, Oliver committed
58
        </div>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
59

Siedschlag, Lennart's avatar
Siedschlag, Lennart committed
60
        <button type="button" [disabled]="!registerForm.form.valid" class="btn btn-success" (click)="register()">Register</button>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
61
        <button type="button" class="btn btn-danger" (click)="cancel()">Cancel</button>
Siedschlag, Lennart's avatar
Siedschlag, Lennart committed
62
63
    </form>
</div>