RLH-12 | Implement username changing

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off",
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
+      ],
+      "rules": {}
+    }
+  ]
+}

angular.json

@@ -102,8 +102,22 @@
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ]
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -31,10 +32,18 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.3.11",
+    "@angular-eslint/builder": "17.5.3",
+    "@angular-eslint/eslint-plugin": "17.5.3",
+    "@angular-eslint/eslint-plugin-template": "17.5.3",
+    "@angular-eslint/schematics": "17.5.3",
+    "@angular-eslint/template-parser": "17.5.3",
     "@angular/cli": "^17.3.11",
     "@angular/compiler-cli": "^17.3.0",
     "@angular/localize": "^17.3.0",
     "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "7.11.0",
+    "@typescript-eslint/parser": "7.11.0",
+    "eslint": "^8.57.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

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
+<ng-container *ngIf="!!button.visible && button.visible()">
-  type="button"
+  <button
-  class="m-1 {{classes}}"
+    type="button"
-  [disabled]="isDisabled()"
+    class="m-1 {{classes}}"
-  (click)="button.click()">
+    [disabled]="isDisabled()"
-  {{ button.text }}
+    (click)="button.click()">
-</button>
+    {{ 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
+          <rlh-button *ngIf="!isEditingUsername"
-            [button]="editUserNameButton">
+            [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 = {
+  editUsernameButton: ButtonModel = {
-    disabled: () => false,
+    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();
       });
   }