Feat/132 Developer apps api integration

src/app/core/constants/ngxs-states.constant.ts

@@ -5,6 +5,7 @@ import { UserState } from '@core/store/user';
 import { MyProjectsState } from '@osf/features/my-projects/store';
 import { SearchState } from '@osf/features/search/store';
 import { InstitutionsState } from '@osf/features/institutions/store';
+import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 
 export const STATES = [
   AuthState,
@@ -14,4 +15,5 @@ export const STATES = [
   SearchState,
   MyProjectsState,
   InstitutionsState,
+  DeveloperAppsState,
 ];

src/app/core/helpers/link-validator.helper.ts

@@ -7,7 +7,7 @@ export function linkValidator(): ValidatorFn {
       return null;
     }
 
-    const urlPattern = /^(https?):\/\/.+/i;
+    const urlPattern = /^(https):\/\/.+/i;
 
     const isValid = urlPattern.test(value);
 

src/app/features/auth/sign-up/sign-up.component.html

@@ -5,9 +5,6 @@ <h2>Create A Free Account</h2>
     <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
       <div class="btn-group">
         <p-button label="Sign up through ORCID" class="form-btn btn-full-width">
-          <!--TODO change img tags to icons(fantasticon)-->
-
-          <!--<i class="osf-icon-orcid"></i>-->
           <img
             ngSrc="assets/images/orcid.svg"
             alt="Orchid icon"

src/app/features/settings/developer-apps/create-developer-app/create-developer-app.component.html → src/app/features/settings/developer-apps/developer-app-add-edit-form/developer-app-add-edit-form.component.html

@@ -1,6 +1,6 @@
 <form
-  [formGroup]="createAppForm"
-  (ngSubmit)="submitForm()"
+  [formGroup]="appForm"
+  (ngSubmit)="handleSubmitForm()"
   class="flex flex-column gap-3"
 >
   <div class="flex flex-column">
@@ -48,16 +48,25 @@
   </div>
 
   <div class="flex justify-content-end gap-2">
-    <p-button
-      class="w-12rem btn-full-width"
-      label="Cancel"
-      severity="info"
-      (click)="dialogRef.close()"
-    />
-    <p-button
-      label="Create Developer App"
-      type="submit"
-      [disabled]="!createAppForm.valid"
-    />
+    @if (isEditMode()) {
+      <p-button
+        [ngClass]="isMobile() ? 'btn-half-width' : 'w-10rem btn-full-width'"
+        label="Save"
+        type="submit"
+        [disabled]="!appForm.dirty || !appForm.valid"
+      />
+    } @else {
+      <p-button
+        class="w-12rem btn-full-width"
+        label="Cancel"
+        severity="info"
+        (click)="dialogRef.close()"
+      />
+      <p-button
+        label="Create Developer App"
+        type="submit"
+        [disabled]="!appForm.valid"
+      />
+    }
   </div>
 </form>

src/app/features/settings/developer-apps/create-developer-app/create-developer-app.component.spec.ts → src/app/features/settings/developer-apps/developer-app-add-edit-form/developer-app-add-edit-form.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CreateDeveloperAppComponent } from './create-developer-app.component';
+import { DeveloperAppAddEditFormComponent } from './developer-app-add-edit-form.component';
 
 describe('CreateDeveloperAppComponent', () => {
-  let component: CreateDeveloperAppComponent;
-  let fixture: ComponentFixture<CreateDeveloperAppComponent>;
+  let component: DeveloperAppAddEditFormComponent;
+  let fixture: ComponentFixture<DeveloperAppAddEditFormComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CreateDeveloperAppComponent],
+      imports: [DeveloperAppAddEditFormComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CreateDeveloperAppComponent);
+    fixture = TestBed.createComponent(DeveloperAppAddEditFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/features/settings/developer-apps/developer-app-add-edit-form/developer-app-add-edit-form.component.ts

@@ -0,0 +1,124 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  OnInit,
+} from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Button } from 'primeng/button';
+import { InputText } from 'primeng/inputtext';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import {
+  DeveloperAppForm,
+  DeveloperAppFormFormControls,
+} from '@osf/features/settings/developer-apps/entities/developer-app-form.entities';
+import { linkValidator } from '@core/helpers/link-validator.helper';
+import { Store } from '@ngxs/store';
+import { Router } from '@angular/router';
+import {
+  DeveloperApp,
+  DeveloperAppCreateUpdate,
+} from '@osf/features/settings/developer-apps/entities/developer-apps.models';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { NgClass } from '@angular/common';
+import {
+  CreateDeveloperApp,
+  UpdateDeveloperApp,
+} from '@osf/features/settings/developer-apps/store';
+
+@Component({
+  selector: 'osf-developer-app-add-edit-form',
+  imports: [Button, InputText, ReactiveFormsModule, NgClass],
+  templateUrl: './developer-app-add-edit-form.component.html',
+  styleUrl: './developer-app-add-edit-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeveloperAppAddEditFormComponent implements OnInit {
+  #store = inject(Store);
+  #router = inject(Router);
+  readonly isEditMode = input(false);
+  readonly initialValues = input<DeveloperApp | null>(null);
+
+  protected readonly isMobile = toSignal(inject(IS_XSMALL));
+  protected readonly dialogRef = inject(DynamicDialogRef);
+  protected readonly DeveloperAppFormFormControls =
+    DeveloperAppFormFormControls;
+  protected readonly appForm: DeveloperAppForm = new FormGroup({
+    [DeveloperAppFormFormControls.AppName]: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+    [DeveloperAppFormFormControls.ProjectHomePageUrl]: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, linkValidator()],
+    }),
+    [DeveloperAppFormFormControls.AppDescription]: new FormControl('', {
+      nonNullable: false,
+    }),
+    [DeveloperAppFormFormControls.AuthorizationCallbackUrl]: new FormControl(
+      '',
+      {
+        nonNullable: true,
+        validators: [Validators.required, linkValidator()],
+      },
+    ),
+  });
+
+  ngOnInit(): void {
+    if (this.initialValues()) {
+      this.appForm.patchValue({
+        [DeveloperAppFormFormControls.AppName]: this.initialValues()?.name,
+        [DeveloperAppFormFormControls.AppDescription]:
+          this.initialValues()?.description,
+        [DeveloperAppFormFormControls.ProjectHomePageUrl]:
+          this.initialValues()?.projHomePageUrl,
+        [DeveloperAppFormFormControls.AuthorizationCallbackUrl]:
+          this.initialValues()?.authorizationCallbackUrl,
+      });
+    }
+  }
+
+  handleSubmitForm(): void {
+    if (!this.appForm.valid) {
+      this.appForm.markAllAsTouched();
+      Object.values(this.appForm.controls).forEach((control) =>
+        control.markAsDirty(),
+      );
+      return;
+    }
+
+    if (!this.isEditMode()) {
+      this.#store
+        .dispatch(
+          new CreateDeveloperApp({
+            ...this.appForm.value,
+          } as DeveloperAppCreateUpdate),
+        )
+        .subscribe({
+          complete: () => {
+            this.dialogRef.close();
+          },
+        });
+    } else {
+      this.#store
+        .dispatch(
+          new UpdateDeveloperApp(this.initialValues()!.clientId, {
+            ...this.appForm.value,
+            id: this.initialValues()!.id,
+          } as DeveloperAppCreateUpdate),
+        )
+        .subscribe({
+          complete: () => {
+            this.#router.navigate(['settings/applications']);
+          },
+        });
+    }
+  }
+}