diff options
Diffstat (limited to 'frontend/src/app/_modals')
16 files changed, 409 insertions, 130 deletions
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css index e69de29b..bdfd06c9 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css @@ -0,0 +1,3 @@ +mat-dialog-container{ + background: var(ns-bg-dark-50) !important; +}
\ No newline at end of file diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html index 82365193..2d7e4d86 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html @@ -1,7 +1,9 @@ -<h2 mat-dialog-title class="text-muted">{{data.title}}</h2> -<div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);"> - {{data.message}} -</div> -<div mat-dialog-actions class="d-flex justify-content-center mt-4"> - <button mat-button cdkFocusInitial (click)="onOkClick()" style="background-color: lightgray;">OK</button> -</div>
\ No newline at end of file + + + <h2 mat-dialog-title >{{data.title}}</h2> + <div mat-dialog-content class="mt-4 text-offwhite" > + {{data.message}} + </div> + <div mat-dialog-actions class="d-flex justify-content-center mt-4"> + <button mat-raised-button cdkFocusInitial (click)="onOkClick()" color="basic">OK</button> + </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html new file mode 100644 index 00000000..7ba286cb --- /dev/null +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html @@ -0,0 +1,16 @@ +<h1 mat-dialog-title>Enkodiranje svih kolona</h1> +<div mat-dialog-content> + <p>Odaberite tip enkodinga za sve kolone zajedno:</p> + <mat-form-field> + <mat-select matNativeControl [(value)]="selectedEncodingType"> + <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + <p>Da li ste sigurni u izbor?</p> +</div> +<div mat-dialog-actions> + <button mat-button [mat-dialog-close]="selectedEncodingType" cdkFocusInitial>Da</button> + <button mat-button (click)="onNoClick()">Odustani</button> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts new file mode 100644 index 00000000..77f30ae3 --- /dev/null +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EncodingDialogComponent } from './encoding-dialog.component'; + +describe('EncodingDialogComponent', () => { + let component: EncodingDialogComponent; + let fixture: ComponentFixture<EncodingDialogComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EncodingDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EncodingDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts new file mode 100644 index 00000000..3b7560bf --- /dev/null +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { Encoding } from 'src/app/_data/Experiment'; + + +@Component({ + selector: 'app-encoding-dialog', + templateUrl: './encoding-dialog.component.html', + styleUrls: ['./encoding-dialog.component.css'] +}) +export class EncodingDialogComponent implements OnInit { + + selectedEncodingType?: Encoding; + Encoding = Encoding; + Object = Object; + + constructor(public dialogRef: MatDialogRef<EncodingDialogComponent>) + { + this.selectedEncodingType = Encoding.Label; + } + + ngOnInit(): void { + } + + onNoClick() { + this.dialogRef.close(); + } +} 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..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 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..062a0550 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,8 +40,11 @@ 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.wrongCreds = false; this.authService.authenticate(response); (<HTMLSelectElement>this.closeButton?.nativeElement).click(); this.userInfoService.getUserInfo().subscribe((response) => { @@ -57,4 +63,17 @@ 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"; + } + + cleanWarnings() { + this.wrongCreds = false; + } } diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html new file mode 100644 index 00000000..81aec5f8 --- /dev/null +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html @@ -0,0 +1,13 @@ +<h1 mat-dialog-title>Popunjavanje nedostajućih vrednosti</h1> +<div mat-dialog-content> + <p>Želim da:</p> + <mat-radio-group [(ngModel)]="selectedMissingValuesOption"> + <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>obrišem sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button> + <mat-radio-button [value]="NullValueOptions.DeleteRows">obrišem sve redove koji sadrže nedostajuće vrednosti</mat-radio-button> + </mat-radio-group> + <p>Da li ste sigurni u izbor?</p> +</div> +<div mat-dialog-actions> + <button mat-button [mat-dialog-close]="selectedMissingValuesOption" cdkFocusInitial>Da</button> + <button mat-button (click)="onNoClick()">Odustani</button> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts new file mode 100644 index 00000000..958925f4 --- /dev/null +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MissingvaluesDialogComponent } from './missingvalues-dialog.component'; + +describe('MissingvaluesDialogComponent', () => { + let component: MissingvaluesDialogComponent; + let fixture: ComponentFixture<MissingvaluesDialogComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MissingvaluesDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MissingvaluesDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts new file mode 100644 index 00000000..908edd9e --- /dev/null +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { NullValueOptions } from 'src/app/_data/Experiment'; + +@Component({ + selector: 'app-missingvalues-dialog', + templateUrl: './missingvalues-dialog.component.html', + styleUrls: ['./missingvalues-dialog.component.css'] +}) +export class MissingvaluesDialogComponent implements OnInit { + + selectedMissingValuesOption?: NullValueOptions; + + NullValueOptions = NullValueOptions; + + constructor(public dialogRef: MatDialogRef<MissingvaluesDialogComponent>) + { + this.selectedMissingValuesOption = NullValueOptions.DeleteColumns; + } + + ngOnInit(): void { + } + + onNoClick() { + this.dialogRef.close(); + } + +} diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.css b/frontend/src/app/_modals/register-modal/register-modal.component.css index e69de29b..f8496973 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.css +++ b/frontend/src/app/_modals/register-modal/register-modal.component.css @@ -0,0 +1,44 @@ +.modal-content { + text-align: center; + margin: auto; +} + +.modal-footer { + text-align: center; +} + +#registerButton { + color: white; + background-color: #003459; + margin-right: 10px; +} + +#registerButton, +#doNotRegisterButton { + padding: 2% 7%; +} + +.close-button { + margin: 2%; +} + +#link { + text-decoration: underline; +} + +#link:hover { + color: var(--offwhite); + font-size: 110%; +} + +.mat-form-field { + width: 80%; +} + +.wrong-creds { + color: var(--ns-warn); +} + +p { + font-size: 11px; +}
\ No newline at end of file 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> diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts index 11f6727d..3726b2e0 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.ts +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { AuthService } from 'src/app/_services/auth.service'; import User from 'src/app/_data/User'; import { DOCUMENT } from '@angular/common'; @@ -34,6 +34,13 @@ export class RegisterModalComponent implements OnInit { shared = shared; + password1Shown: boolean = false; + password2Shown: boolean = false; + @ViewChild('password1') password1Input!: ElementRef; + @ViewChild('password2') password2Input!: ElementRef; + @ViewChild('closeButton') closeButton!: ElementRef; + + constructor( private authService: AuthService, @Inject(DOCUMENT) document: Document @@ -48,6 +55,8 @@ export class RegisterModalComponent implements OnInit { resetData() { this.firstName = this.lastName = this.username = this.email = this.pass1 = this.pass2 = ''; this.wrongFirstNameBool = this.wrongLastNameBool = this.wrongUsernameBool = this.wrongEmailBool = this.wrongPass1Bool = this.wrongPass2Bool = false; + this.password1Shown = false; + this.password2Shown = false; } isCorrectName(element: string): boolean { @@ -76,7 +85,7 @@ export class RegisterModalComponent implements OnInit { this.wrongFirstNameBool = false; return; } - (<HTMLSelectElement>document.getElementById('firstName')).focus(); + //(<HTMLSelectElement>document.getElementById('firstName')).focus(); this.wrongFirstNameBool = true; } lastNameValidation() { @@ -84,7 +93,7 @@ export class RegisterModalComponent implements OnInit { this.wrongLastNameBool = false; return; } - (<HTMLSelectElement>document.getElementById('lastName')).focus(); + //(<HTMLSelectElement>document.getElementById('lastName')).focus(); this.wrongLastNameBool = true; } usernameValidation() { @@ -92,7 +101,7 @@ export class RegisterModalComponent implements OnInit { this.wrongUsernameBool = false; return; } - (<HTMLSelectElement>document.getElementById('username-register')).focus(); + //(<HTMLSelectElement>document.getElementById('username-register')).focus(); this.wrongUsernameBool = true; } emailValidation() { @@ -100,7 +109,7 @@ export class RegisterModalComponent implements OnInit { this.wrongEmailBool = false; return; } - (<HTMLSelectElement>document.getElementById('email')).focus(); + //(<HTMLSelectElement>document.getElementById('email')).focus(); this.wrongEmailBool = true; } passwordValidation() { @@ -111,7 +120,11 @@ export class RegisterModalComponent implements OnInit { } this.pass1 = ''; //brisi obe ukucane lozinke this.pass2 = ''; - (<HTMLSelectElement>document.getElementById('pass1')).focus(); + this.password1Shown = false; + this.password2Shown = false; + this.password1Input.nativeElement.type = "password"; + this.password2Input.nativeElement.type = "password"; + //(<HTMLSelectElement>document.getElementById('pass1')).focus(); this.wrongPass1Bool = true; this.wrongPass2Bool = true; } @@ -148,7 +161,7 @@ export class RegisterModalComponent implements OnInit { this.authService.login(this.username, this.pass1).subscribe((response) => { this.authService.authenticate(response); - (<HTMLSelectElement>document.getElementById('closeButtonReg')).click(); + this.closeButton.nativeElement.click(); //(<HTMLSelectElement>document.getElementById('linkToLoginModal')).click(); }, (error) => console.warn(error)); } @@ -165,5 +178,25 @@ export class RegisterModalComponent implements OnInit { } } + togglePasswordShown(whichPassword: number) { + if (whichPassword == 1) { + this.password1Shown = !this.password1Shown; + + if (this.password1Shown) + this.password1Input.nativeElement.type = "text"; + else + this.password1Input.nativeElement.type = "password"; + } + else { + this.password2Shown = !this.password2Shown; + if (this.password2Shown) + this.password2Input.nativeElement.type = "text"; + else + this.password2Input.nativeElement.type = "password"; + } + } + cleanWarnings() { + this.resetData(); + } } |