@bitblit/ngx-acute-warden 6.0.145-alpha → 6.0.147-alpha

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@bitblit/ngx-acute-warden",
-  "version": "6.0.145-alpha",
+  "version": "6.0.147-alpha",
   "description": "Library for using angular with ratchet-warden",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [
+    "src/**",
     "lib/**",
     "bin/**"
   ],
@@ -48,9 +49,9 @@
     "@angular/platform-browser": "20.3.9",
     "@angular/platform-browser-dynamic": "20.3.9",
     "@angular/router": "20.3.9",
-    "@bitblit/ngx-acute-common": "6.0.145-alpha",
-    "@bitblit/ratchet-common": "6.0.145-alpha",
-    "@bitblit/ratchet-warden-common": "6.0.145-alpha",
+    "@bitblit/ngx-acute-common": "6.0.147-alpha",
+    "@bitblit/ratchet-common": "6.0.147-alpha",
+    "@bitblit/ratchet-warden-common": "6.0.147-alpha",
     "primeflex": "4.0.0",
     "primeicons": "7.0.0",
     "primeng": "20.3.0",
@@ -67,9 +68,9 @@
     "@angular/platform-browser": "^20.3.9",
     "@angular/platform-browser-dynamic": "^20.3.9",
     "@angular/router": "^20.3.9",
-    "@bitblit/ngx-acute-common": "6.0.145-alpha",
-    "@bitblit/ratchet-common": "6.0.145-alpha",
-    "@bitblit/ratchet-warden-common": "6.0.145-alpha",
+    "@bitblit/ngx-acute-common": "6.0.147-alpha",
+    "@bitblit/ratchet-common": "6.0.147-alpha",
+    "@bitblit/ratchet-warden-common": "6.0.147-alpha",
     "primeflex": "4.0.0",
     "primeicons": "7.0.0",
     "primeng": "20.3.0",
@@ -78,6 +79,6 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "20.3.9",
-    "@bitblit/ratchet-node-only": "6.0.145-alpha"
+    "@bitblit/ratchet-node-only": "6.0.147-alpha"
   }
 }

package/src/build/ngx-acute-warden-info.ts

@@ -0,0 +1,19 @@
+import { BuildInformation } from '@bitblit/ratchet-common/build/build-information';
+
+export class NgxAcuteWardenInfo {
+  // Empty constructor prevents instantiation
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  public static buildInformation(): BuildInformation {
+    const val: BuildInformation = {
+      version: 'LOCAL-SNAPSHOT',
+      hash: 'LOCAL-HASH',
+      branch: 'LOCAL-BRANCH',
+      tag: 'LOCAL-TAG',
+      timeBuiltISO: 'LOCAL-TIME-ISO',
+      notes: 'LOCAL-NOTES',
+    };
+    return val;
+  }
+}

package/src/components/acute-create-user/acute-create-user.component.html

@@ -0,0 +1,48 @@
+<div class="row">
+  <p-card header="Create User">
+    <form [formGroup]="form">
+      <div style="display: flex; flex-direction: column">
+        <div class="p-inputgroup">
+          <label class="p-inputgroup-addon">Contact Type</label>
+          <p-select
+            [options]="userContactTypes"
+            formControlName="userContactType"
+            id="userContactType"
+            [style]="{ 'min-width': '50%' }"
+          ></p-select>
+        </div>
+        <div class="p-inputgroup">
+          <span class="p-inputgroup-addon">Contact</span>
+          <input pInputText formControlName="userContactValue" placeholder="e.g., test@test.com" id="userContactValue" />
+          @if (f('userContactValue').dirty) {
+            @if (f('userContactValue').errors?.['required']) {
+              <span style="color: red">Contact is Required</span>
+            }
+            @if(f('userContactValue').errors?.['email']) {
+              <span style="color: red">Please enter a valid email address</span>
+            }
+          }
+        </div>
+        <div class="p-inputgroup">
+          <span class="p-inputgroup-addon">Full name</span>
+          <input pInputText formControlName="userFullName" id="userFullName" placeholder="e.g., Tom Smith" />
+          @if(f('userFullName').dirty){
+            @if(f('userFullName').errors?.['required']) {
+              <span style="color: red" >Full name is Required</span>
+            }
+            @if(f('userFullName').errors?.['minlength']) {
+              <span style="color: red" >Please enter a longer name</span>
+            }
+            @if(f('userFullName').errors?.['maxlength']) {
+              <span style="color: red" >Please enter a shorter name</span>
+            }
+          }
+        </div>
+      </div>
+      <div>
+        <p-button pRipple styleClass="p-button-raised" (click)="createUser()">Create user</p-button>
+        <p-button pRipple styleClass="p-button-raised" routerLink="/public/login">Cancel</p-button>
+      </div>
+    </form>
+  </p-card>
+</div>

