added authorization provider functionality

.prettierrc

@@ -1 +1,14 @@
-"prettier-config-altair"
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": "tsconfig.json",
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
+}

libs/eslint-config-altair/index.js

@@ -14,7 +14,23 @@ module.exports = {
   ],
   plugins: ['@typescript-eslint', 'import', 'prettier', 'no-unsanitized'],
   rules: {
-    'prettier/prettier': 'warn',
+    'prettier/prettier': [
+      'warn',
+      {
+        semi: true,
+        trailingComma: 'es5',
+        singleQuote: true,
+        printWidth: 85,
+        overrides: [
+          {
+            files: 'tsconfig.json',
+            options: {
+              trailingComma: 'none',
+            },
+          },
+        ],
+      },
+    ],
     '@typescript-eslint/no-unused-vars': 'warn',
     'import/no-unresolved': 0,
     'require-jsdoc': 'off',

libs/eslint-config-altair/package.json

@@ -10,9 +10,8 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-no-unsanitized": "^4.0.2",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.8.1",
-    "prettier-config-altair": "^6.3.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
     "typescript": "5.2.2"
   },
   "license": "MIT",

package.json

@@ -12,6 +12,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.18.1",
     "@playwright/test": "^1.31.2",
+    "@types/prettier": "^3.0.0",
     "chalk": "^4.1.0",
     "compare-versions": "^4.1.3",
     "cwex": "^1.0.4",

packages/altair-api/package.json

@@ -51,12 +51,11 @@
     "@typescript-eslint/parser": "^6.16.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "jest": "29.4.1",
     "passport-custom": "^1.1.1",
     "pino-pretty": "^9.2.0",
-    "prettier": "^2.3.2",
-    "prettier-config-altair": "^6.3.1",
+    "prettier": "^3.2.5",
     "prisma": "^4.9.0",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",

packages/altair-app/package.json

@@ -92,7 +92,7 @@
     "ngx-take-until-destroy": "5.4.0",
     "ngx-toastr": "^18.0.0",
     "object-path": "0.11.5",
-    "prettier": "2.3.0",
+    "prettier": "^3.2.5",
     "rxjs": "6.6.7",
     "sanitize-html": "2.7.1",
     "subscriptions-transport-ws": "0.9.19",
@@ -130,26 +130,25 @@
     "@types/mousetrap": "^1.6.3",
     "@types/node": "^12.11.1",
     "@types/object-path": "^0.11.0",
-    "@types/prettier": "^1.19.0",
     "@types/sanitize-html": "^2.6.2",
     "@types/to-snake-case": "^1.0.0",
     "@types/uuid": "^9.0.5",
     "@types/zen-observable": "^0.8.1",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "ajv-cli": "3.1.0",
     "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "6.24.1",
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "electron": "^27.1.0",
-    "eslint": "8.18.0",
+    "eslint": "^8.57.0",
     "eslint-config-altair": "^6.3.1",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.27.4",
     "eslint-plugin-no-unsanitized": "^4.0.2",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "fake-indexeddb": "^4.0.1",
     "jest": "29.7.0",
     "jest-chrome": "^0.8.0",
@@ -158,7 +157,6 @@
     "ncp": "2.0.0",
     "ng-mocks": "^14.12.1",
     "ngrx-store-freeze": "0.2.4",
-    "prettier-config-altair": "^6.3.1",
     "protractor": "7.0.0",
     "react": "17.0.1",
     "rxjs-tslint-rules": "4.32.0",

packages/altair-app/src/app/modules/altair/animations.ts

@@ -10,3 +10,16 @@ export const fadeInOutAnimationTrigger = trigger('fadeInOutAnimation', [
     animate('.3s ease', style({ opacity: 0 })),
   ]),
 ]);
+export const fadeGridGrowInOutAnimationTrigger = trigger(
+  'fadeGridGrowInOutAnimation',
+  [
+    transition(':enter', [
+      style({ opacity: 0, gridTemplateRows: '0fr' }),
+      animate('.3s ease', style({ opacity: 1, gridTemplateRows: '1fr' })),
+    ]),
+    transition(':leave', [
+      style({ opacity: 1, gridTemplateRows: '1fr'}),
+      animate('.3s ease', style({ opacity: 0, gridTemplateRows: '0fr'})),
+    ]),
+  ]
+);

packages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.html

@@ -0,0 +1,14 @@
+<form nz-form nzLayout="vertical" [formGroup]="apiKeyForm">
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="key">Key</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid key!">
+      <app-x-input nz-input formControlName="key" id="key" class="app-input" autocomplete="off" />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="value">Value</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid value!">
+      <app-x-input nz-input formControlName="value" id="value" class="app-input" autocomplete="off" />
+    </nz-form-control>
+  </nz-form-item>
+</form>

