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;