package/src/components/acute-create-user/acute-create-user.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { WardenClient } from '@bitblit/ratchet-warden-common/client/warden-client';
+import { No } from '@bitblit/ratchet-common/lang/no';
+import { StringRatchet } from '@bitblit/ratchet-common/lang/string-ratchet';
+import { AbstractControl, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { WardenContactType } from '@bitblit/ratchet-warden-common/common/model/warden-contact-type';
+import { EnumRatchet } from '@bitblit/ratchet-common/lang/enum-ratchet';
+import { CommonModule } from '@angular/common';
+import { CardModule } from 'primeng/card';
+import { ButtonModule } from 'primeng/button';
+import { AlertComponent } from '@bitblit/ngx-acute-common';
+import { DialogService } from 'primeng/dynamicdialog';
+import { Ripple } from 'primeng/ripple';
+import { InputTextModule } from 'primeng/inputtext';
+import { Select } from "primeng/select";
+
+@Component({
+  selector: 'ngx-acute-warden-create-user',
+  templateUrl: './acute-create-user.component.html',
+  standalone: true,
+  imports: [
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    CardModule,
+    ButtonModule,
+    Ripple,
+    InputTextModule,
+    Select
+  ]
+})
+export class AcuteCreateUserComponent implements OnInit {
+  public form: FormGroup;
+
+  public userContactTypes: string[] = EnumRatchet.listEnumKeys(WardenContactType);
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private wardenClient: WardenClient,
+    private fb: FormBuilder,
+    private dlgService: DialogService,
+  ) {
+    this.form = this.fb.group(
+      {
+        userFullName: [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(35)])],
+        userContactValue: [null, Validators.compose([Validators.required, Validators.email])],
+        userContactType: [StringRatchet.safeString(WardenContactType.EmailAddress), Validators.compose([Validators.required])],
+      },
+      { validators: [] },
+    );
+  }
+
+  public f(name: string): AbstractControl {
+    return this.form.controls[name];
+  }
+
+  ngOnInit(): void {
+    Logger.info('ngi: %j', this.route.queryParamMap);
+  }
+
+  public async createUser(): Promise<void> {
+    try {
+      const type: WardenContactType = EnumRatchet.keyToEnum<WardenContactType>(
+        WardenContactType,
+        this.form.controls['userContactType'].value,
+        false,
+      );
+      if (
+        StringRatchet.trimToNull(this.form.controls['userContactValue'].value) &&
+        StringRatchet.trimToNull(this.form.controls['userFullName'].value) &&
+        type
+      ) {
+        const userId: string = await this.wardenClient.createAccount(
+          { type: type, value: this.form.controls['userContactValue'].value },
+          true,
+          this.form.controls['userFullName'].value,
+          [],
+        );
+        Logger.info('Got user id %s', userId);
+        this.router.navigate(['/public/login']).then(No.op);
+      } else {
+        AlertComponent.showAlert(this.dlgService, 'Missing data');
+      }
+    } catch (err) {
+      AlertComponent.showAlert(this.dlgService, 'Failed: ' + err);
+    }
+  }
+}

package/src/components/acute-login/acute-login.component.html

@@ -0,0 +1,126 @@
+<div style="display: flex; flex-direction: column; margin: 10px; padding: 2px; align-content: center; justify-content: center">
+  <div style="display: flex; flex-direction: column; align-content: center; justify-content: center; margin: 1em; gap: 2px">
+    @if(applicationName) {
+      <div class="text-3xl font-bold text-center text-primary">{{ applicationName }}</div>
+    }
+    @if(helperText) {
+      <div class="text-base font-italic text-center text-secondary">{{ helperText }}</div>
+    }
+  </div>
+
+  @if(!showCodePage) {
+    <div>
+      <!--<button pButton icon="pi pi-ban" label="Clear Saved Logins" (click)="clearSavedLogins()" style="margin-top: 10px"></button>-->
+
+      <div style="display: flex; flex-direction: column">
+        <div style="display: flex; flex-direction: row; justify-content: space-between; gap: 5px">
+          <input
+            class="p-inputtext rounded-input"
+            [(ngModel)]="newContactValue"
+            id="newContactValue"
+            pInputText
+            style="width: 100%"
+            placeholder="Your Email or Text-Capable Phone"
+            type="text"
+          />
+          <p-button
+            icon="pi pi-envelope"
+            (click)="sendCodeToNewContact(newContactValue)"
+            pTooltip="Send code"
+            [disabled]="contactValueInvalidAndDirty()"
+          >
+          </p-button>
+        </div>
+        @if(contactValueInvalidAndDirty()) {
+          <span style="color: red">Valid email or phone number required</span>
+        }
+      </div>
+
+      @if(hasRecentLogins){
+        <div style="display: flex; flex-direction: row; justify-content: space-around; margin: 2em">
+          <div>-----</div>
+          <div class="text-lg font-italic">Or select a previously used method</div>
+          <div>-----</div>
+        </div>
+      }
+
+      @for(lg of recentLogins; track $index) { <!-- lg.userById -->
+      <div>
+        <div style="display: flex; flex-direction: row; justify-content: space-between">
+          <h3 class="p-toolbar-start">{{ lg.user.userLabel }}</h3>
+          <div class="p-toolbar-center" style="display: flex; flex-direction: row; gap: 1em">
+            @if(lg?.user?.webAuthnAuthenticatorSummaries?.length) {
+              <p-button
+                icon="pi pi-lock-open"
+                (click)="processWebAuthnLogin(lg.user.userId)"
+                pTooltip="Authenticate by device (WebAuthn)"
+              >
+              </p-button>
+            }
+            @for(e of lg.user.contactMethods; track $index) { <!-- e.contactByName -->
+            <div style="display: flex; flex-direction: row; gap: 5px">
+              @if(e.type === 'EmailAddress'){
+              <p-button
+                icon="pi pi-envelope"
+                (click)="sendCodeToContact(e)"
+                pTooltip="{{ e.value }}"
+              ></p-button>
+              }
+              @if(e.type === 'TextCapablePhoneNumber'){
+                <p-button
+                icon="pi pi-mobile"
+                (click)="sendCodeToContact(e)"
+                pTooltip="{{ e.value }}"
+              ></p-button>
+              }
+            </div>
+            }
+          </div>
+
+          <div class="p-toolbar-end">
+            <p-button
+              icon="pi pi-delete-left"
+              severity="danger"
+              (click)="removeSingleLogin(lg.user.userId)"
+              pTooltip="Forget {{ lg.user.userLabel }}"
+            ></p-button>
+          </div>
+        </div>
+      </div>
+      }
+    </div>
+  }
+
+  @if(showCodePage) {
+    <div>
+      <p-fieldset legend="One-Time Code">
+        <div style="display: flex; flex-direction: column; min-width: 100%; justify-content: center; align-items: center; gap: 10px">
+          <div>
+            Enter the code sent to <span style="font-weight: bolder">{{ waitingContact.value }}</span>
+          </div>
+          <input
+            type="hidden"
+            class="p-inputtext rounded-input"
+            [(ngModel)]="waitingContact.value"
+            id="waitingContactValue"
+            readonly="true"
+          />
+          <!-- <p-inputOtp [(ngModel)]="verificationCode" id="verificationCode" [length]="6" size="large"
+                      [integerOnly]="integerOnly" (ngModelChange)="otpChanged()">
+            <ng-template #input let-token let-events="events">
+              <input class="custom-otp-input" (input)="events.input($event)" (keydown)="events.keydown($event)" type="text" [attr.value]="token" [maxLength]="1" />
+            </ng-template>
+          </p-inputOtp> -->
+          <p-inputOtp [(ngModel)]="verificationCode" id="verificationCode" [length]="6" size="large"
+                      [integerOnly]="integerOnly" (ngModelChange)="otpChanged()"
+                      [attr.inputmode]="otpInputMode" [attr.pattern]="otpInputPattern"
+          />
+          <div style="display: flex; flex-direction: row; justify-content: space-between; gap: 5px">
+            <p-button (click)="submitVerificationCode(waitingContact.value, verificationCode)" label="Submit code" > </p-button>
+            <p-button (click)="verificationCode = null; showCodePage = false" label="Cancel"></p-button>
+          </div>
+        </div>
+      </p-fieldset>
+    </div>
+  }
+</div>

