@rtsee/ngx 0.0.59 → 0.0.61

package/projects/ngx/src/lib/components/rtsee-auth/forgot-password/forgot-password.component.ts

@@ -1,42 +0,0 @@
-import { Component } from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
-import { UtilsService } from '../services/utils.service';
-import { ForgotPasswordForm, TypedReactiveForm } from '../types/auth-form.type';
-import {RouterLink} from "@angular/router";
-import { RTSeeAuthConfiguration, AuthEndpointsKeys } from "@rtsee/auth";
-import { RTSeeAuthService } from "../services/auth.service";
-
-@Component({
-  selector: 'rtsee-forgot-password',
-  templateUrl: './forgot-password.component.html',
-  imports: [
-    ReactiveFormsModule,
-    RouterLink
-  ],
-  standalone: true
-})
-export class ForgotPasswordComponent {
-  public isLoading: boolean = false;
-  public readonly emailForm: FormGroup<TypedReactiveForm<ForgotPasswordForm>>;
-  public readonly forgotPasswordFormKeys: Record<keyof ForgotPasswordForm, string>;
-  authConfiguration: RTSeeAuthConfiguration;
-
-  constructor(
-    private readonly formBuilder: FormBuilder,
-    private authService: RTSeeAuthService
-  ) {
-    this.emailForm= this.formBuilder.group<TypedReactiveForm<ForgotPasswordForm>>({
-      email: this.formBuilder.nonNullable.control('', { validators: [Validators.required, Validators.email] }),
-    });
-    this.forgotPasswordFormKeys = UtilsService.getKeysAsValueObject(this.emailForm.getRawValue());
-    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
-  }
-
-  public submitEmail(): void {
-    if (this.emailForm.valid) {
-    }
-  }
-
-  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
-}
-

package/projects/ngx/src/lib/components/rtsee-auth/reset-password/reset-password.component.html

@@ -1,43 +0,0 @@
-<div class="auth-container">
-  <img src="assets/img.png" alt="Company Logo" class="logo" height="38" width="37" />
-  <h2 class="auth-title">Відновлення Пароля</h2>
-  <p class="auth-title-description">
-    Будь ласка, введіть новий пароль для вашого акаунту.
-  </p>
-
-  <form class="auth-form"
-        [formGroup]="resetPasswordForm"
-        (ngSubmit)="resetPassword()"
-  >
-    <!-- New Password Field -->
-    <label for="new-password"
-           class="auth-sm-medium"
-    >Новий пароль</label>
-    <input [formControlName]="passwordFormKeys.password"
-           type="password" id="new-password"
-           placeholder="Введіть новий пароль"
-           class="auth-input-container password-input"
-    />
-
-    <!-- Confirm Password Field -->
-    <label for="confirm-password"
-           class="auth-sm-medium"
-    >Підтвердження пароля</label>
-    <input [formControlName]="passwordFormKeys.passwordConfirm"
-           type="password" id="confirm-password"
-           placeholder="Підтвердіть пароль"
-           class="auth-input-container password-input"
-    />
-
-    <!-- Reset Password Button -->
-    <button type="submit"
-            class="auth-btn-container"
-    >Відновити Пароль</button>
-  </form>
-
-  <!-- Redirect to Login -->
-  <p class="auth-media-blue-gray-sm-normal">
-    <span>Згадали пароль?</span>
-    <a href="#" class="auth-deep-blue-sm-medium">Увійдіть</a>
-  </p>
-</div>

package/projects/ngx/src/lib/components/rtsee-auth/reset-password/reset-password.component.ts

