Feat/96: Personal access token page

src/app/core/components/nav-menu/nav-menu.component.scss

@@ -3,7 +3,7 @@
 :host {
   .nav-menu {
     width: 100%;
-    max-width: 15.5rem;
+    max-width: 17rem;
 
     .active {
       font-weight: 700;

src/app/core/components/sidenav/sidenav.component.scss

@@ -3,6 +3,6 @@
 aside {
   @include mix.flex-column;
   gap: 1.8rem;
-  width: 19rem;
-  padding: 1.8rem;
+  width: 19.5rem;
+  padding: 1.8rem 1rem 1.8rem 1.6rem;
 }

src/app/core/components/topnav/topnav.component.scss

@@ -7,7 +7,7 @@
   .nav-container {
     @include mix.flex-center-between;
     background: var.$dark-blue-1;
-    padding: 1.8rem;
+    padding: 1.8rem 1.6rem;
     color: white;
 
     .topnav-icon {

src/app/core/helpers/nav-items.constant.ts

@@ -28,7 +28,7 @@ export const NAV_ITEMS: NavItem[] = [
       },
       {
         path: '/settings/addons',
-        label: 'Addon Accounts',
+        label: 'Configure Addon Accounts',
         useExactMatch: false,
       },
       {
@@ -42,7 +42,7 @@ export const NAV_ITEMS: NavItem[] = [
         useExactMatch: true,
       },
       {
-        path: '/settings/personal-access-tokens',
+        path: '/settings/tokens',
         label: 'Personal Access Tokens',
         useExactMatch: true,
       },

src/app/features/settings/addons/addons.component.ts

@@ -48,7 +48,7 @@ export class AddonsComponent implements OnInit {
   protected readonly isMobile = toSignal(inject(IS_XSMALL));
   protected readonly searchValue = signal('');
   protected readonly cards = signal<AddonCard[]>([]);
-  protected readonly selectedTab = this.defaultTabValue;
+  protected selectedTab = this.defaultTabValue;
   protected readonly tabOptions: TabOption[] = [
     { label: 'All Add-ons', value: 0 },
     { label: 'Connected Add-ons', value: 1 },

src/app/features/settings/addons/connect-addon/connect-addon.component.html

@@ -80,7 +80,7 @@ <h2>Account Name</h2>
               ></p-button>
               <p-button
                 class="w-10rem btn-full-width"
-                label="Next"
+                label="Connect"
                 (onClick)="activateCallback(2)"
               ></p-button>
             </div>

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

@@ -2,11 +2,11 @@
   <nav class="navigation-bar-container">
     <a routerLink="/settings/developer-apps">
       <!-- TODO - Add icon -->
-      Back to list of developer apps
+      <strong><</strong> Back to list of developer apps
     </a>
   </nav>
 
-  <section class="tittle-container" [class.mobile]="isXSmall()">
+  <section class="title-container" [class.mobile]="isXSmall()">
     <h1>{{ developerApp().appName + developerAppId() }}</h1>
     <p-button
       label="Delete"
@@ -164,7 +164,9 @@ <h2>Edit app</h2>
             <p-button
               label="Save"
               type="submit"
-              [class.btn-half-width]="isXSmall()"
+              [ngClass]="
+                isXSmall() ? 'btn-half-width' : 'w-10rem btn-full-width'
+              "
               [disabled]="!editAppForm.dirty || !editAppForm.valid"
             />
           </section>

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

@@ -14,7 +14,7 @@
     margin-bottom: 1.7rem;
   }
 
-  .tittle-container {
+  .title-container {
     @include mix.flex-center-between;
     margin-bottom: 3.4rem;
 
@@ -63,7 +63,7 @@
         transition: opacity 0.3s ease;
         white-space: nowrap;
         border-radius: 8px;
-        box-shadow: 0px 0px 4px 0px #00000029;
+        box-shadow: 0 0 4px 0 #00000029;
         background: var.$white;
 
         &.visible {

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

@@ -32,6 +32,7 @@ import { linkValidator } from '@core/helpers/link-validator.helper';
 import { ConfirmationService } from 'primeng/api';
 import { defaultConfirmationConfig } from '@shared/helpers/default-confirmation-config.helper';
 import { timer } from 'rxjs';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'osf-developer-application-details',
@@ -45,6 +46,7 @@ import { timer } from 'rxjs';
     CdkCopyToClipboard,
     FormsModule,
     ReactiveFormsModule,
+    NgClass,
   ],
   templateUrl: './developer-app-details.component.html',
   styleUrl: './developer-app-details.component.scss',

src/app/features/settings/settings-container.component.html

@@ -1,3 +1,3 @@
-<div [class.desktop]="isDesktop()">
+<div [class.desktop]="isDesktop()" class="flex flex-column flex-1">
   <router-outlet />
 </div>

src/app/features/settings/settings-container.component.scss

@@ -5,8 +5,6 @@
   flex: 1;
 
   .desktop {
-    @include mix.flex-column;
     margin-top: 4.5rem;
-    flex: 1;
   }
 }

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

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { SettingsContainerComponent } from '@osf/features/settings/settings-container.component';
 import { developerAppsRoute } from '@osf/features/settings/developer-apps/developer-apps.route';
+import { tokensAppsRoute } from '@osf/features/settings/tokens/tokens.route';
 
 export const settingsRoutes: Routes = [
   {
@@ -41,6 +42,7 @@ export const settingsRoutes: Routes = [
           },
         ],
       },
+      tokensAppsRoute,
     ],
   },
 ];

src/app/features/settings/tokens/token-add-edit-form/token-add-edit-form.component.html

@@ -0,0 +1,62 @@
+<form
+  [formGroup]="tokenForm"
+  (ngSubmit)="submitForm()"
+  class="flex flex-column gap-4"
+>
+  <div class="flex flex-column">
+    <label for="token-name">Token Name</label>
+    <input
+      pInputText
+      id="token-name"
+      type="text"
+      autocomplete="off"
+      [formControlName]="TokenFormControls.TokenName"
+    />
+  </div>
+
+  <div class="flex flex-column gap-4">
+    <div class="flex flex-column gap-2">
+      <h3 class="scope-label">Scopes</h3>
+      <p class="scope-description">
+        Scopes limit access for personal access tokens.
+      </p>
+    </div>
+
+    <div class="flex flex-column gap-4">
+      @for (scope of availableScopes; track scope.name) {
+        <div class="flex align-items-start gap-2">
+          <p-checkbox
+            [value]="scope.name"
+            [formControlName]="TokenFormControls.Scopes"
+            [inputId]="scope.name"
+          />
+          <div class="flex flex-column gap-1">
+            <label [for]="scope.name" class="scope-name">
+              <h3>{{ scope.name }}</h3>
+            </label>
+            <span>{{ scope.description }}</span>
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+
+  <div class="flex justify-content-end gap-2">
+    @if (isEditMode()) {
+      <p-button
+        [class.w-10rem.btn-full-width]="!isXSmall()"
+        [ngClass]="isXSmall() ? 'btn-half-width' : 'w-10rem btn-full-width'"
+        label="Save"
+        type="submit"
+        [disabled]="!tokenForm.valid"
+      />
+    } @else {
+      <p-button label="Cancel" severity="info" (click)="dialogRef.close()" />
+      <p-button
+        label="Create Token"
+        type="submit"
+        [disabled]="!tokenForm.valid"
+      />
+    }
+  </div>
+</form>

src/app/features/settings/tokens/token-add-edit-form/token-add-edit-form.component.scss

@@ -0,0 +1,12 @@
+@use "assets/styles/variables" as var;
+
+:host {
+  label {
+    font-weight: 700;
+    color: var.$dark-blue-1;
+  }
+
+  h3 {
+    text-transform: none;
+  }
+}

src/app/features/settings/tokens/token-add-edit-form/token-add-edit-form.component.spec.ts

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

src/app/features/settings/tokens/token-add-edit-form/token-add-edit-form.component.ts

@@ -0,0 +1,75 @@
+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 { Checkbox } from 'primeng/checkbox';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import {
+  AVAILABLE_SCOPES,
+  PersonalAccessToken,
+  TokenForm,
+  TokenFormControls,
+} from '@osf/features/settings/tokens/tokens.enities';
+import { CommonModule } from '@angular/common';
+import { IS_XSMALL } from '@shared/utils/breakpoints.tokens';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'osf-token-add-edit-form',
+  imports: [Button, InputText, ReactiveFormsModule, CommonModule, Checkbox],
+  templateUrl: './token-add-edit-form.component.html',
+  styleUrl: './token-add-edit-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TokenAddEditFormComponent implements OnInit {
+  #isXSmall$ = inject(IS_XSMALL);
+  isEditMode = input(false);
+  initialValues = input<PersonalAccessToken | null>(null);
+  protected readonly dialogRef = inject(DynamicDialogRef);
+  protected readonly TokenFormControls = TokenFormControls;
+  protected readonly availableScopes = AVAILABLE_SCOPES;
+  protected readonly isXSmall = toSignal(this.#isXSmall$);
+
+  readonly tokenForm: TokenForm = new FormGroup({
+    [TokenFormControls.TokenName]: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+    [TokenFormControls.Scopes]: new FormControl<string[]>([], {
+      nonNullable: true,
+      validators: [Validators.required],
+    }),
+  });
+
+  ngOnInit(): void {
+    if (this.initialValues()) {
+      this.tokenForm.patchValue({
+        [TokenFormControls.TokenName]: this.initialValues()?.tokenName,
+        [TokenFormControls.Scopes]: this.initialValues()?.scopes,
+      });
+    }
+  }
+
+  submitForm(): void {
+    if (!this.tokenForm.valid) {
+      this.tokenForm.markAllAsTouched();
+      this.tokenForm.get(TokenFormControls.TokenName)?.markAsDirty();
+      this.tokenForm.get(TokenFormControls.Scopes)?.markAsDirty();
+      return;
+    }
+
+    //TODO integrate API
+    this.dialogRef.close();
+  }
+}

src/app/features/settings/tokens/token-details/token-details.component.html

@@ -0,0 +1,26 @@
+<section
+  class="flex flex-column flex-1 gap-5 content-container"
+  [class.mobile]="isXSmall()"
+>
+  <nav>
+    <a routerLink="/settings/tokens">
+      <!-- TODO - Add icon -->
+      <strong><</strong> Back to list of personal tokens
+    </a>
+  </nav>
+
+  <div class="flex justify-content-between" [class.mobile]="isXSmall()">
+    <h1>{{ token().tokenName }}</h1>
+    <p-button
+      label="Delete"
+      [class.btn-full-width]="isXSmall()"
+      severity="danger"
+      (click)="deleteToken()"
+    />
+  </div>
+
+  <p-card class="mb-5">
+    <h2 class="mb-5">Edit Token</h2>
+    <osf-token-add-edit-form [isEditMode]="true" [initialValues]="token()" />
+  </p-card>
+</section>

src/app/features/settings/tokens/token-details/token-details.component.scss

@@ -0,0 +1,22 @@
+@use "assets/styles/mixins" as mix;
+@use "assets/styles/variables" as var;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+
+  .mobile {
+    flex-direction: column;
+    gap: 1.7rem;
+  }
+
+  .content-container {
+    padding: 1.7rem;
+    color: var.$dark-blue-1;
+    background-color: white;
+
+    &.mobile {
+      padding: 1rem;
+    }
+  }
+}

src/app/features/settings/tokens/token-details/token-details.component.spec.ts

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