package/src/components/acute-login/acute-login.component.ts

@@ -0,0 +1,265 @@
+import {  Component,  Input, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { WardenClient } from '@bitblit/ratchet-warden-common/client/warden-client';
+import { WardenUserService } from '@bitblit/ratchet-warden-common/client/warden-user-service';
+import { StringRatchet } from '@bitblit/ratchet-common/lang/string-ratchet';
+import { WardenContact } from '@bitblit/ratchet-warden-common/common/model/warden-contact';
+import { WardenRecentLoginDescriptor } from '@bitblit/ratchet-warden-common/client/provider/warden-recent-login-descriptor';
+import { WardenUtils } from '@bitblit/ratchet-warden-common/common/util/warden-utils';
+import { WardenContactType } from '@bitblit/ratchet-warden-common/common/model/warden-contact-type';
+import { WardenLoggedInUserWrapper } from '@bitblit/ratchet-warden-common/client/provider/warden-logged-in-user-wrapper';
+import { ButtonModule } from 'primeng/button';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { CardModule } from 'primeng/card';
+import { TooltipModule } from 'primeng/tooltip';
+import { FieldsetModule } from 'primeng/fieldset';
+import { AlertComponent } from '@bitblit/ngx-acute-common';
+import { DialogService } from 'primeng/dynamicdialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { RequireRatchet } from '@bitblit/ratchet-common/lang/require-ratchet';
+import { InputOtpModule } from 'primeng/inputotp';
+import { AccordionModule } from 'primeng/accordion';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { ToolbarModule } from 'primeng/toolbar';
+import { Base64Ratchet } from "@bitblit/ratchet-common/lang/base64-ratchet";
+import { No } from "@bitblit/ratchet-common/lang/no";
+import { Subscription, timer } from "rxjs";
+
+@Component({
+  selector: 'ngx-acute-warden-login',
+  templateUrl: './acute-login.component.html',
+  standalone: true,
+  imports: [
+    ButtonModule,
+    RouterModule,
+    FormsModule,
+    CommonModule,
+    CardModule,
+    TooltipModule,
+    ButtonModule,
+    FieldsetModule,
+    InputTextModule,
+    InputOtpModule,
+    AccordionModule,
+    SplitButtonModule,
+    InputGroupModule,
+    ToolbarModule,
+  ],
+  styles: [
+    `
+        .custom-otp-input {
+                width: 40px;
+                font-size: 36px;
+                border: 0 none;
+                appearance: none;
+                text-align: center;
+                transition: all 0.2s;
+                background: transparent;
+                border-bottom: 2px solid grey;
+                border-radius: 0px;
+            }
+
+        .custom-otp-input:focus {
+                outline: 0 none;
+                border-bottom-color: var(--p-primary-color);
+        }
+        `
+  ],
+})
+export class AcuteLoginComponent implements OnDestroy, OnInit {
+  @Input() public applicationName: string;
+  @Input() public helperText: string;
+
+  @Input() public postLoginUrl: string;
+  @Input() public integerOnly: boolean;
+  @Input() public createUserIfMissing: boolean = false;
+
+  @Input() public caseSensitiveContactValues: boolean = false;
+
+  public verificationCode: string;
+  public waitingContact: WardenContact;
+  public showCodePage: boolean = false;
+
+  public newContactValue: string;
+
+  private checkForBackgroundLogInTimerSubscription: Subscription;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public userService: WardenUserService<any>,
+    public wardenClient: WardenClient,
+    private dlgService: DialogService,
+  ) {
+    Logger.info('Found %s recent logins', this.recentLogins.length);
+    this.checkForBackgroundLogInTimerSubscription = timer(0, 2_500).subscribe(async (_t) => {
+      if (this.userService.isLoggedIn()) {
+        Logger.info('Detected background login - redirecting');
+        await this.router.navigate([this.postLoginUrl]);
+      }
+    });
+
+  }
+
+  ngOnInit(): void {
+    Logger.info('Login init');
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.postLoginUrl, 'postLoginUrl may not be empty');
+    // Check if auto-login was requested
+    const mode: string = StringRatchet.trimToNull(this.route.snapshot.queryParamMap.get('mode'));
+    const code: string = StringRatchet.trimToNull(this.route.snapshot.queryParamMap.get('code'));
+    const contactClear: string = StringRatchet.trimToNull(this.route.snapshot.queryParamMap.get('contact'));
+    const contactB64: string = StringRatchet.trimToNull(this.route.snapshot.queryParamMap.get('contactEncoded'));
+    const contact: string = contactB64 ? Base64Ratchet.base64StringToString(contactB64) : contactClear;
+
+    if (mode==='auto' && code && contact) {
+      this.attemptAutoLogin(contact, code).then(No.op);
+    } else {
+      Logger.info('No auto-login detected');
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.checkForBackgroundLogInTimerSubscription) {
+      this.checkForBackgroundLogInTimerSubscription.unsubscribe();
+    }
+  }
+
+  public get otpInputMode(): string {
+    return this.integerOnly ? 'numeric' : 'text';
+  }
+
+  public get otpInputPattern(): string {
+    return this.integerOnly ? '[0-9]*' : '[0-9A-Za-z]*';
+  }
+
+  public userById(index: number, ld: WardenRecentLoginDescriptor) {
+    return ld.user.userId;
+  }
+
+  public contactByName(index: number, contact: WardenContact) {
+    return contact.value;
+  }
+
+  public get hasRecentLogins(): boolean {
+    return this.recentLogins.length > 0;
+  }
+
+  public get recentLogins(): WardenRecentLoginDescriptor[] {
+    let rval: WardenRecentLoginDescriptor[] = this.userService?.serviceOptions?.recentLoginProvider?.fetchAllLogins() || [];
+
+    // Filter out third party logins for now
+    rval = rval.filter((ld: WardenRecentLoginDescriptor) => {return ld?.user?.contactMethods?.length>0 || ld?.user?.webAuthnAuthenticatorSummaries?.length>0})
+
+    return rval;
+  }
+
+  public clearSavedLogins(): void {
+    if (confirm('Are you sure you want to clear saved logins?')) {
+      this.userService.serviceOptions.recentLoginProvider.clearAllLogins();
+    }
+  }
+
+
+  public async attemptAutoLogin(contactValue: string, code: string): Promise<void> {
+    Logger.info('Attempting auto-login');
+    const contact: WardenContact = WardenUtils.stringToWardenContact(contactValue);
+    const wrapper: WardenLoggedInUserWrapper<any> = await this.userService.executeValidationTokenBasedLogin(
+      contact,
+      code,
+      this.createUserIfMissing,
+    );
+    if (wrapper) {
+      await this.router.navigate([this.postLoginUrl]);
+    } else {
+      Logger.info('Auto-login failed');
+    }
+  }
+
+
+  public async sendCodeToNewContact(inValue: string): Promise<void> {
+    const value: string = this.caseSensitiveContactValues ? inValue : inValue.toLowerCase();
+    Logger.info('Trying to send code to %s %s %s', value, WardenUtils.stringIsEmailAddress(value), WardenUtils.stringIsPhoneNumber(value));
+    if (StringRatchet.trimToNull(value)) {
+      let ct: WardenContactType = null;
+      if (WardenUtils.stringIsEmailAddress(value)) {
+        ct = WardenContactType.EmailAddress;
+      } else if (WardenUtils.stringIsPhoneNumber(value)) {
+        ct = WardenContactType.TextCapablePhoneNumber;
+      }
+      if (!ct) {
+        AlertComponent.showAlert(this.dlgService, 'Cannot treat this as an email or a phone number - ignoring');
+      } else {
+        this.waitingContact = { type: ct, value: value };
+        const val: boolean = await this.userService.sendExpiringCode(this.waitingContact);
+        if (val) {
+          this.showCodePage = true;
+        } else {
+          AlertComponent.showAlert(this.dlgService, 'Failed to send code');
+        }
+      }
+    }
+  }
+
+  public async sendCodeToContact(contact: WardenContact): Promise<void> {
+    Logger.info('Send code to contact %j', contact);
+    if (contact && StringRatchet.trimToNull(contact.value) && contact.type) {
+      this.waitingContact = contact;
+      const val: boolean = await this.userService.sendExpiringCode(contact);
+      if (val) {
+        this.showCodePage = true;
+      } else {
+        AlertComponent.showAlert(this.dlgService, 'Failed to send code');
+      }
+    } else {
+      Logger.info('Failed to send code to contact : %j', contact);
+    }
+  }
+
+  public async submitVerificationCode(input: string, verificationCode: string): Promise<void> {
+    Logger.info('Submit: %s, %s', input, verificationCode);
+    const val: WardenLoggedInUserWrapper<any> = await this.userService.executeValidationTokenBasedLogin(
+      { type: WardenUtils.stringToContactType(input), value: input },
+      verificationCode,
+      this.createUserIfMissing
+    );
+    if (val) {
+      await this.router.navigate([this.postLoginUrl]);
+    } else {
+      AlertComponent.showAlert(this.dlgService, 'Code submission failed');
+    }
+  }
+
+  public async processWebAuthnLogin(userId: string): Promise<void> {
+    Logger.info('processWebAuthnLogin: %s', userId);
+    const val: WardenLoggedInUserWrapper<any> = await this.userService.executeWebAuthnBasedLogin(userId);
+    if (val) {
+      await this.router.navigate([this.postLoginUrl]);
+    } else {
+      AlertComponent.showAlert(this.dlgService, 'Web authentication method failed');
+    }
+  }
+
+  public removeSingleLogin(userId: string): void {
+    this.userService.serviceOptions.recentLoginProvider.removeUser(userId);
+  }
+
+  public contactValueInvalidAndDirty(): boolean {
+    return (
+      StringRatchet.trimToNull(this.newContactValue) &&
+      !WardenUtils.stringIsPhoneNumber(this.newContactValue) &&
+      !WardenUtils.stringIsEmailAddress(this.newContactValue)
+    );
+  }
+
+  public async otpChanged(): Promise<void> {
+    if (this.waitingContact?.value && this.verificationCode?.length===6) {
+      Logger.debug('Code length is 6, submitting');
+      await this.submitVerificationCode(this.waitingContact.value, this.verificationCode)
+    }
+
+  }
+}

