@ichgamer999/wmctest 1.0.0 → 1.0.2

package/README.md

@@ -203,3 +203,145 @@ npm run build:lib
 ## License
 
 MIT
+
+## BackendService (NEW in v1.0.1)
+
+Generic HTTP service for backend communication with automatic JWT authentication.
+
+### Basic Usage
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { BackendService } from '@yourusername/angular-auth-template';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+@Component({
+  selector: 'app-users',
+  template: `
+    @for (user of users(); track user.id) {
+      <div>{{ user.name }}</div>
+    }
+  `
+})
+export class UsersComponent {
+  backendService = inject(BackendService);
+  users = signal<User[]>([]);
+
+  ngOnInit() {
+    // GET request with automatic JWT token
+    this.backendService.get<User[]>('/users').subscribe(
+      users => this.users.set(users)
+    );
+  }
+}
+```
+
+### Available Methods
+
+```typescript
+// GET request
+backendService.get<T>(endpoint: string, params?: Record<string, string | number>)
+
+// POST request
+backendService.post<T>(endpoint: string, body: any)
+
+// PUT request
+backendService.put<T>(endpoint: string, body: any)
+
+// PATCH request
+backendService.patch<T>(endpoint: string, body: any)
+
+// DELETE request
+backendService.delete<T>(endpoint: string)
+
+// GET with standardized response
+backendService.getWithResponse<T>(endpoint: string, params?)
+
+// POST with standardized response
+backendService.postWithResponse<T>(endpoint: string, body: any)
+
+// Upload file
+backendService.uploadFile<T>(endpoint: string, file: File, additionalData?)
+
+// Download file
+backendService.downloadFile(endpoint: string): Observable<Blob>
+```
+
+### Examples
+
+**With Query Parameters:**
+```typescript
+backendService.get<User[]>('/users', { page: 1, limit: 10 }).subscribe();
+```
+
+**Create Resource:**
+```typescript
+const newUser = { name: 'John', email: 'john@example.com' };
+backendService.post<User>('/users', newUser).subscribe();
+```
+
+**Update Resource:**
+```typescript
+const updates = { name: 'Jane' };
+backendService.put<User>('/users/123', updates).subscribe();
+```
+
+**Delete Resource:**
+```typescript
+backendService.delete<void>('/users/123').subscribe();
+```
+
+**File Upload:**
+```typescript
+const file = event.target.files[0];
+backendService.uploadFile('/upload', file, { category: 'profile' }).subscribe();
+```
+
+**File Download:**
+```typescript
+backendService.downloadFile('/export/users').subscribe(blob => {
+  const url = window.URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'users.csv';
+  a.click();
+});
+```
+
+### ApiResponse Interface
+
+For standardized API responses:
+
+```typescript
+interface ApiResponse<T> {
+  data: T;
+  message?: string;
+  success: boolean;
+}
+
+// Usage
+backendService.getWithResponse<User[]>('/users').subscribe(response => {
+  if (response.success) {
+    console.log(response.data);
+    console.log(response.message);
+  }
+});
+```
+
+### Configuration
+
+Set your API base URL:
+
+```typescript
+ngOnInit() {
+  this.backendService.baseUrl = 'https://api.example.com';
+}
+```
+
+**Note:** All requests automatically include the JWT token via `authInterceptor`.
+

package/dist/app/backend/backend-demo.component.d.ts

@@ -0,0 +1,10 @@
+import { BackendService } from './backend.service';
+export declare class BackendDemoComponent {
+    backendService: BackendService;
+    response: import("@angular/core").WritableSignal<any>;
+    getUsers(): void;
+    createUser(): void;
+    updateUser(): void;
+    deleteUser(): void;
+}
+//# sourceMappingURL=backend-demo.component.d.ts.map

package/dist/app/backend/backend-demo.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-demo.component.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend-demo.component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQnD,qBAiIa,oBAAoB;IAC/B,cAAc,iBAA0B;IACxC,QAAQ,8CAAqB;IAE7B,QAAQ;IAQR,UAAU;IAaV,UAAU;IAaV,UAAU;CAOX"}

package/dist/app/backend/backend-demo.component.js

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { Component, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BackendService } from './backend.service';
+let BackendDemoComponent = class BackendDemoComponent {
+    backendService = inject(BackendService);
+    response = signal(null);
+    getUsers() {
+        this.response.set(null);
+        this.backendService.get('/users').subscribe({
+            next: (users) => this.response.set(users)
+        });
+    }
+    createUser() {
+        this.response.set(null);
+        const newUser = {
+            name: 'John Doe',
+            email: 'john@example.com'
+        };
+        this.backendService.post('/users', newUser).subscribe({
+            next: (user) => this.response.set(user)
+        });
+    }
+    updateUser() {
+        this.response.set(null);
+        const updatedUser = {
+            name: 'Jane Doe',
+            email: 'jane@example.com'
+        };
+        this.backendService.put('/users/1', updatedUser).subscribe({
+            next: (user) => this.response.set(user)
+        });
+    }
+    deleteUser() {
+        this.response.set(null);
+        this.backendService.delete('/users/1').subscribe({
+            next: () => this.response.set({ message: 'User deleted successfully' })
+        });
+    }
+};
+BackendDemoComponent = __decorate([
+    Component({
+        selector: 'app-backend-demo',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div class="demo-container">
+      <h2>Backend Service Demo</h2>
+      <p class="subtitle">Using Signals for reactive state management</p>
+      
+      <div class="actions">
+        <button (click)="getUsers()">Get Users</button>
+        <button (click)="createUser()">Create User</button>
+        <button (click)="updateUser()">Update User</button>
+        <button (click)="deleteUser()">Delete User</button>
+      </div>
+      
+      @if (backendService.loading()) {
+        <div class="loading">Loading...</div>
+      }
+      
+      @if (backendService.error()) {
+        <div class="error">
+          {{ backendService.error() }}
+          <button (click)="backendService.clearError()">✕</button>
+        </div>
+      }
+      
+      @if (response()) {
+        <div class="response">
+          <h3>Response:</h3>
+          <pre>{{ response() | json }}</pre>
+        </div>
+      }
+      
+      <div class="info">
+        <h3>Features:</h3>
+        <ul>
+          <li>✅ Global loading state with Signal</li>
+          <li>✅ Global error state with Signal</li>
+          <li>✅ Automatic loading/error management</li>
+          <li>✅ Type-safe API calls</li>
+        </ul>
+      </div>
+    </div>
+  `,
+        styles: [`
+    .demo-container {
+      padding: 2rem;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    .subtitle {
+      color: #666;
+      margin-bottom: 2rem;
+    }
+    
+    .actions {
+      display: flex;
+      gap: 1rem;
+      margin: 2rem 0;
+      flex-wrap: wrap;
+    }
+    
+    button {
+      padding: 0.75rem 1.5rem;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    
+    button:hover {
+      background: #0056b3;
+    }
+    
+    .loading, .error, .response, .info {
+      padding: 1rem;
+      margin: 1rem 0;
+      border-radius: 4px;
+    }
+    
+    .loading {
+      background: #e3f2fd;
+      color: #1976d2;
+      font-weight: 500;
+    }
+    
+    .error {
+      background: #ffebee;
+      color: #c62828;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .error button {
+      background: transparent;
+      color: #c62828;
+      padding: 0.25rem 0.5rem;
+      font-size: 1.2rem;
+    }
+    
+    .response {
+      background: #f5f5f5;
+      border: 1px solid #ddd;
+    }
+    
+    .info {
+      background: #e8f5e9;
+      border-left: 4px solid #4caf50;
+    }
+    
+    .info ul {
+      margin: 0.5rem 0 0;
+      padding-left: 1.5rem;
+    }
+    
+    .info li {
+      margin: 0.5rem 0;
+    }
+    
+    pre {
+      overflow-x: auto;
+      margin: 0.5rem 0 0;
+    }
+  `]
+    })
+], BackendDemoComponent);
+export { BackendDemoComponent };

