@ichgamer999/wmctest 1.0.0

package/.final-checklist.txt

@@ -0,0 +1,33 @@
+Angular Auth Template - Final Checklist
+========================================
+
+✓ AuthService with Signals implemented
+✓ login() function - exact implementation as provided
+✓ logout() function - exact implementation as provided  
+✓ authInterceptor - exact implementation as provided
+✓ Functional authGuard created
+✓ LoginComponent with UI
+✓ HomeComponent example page
+✓ Routes configured with guards
+✓ HTTP client with interceptor configured
+✓ TypeScript compilation: SUCCESS
+✓ App build: SUCCESS
+✓ Library build: SUCCESS
+✓ package.json configured for npm
+✓ All exports in public-api.ts
+✓ 8 documentation files created
+✓ MIT License added
+✓ .npmignore configured
+✓ Modern Angular 21 features (Signals, Functional APIs)
+✓ Minimalistic design (280 lines of code)
+
+READY FOR:
+- npm publish
+- Development (npm start)
+- Customization
+- Integration into projects
+
+Package Name: @yourusername/angular-auth-template
+Version: 1.0.0
+Angular: 21.2.0
+TypeScript: 5.9.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Your Name
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,205 @@
+# Angular Authentication Template
+
+A minimalist Angular authentication template using modern Angular features including **Signals**, functional guards, and functional HTTP interceptors.
+
+## Features
+
+- ✨ **Angular Signals** for reactive state management
+- 🔐 **JWT Token Authentication** with automatic token handling
+- 🛡️ **HTTP Interceptor** for automatic Authorization header injection
+- 🚦 **Route Guards** using functional guards (CanActivateFn)
+- 📦 **Standalone Components** - no modules required
+- 🎨 **Minimal & Clean** - ready to customize
+
+## Installation
+
+```bash
+npm install @yourusername/angular-auth-template
+```
+
+## Quick Start
+
+### 1. Configure Your App
+
+In your `app.config.ts`:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { authInterceptor } from '@yourusername/angular-auth-template';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(withInterceptors([authInterceptor]))
+  ]
+};
+```
+
+### 2. Set Up Routes
+
+In your `app.routes.ts`:
+
+```typescript
+import { Routes } from '@angular/router';
+import { authGuard, LoginComponent, HomeComponent } from '@yourusername/angular-auth-template';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    canActivate: [authGuard]
+  },
+  {
+    path: 'login',
+    component: LoginComponent
+  }
+];
+```
+
+### 3. Initialize Auth Service
+
+In your root component (`app.ts`):
+
+```typescript
+import { Component, inject, OnInit } from '@angular/core';
+import { AuthService } from '@yourusername/angular-auth-template';
+
+@Component({
+  selector: 'app-root',
+  template: '<router-outlet></router-outlet>'
+})
+export class App implements OnInit {
+  private authService = inject(AuthService);
+
+  ngOnInit() {
+    this.authService.initAuth();
+  }
+}
+```
+
+## API
+
+### AuthService
+
+```typescript
+class AuthService {
+  // Observable user signal
+  readonly user: Signal<string>;
+  
+  // Set your API base URL
+  baseUrl: string;
+  
+  // Login method
+  login(username: string, password: string): Observable<{ token: string }>;
+  
+  // Logout method
+  logout(): void;
+  
+  // Check authentication status
+  isLoggedIn(): boolean;
+  
+  // Get stored token
+  getToken(): string | null;
+  
+  // Initialize auth from localStorage
+  initAuth(): void;
+}
+```
+
+### Usage Example
+
+```typescript
+import { Component, inject, signal } from '@angular/core';
+import { AuthService } from '@yourusername/angular-auth-template';
+
+@Component({
+  selector: 'app-profile',
+  template: `
+    <div>
+      <p>Logged in as: {{ authService.user() }}</p>
+      <button (click)="logout()">Logout</button>
+    </div>
+  `
+})
+export class ProfileComponent {
+  authService = inject(AuthService);
+  
+  logout() {
+    this.authService.logout();
+  }
+}
+```
+
+## Configuration
+
+Set your API base URL in the AuthService:
+
+```typescript
+import { AuthService } from '@yourusername/angular-auth-template';
+
+const authService = inject(AuthService);
+authService.baseUrl = 'https://your-api.com/api';
+```
+
+## Expected Backend Response
+
+The login endpoint should return:
+
+```json
+{
+  "token": "your-jwt-token"
+}
+```
+
+## Components Included
+
+- **LoginComponent** - Ready-to-use login form with error handling
+- **HomeComponent** - Example protected home page
+- **authGuard** - Functional route guard
+- **authInterceptor** - Functional HTTP interceptor
+
+## Customization
+
+All components are standalone and can be easily customized. Simply copy the components to your project and modify as needed.
+
+## Development
+
+Run the demo app:
+
+```bash
+npm start
+```
+
+Build the library:
+
+```bash
+npm run build:lib
+```
+
+## Publishing to npm
+
+1. Update `package.json` with your details:
+   - Change `@yourusername/angular-auth-template` to your package name
+   - Update author, repository URL, etc.
+
+2. Build the library:
+   ```bash
+   npm run build:lib
+   ```
+
+3. Login to npm:
+   ```bash
+   npm login
+   ```
+
+4. Publish:
+   ```bash
+   npm publish --access public
+   ```
+
+## License
+
+MIT

package/dist/app/auth/auth.interceptor.d.ts

@@ -0,0 +1,3 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+export declare const authInterceptor: HttpInterceptorFn;
+//# sourceMappingURL=auth.interceptor.d.ts.map

package/dist/app/auth/auth.interceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.interceptor.d.ts","sourceRoot":"","sources":["../../../src/app/auth/auth.interceptor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,eAAO,MAAM,eAAe,EAAE,iBAS7B,CAAC"}

package/dist/app/auth/auth.interceptor.js

@@ -0,0 +1,11 @@
+import { inject } from '@angular/core';
+import { AuthService } from './auth.service';
+export const authInterceptor = (req, next) => {
+    const authService = inject(AuthService);
+    if (!authService.isLoggedIn())
+        return next(req);
+    const cloned = req.clone({
+        headers: req.headers.set('Authorization', `Bearer ${authService.getToken()}`)
+    });
+    return next(cloned);
+};

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

@@ -0,0 +1,17 @@
+export declare class AuthService {
+    private static readonly tokenKey;
+    private readonly httpClient;
+    private readonly router;
+    private _user;
+    readonly user: import("@angular/core").Signal<string>;
+    baseUrl: string;
+    login(username: string, password: string): import("rxjs").Observable<{
+        token: string;
+    }>;
+    logout(): void;
+    getToken(): string | null;
+    isLoggedIn(): boolean;
+    initAuth(): void;
+    private getUsernameFromToken;
+}
+//# sourceMappingURL=auth.service.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auth.service.d.ts","sourceRoot":"","sources":["../../../src/app/auth/auth.service.ts"],"names":[],"mappings":"AAKA,qBAGa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAgB;IAChD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkB;IAEzC,OAAO,CAAC,KAAK,CAAsB;IACnC,SAAgB,IAAI,yCAA2B;IAE/C,OAAO,SAA+B;IAEtC,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;eAErB,MAAM;;IAUzB,MAAM,IAAI,IAAI;IAMd,QAAQ,IAAI,MAAM,GAAG,IAAI;IAIzB,UAAU,IAAI,OAAO;IAIrB,QAAQ,IAAI,IAAI;IAQhB,OAAO,CAAC,oBAAoB;CAQ7B"}

package/dist/app/auth/auth.service.js

@@ -0,0 +1,56 @@
+var AuthService_1;
+import { __decorate } from "tslib";
+import { Injectable, inject, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { tap } from 'rxjs/operators';
+let AuthService = class AuthService {
+    static { AuthService_1 = this; }
+    static tokenKey = 'auth_token';
+    httpClient = inject(HttpClient);
+    router = inject(Router);
+    _user = signal('');
+    user = this._user.asReadonly();
+    baseUrl = 'http://localhost:3000/api';
+    login(username, password) {
+        return this.httpClient
+            .post(`${this.baseUrl}/token`, { username: username, password: password })
+            .pipe(tap(response => {
+            localStorage.setItem(AuthService_1.tokenKey, response.token);
+            this._user.set(username);
+        }));
+    }
+    logout() {
+        localStorage.removeItem(AuthService_1.tokenKey);
+        this._user.set('');
+        this.router.navigate(['/login']);
+    }
+    getToken() {
+        return localStorage.getItem(AuthService_1.tokenKey);
+    }
+    isLoggedIn() {
+        return !!this.getToken();
+    }
+    initAuth() {
+        const token = this.getToken();
+        if (token) {
+            const username = this.getUsernameFromToken(token);
+            this._user.set(username);
+        }
+    }
+    getUsernameFromToken(token) {
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]));
+            return payload.sub || payload.username || '';
+        }
+        catch {
+            return '';
+        }
+    }
+};
+AuthService = AuthService_1 = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], AuthService);
+export { AuthService };

package/dist/app/guards/auth.guard.d.ts

@@ -0,0 +1,3 @@
+import { CanActivateFn } from '@angular/router';
+export declare const authGuard: CanActivateFn;
+//# sourceMappingURL=auth.guard.d.ts.map

package/dist/app/guards/auth.guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.guard.d.ts","sourceRoot":"","sources":["../../../src/app/guards/auth.guard.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGxD,eAAO,MAAM,SAAS,EAAE,aASvB,CAAC"}

package/dist/app/guards/auth.guard.js

@@ -0,0 +1,11 @@
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../auth/auth.service';
+export const authGuard = () => {
+    const authService = inject(AuthService);
+    const router = inject(Router);
+    if (authService.isLoggedIn()) {
+        return true;
+    }
+    return router.createUrlTree(['/login']);
+};

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

@@ -0,0 +1,6 @@
+import { AuthService } from '../auth/auth.service';
+export declare class HomeComponent {
+    authService: AuthService;
+    logout(): void;
+}
+//# sourceMappingURL=home.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { Component, inject } from '@angular/core';
+import { AuthService } from '../auth/auth.service';
+import { CommonModule } from '@angular/common';
+let HomeComponent = class HomeComponent {
+    authService = inject(AuthService);
+    logout() {
+        this.authService.logout();
+    }
+};
+HomeComponent = __decorate([
+    Component({
+        selector: 'app-home',
+        standalone: true,
+        imports: [CommonModule],
+        template: `
+    <div class="home-container">
+      <div class="home-content">
+        <h1>Welcome!</h1>
+        
+        @if (authService.user(); as username) {
+          <p>You are logged in as: <strong>{{ username }}</strong></p>
+        }
+        
+        <button (click)="logout()">Logout</button>
+      </div>
+    </div>
+  `,
+        styles: [`
+    .home-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background: #f5f5f5;
+    }
+    
+    .home-content {
+      background: white;
+      padding: 3rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    
+    h1 {
+      margin: 0 0 1rem;
+    }
+    
+    p {
+      margin: 0 0 2rem;
+      color: #666;
+    }
+    
+    button {
+      padding: 0.75rem 2rem;
+      background: #dc3545;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      cursor: pointer;
+    }
+    
+    button:hover {
+      background: #c82333;
+    }
+  `]
+    })
+], HomeComponent);
+export { HomeComponent };

package/dist/app/login/login.component.d.ts

@@ -0,0 +1,10 @@
+export declare class LoginComponent {
+    private authService;
+    private router;
+    username: string;
+    password: string;
+    loading: import("@angular/core").WritableSignal<boolean>;
+    error: import("@angular/core").WritableSignal<string>;
+    onSubmit(): void;
+}
+//# sourceMappingURL=login.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"login.component.d.ts","sourceRoot":"","sources":["../../../src/app/login/login.component.ts"],"names":[],"mappings":"AAMA,qBAyHa,cAAc;IACzB,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,MAAM,CAAkB;IAEhC,QAAQ,SAAM;IACd,QAAQ,SAAM;IACd,OAAO,kDAAiB;IACxB,KAAK,iDAAc;IAEnB,QAAQ;CAeT"}

package/dist/app/login/login.component.js

@@ -0,0 +1,152 @@
+import { __decorate } from "tslib";
+import { Component, inject, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { AuthService } from '../auth/auth.service';
+import { CommonModule } from '@angular/common';
+let LoginComponent = class LoginComponent {
+    authService = inject(AuthService);
+    router = inject(Router);
+    username = '';
+    password = '';
+    loading = signal(false);
+    error = signal('');
+    onSubmit() {
+        this.loading.set(true);
+        this.error.set('');
+        this.authService.login(this.username, this.password).subscribe({
+            next: () => {
+                this.loading.set(false);
+                this.router.navigate(['/']);
+            },
+            error: (err) => {
+                this.loading.set(false);
+                this.error.set(err.error?.message || 'Login failed. Please try again.');
+            }
+        });
+    }
+};
+LoginComponent = __decorate([
+    Component({
+        selector: 'app-login',
+        standalone: true,
+        imports: [FormsModule, CommonModule],
+        template: `
+    <div class="login-container">
+      <form (ngSubmit)="onSubmit()" class="login-form">
+        <h2>Login</h2>
+        
+        @if (error()) {
+          <div class="error">{{ error() }}</div>
+        }
+        
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input
+            id="username"
+            type="text"
+            [(ngModel)]="username"
+            name="username"
+            required
+            autocomplete="username"
+          />
+        </div>
+        
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input
+            id="password"
+            type="password"
+            [(ngModel)]="password"
+            name="password"
+            required
+            autocomplete="current-password"
+          />
+        </div>
+        
+        <button type="submit" [disabled]="loading()">
+          {{ loading() ? 'Loading...' : 'Login' }}
+        </button>
+      </form>
+    </div>
+  `,
+        styles: [`
+    .login-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background: #f5f5f5;
+    }
+    
+    .login-form {
+      background: white;
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      width: 100%;
+      max-width: 400px;
+    }
+    
+    h2 {
+      margin: 0 0 1.5rem;
+      text-align: center;
+    }
+    
+    .form-group {
+      margin-bottom: 1rem;
+    }
+    
+    label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+    }
+    
+    input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1rem;
+      box-sizing: border-box;
+    }
+    
+    input:focus {
+      outline: none;
+      border-color: #007bff;
+    }
+    
+    button {
+      width: 100%;
+      padding: 0.75rem;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      cursor: pointer;
+      margin-top: 1rem;
+    }
+    
+    button:hover:not(:disabled) {
+      background: #0056b3;
+    }
+    
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    
+    .error {
+      background: #f8d7da;
+      color: #721c24;
+      padding: 0.75rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      border: 1px solid #f5c6cb;
+    }
+  `]
+    })
+], LoginComponent);
+export { LoginComponent };

package/dist/public-api.d.ts

@@ -0,0 +1,6 @@
+export { AuthService } from './app/auth/auth.service';
+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';
+//# sourceMappingURL=public-api.d.ts.map

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

@@ -0,0 +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"}

package/dist/public-api.js

@@ -0,0 +1,5 @@
+export { AuthService } from './app/auth/auth.service';
+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';