package/src/components/acute-magic-lander/acute-magic-lander.component.html

@@ -0,0 +1,10 @@
+<div class="row">
+  <p-card header="Magic Lander">
+    <div style="display: flex; flex-direction: column">
+      <p>{{ currentStatus }}</p>
+      @if (showLoginButton) {
+        <a [routerLink]="[directLoginUrl]" pButton>Back to login page</a>
+      }
+    </div>
+  </p-card>
+</div>

package/src/components/acute-magic-lander/acute-magic-lander.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { WardenUserService } from '@bitblit/ratchet-warden-common/client/warden-user-service';
+import { No } from '@bitblit/ratchet-common/lang/no';
+import { StringRatchet } from '@bitblit/ratchet-common/lang/string-ratchet';
+import { Base64Ratchet } from '@bitblit/ratchet-common/lang/base64-ratchet';
+import { WardenContact } from '@bitblit/ratchet-warden-common/common/model/warden-contact';
+import { WardenLoggedInUserWrapper } from '@bitblit/ratchet-warden-common/client/provider/warden-logged-in-user-wrapper';
+import { CardModule } from 'primeng/card';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { ButtonDirective } from 'primeng/button';
+import { RequireRatchet } from '@bitblit/ratchet-common/lang/require-ratchet';
+
+@Component({
+  selector: 'ngx-acute-warden-magic-lander',
+  templateUrl: './acute-magic-lander.component.html',
+  standalone: true,
+  imports: [CardModule, RouterModule, FormsModule, CommonModule, CardModule, ButtonDirective],
+})
+export class AcuteMagicLanderComponent implements OnInit {
+  @Input() public directLoginUrl: string;
+
+  public currentStatus: string = 'Starting up...';
+  public showLoginButton: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public userService: WardenUserService<any>,
+  ) {}
+
+  ngOnInit(): void {
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.directLoginUrl, 'directLoginUrl may not be empty');
+    this.currentStatus = 'Parsing parameters...';
+    const codeString: string = StringRatchet.trimToNull(this.route.snapshot.queryParamMap.get('code'));
+    const metaString: string = this.route.snapshot.queryParamMap.get('meta');
+    const t2: string = Base64Ratchet.base64StringToString(metaString);
+    const meta: Record<string, string> = Base64Ratchet.safeBase64JSONParse(metaString);
+    Logger.info('ngi: %j : Code %s : Meta %s :: %s :: MetaP: %j', this.route.queryParamMap, codeString, metaString, t2, meta);
+
+    this.processParameters(codeString, meta).then(No.op);
+  }
+
+  public async processParameters(verificationCode: string, meta: any): Promise<void> {
+    const targetContact: WardenContact = (meta || {}).contact;
+    if (verificationCode && targetContact?.value && targetContact?.type) {
+      this.currentStatus = 'Logging in...';
+      Logger.info('Logging in with code');
+      try {
+        const val: WardenLoggedInUserWrapper<any> = await this.userService.executeValidationTokenBasedLogin(
+          targetContact,
+          verificationCode,
+        );
+        Logger.info('Rval from login was : %j', val);
+      } catch (err) {
+        Logger.error('Failed to login : %s', err, err);
+        this.currentStatus = 'Failed to login : ' + err;
+        this.showLoginButton = true;
+      }
+    } else {
+      Logger.info('Could not login, missing code or contact : %s : %j', verificationCode, targetContact);
+    }
+    if (this.userService.isLoggedIn()) {
+      if (meta?.redirect) {
+        Logger.info('Meta redirect to %s requested', meta.redirect);
+        this.currentStatus = 'Redirecting to ' + meta.redirect;
+        await this.router.navigate([meta.redirect]);
+      }
+    } else {
+      Logger.info('Ignoring meta - not logged in.');
+      this.currentStatus = 'Login failed - sending to login page';
+      this.showLoginButton = true;
+    }
+  }
+}

