RLH-12 | Implement username changing

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"
 }