blob: d20b199faf10bb4516b47b1fa0db70ebd4936b27 (
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
|
<!-- 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 bg-info">
<button type="button" class="btn-close" data-bs-dismiss="modal" 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...">
<p *ngIf="wrongFirstNameBool" class="small fw-bold text-danger">Unesite ispravno ime. (minimum 1, maksimum 30 karaktera)</p>
<!--<small *ngIf="wrongFirstNameBool" class="form-text text-muted">Unesite ispravno ime</small>
<small class="form-text text-muted" [ngClass]="{wrongFirstNameBool} ? 'notCorrect' : 'correct'">Ispravno uneto 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..."/>
<p *ngIf="wrongLastNameBool" class="small fw-bold text-danger">Unesite ispravno prezime. (minimum 1, maksimum 30 karaktera)</p>
</div>
</div>
<div class="row">
<!--Korisnicko ime-->
<div class="col-12 px-3 py-3">
<label class="form-label" for="username">Korisničko ime</label>
<input type="text" id="username" class="form-control" [(ngModel)]="username" name="username" placeholder="Unesite korisničko ime..."/>
<p *ngIf="wrongUsernameBool" class="small fw-bold text-danger">Unesite ispravno korisničko ime.</p>
</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..."/>
<p *ngIf="wrongEmailBool" class="small fw-bold text-danger">Unesite ispravnu e-mail adresu.</p>
</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..."/>
<p *ngIf="wrongPass1Bool" class="small fw-bold text-danger">Lozinka se mora sastojati od najmanje 6 karaktera.</p>
</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..."/>
<p *ngIf="wrongPass2Bool" class="small fw-bold text-danger">Lozinke se ne podudaraju.</p>
</div>
</div>
</form>
<div class="col-md-12 d-flex justify-content-center mt-5">
<button type="button" class="btn btn-lg btn-info" style="color:white; border-color: #00a8e8; margin-right: 10px;" (click)="doRegister()">Registracija</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 data-bs-toggle="modal" data-bs-target="#modalForLogin" class="link-danger">Prijavite se</a>
</p>
</div>
</div>
</div>
</div>
<style>
.correct {
content: "✔️";
margin: 5px;
color: green;
}
.notCorrect {
content: "✕";
margin: 5px;
color: red;
}
</style>
|
