@sneat/auth-ui 0.1.0

package/src/lib/components/user-auth-providers/user-auth-provider-status.ts

@@ -0,0 +1,172 @@
+import {
+  Component,
+  EventEmitter,
+  input,
+  Output,
+  signal,
+  computed,
+  OnDestroy,
+  inject,
+} from '@angular/core';
+import {
+  IonButton,
+  IonButtons,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonSpinner,
+} from '@ionic/angular/standalone';
+import {
+  AuthProviderID,
+  ISneatAuthUser,
+  SneatAuthStateService,
+} from '@sneat/auth-core';
+import { ErrorLogger, IErrorLogger } from '@sneat/core';
+import { Subject, takeUntil } from 'rxjs';
+
+type IonicColor =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'light'
+  | 'medium'
+  | 'dark';
+
+interface provider {
+  readonly id: AuthProviderID;
+  readonly title: string;
+  readonly icon: string;
+  readonly color: IonicColor;
+}
+
+@Component({
+  selector: 'sneat-user-auth-provider-status',
+  templateUrl: './user-auth-provider-status.html',
+  imports: [IonItem, IonIcon, IonLabel, IonButtons, IonButton, IonSpinner],
+})
+export class UserAuthAProviderStatusComponent implements OnDestroy {
+  private readonly errorLogger = inject<IErrorLogger>(ErrorLogger);
+  private readonly authStateService = inject(SneatAuthStateService);
+
+  private readonly $destroyed = new Subject<void>();
+  public providerID = input.required<AuthProviderID>();
+  protected readonly provider = computed<provider>(() => {
+    const id = this.providerID();
+    switch (id) {
+      case 'facebook.com':
+        return {
+          id: id,
+          title: 'Facebook',
+          icon: 'logo-facebook',
+          color: 'primary',
+        };
+      case 'google.com':
+        return {
+          id,
+          title: 'Google',
+          icon: 'logo-google',
+          color: 'danger',
+        };
+      case 'apple.com':
+        return {
+          id,
+          title: 'Apple',
+          icon: 'logo-apple',
+          color: 'dark',
+        };
+      case 'microsoft.com':
+        return {
+          id,
+          title: 'Microsoft',
+          icon: 'logo-windows',
+          color: 'secondary',
+        };
+      case undefined:
+        throw new Error('Undefined provider ID');
+      default:
+        return {
+          id,
+          title: id,
+          icon: 'help-circle',
+          color: 'medium',
+        };
+    }
+  });
+
+  readonly signingInWith = input.required<AuthProviderID | undefined>();
+
+  @Output() readonly signingInWithChange = new EventEmitter<
+    AuthProviderID | undefined
+  >();
+
+  protected readonly currentUser = signal<ISneatAuthUser | null | undefined>(
+    undefined,
+  );
+
+  constructor() {
+    this.authStateService.authUser
+      .pipe(takeUntil(this.$destroyed))
+      .subscribe((authUser) => {
+        this.currentUser.set(authUser);
+      });
+  }
+
+  protected readonly isSigningIn = computed(
+    () => this.signingInWith() === this.providerID(),
+  );
+
+  protected readonly isDisabled = computed(() => {
+    const signingInWith = this.signingInWith();
+    return !!signingInWith;
+  });
+
+  readonly authProviderUserInfo = computed(() => {
+    const providerID = this.providerID();
+    return this.currentUser()?.providerData?.find(
+      (pd) => pd.providerId == providerID,
+    );
+  });
+
+  readonly isConnected = computed(() => !!this.authProviderUserInfo());
+
+  protected connect(): void {
+    const providerID = this.providerID();
+    if (!providerID) {
+      throw new Error('auth providerID is not set');
+    }
+    this.signingInWithChange.emit(providerID);
+    this.authStateService
+      .linkWith(providerID)
+      .then(() => {
+        this.signingInWithChange.emit(undefined);
+      })
+      .catch((e) => {
+        console.error('Failed to connect', e);
+        this.signingInWithChange.emit(undefined);
+      });
+  }
+
+  protected disconnect(): void {
+    const providerID = this.providerID();
+    if (!providerID) {
+      this.errorLogger.logError('auth providerID is not set');
+      return;
+    }
+    this.authStateService
+      .unlinkAuthProvider(providerID)
+      .then(() => this.signingInWithChange.emit(undefined))
+      .catch((err) => {
+        this.signingInWithChange.emit(undefined);
+        this.errorLogger.logError(err);
+      });
+    this.signingInWithChange.emit(providerID);
+  }
+
+  public ngOnDestroy(): void {
+    this.$destroyed.next();
+    this.$destroyed.complete();
+  }
+}

package/src/lib/components/user-required-fields/index.ts

@@ -0,0 +1,2 @@
+export * from './user-required-fields-modal.component';
+export * from './user-required-fields.service';

package/src/lib/components/user-required-fields/user-required-fields-modal.component.html

@@ -0,0 +1,64 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-title>About me</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="close()">
+        <ion-icon name="close-outline" />
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <form (ngSubmit)="save()" [formGroup]="form">
+    <ion-item>
+      <ion-input
+        label="First name"
+        name="first_name"
+        type="text"
+        required
+        max="20"
+        [formControl]="firstName"
+      />
+    </ion-item>
+    <ion-item>
+      <ion-input
+        label="Last name"
+        name="last_name"
+        type="text"
+        required
+        max="20"
+        [formControl]="lastName"
+      />
+    </ion-item>
+    @if (!gender.value) {
+      <ion-item-divider>
+        <ion-label>Gender</ion-label>
+      </ion-item-divider>
+    }
+    <sneat-select-from-list
+      label="Gender"
+      [items]="genders"
+      [formControl]="gender"
+    />
+
+    @if (gender.value || ageGroup.value) {
+      @if (!ageGroup.value) {
+        <ion-item-divider>
+          <ion-label>Age group</ion-label>
+        </ion-item-divider>
+      }
+      <sneat-select-from-list
+        label="Age group"
+        [items]="ageGroups"
+        [formControl]="ageGroup"
+      />
+    }
+  </form>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-buttons slot="end">
+      <ion-button [disabled]="submitting" (click)="save()">Save</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

