From fb4d47b7bf7a0625090d94eb4238dd9ef9417be5 Mon Sep 17 00:00:00 2001
From: Max <walzen665@web.de>
Date: Sat, 1 Jun 2024 01:17:28 +0200
Subject: [PATCH] - Added user update modal - Refactored modal logic

---
 .../adminui/edituser/edituser.component.html  | 42 +++++++++++++
 .../adminui/edituser/edituser.component.scss  |  0
 .../edituser/edituser.component.spec.ts       | 23 +++++++
 .../adminui/edituser/edituser.component.ts    | 60 +++++++++++++++++++
 4 files changed, 125 insertions(+)
 create mode 100644 frontend/src/app/adminui/edituser/edituser.component.html
 create mode 100644 frontend/src/app/adminui/edituser/edituser.component.scss
 create mode 100644 frontend/src/app/adminui/edituser/edituser.component.spec.ts
 create mode 100644 frontend/src/app/adminui/edituser/edituser.component.ts

diff --git a/frontend/src/app/adminui/edituser/edituser.component.html b/frontend/src/app/adminui/edituser/edituser.component.html
new file mode 100644
index 0000000..88c2ec1
--- /dev/null
+++ b/frontend/src/app/adminui/edituser/edituser.component.html
@@ -0,0 +1,42 @@
+<div class="w-full">
+  <form>
+    <h3 class="font-bold text-lg mb-10">Edit your ({{parsedUsername}}) account details</h3>
+
+    <div class="mb-5">
+      <label class="block text-gray-700 text-sm font-bold mb-2 text-center" for="username">
+        Change username
+      </label>
+      <input class="input w-full shadow text-center" id="username" type="text" placeholder="Username" name="username"
+      [(ngModel)]="username"
+      >
+    </div>
+    <div class="mb-5">
+      <label class="block text-gray-700 text-sm font-bold mb-2 text-center" for="password">
+        Current password
+      </label>
+      <input class="input w-full shadow text-center" id="password" type="password" placeholder="********" name="originalPassword"
+      [(ngModel)]="originalPassword">
+    </div>
+    <div class="mb-5">
+      <label class="block text-gray-700 text-sm font-bold mb-2 text-center" for="password2">
+        New password
+      </label>
+      <input class="input w-full shadow text-center" id="password2" type="password" placeholder="********" name="newPassword"
+      [(ngModel)]="newPassword">
+    </div>
+    <div class="mb-5">
+      <label class="block text-gray-700 text-sm font-bold mb-2 text-center" for="password3">
+        Confirm new password
+      </label>
+      <input class="input w-full shadow text-center" id="password3" type="password" placeholder="********" name="newPasswordConfirm"
+      [(ngModel)]="confirmPassword">
+    </div>
+
+    <div class="modal-action">
+      <form method="dialog">
+        <!-- if there is a button in form, it will close the modal -->
+        <button class="btn" (click)="saveUser()">Save</button>
+      </form>
+    </div>
+  </form>
+</div>
diff --git a/frontend/src/app/adminui/edituser/edituser.component.scss b/frontend/src/app/adminui/edituser/edituser.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/app/adminui/edituser/edituser.component.spec.ts b/frontend/src/app/adminui/edituser/edituser.component.spec.ts
new file mode 100644
index 0000000..3537722
--- /dev/null
+++ b/frontend/src/app/adminui/edituser/edituser.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EdituserComponent } from './edituser.component';
+
+describe('EdituserComponent', () => {
+  let component: EdituserComponent;
+  let fixture: ComponentFixture<EdituserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EdituserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EdituserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/adminui/edituser/edituser.component.ts b/frontend/src/app/adminui/edituser/edituser.component.ts
new file mode 100644
index 0000000..d3eec46
--- /dev/null
+++ b/frontend/src/app/adminui/edituser/edituser.component.ts
@@ -0,0 +1,60 @@
+import {Component, Input, SimpleChanges} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import axios from "axios";
+import {firstValueFrom} from "rxjs";
+import {DevelopmentStore} from "../../../store/DevelopmentStore";
+import {AuthStore} from "../../../store/authStore";
+
+@Component({
+  selector: 'app-edituser',
+  standalone: true,
+    imports: [
+        FormsModule
+    ],
+  templateUrl: './edituser.component.html',
+  styleUrl: './edituser.component.scss'
+})
+export class EdituserComponent {
+  @Input("username") parsedUsername: string = "";
+  username: string = "";
+  originalPassword: string = "";
+  newPassword: string = "";
+  confirmPassword: string = "";
+
+  constructor(private developmentStore: DevelopmentStore, private authStore: AuthStore) {}
+
+  async saveUser() {
+
+    if(this.newPassword !== this.confirmPassword) {
+      alert("New password and confirm password do not match");
+      return;
+    }
+
+    try {
+      const response = await axios({
+        method: 'post',
+        url: this.developmentStore.getBaseUrl() + 'api/v1/secure/user/update',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer ' + await firstValueFrom(this.authStore.token$)
+        },
+        data: {
+          username: this.username,
+          originalPassword: this.originalPassword,
+          newPassword: this.newPassword,
+          confirmPassword: this.confirmPassword
+        }
+      });
+      // TODO: Implement backend logic for this
+      console.log("User updated successfully");
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['parsedUsername'] && !this.username) {
+      this.username = changes['parsedUsername'].currentValue;
+    }
+  }
+}