Feat/96 - Developer Apps Design

src/app/core/components/breadcrumb/breadcrumb.component.ts

@@ -1,5 +1,6 @@
-import { Component, computed, inject, signal } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'osf-breadcrumb',
@@ -9,8 +10,19 @@ import { Router } from '@angular/router';
 })
 export class BreadcrumbComponent {
   #router = inject(Router);
+  #destroyRef = inject(DestroyRef);
   protected readonly url = signal(this.#router.url);
   protected readonly parsedUrl = computed(() => {
     return this.url().split('/').filter(Boolean);
   });
+
+  constructor() {
+    this.#router.events
+      .pipe(takeUntilDestroyed(this.#destroyRef))
+      .subscribe((event) => {
+        if (event instanceof NavigationEnd) {
+          this.url.set(this.#router.url);
+        }
+      });
+  }
 }

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

@@ -0,0 +1,16 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export function linkValidator(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+    if (!value) {
+      return null;
+    }
+
+    const urlPattern = /^(https?):\/\/.+/i;
+
+    const isValid = urlPattern.test(value);
+
+    return isValid ? null : { link: true };
+  };
+}

src/app/features/settings/developer-apps/create-developer-app/create-developer-app.component.html

@@ -0,0 +1,58 @@
+<form
+  [formGroup]="createAppForm"
+  (ngSubmit)="submitForm()"
+  class="flex flex-column gap-3"
+>
+  <div class="flex flex-column">
+    <label for="app-name">App Name</label>
+    <input
+      pInputText
+      id="app-name"
+      type="text"
+      autocomplete="off"
+      [formControlName]="DeveloperAppFormFormControls.AppName"
+    />
+  </div>
+
+  <div class="flex flex-column">
+    <label for="proj-homepage-url">Project homepage URL</label>
+    <input
+      pInputText
+      id="proj-homepage-url"
+      type="url"
+      autocomplete="off"
+      [formControlName]="DeveloperAppFormFormControls.ProjectHomePageUrl"
+    />
+  </div>
+
+  <div class="flex flex-column">
+    <label for="app-descr">App description (optional)</label>
+    <input
+      pInputText
+      id="app-descr"
+      type="text"
+      autocomplete="off"
+      [formControlName]="DeveloperAppFormFormControls.AppDescription"
+    />
+  </div>
+
+  <div class="flex flex-column">
+    <label for="auth-callback-url">Authorization callback URL</label>
+    <input
+      pInputText
+      type="url"
+      autocomplete="off"
+      id="auth-callback-url"
+      [formControlName]="DeveloperAppFormFormControls.AuthorizationCallbackUrl"
+    />
+  </div>
+
+  <div class="flex justify-content-end gap-2">
+    <p-button label="Cancel" severity="info" (click)="dialogRef.close()" />
+    <p-button
+      label="Create Developer App"
+      type="submit"
+      [disabled]="!createAppForm.valid"
+    />
+  </div>
+</form>

src/app/features/settings/developer-apps/create-developer-app/create-developer-app.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateDeveloperAppComponent } from './create-developer-app.component';
+
+describe('CreateDeveloperAppComponent', () => {
+  let component: CreateDeveloperAppComponent;
+  let fixture: ComponentFixture<CreateDeveloperAppComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateDeveloperAppComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CreateDeveloperAppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/settings/developer-apps/create-developer-app/create-developer-app.component.ts

@@ -0,0 +1,71 @@
+import { ChangeDetectionStrategy, Component, inject } 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/developer-app.entities';
+import { linkValidator } from '@core/helpers/link-validator.helper';
+
+@Component({
+  selector: 'osf-create-developer-app',
+  imports: [Button, InputText, ReactiveFormsModule],
+  templateUrl: './create-developer-app.component.html',
+  styleUrl: './create-developer-app.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateDeveloperAppComponent {
+  readonly dialogRef = inject(DynamicDialogRef);
+  protected readonly DeveloperAppFormFormControls =
+    DeveloperAppFormFormControls;
+
+  readonly createAppForm: 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()],
+      },
+    ),
+  });
+
+  submitForm(): void {
+    if (!this.createAppForm.valid) {
+      this.createAppForm.markAllAsTouched();
+      this.createAppForm
+        .get([DeveloperAppFormFormControls.AppName])
+        ?.markAsDirty();
+      this.createAppForm
+        .get(DeveloperAppFormFormControls.ProjectHomePageUrl)
+        ?.markAsDirty();
+      this.createAppForm
+        .get(DeveloperAppFormFormControls.AppDescription)
+        ?.markAsDirty();
+      this.createAppForm
+        .get(DeveloperAppFormFormControls.AuthorizationCallbackUrl)
+        ?.markAsDirty();
+      return;
+    }
+
+    //TODO integrate API
+    this.dialogRef.close();
+  }
+}

src/app/features/settings/developer-apps/developer-app-details/developer-app-details.component.html