@@ -1,83 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, ValidatorFn, Validators} from '@angular/forms';
-import { ResetPasswordForm, TypedReactiveForm } from '../types/auth-form.type';
-import { UtilsService } from '../services/utils.service';
-import { ActivatedRoute } from '@angular/router';
-import { FormErrorKey } from '../../enums/form.enum';
-import { COMMON_CONSTANTS } from '../../constans/common.const';
-import { RTSeeAuthService } from "../services/auth.service";
-import { RTSeeAuthConfiguration } from "@rtsee/auth";
-
-@Component({
-  selector: 'rtsee-reset-password',
-  templateUrl: './reset-password.component.html',
-  imports: [
-    ReactiveFormsModule
-  ],
-  standalone: true
-})
-export class ResetPasswordComponent implements OnInit {
-  public isLoading: boolean = false;
-  public resetPasswordForm: FormGroup<TypedReactiveForm<ResetPasswordForm>>;
-  public passwordFormKeys: Record<keyof ResetPasswordForm, string>;
-  public hidePassword: Record<keyof ResetPasswordForm, boolean> = {
-    password: true,
-    passwordConfirm: true
-  };
-  private token!: string;
-  authConfiguration: RTSeeAuthConfiguration;
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private route: ActivatedRoute,
-    private authService: RTSeeAuthService
-  ) {
-    this.resetPasswordForm = this.formBuilder.group({
-      password: this.formBuilder.control('', {validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true}),
-      passwordConfirm: this.formBuilder.control('', {validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true}),
-    }, {validators: [this.passwordMatchValidator()]});
-    this.passwordFormKeys = UtilsService.getKeysAsValueObject(this.resetPasswordForm.value);
-    this.authConfiguration = this.authService.authConfiguration;
-  }
-
-  public ngOnInit(): void {
-    this.token = this.route.snapshot.params['token'];
-  }
-
-  public resetPassword(): void {
-    if (this.resetPasswordForm.valid) {
-      // this.isLoading = true;
-      // this.accountService.resetPassword({passwords: this.resetPasswordForm.getRawValue(), token: this.token})
-      //   .subscribe((success) => {
-      //     this.isLoading = false;
-      //     if (success) {
-      //       this.router.navigate(['/', 'sign-in']);
-      //     }
-      //   })
-    }
-  }
-
-  private passwordMatchValidator(): ValidatorFn {
-    // @ts-ignore
-    return (form: FormGroup<TypedReactiveForm<ResetPasswordForm>>): ValidationErrors | null => {
-      const password = form.value.password;
-      const passwordConfirm = form.value.passwordConfirm;
-      if (password !== passwordConfirm) {
-        if (form.controls.password.valid) {
-          form.controls.password.setErrors({[FormErrorKey.passwordsMismatch]: true});
-        }
-        if (form.controls.passwordConfirm.valid) {
-          form.controls.passwordConfirm.setErrors({[FormErrorKey.passwordsMismatch]: true});
-        }
-        return {[FormErrorKey.passwordsMismatch]: true};
-      }
-      if (form.controls.password.hasError(FormErrorKey.passwordsMismatch)) {
-        form.controls.password.setErrors(null);
-      }
-      if (form.controls.passwordConfirm.hasError(FormErrorKey.passwordsMismatch)) {
-        form.controls.passwordConfirm.setErrors(null);
-      }
-      return null;
-    }
-  }
-}

package/projects/ngx/src/lib/components/rtsee-auth/services/auth.service.ts

@@ -1,40 +0,0 @@
-import { Injectable } from '@angular/core';
-import {HttpClient} from "@angular/common/http";
-import {
-  RTSeeAuth,
-  IRtseeSignInRequestOptions,
-  IRTSeeSignInResponse,
-  IRtseeSignUpRequestOptions,
-  IRTSeeSignUpResponse,
-  AuthEndpointsKeys,
-  RTSeeAuthConfiguration
-} from "@rtsee/auth";
-import { Observable, tap } from "rxjs";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class RTSeeAuthService {
-  rtseeAuth!: RTSeeAuth<any>;
-  authConfiguration!: RTSeeAuthConfiguration;
-
-  constructor(
-    private http: HttpClient,
-  ) {}
-
-  init(auth: RTSeeAuth<any>) {
-    this.rtseeAuth = auth;
-    this.authConfiguration = this.rtseeAuth.authConfiguration;
-  }
-
-  signIn(credentials: IRtseeSignInRequestOptions): Observable<IRTSeeSignInResponse> {
-    return this.http
-      .post<IRTSeeSignInResponse>(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), credentials)
-      .pipe(tap((res) => this.rtseeAuth.authenticate(res)))
-  }
-
-  signUp(credentials: IRtseeSignUpRequestOptions): Observable<IRTSeeSignUpResponse> {
-    return this.http
-      .post<IRTSeeSignUpResponse>(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials)
-  }
-}

package/projects/ngx/src/lib/components/rtsee-auth/services/utils.service.ts

@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UtilsService {
-
-  constructor() {
-  }
-
-  public static getKeysAsValueObject<T extends object>(obj: T): Record<string, string> { // object was {}
-    if (obj) {
-      return Object.keys(obj).reduce<Record<string, string>>((result, value) => {
-        result[value] = value;
-        return result;
-      }, {});
-    }
-    return {};
-  }
-}

package/projects/ngx/src/lib/components/rtsee-auth/sign-in/sign-in.component.html

