@sneat/auth-ui 0.1.3 → 0.1.6

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

@@ -1,172 +0,0 @@
-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/user-required-fields-modal.component.html

@@ -1,64 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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'));
-  }
-}