package/dist/app/backend/backend.service.d.ts

@@ -0,0 +1,25 @@
+import { Observable } from 'rxjs';
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    success: boolean;
+}
+export declare class BackendService {
+    private readonly http;
+    baseUrl: string;
+    private _loading;
+    private _error;
+    readonly loading: import("@angular/core").Signal<boolean>;
+    readonly error: import("@angular/core").Signal<string>;
+    get<T>(endpoint: string, params?: Record<string, string | number>): Observable<T>;
+    post<T>(endpoint: string, body: any): Observable<T>;
+    put<T>(endpoint: string, body: any): Observable<T>;
+    patch<T>(endpoint: string, body: any): Observable<T>;
+    delete<T>(endpoint: string): Observable<T>;
+    getWithResponse<T>(endpoint: string, params?: Record<string, string | number>): Observable<ApiResponse<T>>;
+    postWithResponse<T>(endpoint: string, body: any): Observable<ApiResponse<T>>;
+    uploadFile<T>(endpoint: string, file: File, additionalData?: Record<string, any>): Observable<T>;
+    downloadFile(endpoint: string): Observable<Blob>;
+    clearError(): void;
+}
+//# sourceMappingURL=backend.service.d.ts.map

package/dist/app/backend/backend.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend.service.d.ts","sourceRoot":"","sources":["../../../src/app/backend/backend.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAIlC,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAGa,cAAc;IACzB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAsB;IAE3C,OAAO,SAA+B;IAEtC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,MAAM,CAAsB;IAEpC,SAAgB,OAAO,0CAA8B;IACrD,SAAgB,KAAK,yCAA4B;IAEjD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAejF,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAcnD,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAclD,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAcpD,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC;IAc1C,eAAe,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAe1G,gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAc5E,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;IAuBhG,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC;IAgBhD,UAAU,IAAI,IAAI;CAGnB"}

