aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_modals/register-modal/register-modal.component.html
blob: 68025a46dd35d368569b58418250487bec24373d (plain) (blame)
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
<!-- Modal -->
<div class="modal fade" id="modalForRegister" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #003459;">
                <button id="closeButtonReg" type="button" class="btn-close" data-bs-dismiss="modal" style="background-color: white;"
                    aria-label="Close" (click)="resetData()"></button>
            </div>
            <div class="modal-body" style="color:#003459">
                <h1 class="text-center mt-2 mb-4">Registracija</h1>

                <form class="mx-5">
                    <!--Ime-->
                    <div class="row">
                        <div class="col-6 px-3 py-3">
                            <label class="form-label" for="firstName">Ime</label>
                            <input type="text" id="firstName" class="form-control" [(ngModel)]="firstName"
                                name="firstName" placeholder="Unesite ime...">
                            <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Unesite ispravno
                                ime.</small>
                        </div>
                        <!--Prezime-->
                        <div class="col-6 px-3 py-3">
                            <label class="form-label" for="lastName">Prezime</label>
                            <input type="text" id="lastName" class="form-control" [(ngModel)]="lastName" name="lastName"
                                placeholder="Unesite prezime..." />
                            <small *ngIf="wrongLastNameBool" class="form-text text-danger">Unesite ispravno
                                prezime.</small>
                        </div>
                    </div>
                    <div class="row">
                        <!--Korisnicko ime-->
                        <div class="col-12 px-3 py-3">
                            <label class="form-label" for="username-register">Korisničko ime</label>
                            <input type="text" id="username-register" class="form-control" [(ngModel)]="username"
                                name="username-register" placeholder="Unesite korisničko ime..." />
                            <small *ngIf="wrongUsernameBool" class="form-text text-danger">Unesite ispravno korisničko
                                ime.</small>
                        </div>
                    </div>
                    <div class="row">
                        <!--Email-->
                        <div class="col-12 px-3 py-3">
                            <label class="form-label" for="email">E-mail adresa</label>
                            <input type="email" id="email" class="form-control" [(ngModel)]="email" name="email"
                                placeholder="Unesite email adresu..." />
                            <small *ngIf="wrongEmailBool" class="form-text text-danger">Unesite ispravno e-mail
                                adresu.</small>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Lozinka 1. -->
                        <div class="col-6 px-3 py-3">
                            <label class="form-label" for="pass1">Lozinka</label>
                            <input type="password" id="pass1" class="form-control" [(ngModel)]="pass1" name="pass1"
                                placeholder="Unesite lozinku..." />
                            <small *ngIf="wrongPass1Bool" class="form-text text-danger">Lozinka se mora sastojati od
                                najmanje 6 karaktera.</small>
                        </div>
                        <!-- Lozinka 2. -->
                        <div class="col-6 px-3 py-3">
                            <label class="form-label" for="pass2">Potvrdite lozinku</label>
                            <input type="password" id="pass2" class="form-control" [(ngModel)]="pass2" name="pass2"
                                placeholder="Ponovite lozinku..." />
                            <small *ngIf="wrongPass2Bool" class="form-text text-danger">Lozinke se ne
                                podudaraju.</small>
                        </div>
                    </div>
                </form>
                <div class="col-md-12 d-flex justify-content-center mt-5">
                    <button type="button" class="btn btn-lg"
                        style="color:white; background-color: #003459; margin-right: 10px;"
                        (click)="doRegister()">Registrujte se</button>
                    <button type="button" class="btn btn-lg btn-outline-secondary" style="margin-left: 15px;"
                        data-bs-dismiss="modal" (click)="resetData()">Odustanite</button>
                </div>
                <br>
            </div>
            <div class="modal-footer justify-content-center">
                <p class="small fw-bold">Već imate kreiran nalog?
                    <a id="linkToLoginModal" data-bs-toggle="modal" data-bs-target="#modalForLogin"
                        class="link-danger">Prijavite se</a>
                </p>
            </div>
        </div>
    </div>
</div>