Added edit user details dialog

packages/bridge-server/src/users/users.controller.ts

@@ -18,4 +18,11 @@ export class UsersController {
     updateLastLogin(@Body() body: any) {
         return this.usersService.updateLastLogin(body.id, body.nickname, body.picture, body.time);
     }
+
+    @UseGuards(JwtAuthGuard)
+    @Post(':id/update')
+    async updateUserDetails(@Body() body: any) {
+        await this.usersService.updateUserDetails(body.id, body.nickname, body.realname);
+        return this.usersService.findOne(body.id);
+    }
 }

packages/bridge-server/src/users/users.service.ts

@@ -28,6 +28,29 @@ export class UsersService {
     this.userModel.upsert({auth0id: id, nickname: nickname, picture: picture, lastLogin: time});
   }
 
+  async updateUserDetails(id, nickname, realname) {
+    try {
+      await this.sequelize.transaction( async t => {
+          const transactionHost = { transaction: t };
+          let target_user = await this.userModel.findOne(
+            { where: {auth0id: id} }
+          );
+
+          if(!target_user) 
+          {
+            throw new Error();
+          }
+
+          target_user.nickname = nickname;
+          target_user.realName = realname;
+
+          target_user.save();
+      });
+    } catch (error) {
+
+    }
+  }
+
   async claimRacer(user, racer: Racer) {
     try {
       await this.sequelize.transaction( async t => {

packages/bridge-ui/src/app/components/edit-user-details-dialog/edit-user-details-dialog.component.html

@@ -0,0 +1,16 @@
+<div class="signInForm">
+    <h1 mat-dialog-title>Edit</h1>
+    <mat-form-field class="full-width">
+        <mat-label>Nickname</mat-label>
+        <input matInput type="text" id="nickname" [formControl]="nickname" name="nickname" required>
+    </mat-form-field>
+    <br/>
+    <mat-form-field class="full-width">
+        <mat-label>Real Name</mat-label>
+        <input matInput type="text" id="realname" [formControl]="realname" name="realname" required>
+    </mat-form-field>
+    <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close (click)="onClickSubmit()">Submit</button>
+    </mat-dialog-actions>
+</div>

packages/bridge-ui/src/app/components/edit-user-details-dialog/edit-user-details-dialog.component.scss

@@ -0,0 +1,12 @@
+.signInForm {
+    width: 400px;
+    padding: 12px 24px 24px;
+  
+    igx-input-group + igx-input-group {
+        margin-top: 24px;
+    }
+  }
+  
+  .full-width {
+      width: 100%;
+  }

packages/bridge-ui/src/app/components/edit-user-details-dialog/edit-user-details-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditUserDetailsDialogComponent } from './edit-user-details-dialog.component';
+
+describe('EditUserDetailsDialogComponent', () => {
+  let component: EditUserDetailsDialogComponent;
+  let fixture: ComponentFixture<EditUserDetailsDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EditUserDetailsDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EditUserDetailsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/bridge-ui/src/app/components/edit-user-details-dialog/edit-user-details-dialog.component.ts

@@ -0,0 +1,62 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle,
+         MatDialogContent, MatDialogActions, MatDialogClose,} from '@angular/material/dialog';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { UsersService } from '../../services/users.service';
+
+@Component({
+  selector: 'app-edit-user-details-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatIconModule,
+  ],
+  templateUrl: './edit-user-details-dialog.component.html',
+  styleUrl: './edit-user-details-dialog.component.scss'
+})
+export class EditUserDetailsDialogComponent {
+  nickname = new FormControl('');
+  realname = new FormControl('');
+  additionalData: any;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) additionalData: any,
+    private usersService: UsersService
+  ) 
+  {
+    this.additionalData = additionalData;
+  }
+
+  ngOnInit() {
+    this.nickname.setValue(this.additionalData.currentNickName);
+    this.realname.setValue(this.additionalData.currentRealName);
+  }
+
+  onClickSubmit() {
+    let nickname = this.nickname.value != undefined ? this.nickname.value : "";
+    let realname = this.realname.value != undefined ? this.realname.value : "";
+
+    this.usersService.updateUserDetails(nickname, realname).subscribe(data =>{
+      console.log(data);
+    });
+  }
+}

packages/bridge-ui/src/app/pages/user/user.component.html

@@ -11,7 +11,7 @@
             </mat-card-content>
             @if(this.usersService.isLocalUser(this.userId)) {
                 <mat-card-actions>
-                    <button mat-button>Edit</button>
+                    <button mat-button (click)="openEditUserDetailsDialog()">Edit</button>
                 </mat-card-actions>
             }
         </mat-card>

packages/bridge-ui/src/app/pages/user/user.component.ts

@@ -8,6 +8,7 @@ import { MatDialog } from '@angular/material/dialog';
 
 import { UsersService } from '../../services/users.service';
 import { ClaimRacerDialogComponent } from '../../components/claim-racer-dialog/claim-racer-dialog.component';
+import { EditUserDetailsDialogComponent } from '../../components/edit-user-details-dialog/edit-user-details-dialog.component';
 import { ActivatedRoute } from '@angular/router';
 import { User } from '../../models/user.model';
 
@@ -54,6 +55,15 @@ export class UserComponent {
     this.dialog.open(ClaimRacerDialogComponent);
   }
 
+  openEditUserDetailsDialog() {
+    this.dialog.open(EditUserDetailsDialogComponent, {
+      data: { 
+        currentNickName: this.getUserName(),
+        currentRealName: this.getUserRealName()
+      }
+    });
+  }
+
   getUserName() : string {
     if(!this.user) {return ""}
 
@@ -81,7 +91,7 @@ export class UserComponent {
   getUserRealName() : string {
     if(!this.user) {return "??? ???"}
 
-    return "??? ???";
+    return this.user.realName;
   }
 
 }

packages/bridge-ui/src/app/services/users.service.ts

@@ -66,6 +66,11 @@ export class UsersService {
     return from(promise);
   }
 
+  updateUserDetails(nickname: string, realname: string) {
+    let id = this.localUser.sub;
+    return this.httpClient.post(this.serverEndpointService.getCurrentEndpoint()+"users/"+id+"/update", {id, nickname, realname});
+  }
+
   reportLogin() {
     if(!this.localUser) { return }
     let id = this.localUser.sub;