Changed settings page look

Changed settings page look for better fitment for site
iwokonl · Apr 21, 2024 · af1c23a · af1c23a
1 parent 6f5abfd
commit af1c23a
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 20 deletions.
diff --git a/Front/kantor-angular/src/app/settings/settings.component.html b/Front/kantor-angular/src/app/settings/settings.component.html
@@ -16,21 +16,22 @@
     </div>
     <div class="user-details">
       <p class="settings-title">Profile</p>
-      <!-- src/app/settings/settings.component.html -->
-      <div class="form-container" *ngIf="!isEditingUsername">
-        <p>{{ user_name }}</p>
-        <button class="change-username-button" (click)="toggleEditUsername()">Zmień</button>
-      </div>
-
-      <div class="form-container" *ngIf="isEditingUsername">
-        <form>
-          <input class="form-control change-username" [(ngModel)]="user_name" name="user_name" type="form">
-          <button class="change-username-button" type="submit">Zapisz</button>
+      <div class="form-container">
+        <a>Username: </a>
+        <form class="form-box">
+          <input class="change-username" [(ngModel)]="user_name" name="user_name" type="form" [disabled]="!isEditingUsername">
+          <button class="change-username-button" (click)="toggleEditUsername()">{{isEditingUsername ? 'Zapisz' : 'Zmień'}}</button>
         </form>
       </div>
       <p>Imię: {{firstname}}</p>
       <p>Nazwisko: {{lastname}}</p>
-      <p>Email: {{email}}</p>
+      <div class="form-container">
+        <a>Email: </a>
+        <form class="form-box">
+          <input class="change-email" [(ngModel)]="email" name="email" type="form" [disabled]="!isEditingEmail">
+          <button class="change-email-button" (click)="toggleEditEmail()">{{isEditingEmail ? 'Zapisz' : 'Zmień'}}</button>
+        </form>
+      </div>
     </div>
   </div>
 </body>

diff --git a/Front/kantor-angular/src/app/settings/settings.component.scss b/Front/kantor-angular/src/app/settings/settings.component.scss
@@ -1,22 +1,29 @@
 .settings-menu{
   left: 0;
   width: 20%;
+  min-width: 200px;
   height: 100vh;
   position: fixed;
+  padding-top: 1rem;
 }
-
 .user-details{
+  margin-left: 20%;
+  padding-left: 6rem;
+  padding-top: 2rem;
   right: 0;
   width: 80%;
   height: 100vh;
   position: fixed;
+  align-items: center;
 }
 .settings-title{
-  font-size: 2rem;
+  height: 3rem;
+  font-size: 3rem;
   margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 .profile{
-  background: #b9b9b9;
+  background: #dedede;
   font-weight: bold;
 }
 .nav-link
@@ -34,17 +41,54 @@
   margin-top: 1rem;
   margin-left: 5%;
   margin-right: 15%;
-
 }
 .form-container{
-  width: 20%;
-  height: 3%;
+  position: relative;
+  width: 21rem;
+  height: 30px;
+  display: flex; // make this a flex container
+  align-items: center; // center child elements vertically
+  margin-bottom: 1rem;
+}
+.form-box{
   display: flex;
 }
-.change-username-button{
-  top: 0;
+.change-username-button, .change-email-button {
+  margin-left: auto;
   float: right;
+  position: absolute;
+  right: 0;
+  height: 1.5rem;
+  width: 4rem;
+  text-align: center; // horizontally center the text
+  display: flex; // these three lines vertically center the text
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: none;
+  color: #006fff;
 }
 .change-username{
-  width: 60%;
+  margin-left: 0.5rem;
+  height: 1.5rem;
+  border-radius: 0.5rem;
+
+}
+.change-username:focus, change-email:focus {
+  //height: 25px;
+  border: none;
+  //outline: none;
+}
+.a, p{
+  margin-bottom: 1rem;
+  height: 30px;
+}
+.change-email-button{
+  height: 1.5rem;
+}
+.change-email {
+  margin-left: 0.5rem;
+  height: 1.5rem;
+  border-radius: 0.5rem;
+
 }
diff --git a/Front/kantor-angular/src/app/settings/settings.component.ts b/Front/kantor-angular/src/app/settings/settings.component.ts
@@ -60,7 +60,16 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.updateUserDetails();
     this.isEditingUsername = !this.isEditingUsername;
   }
+  isEditingEmail = false; // Zmienna kontrolująca stan pola formularza
 
+  toggleEditEmail() {
+    this.isEditingEmail = !this.isEditingEmail; // Przełączanie stanu pola formularza
+
+    // if (!this.isEditingEmail) {
+    //   // Jeśli pole formularza jest wyłączone, wysyłamy dane do serwera
+    //   this.sendDataToServer(this.email);
+    // }
+  }
   ngOnDestroy(): void {
     if (this.authStatusSub) {
       this.authStatusSub.unsubscribe();