package/dist/app/backend/backend.service.js

@@ -0,0 +1,114 @@
+import { __decorate } from "tslib";
+import { Injectable, inject, signal } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { tap, catchError } from 'rxjs/operators';
+import { throwError } from 'rxjs';
+let BackendService = class BackendService {
+    http = inject(HttpClient);
+    baseUrl = 'http://localhost:3000/api';
+    _loading = signal(false);
+    _error = signal('');
+    loading = this._loading.asReadonly();
+    error = this._error.asReadonly();
+    get(endpoint, params) {
+        this._loading.set(true);
+        this._error.set('');
+        const httpParams = params ? new HttpParams({ fromObject: params }) : undefined;
+        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    post(endpoint, body) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.post(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    put(endpoint, body) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.put(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    patch(endpoint, body) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.patch(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    delete(endpoint) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.delete(`${this.baseUrl}${endpoint}`).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    getWithResponse(endpoint, params) {
+        this._loading.set(true);
+        this._error.set('');
+        const httpParams = params ? new HttpParams({ fromObject: params }) : undefined;
+        return this.http.get(`${this.baseUrl}${endpoint}`, { params: httpParams }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    postWithResponse(endpoint, body) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.post(`${this.baseUrl}${endpoint}`, body).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Request failed');
+            return throwError(() => err);
+        }));
+    }
+    uploadFile(endpoint, file, additionalData) {
+        this._loading.set(true);
+        this._error.set('');
+        const formData = new FormData();
+        formData.append('file', file);
+        if (additionalData) {
+            Object.keys(additionalData).forEach(key => {
+                formData.append(key, additionalData[key]);
+            });
+        }
+        return this.http.post(`${this.baseUrl}${endpoint}`, formData).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Upload failed');
+            return throwError(() => err);
+        }));
+    }
+    downloadFile(endpoint) {
+        this._loading.set(true);
+        this._error.set('');
+        return this.http.get(`${this.baseUrl}${endpoint}`, {
+            responseType: 'blob'
+        }).pipe(tap(() => this._loading.set(false)), catchError(err => {
+            this._loading.set(false);
+            this._error.set(err.message || 'Download failed');
+            return throwError(() => err);
+        }));
+    }
+    clearError() {
+        this._error.set('');
+    }
+};
+BackendService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], BackendService);
+export { BackendService };

