From c692efb1df7dfba7417d93e80d3cbda6b7f7f182 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Sat, 2 Apr 2022 12:36:03 +0200 Subject: Profile page - validacija unosa kod izmene profila --- .../src/app/_pages/profile/profile.component.ts | 118 +++++++++++++++++++-- 1 file changed, 109 insertions(+), 9 deletions(-) (limited to 'frontend/src/app/_pages/profile/profile.component.ts') diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts index 3e9a0d11..7a7796da 100644 --- a/frontend/src/app/_pages/profile/profile.component.ts +++ b/frontend/src/app/_pages/profile/profile.component.ts @@ -15,6 +15,8 @@ import shared from '../../Shared'; }) export class ProfileComponent implements OnInit { + + user: User = new User(); pictures: Picture[] = PICTURES; @@ -71,6 +73,9 @@ export class ProfileComponent implements OnInit { } saveInfoChanges() { + if (!(this.checkInfoChanges())) //nije prosao regex + return; + let editedUser: User = { _id: this.user._id, username: this.username, @@ -84,18 +89,20 @@ export class ProfileComponent implements OnInit { this.userInfoService.changeUserInfo(editedUser).subscribe((response: any) =>{ if (this.user.username != editedUser.username) { //promenio username, ide logout this.user = editedUser; + this.resetInfo(); alert("Nakon promene korisničkog imena, moraćete ponovo da se ulogujete."); this.authService.logOut(); this.router.navigate(['']); return; } + alert("Podaci su uspešno promenjeni."); this.user = editedUser; console.log(this.user); this.resetInfo(); }, (error: any) =>{ if (error.error == "Username already exists!") { alert("Ukucano korisničko ime je već zauzeto!\nIzaberite neko drugo."); - (document.getElementById("inputUsername")).focus(); + //(document.getElementById("inputUsername")).focus(); //poruka obavestenja ispod inputa this.resetInfo(); } @@ -103,23 +110,26 @@ export class ProfileComponent implements OnInit { } savePasswordChanges() { + this.wrongPassBool = false; + this.wrongNewPassBool = false; + + if (!(this.checkPasswordChanges())) //nije prosao regex + return; + if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku return; - console.log("zeli da promeni lozinku"); + //console.log("zeli da promeni lozinku"); if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku this.wrongNewPassBool = true; this.resetNewPassInputs(); - console.log("Netacno ponovljena lozinka"); + //console.log("Netacno ponovljena lozinka"); return; } - this.wrongPassBool = false; - this.wrongNewPassBool = false; - let passwordArray: string[] = [this.oldPass, this.newPass1]; this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => { - console.log("PROMENIO LOZINKU"); + //console.log("PROMENIO LOZINKU"); this.resetNewPassInputs(); alert("Nakon promene lozinke, moraćete ponovo da se ulogujete."); this.authService.logOut(); @@ -128,13 +138,13 @@ export class ProfileComponent implements OnInit { console.log("error poruka: ", error.error); if (error.error == 'Wrong old password!') { this.wrongPassBool = true; - (document.getElementById("inputPassword")).focus(); + //(document.getElementById("inputPassword")).focus(); return; } else if (error.error == 'Identical password!') { alert("Stara i nova lozinka su identične."); this.resetNewPassInputs(); - (document.getElementById("inputNewPassword")).focus(); + //(document.getElementById("inputNewPassword")).focus(); return; } }); @@ -161,5 +171,95 @@ export class ProfileComponent implements OnInit { shared.photoId = this.photoId; } + checkPasswordChanges() : boolean { + this.passwordValidation(); + + if (!(this.wrongOldPassBool || this.wrongNewPass1Bool || this.wrongNewPass2Bool)) + return true; + return false; + } + checkInfoChanges() : boolean { + this.firstName = this.firstName.trim(); + this.lastName = this.lastName.trim(); + this.username = this.username.trim(); + this.email = this.email.trim(); + + this.firstNameValidation(); + this.lastNameValidation(); + this.usernameValidation(); + this.emailValidation(); + + if (!(this.wrongUsernameBool || this.wrongEmailBool || this.wrongFirstNameBool || this.wrongLastNameBool)) + return true; + return false; + } + + isCorrectName(element: string): boolean { + if (this.pattName.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectUsername(element: string): boolean { + if (this.pattUsername.test(element) && !(this.pattTwoSpaces.test(element)) && (element.length >= 1 && element.length <= 30)) + return true; + return false; + } + isCorrectEmail(element: string): boolean { + if (this.pattEmail.test(element.toLowerCase()) && element.length <= 320) + return true; + return false; + } + isCorrectPassword(element: string): boolean { + if (this.pattPassword.test(element)) + return true; + return false; + } + firstNameValidation() { + if (this.isCorrectName(this.firstName) == true) { + this.wrongFirstNameBool = false; + return; + } + //(document.getElementById('firstName')).focus(); + this.wrongFirstNameBool = true; + } + lastNameValidation() { + if (this.isCorrectName(this.lastName) == true) { + this.wrongLastNameBool = false; + return; + } + //(document.getElementById('lastName')).focus(); + this.wrongLastNameBool = true; + } + usernameValidation() { + if (this.isCorrectUsername(this.username) == true) { + this.wrongUsernameBool = false; + return; + } + //(document.getElementById('username-register')).focus(); + this.wrongUsernameBool = true; + } + emailValidation() { + if (this.isCorrectEmail(this.email) == true) { + this.wrongEmailBool = false; + return; + } + //(document.getElementById('email')).focus(); + this.wrongEmailBool = true; + } + passwordValidation() { + if (this.isCorrectPassword(this.oldPass) && this.isCorrectPassword(this.newPass1) && this.newPass1 == this.newPass2) { + this.wrongOldPassBool = false; + this.wrongNewPass1Bool = false; + this.wrongNewPass2Bool = false; + return; + } + this.oldPass = ''; + this.newPass1 = ''; + this.newPass2 = ''; + //(document.getElementById('pass1')).focus(); + this.wrongOldPassBool = true; + this.wrongNewPass1Bool = true; + this.wrongNewPass2Bool = true; + } } -- cgit v1.2.3 From 5beed95078c5eec21113c9b5fede1c167e653a5e Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Mon, 4 Apr 2022 00:40:39 +0200 Subject: Odradjen prikaz svih obavestenja korisniku u okviru aplikacije. (umesto alerta ide mat-dialog) --- frontend/angular.json | 8 +++---- frontend/src/app/Shared.ts | 25 ++++++++++++++++++- .../src/app/_elements/navbar/navbar.component.ts | 4 +++- .../alert-dialog/alert-dialog.component.css | 0 .../alert-dialog/alert-dialog.component.html | 7 ++++++ .../alert-dialog/alert-dialog.component.spec.ts | 25 +++++++++++++++++++ .../_modals/alert-dialog/alert-dialog.component.ts | 28 ++++++++++++++++++++++ .../_modals/login-modal/login-modal.component.html | 2 +- .../_modals/login-modal/login-modal.component.ts | 5 +++- .../register-modal/register-modal.component.ts | 12 +++++++--- .../app/_pages/add-model/add-model.component.ts | 18 +++++++------- .../filter-datasets/filter-datasets.component.ts | 8 +++---- .../app/_pages/my-models/my-models.component.ts | 3 ++- .../src/app/_pages/predict/predict.component.ts | 4 ++-- .../src/app/_pages/profile/profile.component.ts | 13 +++++----- frontend/src/app/app.module.ts | 10 +++++--- frontend/src/app/material.module.ts | 7 ++++-- 17 files changed, 140 insertions(+), 39 deletions(-) create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.css create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.html create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts create mode 100644 frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts (limited to 'frontend/src/app/_pages/profile/profile.component.ts') diff --git a/frontend/angular.json b/frontend/angular.json index b1aaac3f..6653e4b1 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -41,13 +41,13 @@ "budgets": [ { "type": "initial", - "maximumWarning": "500kb", - "maximumError": "1mb" + "maximumWarning": "2mb", + "maximumError": "4mb" }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "10kb", + "maximumError": "15kb" } ], "fileReplacements": [ diff --git a/frontend/src/app/Shared.ts b/frontend/src/app/Shared.ts index 31afb1a6..86e26687 100644 --- a/frontend/src/app/Shared.ts +++ b/frontend/src/app/Shared.ts @@ -1,9 +1,32 @@ +import { ElementRef } from "@angular/core"; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; + class Shared { constructor( public loggedIn: boolean, public username: string = '', - public photoId: string = '1' + public photoId: string = '1', + public dialog?: MatDialog + //public alertDialog?: ElementRef ) { } + + + openDialog(title: string, message: string): void { + console.log("USAO U OPEN DIALOG 1"); + + if (this.dialog) { + console.log("USAO U OPEN DIALOG 2"); + const dialogRef = this.dialog.open(AlertDialogComponent, { + //width: '250px', + data: { title: title, message: message } + }); + dialogRef.afterClosed().subscribe(res => { + //nesto + }); + } + } } export default new Shared(false); \ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 2e4bde91..368508ed 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -3,6 +3,7 @@ import { Location } from '@angular/common'; import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; import { UserInfoService } from 'src/app/_services/user-info.service'; +import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-navbar', @@ -14,7 +15,8 @@ export class NavbarComponent implements OnInit { currentUrl: string; shared = shared; - constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService) { + constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) { + shared.dialog = matDialog; this.currentUrl = this.location.path(); this.location.onUrlChange(() => { this.currentUrl = this.location.path(); diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html new file mode 100644 index 00000000..82365193 --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html @@ -0,0 +1,7 @@ +

{{data.title}}

+
+ {{data.message}} +
+
+ +
\ No newline at end of file diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts new file mode 100644 index 00000000..a93fc493 --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlertDialogComponent } from './alert-dialog.component'; + +describe('AlertDialogComponent', () => { + let component: AlertDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AlertDialogComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts new file mode 100644 index 00000000..e15f3c6f --- /dev/null +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import { Inject} from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; + +interface DialogData { + title: string; + message: string; +} + +@Component({ + selector: 'app-alert-dialog', + templateUrl: './alert-dialog.component.html', + styleUrls: ['./alert-dialog.component.css'] +}) +export class AlertDialogComponent { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: DialogData, + //public dialog: MatDialog + ) {} + + onOkClick(): void { + this.dialogRef.close(); + } + + +} 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 d7836848..03048155 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -3,7 +3,7 @@