RLH-12 | Implement username changing

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {HTTP_INTERCEPTORS} from "@angular/common/http";
 import {AuthInterceptorService} from "./services/auth-interceptor.service";
-import {AfterViewChecked, AfterViewInit, Component, OnInit} from "@angular/core";
+import {Component} from "@angular/core";
 import {RouterOutlet} from "@angular/router";
 import {LoginComponent} from "./views/login/login.component";
 import {ApiService} from "./services/api.service";

src/app/app.config.ts

@@ -1,8 +1,8 @@
 import {ApplicationConfig} from '@angular/core';
-import {provideRouter, provideRoutes, withComponentInputBinding} from '@angular/router';
+import {provideRouter} from '@angular/router';
 
 import {routes} from './app.routes';
-import {provideHttpClient, withInterceptors, withInterceptorsFromDi} from "@angular/common/http";
+import {provideHttpClient, withInterceptorsFromDi} from "@angular/common/http";
 import {httpInterceptorProviders} from "./app.component";
 
 export const appConfig: ApplicationConfig = {

src/app/libraries/components/button/button.component.html

@@ -1,7 +1,10 @@
-<button
-  type="button"
-  class="m-1 {{classes}}"
-  [disabled]="isDisabled()"
-  (click)="button.click()">
-  {{ button.text }}
-</button>
+<ng-container *ngIf="!!button.visible && button.visible()">
+  <button
+    type="button"
+    class="m-1 {{classes}}"
+    [disabled]="isDisabled()"
+    (click)="button.click()">
+    {{ button.text }}
+  </button>
+</ng-container>
+

src/app/libraries/components/button/button.component.ts

@@ -1,10 +1,13 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {ButtonModel, ButtonType} from "./models/button.model";
+import {NgIf} from "@angular/common";
 
 @Component({
   selector: 'rlh-button',
   standalone: true,
-  imports: [],
+  imports: [
+    NgIf
+  ],
   templateUrl: './button.component.html',
   styleUrl: './button.component.scss'
 })
@@ -14,6 +17,7 @@ export class ButtonComponent implements OnInit
   @Input() button: ButtonModel = {
     text: 'text',
     disabled: () => false,
+    visible: () => true,
     click: () => {},
     type: ButtonType.PRIMARY
   };
@@ -26,12 +30,16 @@ export class ButtonComponent implements OnInit
     this.button.disabled = this.button.disabled
       ? this.button.disabled
       : () => false;
-    //
+
     setTimeout(() => {
       this.isDisabled = () => {
         return this.button.disabled();
       };
     });
+
+    this.button.visible =
+      this.button.visible ?
+        this.button.visible : () => true;
   }
 
     get classes(): string {

src/app/libraries/components/button/models/button.model.ts

@@ -3,9 +3,17 @@ export class ButtonModel {
   type: ButtonType;
   disabled: () => boolean;
   click: () => void;
+  visible?: () => boolean;
 }
 
 export enum ButtonType {
   LINK = "btn-link",
   PRIMARY = "btn-primary",
+  SECONDARY = "btn-secondary",
+  SUCCESS = "btn-success",
+  DANGER = "btn-danger",
+  WARNING = "btn-warning",
+  INFO = "btn-info",
+  LIGHT = "btn-light",
+  DARK = "btn-dark"
 }

src/app/services/api.service.ts

@@ -11,9 +11,7 @@ export class ApiService {
 
   constructor(
     private http: HttpClient
-  ) {
-
-  }
+  ) {}
 
 
   // v1 USERS

src/app/services/auth-interceptor.service.ts

@@ -11,7 +11,7 @@ export class AuthInterceptorService implements HttpInterceptor {
 
     const tokenId = localStorage.getItem('tokenId');
 
-    if (!!tokenId) {
+    if (tokenId) {
       const cloned = req.clone({
         headers: req.headers.set("Authorization",
           "Bearer " + tokenId)

src/app/views/account/account-navigation/account-navigation.component.ts

@@ -13,7 +13,7 @@ import {ButtonModel, ButtonType} from "../../../libraries/components/button/mode
 })
 export class AccountNavigationComponent {
 
-  @Output() onNavChange = new EventEmitter<string>();
+  @Output() navChange = new EventEmitter<string>();
 
   selectedMenu = "ACC";
 
@@ -22,7 +22,7 @@ export class AccountNavigationComponent {
     click: () =>
     {
       this.selectedMenu = 'ACC';
-      this.onNavChange.emit(this.selectedMenu);
+      this.navChange.emit(this.selectedMenu);
     },
     text: 'Account Management',
     type: ButtonType.LINK
@@ -32,7 +32,7 @@ export class AccountNavigationComponent {
     disabled: () => this.selectedMenu === 'PPF',
     click: () => {
       this.selectedMenu = 'PPF';
-      this.onNavChange.emit(this.selectedMenu);
+      this.navChange.emit(this.selectedMenu);
     },
     text: 'Public Profile',
     type: ButtonType.LINK

src/app/views/account/account.component.html

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-3">
       <app-account-navigation
-      (onNavChange)="navChanged($event)"
+      (navChange)="navChanged($event)"
       >
       </app-account-navigation>
     </div>

src/app/views/account/account.component.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import {ButtonComponent} from "../../libraries/components/button/button.component";
-import {ButtonModel} from "../../libraries/components/button/models/button.model";
 import {DashboardComponent} from "../dashboard/dashboard.component";
 import {NgIf} from "@angular/common";
 import {LoginComponent} from "../login/login.component";

src/app/views/beta/auth-form/auth-form.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import {LoginComponent} from "../../login/login.component";
 import {NgIf} from "@angular/common";
 import {RegisterComponent} from "../../register/register.component";
@@ -15,7 +15,7 @@ import {AuthService} from "../../../services/auth.service";
   templateUrl: './auth-form.component.html',
   styleUrl: './auth-form.component.scss'
 })
-export class AuthFormComponent {
+export class AuthFormComponent implements OnInit {
 
   constructor(private authService: AuthService) {
   }

src/app/views/dashboard/dashboard.component.html

@@ -12,10 +12,13 @@
         </div>
       </div>
       <div class="col-2">
-        <i>Modify</i>
+        Actions
         <div>
-          <rlh-button
-            [button]="editUserNameButton">
+          <rlh-button *ngIf="!isEditingUsername"
+            [button]="editUsernameButton">
+          </rlh-button>
+          <rlh-button *ngIf="isEditingUsername"
+            [button]="saveUsernameButton">
           </rlh-button>
         </div>
       </div>

src/app/views/dashboard/dashboard.component.ts

@@ -10,6 +10,7 @@ import {InputComponent} from "../../libraries/components/input/input.component";
 import {InputModel, InputType} from "../../libraries/components/input/input.model";
 import {ButtonComponent} from "../../libraries/components/button/button.component";
 import {ButtonModel, ButtonType} from "../../libraries/components/button/models/button.model";
+import {AccountService} from "../../services/account.service";
 
 @Component({
   selector: 'app-dashboard',
@@ -30,7 +31,7 @@ export class DashboardComponent implements OnInit {
 
   usernameInput: InputModel = {
     type: InputType.TEXT,
-    disabled: () => true,
+    disabled: () => !this.isEditingUsername,
     modelChange: () => {}
   }
 
@@ -52,12 +53,23 @@ export class DashboardComponent implements OnInit {
     modelChange: () => {}
   }
 
-  editUserNameButton: ButtonModel = {
-    disabled: () => false,
+  editUsernameButton: ButtonModel = {
+    disabled: () => this.isEditingUsername,
+    visible: () => !this.isEditingUsername,
     click: () => {
-      console.log(this.userData.username);
+      this.isEditingUsername = true;
     },
     text: 'Edit',
+    type: ButtonType.SECONDARY
+  }
+
+  saveUsernameButton: ButtonModel = {
+    disabled: () => !this.isEditingUsername,
+    visible: () => this.isEditingUsername,
+    click: () => {
+      this.saveUsername();
+    },
+    text: 'Save',
     type: ButtonType.PRIMARY
   }
 
@@ -68,7 +80,12 @@ export class DashboardComponent implements OnInit {
     createdAt: null
   }
 
-  constructor(private authService: AuthService, private apiService: ApiService, private router: Router) {
+  isEditingUsername = false;
+
+  constructor(private authService: AuthService,
+              private apiService: ApiService,
+              private accountService: AccountService,
+              private router: Router) {
   }
 
   ngOnInit(): void {
@@ -82,4 +99,19 @@ export class DashboardComponent implements OnInit {
     }
   }
 
+  saveUsername(): void {
+    this.isEditingUsername = false;
+    this.apiService.getCurrentUser().subscribe(res => {
+      if(!res) return;
+      let uuid = res.uuid;
+
+      if(!!uuid) {
+        this.accountService.changeUsername(uuid, this.userData.username)
+          .subscribe(res => {
+            this.userData.username = res;
+          });
+      }
+    });
+  }
+
 }

src/app/views/login/login.component.html

@@ -10,7 +10,7 @@
       *ngIf="!!loggedUser && !!loggedUser.username">
       <div class="col-4">
         <div class="form-group" data-mdb-input-init>
-          <label class="form-label">Username</label>
+          <p class="form-label">Username</p>
           <input type="text"
                  class="form-control"
                  name="loggedUser.username"
@@ -22,7 +22,7 @@
     <div class="row justify-content-center mb-2">
       <div class="col-4">
         <div class="form-group" data-mdb-input-init>
-          <label class="form-label">Email address</label>
+          <p class="form-label">Email address</p>
           <input type="text"
                  name="email"
                  [disabled]="isLoggedIn"
@@ -34,7 +34,7 @@
     <div class="row justify-content-center mb-4">
       <div class="col-4">
         <div class="form-group" data-mdb-input-init>
-          <label class="form-label">Password</label>
+          <p class="form-label">Password</p>
           <input type="password"
                  name="password"
                  [disabled]="isLoggedIn"

src/app/views/login/login.component.ts

@@ -36,7 +36,7 @@ export class LoginComponent implements OnInit {
 
   public attemptLogin() {
     this.authService.authenticate(this.email, this.password)
-      .subscribe(token => {
+      .subscribe(() => {
         this.router.navigate(['/']).then();
       });
   }