package/dist/app/home/home.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/app/home/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,qBA0Da,aAAa;IACxB,WAAW,cAAuB;IAElC,MAAM;CAGP"}
+{"version":3,"file":"home.component.d.ts","sourceRoot":"","sources":["../../../src/app/home/home.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,qBAgFa,aAAa;IACxB,WAAW,cAAuB;IAElC,MAAM;CAGP"}

package/dist/app/home/home.component.js

@@ -22,7 +22,10 @@ HomeComponent = __decorate([
           <p>You are logged in as: <strong>{{ username }}</strong></p>
         }
         
-        <button (click)="logout()">Logout</button>
+        <div class="actions">
+          <a href="/demo" class="btn btn-primary">Backend Service Demo</a>
+          <button (click)="logout()" class="btn btn-danger">Logout</button>
+        </div>
       </div>
     </div>
   `,
@@ -52,17 +55,36 @@ HomeComponent = __decorate([
       color: #666;
     }
     
-    button {
+    .actions {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+    }
+    
+    .btn {
       padding: 0.75rem 2rem;
-      background: #dc3545;
       color: white;
       border: none;
       border-radius: 4px;
       font-size: 1rem;
       cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+    }
+    
+    .btn-primary {
+      background: #007bff;
+    }
+    
+    .btn-primary:hover {
+      background: #0056b3;
+    }
+    
+    .btn-danger {
+      background: #dc3545;
     }
     
-    button:hover {
+    .btn-danger:hover {
       background: #c82333;
     }
   `]

package/dist/public-api.d.ts

@@ -3,4 +3,7 @@ export { authInterceptor } from './app/auth/auth.interceptor';
 export { authGuard } from './app/guards/auth.guard';
 export { LoginComponent } from './app/login/login.component';
 export { HomeComponent } from './app/home/home.component';
+export { BackendService } from './app/backend/backend.service';
+export { BackendDemoComponent } from './app/backend/backend-demo.component';
+export type { ApiResponse } from './app/backend/backend.service';
 //# sourceMappingURL=public-api.d.ts.map

package/dist/public-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,YAAY,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/public-api.js

@@ -3,3 +3,5 @@ export { authInterceptor } from './app/auth/auth.interceptor';
 export { authGuard } from './app/guards/auth.guard';
 export { LoginComponent } from './app/login/login.component';
 export { HomeComponent } from './app/home/home.component';
+export { BackendService } from './app/backend/backend.service';
+export { BackendDemoComponent } from './app/backend/backend-demo.component';

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "@ichgamer999/wmctest",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Minimalist Angular authentication template with signals, JWT token handling, and HTTP interceptors",
-  "keywords": ["angular", "authentication", "jwt", "signals", "template"],
-  "author": "Your Name",
+  "keywords": [
+    "angular",
+    "authentication",
+    "jwt",
+    "signals",
+    "template"
+  ],
+  "author": "ICHGamer999",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/app/app.routes.ts

@@ -7,6 +7,11 @@ export const routes: Routes = [
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
     canActivate: [authGuard]
   },
+  {
+    path: 'demo',
+    loadComponent: () => import('./backend/backend-demo.component').then(m => m.BackendDemoComponent),
+    canActivate: [authGuard]
+  },
   {
     path: 'login',
     loadComponent: () => import('./login/login.component').then(m => m.LoginComponent)