package/src/components/acute-user-profile/acute-user-profile.component.html

@@ -0,0 +1,40 @@
+<p-card header="User profile : {{ user.userObject.wardenData.userLabel }}">
+  <div>
+    ID: {{ user.userObject.wardenData.userId }} <br />
+    Full Name: {{ user.userObject.wardenData.userLabel }} <br />
+    <h3>Contacts</h3>
+    <ul>
+      @for(cm of user.userObject.wardenData.contactMethods; track cm) {
+        <li>
+          <p-button icon="pi pi-trash" pTooltip="Remove contact method {{ cm.value }}" (click)="removeContact(cm)"></p-button>
+          {{ cm.type }} : {{ cm.value }}
+        </li>
+      }
+    </ul>
+    @if (user?.userObject?.wardenData?.webAuthnAuthenticatorSummaries?.length) {
+      <h3>Web Authenticators</h3>
+      <ul>
+        @for(waa of user.userObject.wardenData.webAuthnAuthenticatorSummaries; track waa) {
+          <li>
+            <p-button icon="pi pi-trash" pTooltip="Remove web auth {{ webAuthLabel(waa) }}" (click)="removeWebAuthn(waa)"></p-button>
+            <p-button icon="pi pi-file-export" pTooltip="Export web auth {{ webAuthLabel(waa) }}" (click)="exportWebAuthn(waa.origin)"></p-button>
+            {{ webAuthLabel(waa) }}
+          </li>
+        }
+      </ul>
+    }
+
+    <div style="display: flex; flex-direction: row">
+      <p-button icon="pi pi-user" pTooltip="Add a new contact method" (click)="addContact()" icon="pi pi-user-plus"></p-button>
+      <p-button icon="pi pi-lock" pTooltip="Add this device as an authenticator" (click)="addWebAuthnDevice()"></p-button>
+      <p-button icon="pi pi-file-import" pTooltip="Import web authn" (click)="importWebAuthn()"></p-button>
+    </div>
+
+    <br />
+    Global Roles: {{ user.userObject.globalRoleIds | json}} <br />
+    <br />
+    Roles: {{ user.userObject.teamRoleMappings | json}} <br />
+    <hr />
+    Time (MS) left in token : {{ timeLeftMS }} <button (click)="refreshToken()">Refresh</button>
+  </div>
+</p-card>

