Feat/96 - Developer Apps UI

src/app/app.config.ts

@@ -17,6 +17,7 @@ export const appConfig: ApplicationConfig = {
       theme: {
         preset: Aura,
         options: {
+          darkModeSelector: false,
           cssLayer: {
             name: 'primeng',
             order: 'base, primeng, reset',

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

@@ -0,0 +1,26 @@
+<section class="header">
+  <i class="osf-icon-settings"></i>
+  <h1>Developer apps</h1>
+  <p-button>Create Developer App</p-button>
+</section>
+<section class="content">
+  <p>
+    Third-party web applications can connect to the OSF on behalf of users via
+    the OAuth 2.0 web application flow.
+  </p>
+
+  <section class="applications-container">
+    @for (developerApp of developerApplications; track $index) {
+      <p-card>
+        <section class="card-body">
+          <h2>{{ developerApp }}</h2>
+          <p-button
+            severity="danger"
+            (onClick)="onDeleteDeveloperApp(developerApp)"
+            >Delete</p-button
+          >
+        </section>
+      </p-card>
+    }
+  </section>
+</section>

src/app/features/settings/developer-apps/developer-apps.component.scss

@@ -0,0 +1,45 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+
+  .header {
+    @include mix.flex-center-between;
+    width: 100%;
+    padding: 7.14rem 1.71rem 3.43rem 1.71rem;
+    background: var.$gradient-1;
+
+    h1 {
+      margin-left: 0.85rem;
+    }
+
+    p-button {
+      margin-left: auto;
+    }
+
+    i {
+      color: var.$dark-blue-1;
+      font-size: 2.6rem;
+    }
+  }
+
+  .content {
+    margin: 1.7rem;
+    color: var.$dark-blue-1;
+
+    p {
+      margin-bottom: 1.7rem;
+    }
+
+    .applications-container {
+      @include mix.flex-column;
+      gap: 0.85rem;
+
+      .card-body {
+        @include mix.flex-center-between;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from 'primeng/button';
+import { Card } from 'primeng/card';
+
+@Component({
+  selector: 'osf-developer-apps',
+  imports: [Button, Card],
+  templateUrl: './developer-apps.component.html',
+  styleUrl: './developer-apps.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeveloperAppsComponent {
+  developerApplications: string[] = [
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+    'Developer app name example',
+  ];
+
+  onDeleteDeveloperApp(developerApp: string): void {
+    console.log('delete', developerApp);
+    //TODO implement api integration
+  }
+}

src/app/features/settings/settings.routes.ts

@@ -20,6 +20,13 @@ export const settingsRoutes: Routes = [
             (c) => c.AccountSettingsComponent,
           ),
       },
+      {
+        path: 'developer-apps',
+        loadComponent: () =>
+          import('./developer-apps/developer-apps.component').then(
+            (mod) => mod.DeveloperAppsComponent,
+          ),
+      },
     ],
   },
 ];

src/assets/styles/overrides/card.scss

@@ -0,0 +1,13 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+.p-card {
+  color: var.$dark-blue-1;
+  box-shadow: none;
+  border-radius: 8px;
+  border: 1px solid var.$grey-2;
+
+  .p-card-body {
+    padding: 1.7rem;
+  }
+}

src/assets/styles/styles.scss

@@ -8,6 +8,7 @@
 @use "./overrides/table";
 @use "./overrides/message";
 @use "./overrides/drawer";
+@use "./overrides/card";
 
 @layer base, primeng, reset;