@@ -0,0 +1,175 @@
+<section class="content-container" [class.mobile]="isXSmall()">
+  <nav class="navigation-bar-container">
+    <a routerLink="/settings/developer-apps">
+      <!-- TODO - Add icon -->
+      Back to list of developer apps
+    </a>
+  </nav>
+
+  <section class="tittle-container" [class.mobile]="isXSmall()">
+    <h1>{{ developerApp().appName + developerAppId() }}</h1>
+    <p-button
+      label="Delete"
+      [class.btn-full-width]="isXSmall()"
+      severity="danger"
+      (click)="deleteApp()"
+    />
+  </section>
+
+  <section class="cards-container" [class.mobile]="isXSmall()">
+    <p-card>
+      <section class="card-body">
+        <h2>Client ID</h2>
+
+        <p>
+          The client ID is the developer app's unique identifier and is safe to
+          share publicly.
+        </p>
+
+        <div class="inline-block relative">
+          <span
+            class="copy-notification"
+            [class.visible]="clientIdCopiedNotificationVisible()"
+          >
+            Copied!
+          </span>
+          <p-iconfield iconPosition="right">
+            <input type="text" pInputText readonly [value]="clientId()" />
+            <p-inputicon
+              [cdkCopyToClipboard]="clientId()"
+              (cdkCopyToClipboardCopied)="clientIdCopiedToClipboard()"
+            >
+              <i class="osf-icon-copy"></i>
+            </p-inputicon>
+          </p-iconfield>
+        </div>
+      </section>
+    </p-card>
+
+    <p-card>
+      <section class="card-body">
+        <h2>Client Secret</h2>
+
+        <p>
+          The client secret is available only to you. Keep it private and do not
+          share it.
+        </p>
+
+        <section class="client-secret-container" [class.mobile]="isXSmall()">
+          <div class="relative">
+            <span
+              class="copy-notification"
+              [class.visible]="clientSecretCopiedNotificationVisible()"
+            >
+              Copied!
+            </span>
+            <p-iconfield iconPosition="right">
+              <input
+                pInputText
+                [value]="
+                  isClientSecretVisible()
+                    ? clientSecret()
+                    : hiddenClientSecret()
+                "
+                readonly
+              />
+              <p-inputicon
+                [cdkCopyToClipboard]="clientSecret()"
+                (cdkCopyToClipboardCopied)="clientSecretCopiedToClipboard()"
+              >
+                <i class="osf-icon-copy"></i>
+              </p-inputicon>
+            </p-iconfield>
+          </div>
+
+          <p-button
+            [label]="
+              isClientSecretVisible()
+                ? 'Hide client secret'
+                : 'Show client secret'
+            "
+            severity="secondary"
+            (click)="isClientSecretVisible.set(!isClientSecretVisible())"
+          />
+        </section>
+
+        <section class="card-actions">
+          <p-button
+            label="Reset Secret"
+            [class.btn-half-width]="isXSmall()"
+            (click)="resetClientSecret()"
+          />
+        </section>
+      </section>
+    </p-card>
+
+    <p-card>
+      <section class="card-body">
+        <h2>Edit app</h2>
+
+        <form
+          [formGroup]="editAppForm"
+          class="flex flex-column gap-3"
+          (ngSubmit)="submitForm()"
+        >
+          <div class="flex flex-column">
+            <label for="app-name">App Name</label>
+            <input
+              id="app-name"
+              type="text"
+              autocomplete="off"
+              pInputText
+              [formControlName]="DeveloperAppFormFormControls.AppName"
+            />
+          </div>
+
+          <div class="flex flex-column">
+            <label for="proj-homepage-url">Project homepage URL</label>
+            <input
+              id="proj-homepage-url"
+              type="url"
+              autocomplete="off"
+              pInputText
+              [formControlName]="
+                DeveloperAppFormFormControls.ProjectHomePageUrl
+              "
+            />
+          </div>
+
+          <div class="flex flex-column">
+            <label for="app-descr">App description (optional)</label>
+            <input
+              id="app-descr"
+              type="text"
+              autocomplete="off"
+              pInputText
+              [formControlName]="DeveloperAppFormFormControls.AppDescription"
+            />
+          </div>
+
+          <div class="flex flex-column">
+            <label for="auth-callback-url">Authorization callback URL</label>
+            <input
+              id="auth-callback-url"
+              type="url"
+              autocomplete="off"
+              pInputText
+              [formControlName]="
+                DeveloperAppFormFormControls.AuthorizationCallbackUrl
+              "
+            />
+          </div>
+
+          <section class="card-actions">
+            <p-button
+              label="Save"
+              type="submit"
+              [class.btn-half-width]="isXSmall()"
+              [disabled]="!editAppForm.dirty || !editAppForm.valid"
+            />
+          </section>
+        </form>
+      </section>
+    </p-card>
+  </section>
+</section>