diff options
Diffstat (limited to 'frontend/src/app/_modals/login-modal/login-modal.component.html')
| -rw-r--r-- | frontend/src/app/_modals/login-modal/login-modal.component.html | 79 |
1 files changed, 43 insertions, 36 deletions
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index 03048155..cea6bf39 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -1,42 +1,49 @@ <!-- Modal --> <div class="modal fade" id="modalForLogin" 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"> - <div class="modal-header" style="background-color: #003459;"> - <button #closeButton type="button" class="btn-close" style="background-color:white;" data-bs-dismiss="modal" aria-label="Close" (click)="resetData()"></button> - </div> - <div class="modal-body px-5" style="color:#003459"> - <h1 class="text-center mt-2 mb-4">Prijavite se</h1> - <form> - <!-- Korisnicko ime --> - <div class="form-outline mb-3"> - <label class="form-label" for="username">Korisničko ime</label> - <input [(ngModel)]="username" name="username" type="text" id="username" - class="form-control form-control" placeholder="Unesite korisničko ime..." /> - </div> - <!-- Lozinka --> - <div class="form-outline mb-3"> - <label class="form-label" for="password">Lozinka</label> - <input [(ngModel)]="password" name="password" type="password" id="password" - class="form-control form-control" placeholder="Unesite lozinku..." /> + <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="login-heading mt-5 mb-5">Prijava</h1> + <form> + <!-- Korisnicko ime --> + <div class="mb-3"> + <mat-form-field appearance="fill"> + <mat-label>Korisničko ime</mat-label> + <input type="text" matInput [(ngModel)]="username" name="username" id="username"> + <mat-icon matSuffix></mat-icon> + </mat-form-field> + </div> + <!-- Lozinka --> + <div class="mb-4"> + <mat-form-field appearance="fill"> + <mat-label>Lozinka</mat-label> + <input type="password" matInput [(ngModel)]="password" name="password" id="pass" #pass> + <ng-container matSuffix *ngIf="!passwordShown"> + <mat-icon (click)="togglePasswordShown()">visibility_off</mat-icon> + </ng-container> + <ng-container matSuffix *ngIf="passwordShown"> + <mat-icon (click)="togglePasswordShown()">visibility</mat-icon> + </ng-container> + </mat-form-field> + </div> + </form> + + <div class="text-lg-start"> + <p *ngIf="wrongCreds" class="small text-center" id="wrong-creds">Unesite ispravno korisničko ime i lozinku.</p> </div> - </form> - - <div class="text-center text-lg-start mt-5"> - <p *ngIf="wrongCreds" class="small fw-bold text-danger text-center">Unesite ispravan e-mail i lozinku.</p> - </div> - <div class="col-md-12 d-flex justify-content-center"> - <button type="button" class="btn btn-lg" style="color:white; background-color: #003459; margin-right: 10px;" (click)="doLogin()">Prijavite se</button> - <button type="button" class="btn btn-lg btn-outline-secondary" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> - </div> - <br> - </div> - <div class="modal-footer justify-content-center"> - <p class="small fw-bold">Još uvek nemate nalog? - <a data-bs-toggle="modal" data-bs-target="#modalForRegister" class="link-danger">Registrujte se</a> - </p> - </div> + <!--mat-raised-button--> + <div class="d-flex justify-content-center"> + <button mat-raised-button id="loginButton" (click)="doLogin()">Prijavite se</button> + <button mat-stroked-button id="doNotloginButton" data-bs-dismiss="modal" (click)="resetData()">Odustanite</button> + </div> + <div class="modal-footer justify-content-center mt-5"> + <p class="small mt-1">Nemate nalog? + <a data-bs-toggle="modal" data-bs-target="#modalForRegister"><span id="link" (click)="cleanWarnings()">Registrujte se</span></a> + </p> + </div> + </div> </div> - </div> </div>
\ No newline at end of file |