package/src/lib/components/user-required-fields/user-required-fields-modal.component.spec.ts

@@ -0,0 +1,45 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ModalController } from '@ionic/angular/standalone';
+import { SneatUserService, UserRecordService } from '@sneat/auth-core';
+import { ErrorLogger } from '@sneat/core';
+import { ClassName } from '@sneat/ui';
+import { of } from 'rxjs';
+import { UserRequiredFieldsModalComponent } from './user-required-fields-modal.component';
+
+describe('UserRequiredFieldsModalComponent', () => {
+  let component: UserRequiredFieldsModalComponent;
+  let fixture: ComponentFixture<UserRequiredFieldsModalComponent>;
+
+  beforeEach(waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserRequiredFieldsModalComponent],
+      providers: [
+        { provide: ClassName, useValue: 'TestComponent' },
+        {
+          provide: ErrorLogger,
+          useValue: { logError: vi.fn(), logErrorHandler: () => vi.fn() },
+        },
+        { provide: ModalController, useValue: { dismiss: vi.fn() } },
+        { provide: UserRecordService, useValue: { initUserRecord: vi.fn() } },
+        {
+          provide: SneatUserService,
+          useValue: {
+            userState: of({ record: undefined }),
+          },
+        },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(UserRequiredFieldsModalComponent, {
+        set: { imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] },
+      })
+      .compileComponents();
+    fixture = TestBed.createComponent(UserRequiredFieldsModalComponent);
+    component = fixture.componentInstance;
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/user-required-fields/user-required-fields-modal.component.ts

@@ -0,0 +1,141 @@
+import { Component, Input, inject } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonTitle,
+  IonToolbar,
+  ModalController,
+} from '@ionic/angular/standalone';
+import {
+  IInitUserRecordRequest,
+  ISneatUserState,
+  SneatUserService,
+  UserRecordService,
+} from '@sneat/auth-core';
+import { AgeGroupID, Gender } from '@sneat/core';
+import { ClassName, ISelectItem, SelectFromListComponent } from '@sneat/ui';
+import { ISpaceContext } from '@sneat/space-models';
+import { SneatBaseComponent } from '@sneat/ui';
+import { takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'sneat-user-required-fields-form',
+  templateUrl: './user-required-fields-modal.component.html',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SelectFromListComponent,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonButtons,
+    IonButton,
+    IonIcon,
+    IonContent,
+    IonItem,
+    IonInput,
+    IonItemDivider,
+    IonLabel,
+    IonFooter,
+  ],
+  providers: [
+    {
+      provide: ClassName,
+      useValue: 'UserRequiredFieldsModalComponent',
+    },
+  ],
+})
+export class UserRequiredFieldsModalComponent extends SneatBaseComponent {
+  private readonly modalController = inject(ModalController);
+  private readonly userRecordService = inject(UserRecordService);
+  private readonly sneatUserService = inject(SneatUserService);
+
+  @Input({ required: true }) space: ISpaceContext = { id: '' };
+
+  protected readonly genders: ISelectItem[] = [
+    { id: 'male', emoji: '♂️', title: 'Male' },
+    { id: 'female', emoji: '♀️', title: 'Female' },
+    { id: 'other', emoji: '⚥', title: 'Other' },
+    { id: 'undisclosed', iconName: 'body', title: 'Undisclosed' },
+  ];
+
+  protected readonly ageGroups: ISelectItem[] = [
+    { id: 'adult', emoji: '🧓', title: 'Adult' },
+    { id: 'child', emoji: '🧒', title: 'Child' },
+  ];
+
+  protected readonly firstName = new FormControl('', Validators.required);
+  protected readonly lastName = new FormControl('', Validators.required);
+  protected readonly gender = new FormControl('', Validators.required);
+  protected readonly ageGroup = new FormControl('', Validators.required);
+
+  protected readonly form = new FormGroup({
+    firstName: this.firstName,
+    lastName: this.lastName,
+    gender: this.gender,
+    ageGroup: this.ageGroup,
+  });
+
+  protected submitting = false;
+
+  protected userState?: ISneatUserState;
+
+  constructor() {
+    super();
+    this.sneatUserService.userState.pipe(takeUntil(this.destroyed$)).subscribe({
+      next: (userState) => (this.userState = userState),
+    });
+  }
+
+  protected save(): void {
+    this.submitting = true;
+    if (!this.form.valid) {
+      setTimeout(() => {
+        alert('Please fill in all fields.');
+        this.submitting = false;
+      });
+      return;
+    }
+
+    const gender = this.gender.value as Gender;
+    const ageGroup = this.ageGroup.value as AgeGroupID;
+
+    const request: IInitUserRecordRequest = {
+      names: {
+        firstName: this.firstName.value || undefined,
+        lastName: this.lastName.value || undefined,
+      },
+      gender,
+      ageGroup,
+    };
+    this.userRecordService.initUserRecord(request).subscribe({
+      next: () => this.modalController.dismiss(true).catch(console.error),
+      error: (err) => {
+        this.errorLogger.logError('Failed to init user record:', err);
+        alert('Failed to init user record');
+        this.submitting = false;
+      },
+    });
+  }
+
+  protected close(): void {
+    this.modalController
+      .dismiss(false)
+      .catch(this.errorLogger.logErrorHandler('Failed to close modal'));
+  }
+}