diff options
Diffstat (limited to 'frontend/src/app/_modals/register-modal/register-modal.component.html')
| -rw-r--r-- | frontend/src/app/_modals/register-modal/register-modal.component.html | 159 |
1 files changed, 79 insertions, 80 deletions
diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html index 68025a46..d76af4d6 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.html +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -1,86 +1,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" 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 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"> + <div class="modal-content bg-alt text-offwhite"> + <button #closeButton type="button" class="close-button btn-clear" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"> + <mat-icon>close</mat-icon> + </button> + <h1 class="mt-5 mb-4">Registracija</h1> + <form class="mx-4"> + <!--Ime--> + <div> + <mat-form-field appearance="fill"> + <mat-label>Ime</mat-label> + <input type="text" matInput [(ngModel)]="firstName" name="firstName" id="firstName"> + <mat-icon matSuffix></mat-icon> + </mat-form-field> + <p *ngIf="wrongFirstNameBool" class="wrong-creds">Unesite ispravno ime.</p> + </div> + <!--Prezime--> + <div> + <mat-form-field appearance="fill"> + <mat-label>Prezime</mat-label> + <input type="text" matInput [(ngModel)]="lastName" name="lastName" id="lastName"> + <mat-icon matSuffix></mat-icon> + </mat-form-field> + <p *ngIf="wrongLastNameBool" class="wrong-creds">Unesite ispravno prezime.</p> + </div> + <!--Korisnicko ime--> + <div> + <mat-form-field appearance="fill"> + <mat-label>Korisničko ime</mat-label> + <input type="text" matInput [(ngModel)]="username" name="username-register" id="username-register"> + <mat-icon matSuffix></mat-icon> + </mat-form-field> + <p *ngIf="wrongUsernameBool" class="wrong-creds">Unesite ispravno korisničko ime.</p> + </div> + <!--Email--> + <div> + <mat-form-field appearance="fill"> + <mat-label>E-mail adresa</mat-label> + <input type="email" matInput [(ngModel)]="email" name="email" id="email"> + <mat-icon matSuffix></mat-icon> + </mat-form-field> + <p *ngIf="wrongEmailBool" class="wrong-creds">Unesite ispravno e-mail adresu.</p> + </div> + <!-- Lozinka 1. --> + <div> + <mat-form-field appearance="fill"> + <mat-label>Lozinka</mat-label> + <input type="password" matInput [(ngModel)]="pass1" name="pass1" id="pass1" #password1> + <ng-container matSuffix *ngIf="!password1Shown"> + <mat-icon (click)="togglePasswordShown(1)">visibility_off</mat-icon> + </ng-container> + <ng-container matSuffix *ngIf="password1Shown"> + <mat-icon (click)="togglePasswordShown(1)">visibility</mat-icon> + </ng-container> + </mat-form-field> + <p *ngIf="wrongPass1Bool" class="wrong-creds">Lozinka se mora sastojati od najmanje 6 karaktera.</p> + </div> + <!-- Lozinka 2. --> + <div> + <mat-form-field appearance="fill"> + <mat-label>Potvrdite lozinku</mat-label> + <input type="password" matInput [(ngModel)]="pass2" name="pass2" id="pass2" #password2> + <ng-container matSuffix *ngIf="!password2Shown"> + <mat-icon (click)="togglePasswordShown(2)">visibility_off</mat-icon> + </ng-container> + <ng-container matSuffix *ngIf="password2Shown"> + <mat-icon (click)="togglePasswordShown(2)">visibility</mat-icon> + </ng-container> + </mat-form-field> + <p *ngIf="wrongPass2Bool" class="wrong-creds">Lozinke se ne podudaraju.</p> </div> - <br> + </form> + <div class="d-flex justify-content-center mt-2"> + <button mat-raised-button id="registerButton" (click)="doRegister()">Registrujte se</button> + <button mat-stroked-button id="doNotRegisterButton" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> </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> + <br> + <div class="modal-footer justify-content-center mt-3"> + <p class="small">Imate kreiran nalog? + <a data-bs-toggle="modal" data-bs-target="#modalForLogin"><span id="link" (click)="cleanWarnings()">Prijavite se</span></a> </p> </div> </div> |