package/src/components/acute-user-profile/acute-user-profile.component.scss

@@ -0,0 +1,32 @@
+#warden-user-profile-main-title {
+  font-weight: bolder;
+}
+
+#warden-user-profile-content {
+  display: flex;
+  flex-direction: column;
+}
+
+#warden-user-profile-user-id-section {
+  font-weight: bolder;
+}
+
+#warden-user-profile-full-name-section {
+}
+
+#warden-user-profile-contacts-section {
+}
+
+#warden-user-profile-web-authn-section {
+}
+
+#warden-user-profile-add-new-section {
+  display: flex;
+  flex-direction: row;
+}
+
+#warden-user-profile-roles-section {
+}
+
+#warden-user-profile-time-remaining-section {
+}

package/src/components/acute-user-profile/acute-user-profile.component.ts

@@ -0,0 +1,122 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { StringRatchet } from '@bitblit/ratchet-common/lang/string-ratchet';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { WardenContact } from '@bitblit/ratchet-warden-common/common/model/warden-contact';
+import { WardenUtils } from '@bitblit/ratchet-warden-common/common/util/warden-utils';
+import { WardenDelegatingCurrentUserProvidingUserServiceEventProcessingProvider } from '@bitblit/ratchet-warden-common/client/warden-delegating-current-user-providing-user-service-event-processing-provider';
+import { WardenUserService } from '@bitblit/ratchet-warden-common/client/warden-user-service';
+import { No } from '@bitblit/ratchet-common/lang/no';
+import { DurationRatchet } from '@bitblit/ratchet-common/lang/duration-ratchet';
+import { WardenLoggedInUserWrapper } from '@bitblit/ratchet-warden-common/client/provider/warden-logged-in-user-wrapper';
+import { WardenWebAuthnEntrySummary } from '@bitblit/ratchet-warden-common/common/model/warden-web-authn-entry-summary';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+import { CommonModule } from '@angular/common';
+import { TooltipModule } from 'primeng/tooltip';
+
+@Component({
+  selector: 'ngx-acute-warden-user-profile',
+  templateUrl: './acute-user-profile.component.html',
+  standalone: true,
+  imports: [ButtonModule, CardModule, CommonModule, TooltipModule],
+})
+export class AcuteUserProfileComponent {
+  public user: WardenLoggedInUserWrapper<any>;
+  public timeLeftMS: string;
+
+  constructor(
+    private router: Router,
+    public userService: WardenUserService<any>,
+    private userProvider: WardenDelegatingCurrentUserProvidingUserServiceEventProcessingProvider<any>,
+  ) {
+    Logger.info('Construct AcuteUserProfileComponent');
+    this.updateData();
+    this.userProvider.currentUserSubject.subscribe((_val) => {
+      this.updateData();
+    });
+  }
+  public toggleStayLoggedIn(): void {
+    Logger.info('Toggling stay logged in (currently %s before toggle)', this.userService.autoRefreshEnabled);
+    this.userService.autoRefreshEnabled = !this.userService.autoRefreshEnabled;
+  }
+
+  private updateData(): void {
+    Logger.info('Called updateData');
+    const tok: WardenLoggedInUserWrapper<any> = this.userService.fetchLoggedInUserWrapper();
+    this.user = tok;
+    this.timeLeftMS = this?.user?.userObject?.exp ? DurationRatchet.formatMsDuration(this.user.userObject.exp * 1000 - Date.now()) : '0';
+  }
+
+  public async refreshToken(): Promise<void> {
+    await this.userService.refreshToken();
+    this.updateData();
+  }
+
+  public async addContact(): Promise<void> {
+    const value: string = prompt('Please enter a phone number or email address to add');
+    const newContact: WardenContact = WardenUtils.stringToWardenContact(value);
+    if (newContact) {
+      const rval: boolean = await this.userService.addContactToLoggedInUser(newContact);
+      if (rval) {
+        await this.userService.refreshToken();
+      } else {
+        Logger.info('Add contact failed : %s', value);
+      }
+    } else {
+      Logger.info('No contact found for %s', value);
+    }
+  }
+
+  public async addWebAuthnDevice(): Promise<void> {
+    await this.userService.saveCurrentDeviceAsWebAuthnForCurrentUser();
+    await this.userService.refreshToken();
+  }
+
+  public async removeContact(ct: WardenContact): Promise<void> {
+    Logger.info('Remove %j', ct);
+    await this.userService.removeContactFromLoggedInUser(ct);
+    await this.userService.refreshToken();
+  }
+
+  public async removeWebAuthn(webId: WardenWebAuthnEntrySummary): Promise<void> {
+    Logger.info('Remove webauthn: %s', webId);
+    await this.userService.removeWebAuthnRegistrationFromLoggedInUser(webId.credentialIdBase64);
+    await this.userService.refreshToken();
+  }
+
+  public async exportWebAuthn(origin: string): Promise<string> {
+    Logger.info('exportWebAuthn: %s', origin);
+    const newValue: string = await this.userService.exportWebAuthnRegistrationEntryForLoggedInUser(origin);
+    alert(newValue);
+    Logger.info('Export token is %s', newValue);
+    return newValue;
+  }
+
+  public async importWebAuthn(): Promise<boolean> {
+    let rval: boolean = false;
+    const value = prompt('Input the web authn token to import');
+    if (StringRatchet.trimToNull(value)) {
+      Logger.info('importWebAuthn: %s', origin);
+      rval = await this.userService.importWebAuthnRegistrationEntryForLoggedInUser(value);
+    }
+    Logger.info('Import returned is %s', rval);
+    return rval;
+  }
+
+  public webAuthLabel(webId: WardenWebAuthnEntrySummary): string {
+    let rval: string = 'Error - missing';
+    if (webId) {
+      rval = webId.credentialIdBase64.substring(0, 4).toUpperCase() + ' : ';
+      rval += StringRatchet.trimToNull(webId.applicationName) ? webId.applicationName + ' ' : '';
+      rval += StringRatchet.trimToNull(webId.deviceLabel) ? webId.deviceLabel + ' ' : '';
+      rval += StringRatchet.trimToNull(webId.origin) ? webId.origin + ' ' : '';
+    }
+    return rval;
+  }
+
+  performLogout(): void {
+    this.userService.logout();
+    this.router.navigate(['/public/login']).then(No.op);
+  }
+}

