register_component.html 3.33 KB
Newer Older
Siedschlag, Lennart's avatar
Siedschlag, Lennart committed
1
<div *ngIf="user != null">
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">
Mauritz, Falk Marius's avatar
Mauritz, Falk Marius committed
5
6
7
8
9
10
11
            <label for="username">Username&nbsp;*</label>
            <input type="text" class="form-control" id="username" required placeholder="Username"
                   #username="ngForm"
                   [class.is-valid]="username.valid"
                   [class.is-invalid]="!username.valid"
                   [(ngModel)]="user.username"
                   ngControl="username">
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
43
            <input type="text" class="form-control" id="mobileNo" placeholder="Mobile Number"
                   [(ngModel)]="user.mobileNo">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
44
45
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
46
47
48
49
50
51
            <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"
52
                   [(ngModel)]="user.password"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
53
54
55
56
57
58
                   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
59
        </div>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
60

61
62
63
64
65
66
67
68
69
70
71
        <div class="form-group">
            <label for="passwordWh">Password wiederholen&nbsp;*</label>
            <input type="password" class="form-control" id="passwordWh" required placeholder="Password wiederholen"
                   pattern="{{user.password}}"
                   [(ngModel)]="passwordWh"
                   ngControl="passwordWh">
        </div>

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