@@ -1,84 +0,0 @@
-<div class="auth-container rtsee-form-container" >
-  <img [ngSrc]="authConfiguration.appLogo"
-       alt="Company Logo"
-       class="auth-logo"
-       height="37"
-       width="37"
-  />
-  <h2 class="auth-title">Вхід в Особистий Кабінет</h2>
-  <p class="auth-title-description">Аби переглядати казки, увійдіть в свій особистий кабінет</p>
-
-  <form class="auth-form rtsee-form" [formGroup]="signInForm" (ngSubmit)="login()">
-    <div class="rtsee-form-field-container">
-      <p-inputgroup >
-        <p-floatlabel variant="on">
-          <input id="user-email"
-                 pInputText
-                 [formControl]="usernameField"
-          />
-          <label for="user-email">Email</label>
-        </p-floatlabel>
-      </p-inputgroup>
-      @if (!usernameField.valid && usernameField.touched) {
-        <p-message class="rtsee-form-field-error-message"
-                   severity="error"
-                   variant="simple"
-                   size="small"
-        >Email is invalid</p-message>
-      }
-    </div>
-    <div class="rtsee-form-field-container">
-      <p-inputgroup>
-        <p-floatlabel variant="on">
-          <p-password id="user-password"
-                      [formControl]="passwordField"
-                      [feedback]="false"
-          />
-          <label for="user-password">Password</label>
-        </p-floatlabel>
-      </p-inputgroup>
-
-      @if (!passwordField.valid && passwordField.touched) {
-        <p-message class="rtsee-form-field-error-message"
-                   severity="error"
-                   variant="simple"
-                   size="small"
-        >Password is required</p-message>
-      }
-      @if (serverSideError) {
-        <p-message class="rtsee-form-field-error-message"
-                   severity="error"
-                   variant="simple"
-                   size="small"
-        >{{serverSideError}}</p-message>
-      }
-    </div>
-    <div class="rtsee-form-field-container">
-      <p-checkbox inputId="remember" [binary]="true" [formControl]="rememberField" />
-      <label for="remember" class="ml-2"> Remember me </label>
-    </div>
-    <div class="rtsee-form-field-container">
-      <a href="#"
-         [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)"
-         class="auth-deep-blue-sm-medium"
-      >Забули пароль?</a>
-    </div>
-    <div class="rtsee-form-submit-container">
-      <p-button type="submit"
-                label="Sign In"
-                [disabled]="loadInProgress"
-      />
-      @if (loadInProgress) {
-        <p-progress-spinner class="rtsee-progress-spinner rtsee-progress-spinner-sm"></p-progress-spinner>
-      }
-    </div>
-  </form>
-  <p class="rtsee-form-label">
-    <span>Немає акаунту?</span>
-    <span>&nbsp;</span>
-    <a href="#"
-       [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)"
-       class="auth-deep-blue-sm-medium"
-    >Створіть!</a>
-  </p>
-</div>

package/projects/ngx/src/lib/components/rtsee-auth/sign-in/sign-in.component.ts