package/src/constants.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from "@angular/core";
+
+export const ACUTE_WARDEN_LOGIN_PATH: InjectionToken<string> = new InjectionToken<string>('ACUTE_WARDEN_LOGIN_PATH');
+export const ACUTE_WARDEN_DEFAULT_POST_LOGIN_PATH: InjectionToken<string> = new InjectionToken<string>('ACUTE_WARDEN_DEFAULT_POST_LOGIN_PATH');
+export const ACUTE_WARDEN_DEFAULT_IF_LOGGED_IN_PATH: InjectionToken<string> = new InjectionToken<string>('ACUTE_WARDEN_DEFAULT_IF_LOGGED_IN_PATH');

package/src/guards/logged-in-guard.ts

@@ -0,0 +1,30 @@
+import { Inject, Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+import { Observable } from "rxjs";
+import { WardenUserService } from "@bitblit/ratchet-warden-common/client/warden-user-service";
+import { No } from "@bitblit/ratchet-common/lang/no";
+import { ACUTE_WARDEN_DEFAULT_POST_LOGIN_PATH, ACUTE_WARDEN_LOGIN_PATH } from "../constants.ts";
+import { RequireRatchet } from "@bitblit/ratchet-common/lang/require-ratchet";
+
+@Injectable()
+export class LoggedInGuard implements CanActivate {
+  constructor(
+    private userService: WardenUserService<any>,
+    private router: Router,
+    @Inject(ACUTE_WARDEN_LOGIN_PATH) private loginPath: string,
+    @Inject(ACUTE_WARDEN_DEFAULT_POST_LOGIN_PATH) private defaultPostLoginPath: string
+  ) {
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.loginPath, 'ACUTE_WARDEN_LOGIN_PATH');
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.defaultPostLoginPath, 'ACUTE_WARDEN_DEFAULT_POST_LOGIN_PATH');
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    if (!this.userService.isLoggedIn()) {
+      // Storing post-login redirect is handling by the login provider
+      const target: string = state.url === this.loginPath ? this.defaultPostLoginPath : state.url;
+      this.router.navigate([this.loginPath], { queryParams: { returnUrl: target } }).then(No.op);
+      return false;
+    }
+    return true;
+  }
+}

package/src/guards/not-logged-in-guard.ts

