connect developer profile page

Author: kflemin

src/@seed/api/user/user.service.ts

@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
 import { catchError, distinctUntilChanged, ReplaySubject, switchMap, take, tap } from 'rxjs'
-import type { CurrentUser, SetDefaultOrganizationResponse, UserUpdateRequest } from '@seed/api/user'
+import type { CurrentUser, GenerateApiKeyResponse, SetDefaultOrganizationResponse, UserUpdateRequest } from '@seed/api/user'
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
@@ -58,4 +58,22 @@ export class UserService {
       }),
     )
   }
+
+  /**
+   * Generate API Key
+   */
+  generateApiKey(): Observable<GenerateApiKeyResponse> {
+    return this.currentUser$.pipe(
+      take(1),
+      switchMap(({ id: userId }) => {
+        return this._httpClient.post<GenerateApiKeyResponse>(`api/v3/users/${userId}/generate_api_key/`,
+          {},
+        )
+      }),
+      tap(() => {
+        // Refresh user info after changing the API key
+        this.getCurrentUser().subscribe()
+      }),
+    )
+  }
 }

src/@seed/api/user/user.types.ts

@@ -34,3 +34,8 @@ export type SetDefaultOrganizationResponse = {
     };
   };
 }
+
+export type GenerateApiKeyResponse = {
+  status: string;
+  api_key: string;
+}

src/app/modules/profile/developer/developer.component.html

@@ -8,15 +8,24 @@ <h2 class="pb-5 text-xl">{{ t('Manage Your API Key') }}</h2>
       <div class="gt-xs:flex-row flex flex-col pt-4 text-center">
         <div>
           <span class="font-bold">API Key: </span>
-          <span class="bg-slate-200 px-5 py-3">{{ apikey }}</span>
+          <span class="bg-slate-200 px-5 py-3">{{ user.api_key }}</span>
         </div>
         <div class="pt-7">
-          <a mat-flat-button color="primary">
+          <button mat-flat-button color="primary" (click)="generateKey()">
             <span class="ml-2">{{ t('Get a New API Key') }}</span>
-          </a>
+          </button>
         </div>
       </div>
 
+      <!-- Alert -->
+      @if (showAlert) {
+        <div class="mb-4 mt-0">
+          <seed-alert class="-mb-4 mt-8" appearance="outline" [showIcon]="false" [type]="alert.type">
+            {{ alert.message }}
+          </seed-alert>
+        </div>
+      }
+
       <!-- Divider -->
       <div class="mb-5 mt-10 border-t"></div>
       <h3 class="text-l mb-5">{{ t('Example Usage') }}</h3>

src/app/modules/profile/developer/developer.component.ts

@@ -1,15 +1,65 @@
-import { Component, ViewEncapsulation } from '@angular/core'
+import type { OnDestroy, OnInit } from '@angular/core'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, ViewEncapsulation } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule } from '@angular/material/button'
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatIconModule } from '@angular/material/icon'
+import { Subject, takeUntil } from 'rxjs'
+import type { CurrentUser } from '@seed/api/user'
+import { UserService } from '@seed/api/user'
+import type { Alert } from '@seed/components'
+import { AlertComponent } from '@seed/components'
 import { SharedImports } from '@seed/directives'
 @Component({
   selector: 'seed-profile-developer',
   templateUrl: './developer.component.html',
   encapsulation: ViewEncapsulation.None,
-  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, ReactiveFormsModule, SharedImports],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AlertComponent, FormsModule, MatButtonModule, MatFormFieldModule, MatIconModule, ReactiveFormsModule, SharedImports],
 })
-export class ProfileDeveloperComponent {
-  apikey = '12345ABCDE'
+export class ProfileDeveloperComponent implements OnInit, OnDestroy {
+  private _userService = inject(UserService)
+  private _changeDetectorRef = inject(ChangeDetectorRef)
+
+  alert: Alert
+  showAlert = false
+  user: CurrentUser
+
+  private readonly _unsubscribeAll$ = new Subject<void>()
+
+  ngOnInit(): void {
+    // Subscribe to user changes
+    this._userService.currentUser$.pipe(takeUntil(this._unsubscribeAll$)).subscribe((currentUser) => {
+      this.user = currentUser
+
+      // Mark for check
+      this._changeDetectorRef.markForCheck()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this._unsubscribeAll$.next()
+    this._unsubscribeAll$.complete()
+  }
+
+  generateKey(): void {
+    // send request to generate a new key; refresh user
+    this._userService.generateApiKey().subscribe({
+      error: (error) => {
+        console.error('Error:', error)
+        this.alert = {
+          type: 'error',
+          message: 'Generate New Key Unsuccessful...',
+        }
+        this.showAlert = true
+      },
+      complete: () => {
+        this.alert = {
+          type: 'success',
+          message: 'New API Key Generated!',
+        }
+        this.showAlert = true
+      },
+    })
+  }
 }