first commit

libs/web/identity/presenters/README.md

@@ -0,0 +1,19 @@
+# web-identity-presenters
+
+Pantallas y guards de identidad.
+
+- **Import**: `@task-stream/web/identity/presenters`
+- **Capa**: `presenters` · **Tags**: `scope:web-identity`, `type:presenters`
+
+## Contenido
+
+- Rutas `identityRoutes`: `/login` y `/auth/callback`.
+- `authGuard`, `guestGuard` y `UserMenuComponent`.
+
+## Comandos
+
+```sh
+npx nx lint web-identity-presenters
+```
+
+Reglas de dependencia entre capas: [Arquitectura](../../../../docs/02-arquitectura.md#21-capas-hexagonales).

libs/web/identity/presenters/eslint.config.mjs

@@ -0,0 +1,34 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../../../eslint.config.mjs';
+
+export default [
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  ...baseConfig,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'ts',
+          style: 'camelCase',
+        },
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'ts',
+          style: 'kebab-case',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/web/identity/presenters/project.json

@@ -0,0 +1,13 @@
+{
+  "name": "web-identity-presenters",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/web/identity/presenters/src",
+  "prefix": "ts",
+  "projectType": "library",
+  "tags": ["scope:web-identity", "type:presenters"],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/web/identity/presenters/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/guards';
+export * from './lib/identity.routes';
+export * from './lib/components/user-menu';

libs/web/identity/presenters/src/lib/components/user-menu.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { PiIconComponent } from '@pi/ui';
+import { AuthFacade } from '@task-stream/web/identity/application';
+
+/** Signed-in user in the header: initials, name, sign out. */
+@Component({
+  selector: 'ts-user-menu',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PiIconComponent],
+  template: `
+    @if (auth.user(); as user) {
+      <div class="ts-user" [title]="user.email">
+        <span class="ts-user__avatar" aria-hidden="true">{{
+          auth.initials()
+        }}</span>
+        <span class="ts-user__name">{{ user.name }}</span>
+        <button
+          type="button"
+          class="ts-icon-button ts-user__out"
+          aria-label="Cerrar sesión"
+          title="Cerrar sesión"
+          (click)="auth.signOut()"
+        >
+          <pi-icon icon="logout" size="small" />
+        </button>
+      </div>
+    }
+  `,
+  styles: `
+    .ts-user {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.1875rem;
+      border: 1px solid var(--ts-line);
+      border-radius: 999px;
+      background: var(--ts-surface);
+    }
+    .ts-user__avatar {
+      display: inline-grid;
+      place-items: center;
+      width: 1.875rem;
+      height: 1.875rem;
+      border-radius: 50%;
+      background: linear-gradient(
+        135deg,
+        var(--pi-color-primary),
+        var(--pi-color-accent)
+      );
+      color: #fff;
+      font-size: 0.6875rem;
+      font-weight: 700;
+    }
+    .ts-user__name {
+      font-size: 0.875rem;
+      font-weight: 600;
+      white-space: nowrap;
+      @media (max-width: 640px) {
+        display: none;
+      }
+    }
+    .ts-user__out {
+      --ts-icon-button-size: 1.875rem;
+      color: var(--ts-muted);
+      &:hover {
+        color: var(--ts-ink);
+        background: var(--pi-color-primary-25);
+      }
+    }
+  `,
+})
+export class UserMenuComponent {
+  protected readonly auth = inject(AuthFacade);
+}

libs/web/identity/presenters/src/lib/guards.ts

@@ -0,0 +1,37 @@
+import { inject } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { CanActivateFn, Router } from '@angular/router';
+import { AuthFacade } from '@task-stream/web/identity/application';
+import { filter, map, take } from 'rxjs';
+
+/** Waits for the stored session to be restored before deciding. */
+function whenSettled() {
+  const auth = inject(AuthFacade);
+  return toObservable(auth.settled).pipe(
+    filter(Boolean),
+    take(1),
+    map(() => auth.isAuthenticated()),
+  );
+}
+
+export const authGuard: CanActivateFn = (_route, state) => {
+  const router = inject(Router);
+  return whenSettled().pipe(
+    map((authenticated) =>
+      authenticated
+        ? true
+        : router.createUrlTree(['/login'], {
+            queryParams: { returnUrl: state.url },
+          }),
+    ),
+  );
+};
+
+export const guestGuard: CanActivateFn = () => {
+  const router = inject(Router);
+  return whenSettled().pipe(
+    map((authenticated) =>
+      authenticated ? router.createUrlTree(['/']) : true,
+    ),
+  );
+};

libs/web/identity/presenters/src/lib/identity.routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '@angular/router';
+import { guestGuard } from './guards';
+
+/** /login and /auth/callback (the Pireon redirect URI). */
+export const identityRoutes: Routes = [
+  {
+    path: 'login',
+    canActivate: [guestGuard],
+    title: 'Entrar · TaskStream',
+    loadComponent: () => import('./pages/login.page').then((m) => m.LoginPage),
+  },
+  {
+    path: 'auth/callback',
+    title: 'Entrando · TaskStream',
+    loadComponent: () =>
+      import('./pages/callback.page').then((m) => m.CallbackPage),
+  },
+];

libs/web/identity/presenters/src/lib/pages/callback.page.ts

@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { PiNoteComponent, PiSpinnerComponent } from '@pi/ui';
+import { AuthFacade } from '@task-stream/web/identity/application';
+
+/** Where Pireon sends the user back with `?code=…&state=…`. */
+@Component({
+  selector: 'ts-callback-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterLink, PiSpinnerComponent, PiNoteComponent],
+  template: `
+    <div style="display:grid;justify-items:center;gap:1rem;padding-top:15vh">
+      @if (auth.error(); as error) {
+        <pi-note
+          gap="xs"
+          status="error"
+          appearance="fill"
+          type="status"
+          title="No se pudo iniciar sesión"
+          [text]="error"
+        />
+        <a routerLink="/login">Volver a intentarlo</a>
+      } @else {
+        <pi-spinner [isLoading]="true" [diameter]="48" />
+        <p>Completando el inicio de sesión…</p>
+      }
+    </div>
+  `,
+})
+export class CallbackPage implements OnInit {
+  protected readonly auth = inject(AuthFacade);
+  private readonly document = inject(DOCUMENT);
+
+  ngOnInit(): void {
+    this.auth.completeSignIn(this.document.location.search);
+  }
+}

libs/web/identity/presenters/src/lib/pages/login.page.scss

@@ -0,0 +1,194 @@
+// Two columns: the product's pitch over a live-looking event stream, and the
+// sign-in card. Stacks on small screens (card first).
+.ts-login {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 26rem);
+  align-items: center;
+  gap: clamp(2rem, 5vw, 5rem);
+  min-height: calc(100vh - 12rem);
+  max-width: 72rem;
+  margin-inline: auto;
+
+  @media (max-width: 900px) {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 0;
+
+    .ts-login__card {
+      order: -1;
+    }
+  }
+}
+
+.ts-login__intro {
+  min-width: 0;
+
+  // Same scale as pireon.dev's hero title.
+  h1 {
+    margin: 0 0 1.25rem;
+    font-size: clamp(2.25rem, 6vw, 3.75rem);
+    font-weight: 700;
+    line-height: 1.08;
+    letter-spacing: -0.02em;
+  }
+}
+
+.ts-login__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.75rem;
+}
+
+.ts-login__live {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--ts-s-done);
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ts-s-done) 60%, transparent);
+  animation: ts-pulse 2s ease-out infinite;
+}
+
+@keyframes ts-pulse {
+  70% {
+    box-shadow: 0 0 0 0.5rem transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.ts-login__lead {
+  max-width: 46ch;
+  margin: 0 0 2.25rem;
+  font-size: 1.0625rem;
+  line-height: 1.55;
+  color: var(--ts-muted);
+}
+
+// Event stream: a Pireon card scrolling upwards, faded at both ends.
+.ts-feed {
+  height: 15.5rem;
+  overflow: hidden;
+  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
+
+  @media (max-width: 900px) {
+    height: 9.5rem;
+  }
+}
+
+.ts-feed__track {
+  display: grid;
+  animation: ts-scroll 22s linear infinite;
+}
+
+@keyframes ts-scroll {
+  to {
+    transform: translateY(-50%);
+  }
+}
+
+.ts-feed__row {
+  display: grid;
+  grid-template-columns: 3rem 4.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1.125rem;
+  border-bottom: 1px dashed var(--ts-line);
+  font-family: var(--ts-font-mono);
+  font-size: 0.8125rem;
+
+  @media (max-width: 520px) {
+    grid-template-columns: 2.75rem 3.75rem minmax(0, 1fr);
+    gap: 0.5rem;
+    padding-inline: 0.875rem;
+
+    .ts-feed__from,
+    .ts-feed__arrow,
+    .ts-feed__who {
+      display: none;
+    }
+  }
+}
+
+.ts-feed__time,
+.ts-feed__who {
+  color: var(--ts-muted);
+}
+
+.ts-feed__key {
+  font-weight: 600;
+}
+
+.ts-feed__move {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ts-feed__from {
+  color: var(--ts-muted);
+}
+
+.ts-feed__arrow {
+  color: var(--ts-line-strong);
+}
+
+.ts-feed__to {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--tone) 85%, var(--ts-ink));
+
+  &::before {
+    content: '';
+    width: 0.4375rem;
+    height: 0.4375rem;
+    border-radius: 50%;
+    background: var(--tone);
+  }
+}
+
+// Sign-in card (a Pireon card)
+.ts-login__card {
+  padding: 2rem;
+  box-shadow: var(--ts-lift);
+
+  @media (max-width: 480px) {
+    padding: 1.5rem 1.25rem;
+  }
+}
+
+.ts-login__card-head {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  margin-bottom: 1.75rem;
+
+  h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0.125rem 0 0;
+    color: var(--ts-muted);
+    font-size: 0.875rem;
+  }
+}
+
+.ts-login__content,
+.ts-login__form {
+  display: grid;
+  gap: 1.25rem;
+  width: 100%;
+}
+
+// The field's label sits above its outline: leave room after the previous field's error.
+.ts-login__form {
+  row-gap: 1.75rem;
+}

