aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_pages/profile
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app/_pages/profile')
-rw-r--r--frontend/src/app/_pages/profile/profile.component.css51
-rw-r--r--frontend/src/app/_pages/profile/profile.component.html66
2 files changed, 54 insertions, 63 deletions
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index 5565d105..428870da 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -1,44 +1,21 @@
-body{margin-top:20px;
-background-color:#f2f6fc;
-color:#69707a;
+.card{
+ background-color: transparent;
+ color:var(--offwhite)
}
-.img-account-profile {
- height: 10rem;
- border: 1px solid lightgray;
-}
-.rounded-circle {
- border-radius: 50% !important;
-}
-.card .card-header {
- font-weight: 500;
-}
-.card-header:first-child {
- border-radius: 0.35rem 0.35rem 0 0;
+
+.card-header{
+ background-color: var(--ns-primary-50);
+ color:var(--offwhite)
}
-.card-header {
- padding: 1rem 1.35rem;
- margin-bottom: 0;
- background-color: rgba(33, 40, 50, 0.03);
- border-bottom: 1px solid rgba(33, 40, 50, 0.125);
+.card-body{
+ background-color: var(--ns-bg-dark-50);
}
-.form-control, .dataTable-input {
- display: block;
+
+mat-form-field{
width: 100%;
- padding: 0.875rem 1.125rem;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1;
- color: #69707a;
- background-color: #fff;
- background-clip: padding-box;
- border: 1px solid #c5ccd6;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border-radius: 0.35rem;
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
-.selectedPicture {
- border: 2px solid darkgray;
+.danger-Text{
+ color:var(--ns-warn)
}
+
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index 557d69fd..37df4f14 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -27,17 +27,21 @@
<div class="row gx-3 mb-3">
<!-- Form Group (password)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
- <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
- <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
- <small *ngIf="wrongOldPassBool" class="form-text text-danger">Pogrešan format.</small>
+ <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Važeća lozinka</mat-label>
+ <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
+ </mat-form-field>
+ <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (new password)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
- <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
- <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
- <small *ngIf="wrongNewPass1Bool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Nova lozinka</mat-label>
+ <input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1">
+ </mat-form-field>
+ <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
+ <small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
@@ -46,15 +50,17 @@
<div class="col-md-6">
<div class="col text-center">
<!-- Save changes button-->
- <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
+ <button mat-raised-button color="primary" (click)="savePasswordChanges()">Promeni lozinku</button>
</div>
</div>
<!-- Form Group (new password again)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
- <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
- <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
- <small *ngIf="wrongNewPass2Bool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Ponovo nova lozinka</mat-label>
+ <input matInput id="inputNewPasswordAgain" name="inputNewPasswordAgain" placeholder="" type="password" [(ngModel)]="this.newPass2">
+ </mat-form-field>
+ <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
+ <small *ngIf="wrongNewPass2Bool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
</div>
@@ -74,15 +80,19 @@
<div class="row gx-3 mb-3">
<!-- Form Group (username)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputUsername">Korisničko ime (kako će ostali korisnici videti tvoje ime)</label>
- <input class="form-control" id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
- <small *ngIf="wrongUsernameBool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Korisničko ime (kako će ostali korisnici videti tvoje ime)</mat-label>
+ <input matInput id="inputUsername" name="inputUsername" type="text" [(ngModel)]="this.username">
+ </mat-form-field>
+ <small *ngIf="wrongUsernameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (email address)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputEmailAddress">Email adresa</label>
- <input class="form-control" id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
- <small *ngIf="wrongEmailBool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Email adresa</mat-label>
+ <input matInput id="inputEmailAddress" name="inputEmailAddress" type="email" [(ngModel)]="this.email">
+ </mat-form-field>
+ <small *ngIf="wrongEmailBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
@@ -90,15 +100,19 @@
<div class="row gx-3 mb-3">
<!-- Form Group (first name)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputFirstName">Ime</label>
- <input class="form-control" id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
- <small *ngIf="wrongFirstNameBool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Ime</mat-label>
+ <input matInput id="inputFirstName" name="inputFirstName" type="text" [(ngModel)]="this.firstName">
+ </mat-form-field>
+ <small *ngIf="wrongFirstNameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
<!-- Form Group (last name)-->
<div class="col-md-6">
- <label class="small mb-1" for="inputLastName">Prezime</label>
- <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
- <small *ngIf="wrongLastNameBool" class="form-text text-danger">Pogrešan format.</small>
+ <mat-form-field appearance="fill">
+ <mat-label>Prezime</mat-label>
+ <input matInput id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
+ </mat-form-field>
+ <small *ngIf="wrongLastNameBool" class="form-text danger-Text">Pogrešan format.</small>
</div>
</div>
@@ -121,7 +135,7 @@
<div class="row mt-5">
<div class="col text-center">
<!-- Save changes button-->
- <button class="btn btn-primary text-center" type="button" (click)="saveInfoChanges()">Sačuvaj izmene</button>
+ <button mat-raised-button color="primary" (click)="saveInfoChanges()" >Sačuvaj izmene</button>
</div>
</div>
</form>
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-25 13:40:15 +0000