register_component.html 2.59 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
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"
                   ngControl="nickname">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
10
11
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
12
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"
                   ngControl="surename">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
18
19
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
20
21
22
23
24
25
            <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"
                   ngControl="name">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
26
27
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
28
29
30
31
32
33
            <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"
                   ngControl="email">
Wosiek, Oliver's avatar
Wosiek, Oliver committed
34
35
36
37
38
39
        </div>
        <div class="form-group">
            <label for="mobileNo">Mobile Number</label>
            <input type="text" class="form-control" id="mobileNo" placeholder="Mobile Number">
        </div>
        <div class="form-group">
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
40
41
42
43
44
45
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"
                   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
52
        </div>
Siedschlag, Lennart's avatar
Alerts    
Siedschlag, Lennart committed
53

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