libs/web/identity/presenters/src/lib/pages/login.page.ts

@@ -0,0 +1,276 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { emailError, requiredError } from '@angular/forms/signals';
+import {
+  PiActionButtonComponent,
+  PiDividerComponent,
+  PiEmailFieldComponent,
+  PiLabelDirective,
+  PiNoteComponent,
+  PiPasswordFieldComponent,
+} from '@pi/ui';
+import { AuthFacade } from '@task-stream/web/identity/application';
+import { LogoComponent } from '@task-stream/web/shared/ui';
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+/** Illustrative events for the welcome panel (decorative, not real data). */
+const SAMPLE_FEED = [
+  {
+    time: '09:41',
+    key: 'WEB-12',
+    from: 'En QA',
+    to: 'Hecho',
+    tone: 'done',
+    who: 'Quinn',
+  },
+  {
+    time: '09:38',
+    key: 'API-7',
+    from: 'En curso',
+    to: 'En revisión',
+    tone: 'review',
+    who: 'Dan',
+  },
+  {
+    time: '09:35',
+    key: 'WEB-14',
+    from: 'En QA',
+    to: 'QA fallido',
+    tone: 'failed',
+    who: 'Quinn',
+  },
+  {
+    time: '09:31',
+    key: 'MOB-3',
+    from: 'Por hacer',
+    to: 'En curso',
+    tone: 'progress',
+    who: 'Bob',
+  },
+  {
+    time: '09:27',
+    key: 'WEB-9',
+    from: 'En revisión',
+    to: 'Listo para QA',
+    tone: 'ready',
+    who: 'Ana',
+  },
+  {
+    time: '09:22',
+    key: 'API-4',
+    from: 'Listo para QA',
+    to: 'En QA',
+    tone: 'qa',
+    who: 'Quinn',
+  },
+  {
+    time: '09:18',
+    key: 'WEB-3',
+    from: 'Backlog',
+    to: 'Por hacer',
+    tone: 'todo',
+    who: 'Ana',
+  },
+];
+
+@Component({
+  selector: 'ts-login-page',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    LogoComponent,
+    PiActionButtonComponent,
+    PiDividerComponent,
+    PiEmailFieldComponent,
+    PiPasswordFieldComponent,
+    PiLabelDirective,
+    PiNoteComponent,
+  ],
+  styleUrl: './login.page.scss',
+  template: `
+    <section class="ts-login">
+      <div class="ts-login__intro">
+        <p class="ts-eyebrow ts-login__eyebrow">
+          <span class="ts-login__live"></span> Pireon · TaskStream
+        </p>
+        <h1>
+          Cada cambio,<br /><span class="ts-gradient-text"
+            >en cuanto pasa.</span
+          >
+        </h1>
+        <p class="ts-login__lead">
+          Bugs, cambios de UI, features y QA de tu equipo en un tablero que se
+          mueve solo. Front, back y QA, enlazados de punta a punta.
+        </p>
+        <div class="ts-feed ts-panel" aria-hidden="true">
+          <div class="ts-feed__track">
+            @for (event of feed; track $index) {
+              <div
+                class="ts-feed__row"
+                [style.--tone]="'var(--ts-s-' + event.tone + ')'"
+              >
+                <span class="ts-feed__time">{{ event.time }}</span>
+                <span class="ts-feed__key">{{ event.key }}</span>
+                <span class="ts-feed__move">
+                  <span class="ts-feed__from">{{ event.from }}</span>
+                  <span class="ts-feed__arrow">→</span>
+                  <span class="ts-feed__to">{{ event.to }}</span>
+                </span>
+                <span class="ts-feed__who">{{ event.who }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div class="ts-login__card ts-panel">
+        <div class="ts-login__card-head">
+          <ts-logo [size]="40" />
+          <div>
+            <h2>Entrar</h2>
+            <p>Con tu cuenta de Pireon.</p>
+          </div>
+        </div>
+        <div class="ts-login__content">
+          @if (!configured()) {
+            <pi-note
+              gap="xs"
+              flexDirection="column"
+              alignment="flex-start"
+              status="info"
+              appearance="fill"
+              type="status"
+              title="Inicio de sesión no configurado"
+              text="La API necesita un cliente OAuth de Pireon: PIREON_CLIENT_ID y PIREON_CLIENT_SECRET en .env."
+            />
+          } @else if (auth.error(); as error) {
+            <pi-note
+              gap="xs"
+              flexDirection="column"
+              alignment="flex-start"
+              status="error"
+              appearance="fill"
+              type="status"
+              title="No se pudo iniciar sesión"
+              [text]="error"
+            />
+          }
+
+          @if (auth.config(); as config) {
+            <pi-action-button
+              size="w100"
+              color="primary"
+              text="Entrar con Pireon"
+              [hasIcon]="true"
+              [disabled]="busy()"
+              (execute)="auth.signInWithPireon(returnUrl())"
+            />
+            @if (config.passwordGrant) {
+              <pi-divider color="grey" label="o" gap="m" />
+            }
+          }
+
+          @if (passwordEnabled()) {
+            <form
+              class="ts-login__form"
+              (submit)="$event.preventDefault(); signIn()"
+              novalidate
+            >
+              <pi-email-field
+                name="email"
+                placeholder="tu@email.com"
+                [required]="true"
+                [disabled]="busy()"
+                [errors]="emailErrors()"
+                [(value)]="email"
+                (touch)="emailTouched.set(true)"
+              >
+                <pi-label [isRequired]="true">Email de Pireon</pi-label>
+              </pi-email-field>
+              <pi-password-field
+                name="password"
+                placeholder="Contraseña"
+                [required]="true"
+                [disabled]="busy()"
+                [errors]="passwordErrors()"
+                [(value)]="password"
+                (touch)="passwordTouched.set(true)"
+              >
+                <pi-label [isRequired]="true">Contraseña</pi-label>
+              </pi-password-field>
+              <pi-action-button
+                size="w100"
+                color="primary"
+                [text]="busy() ? 'Entrando…' : 'Entrar'"
+                [hasIcon]="!busy()"
+                [disabled]="busy() || !configured()"
+                (execute)="signIn()"
+              />
+            </form>
+          }
+        </div>
+      </div>
+    </section>
+  `,
+})
+export class LoginPage implements OnInit {
+  /** Bound from the query string by the router (withComponentInputBinding). */
+  readonly returnUrl = input<string>('/');
+
+  protected readonly auth = inject(AuthFacade);
+  /** Twice, so the vertical marquee loops without a jump. */
+  protected readonly feed = [...SAMPLE_FEED, ...SAMPLE_FEED];
+  protected readonly busy = this.auth.signingIn;
+  /** Email and password go to Pireon through the API (password grant). */
+  /** null = the API has no Pireon client: nobody can sign in yet. */
+  protected readonly configured = computed(() => this.auth.config() !== null);
+  protected readonly passwordEnabled = computed(
+    () => this.auth.config()?.passwordGrant !== false,
+  );
+
+  protected readonly email = signal('');
+  protected readonly password = signal('');
+  // Errors show once the user leaves a field or tries to sign in, not on load
+  // (`@pi/ui` fields paint any error they receive, touched or not).
+  protected readonly emailTouched = signal(false);
+  protected readonly passwordTouched = signal(false);
+
+  private readonly emailProblems = computed(() => {
+    const value = this.email().trim();
+    if (!value) return [requiredError()];
+    return EMAIL.test(value) ? [] : [emailError()];
+  });
+  private readonly passwordProblems = computed(() =>
+    this.password() ? [] : [requiredError()],
+  );
+  protected readonly emailErrors = computed(() =>
+    this.emailTouched() ? this.emailProblems() : [],
+  );
+  protected readonly passwordErrors = computed(() =>
+    this.passwordTouched() ? this.passwordProblems() : [],
+  );
+
+  ngOnInit(): void {
+    this.auth.openSignIn();
+  }
+
+  protected signIn(): void {
+    this.emailTouched.set(true);
+    this.passwordTouched.set(true);
+    const invalid =
+      this.emailProblems().length > 0 || this.passwordProblems().length > 0;
+    if (invalid || this.busy() || !this.configured()) return;
+    this.auth.signInWithPassword(
+      this.email().trim(),
+      this.password(),
+      this.returnUrl(),
+    );
+  }
+}

libs/web/identity/presenters/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "target": "es2022",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/web/identity/presenters/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}