@@ -1,120 +0,0 @@
-import { Component } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
-import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { SignInForm, TypedReactiveForm } from '../types/auth-form.type';
-import { NgOptimizedImage } from '@angular/common';
-import { RTSeeAuthService } from '../services/auth.service';
-import { AuthEndpointsKeys, RTSeeAuthConfiguration } from '@rtsee/auth';
-import { ButtonModule } from 'primeng/button';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputText } from 'primeng/inputtext';
-import { Password } from 'primeng/password';
-import { FloatLabel } from 'primeng/floatlabel';
-import { Checkbox } from 'primeng/checkbox';
-import { Message } from 'primeng/message';
-import { ProgressSpinner } from 'primeng/progressspinner';
-import {ServerSideError} from "../../../common/interfaces";
-
-@Component({
-  selector: 'rtsee-sign-in',
-  templateUrl: './sign-in.component.html',
-  imports: [
-    NgOptimizedImage,
-    ReactiveFormsModule,
-    RouterLink,
-    ButtonModule,
-    InputGroup,
-    InputText,
-    Password,
-    FloatLabel,
-    Checkbox,
-    Message,
-    ProgressSpinner
-  ],
-  standalone: true
-})
-export class SignInComponent {
-  public readonly signInForm: FormGroup<TypedReactiveForm<SignInForm>> = this.formBuilder.group<TypedReactiveForm<SignInForm>>({
-    username: this.formBuilder.nonNullable.control({
-      value: '',
-      disabled: false
-    },
-    {
-      validators: [ Validators.required, Validators.email ]
-    }),
-    password: this.formBuilder.nonNullable.control({
-      value: '',
-      disabled: false
-    }, { validators: [ Validators.required ]}),
-    remember: this.formBuilder.nonNullable.control(false),
-  });
-  public readonly authConfiguration: RTSeeAuthConfiguration;
-  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
-  public loadInProgress: boolean = false;
-  public serverSideError: string = '';
-
-  constructor(
-    private readonly formBuilder: FormBuilder,
-    private readonly router: Router,
-    public authService: RTSeeAuthService
-  ) {
-    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
-  }
-
-  get usernameField(): FormControl<string> {
-    return this.signInForm.get('username') as FormControl<string>;
-  }
-
-  get passwordField(): FormControl<string> {
-    return this.signInForm.get('password') as FormControl<string>;
-  }
-
-  get rememberField(): FormControl<boolean> {
-    return this.signInForm.get('remember') as FormControl<boolean>;
-  }
-
-  public login(): void {
-    if (this.signInForm.valid) {
-      this.disableFormFields();
-      this.authService.signIn(this.signInForm.getRawValue())
-        .subscribe({
-          next: (() => {
-            void this.router.navigate(this.authService.rtseeAuth.authConfiguration.defaultPostLoginRoute);
-            this.enableFormFields();
-          }),
-          error: ((error: ServerSideError) => {
-            console.log(error);
-            this.showServerSideErrorForXSeconds(error.error.message);
-            this.enableFormFields();
-          }),
-          complete: (() => {
-            this.enableFormFields();
-          })
-        });
-    } else {
-      this.signInForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
-    }
-  }
-
-  private showServerSideErrorForXSeconds(message: string, x: number = 3): void {
-    this.serverSideError = message;
-
-    setTimeout(() => {
-      this.serverSideError = '';
-    }, x * 1000); // we can do pop-up message instead
-  }
-
-  private disableFormFields(): void {
-    this.loadInProgress = true;
-    this.usernameField.disable();
-    this.passwordField.disable();
-    this.rememberField.disable();
-  }
-
-  private enableFormFields(): void {
-    this.loadInProgress = false;
-    this.usernameField.enable(); // fuck me, but [disabled]="loadInProgress" on the field no longer works :(
-    this.passwordField.enable();
-    this.rememberField.enable();
-  }
-}

package/projects/ngx/src/lib/components/rtsee-auth/sign-up/sign-up.component.html

@@ -1,51 +0,0 @@
-<div class="auth-container">
-  <img ngSrc="/assets/img.png" alt="Company Logo" class="logo" height="38" width="37"/>
-  <h2 class="auth-title">Реєстрація в Особистий Кабінет</h2>
-  <p class="auth-title-description">Створіть свій особистий кабінет, щоб переглядати казки</p>
-
-  <form class="auth-form" [formGroup]="signUpForm" (ngSubmit)="signUp()">
-    <!-- Email Field -->
-    <label for="sign-up-email" class="auth-sm-medium">Електрон пошта</label>
-    <input [formControlName]="signUpFormKeys.email"
-           type="email" id="sign-up-email"
-           placeholder="Введіть електронну пошту"
-           class="auth-input-container email-input"
-    />
-
-    <!-- Password Field -->
-    <label for="sign-up-password" class="auth-sm-medium">Паро</label>
-    <input [formControlName]="signUpFormKeys.password"
-           type="password" id="sign-up-password"
-           placeholder="Створіть пароль"
-           class="auth-input-container password-input"
-    />
-
-    <!-- Confirm Password Field -->
-    <label for="confirm-password" class="auth-sm-medium">Підтверд пароль</label>
-    <input [formControlName]="signUpFormKeys.passwordConfirmation"
-           type="password"
-           id="confirm-password"
-           placeholder="Підтвердьте пароль"
-           class="auth-input-container password-input"
-    />
-
-    <!-- Terms and Conditions -->
-    <div class="auth-options">
-      <label class="auth-checkbox-label">
-        <input type="checkbox"
-               class="auth-deep-blue-sm-medium"
-               [formControlName]="signUpFormKeys.terms"
-        />
-        Я погоджуюсь з&nbsp;<a href="#" class="auth-deep-blue-sm-medium">умовами використання</a>
-      </label>
-    </div>
-
-    <!-- Sign-Up Button -->
-    <button type="submit" class="auth-btn-container">Зареєструватись</button>
-  </form>
-
-  <!-- Redirect to Sign-In -->
-  <p class="auth-media-blue-gray-sm-normal">
-    Вже маєте акаунт? <a href="#" [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)" class="auth-deep-blue-sm-medium">Увійдіть</a>
-  </p>
-</div>

package/projects/ngx/src/lib/components/rtsee-auth/sign-up/sign-up.component.ts

