register_component.html 2.83 KB
Newer Older
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
1
<h3>Register</h3>
Wosiek, Oliver's avatar
Wosiek, Oliver committed
2
3
    <form>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
4
5
6
7
8
            <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"
9
                   [(ngModel)]="user.nickname"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
10
                   ngControl="nickname">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
11
12
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
13
14
15
16
17
            <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"
18
                   [(ngModel)]="user.surname"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
19
                   ngControl="surename">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
20
21
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
22
23
24
25
26
            <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"
27
                   [(ngModel)]="user.name"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
28
                   ngControl="name">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
29
30
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
31
32
33
34
35
            <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"
36
                   [(ngModel)]="user.email"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
37
                   ngControl="email">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
38
39
40
        </div>
        <div class="form-group">
            <label for="mobileNo">Mobile Number</label>
41
            <input type="text" class="form-control" id="mobileNo" placeholder="Mobile Number" [(ngModel)]="user.mobileNo">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
42
43
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
44
45
46
47
48
49
            <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"
50
                   [(ngModel)]="user.password"
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
51
52
53
54
55
56
                   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
57
        </div>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
58

59
        <button type="button" class="btn btn-success" (click)="register()">Register</button>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
60
        <button type="button" class="btn btn-danger" (click)="cancel()">Cancel</button>
Wosiek, Oliver's avatar
Wosiek, Oliver committed
61
    </form>