diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/app/_modals/login-modal/login-modal.component.css | 37 | ||||
| -rw-r--r-- | frontend/src/app/_modals/login-modal/login-modal.component.html | 79 | ||||
| -rw-r--r-- | frontend/src/app/_modals/login-modal/login-modal.component.ts | 14 | ||||
| -rw-r--r-- | frontend/src/styles/helper.css | 8 | ||||
| -rw-r--r-- | frontend/src/styles/theme.css | 5 |
5 files changed, 107 insertions, 36 deletions
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.css b/frontend/src/app/_modals/login-modal/login-modal.component.css index e69de29b..f8ffe797 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.css +++ b/frontend/src/app/_modals/login-modal/login-modal.component.css @@ -0,0 +1,37 @@ +.modal-content { + text-align: center; + width: 80%; + margin: auto; +} + +.modal-footer { + text-align: center; +} + +#loginButton { + color: white; + background-color: #003459; + margin-right: 10px; +} + +#loginButton, +#doNotLoginButton { + padding: 2% 6%; +} + +.close-button { + margin: 2%; +} + +#link { + text-decoration: underline; +} + +#link:hover { + color: var(--offwhite); + font-size: 110%; +} + +#wrong-creds { + color: var(--ns-warn); +}
\ No newline at end of file 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..1c5f318b 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">Registrujte se</span></a> + </p> + </div> + </div> </div> - </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts index b28d9799..f69e1cff 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -14,10 +14,13 @@ import {AfterViewInit, ElementRef} from '@angular/core'; export class LoginModalComponent implements OnInit { @ViewChild('closeButton') closeButton?: ElementRef; + @ViewChild('pass') passwordInput!: ElementRef; username: string = ''; password: string = ''; + passwordShown: boolean = false; + wrongCreds: boolean = false; constructor( @@ -37,6 +40,8 @@ export class LoginModalComponent implements OnInit { if (response == "Username doesn't exist" || response == "Wrong password") { this.wrongCreds = true; this.password = ''; + this.passwordShown = false; + this.passwordInput.nativeElement.type = "password"; } else { this.authService.authenticate(response); @@ -57,4 +62,13 @@ export class LoginModalComponent implements OnInit { this.username = ''; this.password = ''; } + + togglePasswordShown() { + this.passwordShown = !this.passwordShown; + + if (this.passwordShown) + this.passwordInput.nativeElement.type = "text"; + else + this.passwordInput.nativeElement.type = "password"; + } } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index ef875069..55b0967e 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -128,4 +128,12 @@ width: 150px; height: 150px; margin: auto; +} + +.close-button { + background-color: none; + color: white; + position: absolute; + top: 5px; + right: 5px; }
\ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 17a433c6..c517e885 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -9,6 +9,7 @@ --ns-bg-dark-50: rgba(0, 65, 101, 0.5); --offwhite: #dfd7d7; --ns-warn: #f9b7b7; + --ns-alt: #002b49; } body { @@ -20,6 +21,10 @@ body { background-color: var(--ns-bg-light-30) !important; } +.bg-alt { + background-color: var(--ns-alt); +} + .ns-border-primary { border: 1px solid var(--ns-primary); } |