@@ -1,67 +0,0 @@
-import { Component } from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
-import { SignUpForm, TypedReactiveForm } from '../types/auth-form.type';
-import { UtilsService } from '../services/utils.service';
-import {ConfirmPasswordValidator} from "../validators/form-fields-validators";
-import {RouterLink} from "@angular/router";
-import {NgOptimizedImage} from "@angular/common";
-import {RTSeeAuthService} from "../services/auth.service";
-import {RTSeeAuthConfiguration, AuthEndpointsKeys} from "@rtsee/auth";
-
-@Component({
-  selector: 'rtsee-sign-up',
-  templateUrl: './sign-up.component.html',
-  imports: [
-    ReactiveFormsModule,
-    RouterLink,
-    NgOptimizedImage
-  ],
-  standalone: true
-})
-export class SignUpComponent {
-  public readonly signUpForm: FormGroup<TypedReactiveForm<SignUpForm>>;
-  public readonly signUpFormKeys: Record<keyof SignUpForm, string>;
-  public readonly authConfiguration: RTSeeAuthConfiguration;
-
-  constructor(
-    private readonly formBuilder: FormBuilder,
-    private authService: RTSeeAuthService
-  ) {
-    this.signUpForm = this.formBuilder.group<TypedReactiveForm<SignUpForm>>({
-      email: this.formBuilder.control('', { validators: [Validators.required, Validators.email] }),
-      password: this.formBuilder.control('', { validators: [Validators.required, Validators.minLength(6)] }),
-      passwordConfirmation: this.formBuilder.control('', {
-        validators: [
-          Validators.required,
-          Validators.minLength(6)
-        ]
-      }),
-      terms: this.formBuilder.control(false, { nonNullable: true,
-        validators: [Validators.requiredTrue]
-      }),
-    }, { validators: [ ConfirmPasswordValidator.MatchFields ] });
-    this.signUpFormKeys = UtilsService.getKeysAsValueObject(this.signUpForm.getRawValue());
-    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
-  }
-
-  public signUp(): void {
-    if (this.signUpForm.valid) {
-      const formValues: SignUpForm = this.signUpForm.getRawValue();
-
-
-
-      this.authService.signUp({
-        email: formValues.email!,
-        password: formValues.password!,
-        terms: formValues.terms!
-      })
-
-
-
-      // Call sign-up API
-      // this.authService.signUp(formValue);
-    }
-  }
-
-  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
-}

package/projects/ngx/src/lib/components/rtsee-auth/types/auth-form.type.ts

@@ -1,36 +0,0 @@
-import { FormArray, FormControl, FormGroup } from '@angular/forms';
-
-export type SignUpForm = {
-  email: string | null;
-  password: string | null;
-  passwordConfirmation: string | null;
-  terms: boolean;
-};
-
-export type TypedReactiveForm<T> = {
-  [Key in keyof T]: T[Key] extends Array<infer Item>
-    ? Item extends object
-      ? FormArray<FormGroup<TypedReactiveForm<Item>>>
-      : FormControl<T[Key]>
-    : FormControl<T[Key]>;
-};
-
-export type ResetPasswordForm = {
-  password: string;
-  passwordConfirm: string;
-};
-
-export type ConfirmPasswordForm = {
-  password: string;
-  newPassword: string;
-};
-
-export type ForgotPasswordForm = {
-  email: string;
-};
-
-export type SignInForm = {
-  username: string;
-  password: string;
-  remember: boolean;
-};

package/projects/ngx/src/lib/components/rtsee-auth/validators/form-fields-validators.ts

@@ -1,27 +0,0 @@
-import {AbstractControl, ValidationErrors} from '@angular/forms';
-
-export class ConfirmPasswordValidator {
-  /**
-   * Check matching password with confirm password
-   * @param control AbstractControl
-   */
-  static MatchFields(control: AbstractControl): ValidationErrors | null {
-    const passwordField: AbstractControl | null = control.get('password');
-    const passwordConfirmationField: AbstractControl | null = control.get('passwordConfirmation');
-
-    if (!passwordField || ! passwordConfirmationField) {
-      throw new Error('MatchFieldsValidator unable to find password controls!');
-    }
-
-    const password: string = passwordField.getRawValue() as string;
-    const passwordConfirmation: string = passwordConfirmationField.getRawValue() as string;
-
-    if (password !== passwordConfirmation) {
-      return {
-        confirmPassword: true
-      };
-    }
-
-    return null;
-  }
-}

package/projects/ngx/src/lib/components/rtsee-auth/vendors/vendors.component.html

@@ -1 +0,0 @@
-<p>vendors works!</p>

package/projects/ngx/src/lib/components/rtsee-auth/vendors/vendors.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'rtsee-vendors',
-    templateUrl: './vendors.component.html',
-    standalone: true
-})
-export class VendorsComponent {
-
-}