@@ -0,0 +1,41 @@
+import { Inject, Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from "@angular/router";
+import { Observable } from "rxjs";
+
+import { Logger } from "@bitblit/ratchet-common/logger/logger";
+import { WardenUserService } from "@bitblit/ratchet-warden-common/client/warden-user-service";
+import { No } from "@bitblit/ratchet-common/lang/no";
+import { ACUTE_WARDEN_DEFAULT_IF_LOGGED_IN_PATH, ACUTE_WARDEN_LOGIN_PATH } from "../constants.ts";
+import { RequireRatchet } from "@bitblit/ratchet-common/lang/require-ratchet";
+
+@Injectable()
+export class NotLoggedInGuard implements CanActivate {
+  constructor(
+    private userService: WardenUserService<any>,
+    private router: Router,
+    @Inject(ACUTE_WARDEN_DEFAULT_IF_LOGGED_IN_PATH) private defaultIfLoggedInPath: string,
+    @Inject(ACUTE_WARDEN_LOGIN_PATH) private loginPath: string
+  ) {
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.defaultIfLoggedInPath, 'ACUTE_WARDEN_DEFAULT_IF_LOGGED_IN_PATH');
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(this.loginPath, 'ACUTE_WARDEN_LOGIN_PATH');
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    Logger.info('--- %j', route.queryParamMap);
+    if (route.queryParamMap.get('logout') === 'true') {
+      Logger.info('Logging out...');
+      this.userService.logout();
+      this.router.navigate([this.loginPath]).then(No.op);
+    }
+
+    if (this.userService.isLoggedIn()) {
+      // Redirect to the default or saved
+      const target: string = this.defaultIfLoggedInPath;
+
+      Logger.info('NotLoggedInGuard fail(logged in) : Redirecting to logged in %s', target);
+      this.router.navigate([target]).then(No.op);
+      return false;
+    }
+    return true;
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './constants';
+
+export * from './build/ngx-acute-warden-info';
+
+export * from './components/acute-create-user/acute-create-user.component';
+export * from './components/acute-login/acute-login.component';
+export * from './components/acute-magic-lander/acute-magic-lander.component';
+export * from './components/acute-user-profile/acute-user-profile.component';
+
+export * from './services/warden-adapter.service';

package/src/services/warden-adapter-service-config.ts

@@ -0,0 +1,3 @@
+export interface WardenAdapterServiceConfig {
+  postLogoutUrl: string;
+}

package/src/services/warden-adapter.service.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { WardenAdapterService } from './warden-adapter.service';
+
+describe('WardenAdapterService', () => {
+  let service: WardenAdapterService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(WardenAdapterService);
+  });
+
+  test.skip('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/services/warden-adapter.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Logger } from '@bitblit/ratchet-common/logger/logger';
+import { No } from '@bitblit/ratchet-common/lang/no';
+import { Router } from '@angular/router';
+import { WardenUserServiceEventProcessingProvider } from '@bitblit/ratchet-warden-common/client/provider/warden-user-service-event-processing-provider';
+import { WardenLoggedInUserWrapper } from '@bitblit/ratchet-warden-common/client/provider/warden-logged-in-user-wrapper';
+import { WardenContact } from '@bitblit/ratchet-warden-common/common/model/warden-contact';
+import { RequireRatchet } from '@bitblit/ratchet-common/lang/require-ratchet';
+import { WardenClient } from '@bitblit/ratchet-warden-common/client/warden-client';
+
+@Injectable({ providedIn: 'root' })
+export class WardenAdapterService implements WardenUserServiceEventProcessingProvider<any> {
+  constructor(
+    public router: Router,
+    public wardenClient: WardenClient,
+  ) {}
+
+  public onAutomaticLogout(): void {
+    // Make sure we leave
+    this.router.navigate(['/public/login']).then(No.op);
+  }
+
+  public onAutomaticTokenRefresh(_refreshUser: WardenLoggedInUserWrapper<any>): void {
+    Logger.info('User token refreshed');
+  }
+
+  public onLoginFailure(reason: string): void {
+    Logger.info('Failed to login: %s', reason);
+  }
+
+  public onLogout(): void {
+    // Make sure we leave
+    this.router.navigate(['/public/login']).then(No.op);
+  }
+
+  public onSuccessfulLogin(newUser: WardenLoggedInUserWrapper<any>): void {
+    Logger.info('Logged in as %s', newUser?.userObject?.wardenData?.userLabel);
+  }
+
+  public async sendMagicLink(contact: WardenContact, magicLanderUrl: string, postLoginUrl?: string): Promise<void> {
+    RequireRatchet.notNullUndefinedOrOnlyWhitespaceString(magicLanderUrl, 'magicLanderUrl may not be empty');
+
+    const mUrl: URL = new URL(magicLanderUrl);
+    const param: URLSearchParams = new URLSearchParams(mUrl.search);
+    if (!param.has('code')) {
+      param.set('code', '{CODE}');
+    }
+    if (!param.has('meta')) {
+      param.set('meta', '{META}');
+    }
+
+    mUrl.search = param.toString();
+
+    /*
+    let curUrl: string = loc.toString();
+    curUrl = curUrl.indexOf('?') > -1 ? curUrl.substring(0, curUrl.indexOf('?')) : curUrl;
+    let landingUrl: string = curUrl.split('public/login').join('public/magic-lander');
+    landingUrl += '?code={CODE}&meta={META}';
+     */
+    const meta: Record<string, string> = {
+      redirect: postLoginUrl,
+    };
+    const sent: boolean = await this.wardenClient.sendMagicLink(contact, mUrl.toString(), meta);
+
+    Logger.info('Sent was %s : %s', sent, mUrl.toString());
+  }
+}