packages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthorizationApikeyComponent } from './authorization-apikey.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { MockModule } from 'ng-mocks';
+
+describe('AuthorizationApikeyComponent', () => {
+  let component: AuthorizationApikeyComponent;
+  let fixture: ComponentFixture<AuthorizationApikeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AuthorizationApikeyComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthorizationApikeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/altair-app/src/app/modules/altair/components/authorization/authorization-apikey/authorization-apikey.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { NonNullableFormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-authorization-apikey',
+  templateUrl: './authorization-apikey.component.html',
+  styles: ``,
+})
+export class AuthorizationApikeyComponent implements OnInit {
+  apiKeyForm = this.formBuilder.group({
+    key: '',
+    value: '',
+  });
+  @Input() authData?: unknown;
+  @Output() authDataChange = this.apiKeyForm.valueChanges;
+
+  constructor(private readonly formBuilder: NonNullableFormBuilder) {}
+
+  ngOnInit(): void {
+    if (this.authData) {
+      this.apiKeyForm.patchValue(this.authData);
+    }
+  }
+}

packages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.html

@@ -0,0 +1,14 @@
+<form nz-form nzLayout="vertical" [formGroup]="basicForm">
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="username">Username</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid username!">
+      <app-x-input nz-input formControlName="username" id="username" class="app-input" autocomplete="off" />
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="password">Password</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid password!">
+      <app-x-input nz-input formControlName="password" id="password" class="app-input" type="password" autocomplete="off" />
+    </nz-form-control>
+  </nz-form-item>
+</form>

packages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthorizationBasicComponent } from './authorization-basic.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { Store } from '@ngrx/store';
+import { MockModule } from 'ng-mocks';
+
+describe('AuthorizationBasicComponent', () => {
+  let component: AuthorizationBasicComponent;
+  let fixture: ComponentFixture<AuthorizationBasicComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AuthorizationBasicComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthorizationBasicComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/altair-app/src/app/modules/altair/components/authorization/authorization-basic/authorization-basic.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { NonNullableFormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-authorization-basic',
+  templateUrl: './authorization-basic.component.html',
+  styles: ``,
+})
+export class AuthorizationBasicComponent implements OnInit {
+  basicForm = this.formBuilder.group({
+    username: '',
+    password: '',
+  });
+  @Input() authData?: unknown;
+  @Output() authDataChange = this.basicForm.valueChanges;
+
+  constructor(private readonly formBuilder: NonNullableFormBuilder) {}
+
+  ngOnInit(): void {
+    if (this.authData) {
+      this.basicForm.patchValue(this.authData);
+    }
+  }
+}

packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.html

@@ -0,0 +1,8 @@
+<form nz-form nzLayout="vertical" [formGroup]="bearerForm">
+  <nz-form-item>
+    <nz-form-label nzRequired nzFor="token">Bearer token</nz-form-label>
+    <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="The input is not a valid bearer token!">
+      <app-x-input nz-input formControlName="token" id="token" class="app-input ant-input" autocomplete="off" />
+    </nz-form-control>
+  </nz-form-item>
+</form>

packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthorizationBearerComponent } from './authorization-bearer.component';
+import { SharedModule } from 'app/modules/altair/modules/shared/shared.module';
+import { ComponentModule } from '../../components.module';
+import { MockModule } from 'ng-mocks';
+
+describe('AuthorizationBearerComponent', () => {
+  let component: AuthorizationBearerComponent;
+  let fixture: ComponentFixture<AuthorizationBearerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AuthorizationBearerComponent],
+      imports: [MockModule(SharedModule), MockModule(ComponentModule)],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthorizationBearerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/altair-app/src/app/modules/altair/components/authorization/authorization-bearer/authorization-bearer.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { NonNullableFormBuilder } from '@angular/forms';
+
+@Component({
+  selector: 'app-authorization-bearer',
+  templateUrl: './authorization-bearer.component.html',
+  styles: ``,
+})
+export class AuthorizationBearerComponent implements OnInit {
+  bearerForm = this.formBuilder.group({
+    token: '',
+  });
+  @Input() authData?: unknown;
+  @Output() authDataChange = this.bearerForm.valueChanges;
+
+  constructor(private readonly formBuilder: NonNullableFormBuilder) {}
+
+  ngOnInit(): void {
+    if (this.authData) {
+      this.bearerForm.patchValue(this.authData);
+    }
+  }
+}

packages/altair-app/src/app/modules/altair/components/authorization/authorization-editor/authorization-editor.component.html

@@ -0,0 +1,34 @@
+<div class="p-10">
+  <form nz-form nzLayout="vertical" [formGroup]="typeForm">
+    <nz-form-item>
+      <nz-form-label>{{ 'AUTHORIZATION_TYPE_TEXT' | translate }}</nz-form-label>
+      <nz-form-control [nzSm]="8" nzErrorTip="The input is not a valid type!">
+        <nz-select formControlName="type">
+          @for (item of AUTH_TYPES; track $index) {
+            <nz-option [nzValue]="item" [nzLabel]="AUTH_MAPPING[item].copy | translate"></nz-option>
+          }
+        </nz-select>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+  @switch (typeForm.controls.type.value) {
+    @case ('api-key') {
+      <app-authorization-apikey
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
+    @case ('basic') {
+      <app-authorization-basic
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
+    @case ('bearer') {
+      <app-authorization-bearer
+        [authData]="authorizationState?.data"
+        (authDataChange)="authDataChange.emit($event)"
+      />
+    }
+  }
+</div>