From f66fcc39318fd54ca59838abd7dd14cf4c86ecb0 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 17 Sep 2026 11:33:05 +0200 Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20Add=20GitLab=20OAuth=202.0=20PK?= =?UTF-8?q?CE,=20Strategy=20Pattern=20auth=20and=20ADR-0006?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...on-multi-fournisseurs-pattern-strategie.md | 63 ++++ src/app/app-routing.module.ts | 2 + src/app/app.component.ts | 14 +- src/app/app.module.ts | 6 +- .../gitlab-callback.component.html | 11 + .../gitlab-callback.component.scss | 40 +++ .../gitlab-callback.component.spec.ts | 75 +++++ .../gitlab-callback.component.ts | 49 +++ .../assignment-chooser.component.html | 22 +- .../assignment-chooser.component.ts | 12 +- .../edit-repositories.component.html | 2 +- .../edit-repositories.component.ts | 123 ++----- src/app/components/home/home.component.ts | 12 +- .../auth-lang-nav-item.component.html | 4 +- .../auth-lang-nav-item.component.ts | 12 +- .../app-nav-layout.component.ts | 4 +- .../accounts/accounts.component.html | 8 +- .../add-account-modal.component.html | 270 ++++++++------- .../add-account-modal.component.scss | 6 +- .../add-account-modal.component.spec.ts | 85 ++++- .../add-account-modal.component.ts | 94 ++++-- .../sidebar-settings.component.html | 2 +- .../sidebar-settings.component.ts | 12 +- src/app/guards/auth.guard.ts | 28 +- src/app/guards/auth.guard.ts.orig | 38 --- src/app/guards/auth.guard.ts.rej | 17 - src/app/models/GitAuthProvider.model.ts | 15 + src/app/services/accounts.service.spec.ts | 134 +++++++- src/app/services/accounts.service.ts | 87 +++-- src/app/services/commits.service.ts | 8 +- ...ce.spec.ts => github-auth.service.spec.ts} | 36 +- ...auth.service.ts => github-auth.service.ts} | 84 +++-- src/app/services/gitlab-auth.service.spec.ts | 97 ++++++ src/app/services/gitlab-auth.service.ts | 317 ++++++++++++++++++ .../shared/ui/dev-bar/dev-bar.component.ts | 4 +- src/assets/additional-docs/CONTRIBUTING.md | 4 +- src/assets/i18n/en.json | 12 +- src/assets/i18n/fr.json | 12 +- src/assets/i18n/ru.json | 12 +- src/environments/environment.prod.ts | 6 + src/environments/environment.ts | 6 + src/styles/_variables.scss | 8 +- 42 files changed, 1342 insertions(+), 511 deletions(-) create mode 100644 docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md create mode 100644 src/app/components/auth-callback/gitlab-callback.component.html create mode 100644 src/app/components/auth-callback/gitlab-callback.component.scss create mode 100644 src/app/components/auth-callback/gitlab-callback.component.spec.ts create mode 100644 src/app/components/auth-callback/gitlab-callback.component.ts delete mode 100644 src/app/guards/auth.guard.ts.orig delete mode 100644 src/app/guards/auth.guard.ts.rej create mode 100644 src/app/models/GitAuthProvider.model.ts rename src/app/services/{auth.service.spec.ts => github-auth.service.spec.ts} (72%) rename src/app/services/{auth.service.ts => github-auth.service.ts} (74%) create mode 100644 src/app/services/gitlab-auth.service.spec.ts create mode 100644 src/app/services/gitlab-auth.service.ts diff --git a/docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md b/docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md new file mode 100644 index 00000000..678564d0 --- /dev/null +++ b/docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md @@ -0,0 +1,63 @@ +# 0006 - Authentification multi-forges découplée (Pattern Stratégie & Fournisseurs) et OAuth 2.0 PKCE + +## Contexte +Historiquement, Git4School Visu ne prenait en charge que GitHub via un service monolithique `AuthService` s'appuyant directement sur Firebase Authentication (`firebase.auth().signInWithPopup(githubProvider)`). + +L'introduction du support de GitLab (dans un premier temps la plateforme SaaS GitLab Cloud `gitlab.com`, puis ultérieurement des instances auto-hébergées GitLab Community) a nécessité la conception d'un mécanisme d'authentification robuste, sécurisé et entièrement exécutable côté client. + +L'architecture initiale présentait plusieurs limites structurelles : +1. **Couplage fort au fournisseur GitHub** : `AuthService` était fortement couplé à GitHub et injecté dans plus de quinze composants et services (gardes de routage, barre de navigation, modales, assistants de devoirs). +2. **Absence de contrat d'abstraction** : Aucun contrat formel (interface ou classe abstraite) ne définissait les responsabilités d'un fournisseur d'authentification Git, contraignant les consommateurs à connaître les détails d'implémentation de la forge. +3. **Contraintes de sécurité d'une SPA statique** : Git4School étant une Single Page Application distribuée sans serveur applicatif dédié (hébergée statiquement sur Firebase Hosting), le flux OAuth standard avec secret client (*Authorization Code Grant*) était exclu sous peine de compromettre le secret d'application dans le bundle public. Le standard de l'industrie pour les clients publics sans secret est le protocole **OAuth 2.0 avec PKCE** (*Proof Key for Code Exchange*, RFC 7636). +4. **Duplication d'interface dans la modale d'ajout de compte** : Les panneaux de connexion de la modale (`AddAccountModalComponent`) dupliquaient l'arborescence HTML pour chaque onglet de forge. +5. **Conditions de course et latences d'API à l'authentification** : Les passerelles d'API distribuées (API Gateway de GitLab Cloud) peuvent présenter une brève latence de propagation du jeton nouvellement émis, renvoyant de façon transitoire une erreur 401 Unauthorized lors de l'appel immédiat à `/api/v4/user`. Sans reprise sur erreur et sans affectation atomique de l'état, cela pouvait conduire à des profils orphelins partiels. + +## Options considérées +1. **Évolution du service monolithique `AuthService` avec branches conditionnelles** : + - *Rejeté* : Violait le principe de responsabilité unique (SRP) et le principe Ouvert/Fermé (OCP). Le service aurait combiné Firebase Auth, le protocole PKCE, la gestion multi-tokens et des requêtes HTTP hétérogènes. Tout ajout ultérieur de forge aurait requis la modification du code existant avec risques de régression. +2. **Fournisseurs indépendants injectés individuellement dans les composants** : + - *Rejeté* : Violait le principe d'inversion des dépendances (DIP). Les composants consommateurs auraient dû injecter concrètement `GithubAuthService`, `GitlabAuthService`, etc., multipliant le couplage et complexifiant la vérification globale de session. +3. **Conservation d'un alias de transition `AuthService` pointant vers `GithubAuthService`** : + - *Rejeté* : Introduisait une dette technique et une ambiguïté sémantique persistante. Un renommage intégral et sans compromis de toutes les occurrences dans la base de code a été préféré. +4. **Pattern Stratégie / Fournisseur avec contrat unifié `GitAuthProvider` et registre polymorphique `AccountsService` (Option retenue)**. + +## Décision +1. **Contrat d'abstraction `GitAuthProvider` (`src/app/models/GitAuthProvider.model.ts`)** : + - Définition d'une interface formelle définissant le contrat de tout fournisseur d'authentification : + - Propriétés : `providerType: GitProviderType`. + - Méthodes du cycle de vie : `signIn(): Promise`, `signOut(): Promise`, `isSignedIn(): boolean`. + - Accesseurs de données : `getToken(): string | null`, `getUserProfile(): any | null`. + - Disponibilité fonctionnelle : `isAvailable(): boolean` (permettant la désactivation contextuelle via les feature flags). +2. **Spécialisation de la stratégie GitHub (`GithubAuthService`)** : + - Renommage exhaustif de `AuthService` en `GithubAuthService` à travers toute l'application (zéro dette technique, zéro shim de compatibilité). + - Implémentation du contrat `GitAuthProvider` au-dessus de Firebase Auth. +3. **Implémentation de la stratégie GitLab Cloud via OAuth 2.0 PKCE (`GitlabAuthService`)** : + - Implémentation complète de la RFC 7636 côté client sans dépendance tierce lourde : + - Génération d'un `code_verifier` aléatoire sécurisé via `window.crypto.getRandomValues`. + - Dérivation du `code_challenge` par hachage cryptographique `SHA-256` encodé en Base64-URL (`code_challenge_method=S256`). + - Validation d'état CSRF (`state`) pour prévenir les attaques par falsification de requête inter-sites. + - Fenêtre popup d'authentification avec composant callback dédié (`GitlabCallbackComponent`, route `/auth/callback`) communiquant le code d'autorisation via `window.postMessage` avec fallback synchronisé sur l'événement `storage` de `localStorage`. + - **Atomicité de l'état et résilience aux latences de passerelle** : + - L'affectation de `token` et de `currentUser` est strictement atomique : l'état n'est mis à jour qu'une fois le profil complet validé par l'API. + - Mécanisme de nouvelle tentative automatique (délai de 500 ms) en cas de code 401 passager lors de la requête `/api/v4/user` afin d'absorber la propagation de réplication du token sur les passerelles d'API GitLab. +4. **Registre polymorphique centralisé (`AccountsService`)** : + - Enregistrement des stratégies d'authentification dans un registre typé `Map`. + - API de haut niveau pour les composants : `getProvider(type)`, `signIn(type)`, `signOut(type)`, `hasAccount(type)`, `getAccounts()`, `isEmpty()`. + - Source de vérité unique pour les comptes actifs dans l'application. +5. **Découplage de la garde d'authentification (`AuthGuard`)** : + - `AuthGuard` ne dépend plus directement de Firebase ni de `GithubAuthService`. + - La protection des routes s'appuie désormais sur la méthode universelle `!accountsService.isEmpty()`. +6. **Factorisation de l'interface utilisateur (`AddAccountModalComponent`)** : + - Remplacement de la duplication de code par des blocs réutilisables `ng-template` (`#connectedPanel`, `#disconnectedPanel`) utilisant `ngTemplateOutlet` avec passage de contexte polymorphique. + - Découplage de la vue vis-à-vis des services concrets (seul `AccountsService` est manipulé). + - Affichage dynamique du badge de sécurité indiquant le protocole utilisé (`ACCOUNTS.AUTH_TYPE_OAUTH_PKCE`). + +## Conséquences +- **Conformité aux principes SOLID** : + - *SRP* : Chaque fournisseur gère sa propre logique d'authentification et ses protocoles spécifiques. + - *OCP* : L'ajout de nouveaux fournisseurs (instances GitLab Community auto-hébergées, forge académique, Bitbucket) se fait par simple extension de `GitAuthProvider` et ajout dans le registre de `AccountsService`, sans modifier les composants et gardes existants. + - *LSP* : Tout consommateur manipulant `GitAuthProvider` peut utiliser indifféremment l'une ou l'autre des implémentations. + - *DIP* : Les composants de l'application dépendent d'abstractions contractuelles et non d'implémentations concrètes de SDK tiers. +- **Sécurité et conformité client-side** : Intégration conforme aux recommandations de l'IETF pour les clients publics sans exposition de secret d'application. +- **Résilience opérationnelle** : Neutralisation des conditions de course et tolérance aux latences de réplication des tokens OAuth. +- **Base de code assainie** : Élimination définitive des dettes techniques de renommage et factorisation des templates d'interface. diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1ad790ff..d810ca88 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,6 +7,7 @@ import { QuestionsCompletionComponent } from "@components/graphs/questions-compl import { StudentsComponent } from "@components/graphs/students/students.component"; import { HomeComponent } from "@components/home/home.component"; import { AppNavLayoutComponent } from "@components/nav-layouts/app-nav-layout/app-nav-layout.component"; +import { GitlabCallbackComponent } from "@components/auth-callback/gitlab-callback.component"; import { AuthGuard } from "@guards/auth.guard"; import { DataLoadingGuard } from "@guards/data-loading.guard"; import { DataProvidedGuard } from "@guards/data-provided.guard"; @@ -47,6 +48,7 @@ const APP_ROUTES: Routes = [ ]; const ROUTES: Routes = [ + { path: "auth/callback", component: GitlabCallbackComponent }, { path: "", component: AppNavLayoutComponent, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b9e4e4de..3cb5e0a3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { DataService } from "@services/data.service"; import { ThemeService } from "@services/theme.service"; import * as Chart from "chart.js"; @@ -22,14 +22,14 @@ export class AppComponent implements OnInit, OnDestroy { readonly isProduction = environment.production; /** * AppComponent constructor - * @param authService Authentication service + * @param githubAuthService Authentication service * @param dataService Service used to store and get data * @param router * @param translateService Service used to translate the application * @param themeService Service used to handle theme */ constructor( - public authService: AuthService, + public githubAuthService: GithubAuthService, public dataService: DataService, private router: Router, public translateService: TranslateService, @@ -42,9 +42,9 @@ export class AppComponent implements OnInit, OnDestroy { */ ngOnInit(): void { Chart.pluginService.unregister(ChartDataLabels); - this.authService.loading = false; - if (!this.authService.isSignedIn()) { - this.authService.reauthenticate(); + this.githubAuthService.loading = false; + if (!this.githubAuthService.isSignedIn()) { + this.githubAuthService.reauthenticate(); } } @@ -53,6 +53,6 @@ export class AppComponent implements OnInit, OnDestroy { * Disconnects the user */ ngOnDestroy(): void { - this.authService.signOut(); + this.githubAuthService.signOut(); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ff4c269a..298d7696 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,7 +28,7 @@ import { AuthGuard } from "@guards/auth.guard"; import { NgbActiveModal, NgbModule } from "@ng-bootstrap/ng-bootstrap"; import { TranslateLoader, TranslateModule, TranslateService } from "@ngx-translate/core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { CommitsService } from "@services/commits.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; @@ -52,6 +52,7 @@ import { OverviewGraphContextualMenuComponent } from "./components/overview-grap import { SidebarSettingsComponent } from "./components/nav-layouts/sidebar-settings/sidebar-settings.component"; import { AccountsComponent } from "./components/nav-layouts/sidebar-settings/accounts/accounts.component"; import { AddAccountModalComponent } from "./components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component"; +import { GitlabCallbackComponent } from "@components/auth-callback/gitlab-callback.component"; /** * Firebase configuration file @@ -127,6 +128,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj SidebarSettingsComponent, AccountsComponent, AddAccountModalComponent, + GitlabCallbackComponent, ], entryComponents: [AddAccountModalComponent], imports: [ @@ -153,7 +155,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj NgxDatatableModule, ], providers: [ - AuthService, + GithubAuthService, AuthGuard, CommitsService, JsonManagerService, diff --git a/src/app/components/auth-callback/gitlab-callback.component.html b/src/app/components/auth-callback/gitlab-callback.component.html new file mode 100644 index 00000000..5f77207c --- /dev/null +++ b/src/app/components/auth-callback/gitlab-callback.component.html @@ -0,0 +1,11 @@ +
+
+ +
{{ 'ACCOUNTS.CONNECTING' | translate }}
+

+ {{ 'ACCOUNTS.CALLBACK_CLOSING' | translate }} +

+
+
diff --git a/src/app/components/auth-callback/gitlab-callback.component.scss b/src/app/components/auth-callback/gitlab-callback.component.scss new file mode 100644 index 00000000..7be94709 --- /dev/null +++ b/src/app/components/auth-callback/gitlab-callback.component.scss @@ -0,0 +1,40 @@ +@import "variables"; + +:host { + display: block; + width: 100vw; + height: 100vh; +} + +/* Callback styling */ +.callback-container { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + padding: 24px; + background-color: var(--color-bg-body); +} + +.callback-card { + max-width: 380px; + width: 100%; + padding: 32px 24px; + text-align: center; + border-radius: 12px; + background-color: var(--color-surface); + box-shadow: var(--shadow-md); + border: 1px solid var(--color-border); +} + +.callback-title { + font-size: 1.1rem; + font-weight: 600; + color: var(--color-on-surface); + margin-bottom: 8px; +} + +.callback-desc { + font-size: 0.875rem; + color: var(--color-text-secondary); +} diff --git a/src/app/components/auth-callback/gitlab-callback.component.spec.ts b/src/app/components/auth-callback/gitlab-callback.component.spec.ts new file mode 100644 index 00000000..242cc03c --- /dev/null +++ b/src/app/components/auth-callback/gitlab-callback.component.spec.ts @@ -0,0 +1,75 @@ +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ActivatedRoute, Router } from "@angular/router"; +import { TranslateModule } from "@ngx-translate/core"; +import { GitlabCallbackComponent } from "./gitlab-callback.component"; + +describe("GitlabCallbackComponent", () => { + let component: GitlabCallbackComponent; + let fixture: ComponentFixture; + let routerSpy: jasmine.SpyObj; + + beforeEach(async () => { + routerSpy = jasmine.createSpyObj("Router", ["navigate"]); + + await TestBed.configureTestingModule({ + declarations: [GitlabCallbackComponent], + imports: [TranslateModule.forRoot()], + providers: [ + { provide: Router, useValue: routerSpy }, + { + provide: ActivatedRoute, + useValue: { + snapshot: { + queryParamMap: { + get: (key: string) => { + if (key === "code") return "test-code"; + if (key === "state") return "test-state"; + return null; + }, + }, + }, + }, + }, + ], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(GitlabCallbackComponent); + component = fixture.componentInstance; + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + it("should postMessage to opener and close if opener exists", () => { + const postMessageSpy = jasmine.createSpy("postMessage"); + const closeSpy = jasmine.createSpy("close"); + + (window as any).opener = { postMessage: postMessageSpy }; + spyOn(window, "close").and.callFake(closeSpy); + + component.ngOnInit(); + + expect(postMessageSpy).toHaveBeenCalledWith( + { + type: "GITLAB_OAUTH_CALLBACK", + code: "test-code", + state: "test-state", + error: null, + errorDescription: null, + }, + window.location.origin, + ); + expect(closeSpy).toHaveBeenCalled(); + + delete (window as any).opener; + }); + + it("should navigate to home if no window.opener", () => { + delete (window as any).opener; + component.ngOnInit(); + expect(routerSpy.navigate).toHaveBeenCalledWith(["/home"]); + }); +}); diff --git a/src/app/components/auth-callback/gitlab-callback.component.ts b/src/app/components/auth-callback/gitlab-callback.component.ts new file mode 100644 index 00000000..b5a8aec2 --- /dev/null +++ b/src/app/components/auth-callback/gitlab-callback.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; + +@Component({ + selector: "app-gitlab-callback", + templateUrl: "./gitlab-callback.component.html", + styleUrls: ["./gitlab-callback.component.scss"], +}) +export class GitlabCallbackComponent implements OnInit { + constructor(private route: ActivatedRoute, private router: Router) {} + + ngOnInit(): void { + const searchParams = new URLSearchParams(window.location.search); + const code = this.route.snapshot.queryParamMap.get("code") || searchParams.get("code"); + const state = this.route.snapshot.queryParamMap.get("state") || searchParams.get("state"); + const error = this.route.snapshot.queryParamMap.get("error") || searchParams.get("error"); + const errorDescription = this.route.snapshot.queryParamMap.get("error_description") || searchParams.get("error_description"); + + const payload = { + type: "GITLAB_OAUTH_CALLBACK", + code, + state, + error, + errorDescription, + timestamp: Date.now(), + }; + + try { + localStorage.setItem("gitlab_oauth_callback_data", JSON.stringify(payload)); + } catch (e) { + console.warn("Could not write oauth callback data to localStorage:", e); + } + + if (window.opener) { + try { + window.opener.postMessage(payload, window.location.origin); + } catch (e) { + console.warn("Could not postMessage to opener:", e); + } + } + + setTimeout(() => { + window.close(); + if (!window.opener) { + this.router.navigate(["/home"]); + } + }, 200); + } +} diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index 45a86d7a..7123a6b4 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -235,8 +235,8 @@
{{ 'HOME.FILTER.YEAR' | translate }}
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index 3280bec7..ba783f83 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -3,7 +3,7 @@ import { Router } from "@angular/router"; import { Assignment } from "@models/Assignment.model"; import { TranslateService } from "@ngx-translate/core"; import { AssignmentsService } from "@services/assignments.service"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { ConfigurationService } from "@services/configuration.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; @@ -202,7 +202,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { private databaseService: DatabaseService, private dataService: DataService, private router: Router, - public authService: AuthService, + public githubAuthService: GithubAuthService, private translateService: TranslateService, private toastService: ToastService, private assignmentsService: AssignmentsService, @@ -560,7 +560,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } selectAssignment(assignment: any) { - if (!this.authService.isSignedIn()) return; + if (!this.githubAuthService.isSignedIn()) return; this.dataService.assignment = assignment; this.dataService.groupFilter = ""; if (this.dataService.repoToLoad) { @@ -569,12 +569,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } deleteAssignment(assignment: any) { - if (!this.authService.isSignedIn()) return; + if (!this.githubAuthService.isSignedIn()) return; this.databaseService.deleteAssignment(assignment.id); } createAssignment() { - if (!this.authService.isSignedIn()) return; + if (!this.githubAuthService.isSignedIn()) return; if (this.isCreatingNew) return; // Prevent multiple creates let assignment = new Assignment(); @@ -589,7 +589,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } editAssignment(assignment: any) { - if (!this.authService.isSignedIn()) return; + if (!this.githubAuthService.isSignedIn()) return; // If we were creating a new one and clicked edit on another, discard the new one if (this.isCreatingNew && assignment.id !== -1) { diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html index 917e383f..43ad4510 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html @@ -183,7 +183,7 @@
{{ 'EDIT-REPOSITORIES.NO-REPOSITORIES' | translate }}
{{ 'EDIT-REPOSITORIES.ADD-EMPTY-REPOSITORY' | translate }} - diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts index 7e0fe9a0..bc203a69 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts @@ -1,25 +1,11 @@ -import { - ChangeDetectorRef, - Component, - OnInit, - TemplateRef, - ViewChild, -} from "@angular/core"; -import { - AbstractControl, - AsyncValidatorFn, - FormBuilder, - FormGroup, - ValidationErrors, - ValidatorFn, - Validators, -} from "@angular/forms"; +import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; +import { AbstractControl, AsyncValidatorFn, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from "@angular/forms"; import { Error, Repository } from "@models/Repository.model"; import { TranslateService } from "@ngx-translate/core"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import { ToastService } from "@services/toast.service"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { DataService } from "@services/data.service"; import { Observable, of, timer } from "rxjs"; import { catchError, map, switchMap, take } from "rxjs/operators"; @@ -38,15 +24,9 @@ export type SortDirection = "asc" | "desc" | ""; @Component({ selector: "edit-repositories", templateUrl: "./edit-repositories.component.html", - styleUrls: [ - "../configuration.component.scss", - "./edit-repositories.component.scss", - ], + styleUrls: ["../configuration.component.scss", "./edit-repositories.component.scss"], }) -export class EditRepositoriesComponent - extends BaseTabEditConfigurationComponent - implements OnInit -{ +export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent implements OnInit { /** * The matrix that defines the transition relationships between the sorting modes. * @@ -78,18 +58,12 @@ export class EditRepositoriesComponent const name = group.get("name")?.value?.toLowerCase() || ""; const url = group.get("url")?.value?.toLowerCase() || ""; const tpGroup = group.get("tpGroup")?.value?.toLowerCase() || ""; - return ( - name.includes(lowerQuery) || - url.includes(lowerQuery) || - tpGroup.includes(lowerQuery) - ); + return name.includes(lowerQuery) || url.includes(lowerQuery) || tpGroup.includes(lowerQuery); }); } get existingTpGroups(): string[] { - const groups = this.getFormControls - .map((group) => group.get("tpGroup")?.value) - .filter((val) => val && val.trim() !== ""); + const groups = this.getFormControls.map((group) => group.get("tpGroup")?.value).filter((val) => val && val.trim() !== ""); return Array.from(new Set(groups)).sort(); } @@ -111,17 +85,13 @@ export class EditRepositoriesComponent } isAllSelected(): boolean { - const visibleIds = this.filteredFormControls.map((group) => - this.getFormControls.indexOf(group) - ); + const visibleIds = this.filteredFormControls.map((group) => this.getFormControls.indexOf(group)); if (visibleIds.length === 0) return false; return visibleIds.every((id) => this.selectedRepositories.has(id)); } toggleSelectAll() { - const visibleIds = this.filteredFormControls.map((group) => - this.getFormControls.indexOf(group) - ); + const visibleIds = this.filteredFormControls.map((group) => this.getFormControls.indexOf(group)); if (this.isAllSelected()) { visibleIds.forEach((id) => this.selectedRepositories.delete(id)); } else { @@ -137,9 +107,7 @@ export class EditRepositoriesComponent deleteSelected() { if (this.selectedRepositories.size === 0) return; - const indicesToDelete = Array.from(this.selectedRepositories).sort( - (a, b) => b - a - ); + const indicesToDelete = Array.from(this.selectedRepositories).sort((a, b) => b - a); indicesToDelete.forEach((index) => this.deleteRow(index)); this.cancelSelection(); @@ -149,19 +117,21 @@ export class EditRepositoriesComponent * EditRepositoriesComponent constructor * @param fb The service to build formGroups * @param cdref - * @param authService The service managing authentication - * @param modalService The service to open a modal - * @param translateService The service for the localization - * @param dataService The service to manage the application data at runtime + * @param githubAuthService The service managing authentication + * @param formBuilder Helper service for building forms + * @param dataService The service managing application data + * @param modalService The modal service + * @param translateService The translation service + * @param toastService The toast notification service */ constructor( protected fb: FormBuilder, protected cdref: ChangeDetectorRef, - public authService: AuthService, + public githubAuthService: GithubAuthService, private modalService: CustomModalService, private translateService: TranslateService, private toastService: ToastService, - private dataService: DataService + private dataService: DataService, ) { super(fb, cdref); } @@ -188,13 +158,8 @@ export class EditRepositoriesComponent * If the modal is closed with the "Add" button, all the new selected repositories are saved in the assignment */ openAddRepositoriesModal() { - let modalReference: CustomModalRef = this.modalService.open( - ModalAddRepositoriesComponent, - { size: "lg" } - ); - modalReference.componentInstance.repoList = this.getFormControls.map( - (row) => Repository.withJSON(row.value) - ); + let modalReference: CustomModalRef = this.modalService.open(ModalAddRepositoriesComponent, { size: "lg" }); + modalReference.componentInstance.repoList = this.getFormControls.map((row) => Repository.withJSON(row.value)); modalReference.result.then( (result) => { @@ -203,7 +168,7 @@ export class EditRepositoriesComponent (repo1) => !this.getFormControls .map((row) => Repository.withJSON(row.value)) - .some((repo2, index, array) => Repository.isEqual(repo1, repo2)) + .some((repo2, index, array) => Repository.isEqual(repo1, repo2)), ); repoToadd.forEach((repo) => { this.addRow(repo); @@ -211,7 +176,7 @@ export class EditRepositoriesComponent this.modify(); } }, - (error) => {} + (error) => {}, ); } @@ -232,9 +197,7 @@ export class EditRepositoriesComponent if (!errors) { return ""; } - return errors - .map((err) => this.translateService.instant("ERROR-MESSAGE-" + err.type)) - .join(". "); + return errors.map((err) => this.translateService.instant("ERROR-MESSAGE-" + err.type)).join(". "); } /** @@ -256,9 +219,7 @@ export class EditRepositoriesComponent * @param property The property to sort the table with */ onSort(property: string) { - this.lastPropertySorted === property - ? this.rotate() - : (this.nameDirection = "asc"); + this.lastPropertySorted === property ? this.rotate() : (this.nameDirection = "asc"); this.sort(property); this.lastPropertySorted = property; @@ -314,13 +275,9 @@ export class EditRepositoriesComponent private repoAlreadyAddedValidator(): ValidatorFn { return (urlControl: AbstractControl): ValidationErrors | null => { let doesRepoAlreadyAdded = this.getFormControls.some( - (repo2, index, array) => - urlControl.value === repo2.get("url").value && - !Object.is(urlControl, repo2.get("url")) + (repo2, index, array) => urlControl.value === repo2.get("url").value && !Object.is(urlControl, repo2.get("url")), ); - return urlControl.value && doesRepoAlreadyAdded - ? { repoAlreadyAdded: true } - : null; + return urlControl.value && doesRepoAlreadyAdded ? { repoAlreadyAdded: true } : null; }; } @@ -328,39 +285,31 @@ export class EditRepositoriesComponent * A validator checking if the authenticated user has access to the specified repository (and if it exists) */ private accessToRepoValidator(initialUrl?: string): AsyncValidatorFn { - return ( - urlControl: AbstractControl - ): Observable => { + return (urlControl: AbstractControl): Observable => { if (!urlControl.value || urlControl.value === initialUrl) { return timer(10).pipe( map(() => null), - take(1) + take(1), ); } else { return timer(1000).pipe( - switchMap(() => this.authService.verifyUserAccess(urlControl.value)), + switchMap(() => this.githubAuthService.verifyUserAccess(urlControl.value)), map((res) => { if (urlControl.parent && urlControl.parent.get("avatarUrl")) { - urlControl.parent - .get("avatarUrl") - .setValue(res?.owner?.avatar_url || null, { emitEvent: false }); + urlControl.parent.get("avatarUrl").setValue(res?.owner?.avatar_url || null, { emitEvent: false }); } return null; }), catchError((err) => { if (urlControl.parent && urlControl.parent.get("avatarUrl")) { - urlControl.parent - .get("avatarUrl") - .setValue(null, { emitEvent: false }); + urlControl.parent.get("avatarUrl").setValue(null, { emitEvent: false }); } const title = this.translateService.instant("ERROR"); - const msg = this.translateService.instant( - "ERROR-MESSAGE-NO-ACCESS" - ); + const msg = this.translateService.instant("ERROR-MESSAGE-NO-ACCESS"); this.toastService.error(title, msg); return of({ noAccess: true }); }), - take(1) + take(1), ); } }; @@ -383,11 +332,7 @@ export class EditRepositoriesComponent this.initForm(this.datas); } else { let sortFactor = this.nameDirection === "asc" ? 1 : -1; - this.formGroups = [...this.formGroups].sort( - (a, b) => - sortFactor * - a.get(property).value?.localeCompare(b.get(property).value) - ); + this.formGroups = [...this.formGroups].sort((a, b) => sortFactor * a.get(property).value?.localeCompare(b.get(property).value)); } } } diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts index c4513bdf..3bfdce5e 100644 --- a/src/app/components/home/home.component.ts +++ b/src/app/components/home/home.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from "@angular/core"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { AccountsService } from "@services/accounts.service"; import { AddAccountModalComponent } from "../nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component"; @@ -19,11 +19,15 @@ export class HomeComponent implements OnInit { /** * HomeComponent constructor - * @param authService The service managing authentication + * @param githubAuthService The service managing authentication * @param accountsService The service managing connected accounts * @param customModalService The modal service */ - constructor(public authService: AuthService, public accountsService: AccountsService, private customModalService: CustomModalService) {} + constructor( + public githubAuthService: GithubAuthService, + public accountsService: AccountsService, + private customModalService: CustomModalService, + ) {} ngOnInit() { window.addEventListener("git4school:open-accounts-modal", () => this.onAddAccount()); @@ -34,7 +38,7 @@ export class HomeComponent implements OnInit { } async onSignInGithub() { - await this.authService.signIn(); + await this.githubAuthService.signIn(); } scroll(el: HTMLElement) { diff --git a/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.html b/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.html index 7bf047df..edbe6e50 100644 --- a/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.html +++ b/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.html @@ -16,7 +16,7 @@
-
+
@@ -25,7 +25,7 @@
-
+
diff --git a/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.ts b/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.ts index 3bb61c91..24ea6af0 100644 --- a/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.ts +++ b/src/app/components/nav-items/auth-lang-nav-item/auth-lang-nav-item.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Output, EventEmitter } from "@angular/core"; import { TranslateService } from "@ngx-translate/core"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { TourService } from "@services/tour.service"; @Component({ @@ -19,11 +19,7 @@ export class AuthLangNavItemComponent implements OnInit { ru: "Русский", }; - constructor( - public translateService: TranslateService, - public authService: AuthService, - private tourService: TourService - ) {} + constructor(public translateService: TranslateService, public githubAuthService: GithubAuthService, private tourService: TourService) {} ngOnInit(): void {} @@ -36,14 +32,14 @@ export class AuthLangNavItemComponent implements OnInit { * Signs in */ onSignInGithub() { - this.authService.signIn(); + this.githubAuthService.signIn(); } /** * Signs out */ onSignOut() { - this.authService.signOut(); + this.githubAuthService.signOut(); } /** diff --git a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts index 9783ef84..683c906a 100644 --- a/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts +++ b/src/app/components/nav-layouts/app-nav-layout/app-nav-layout.component.ts @@ -2,7 +2,7 @@ import { Component, HostListener, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; import { AssignmentsService } from "@services/assignments.service"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { ConfigurationService } from "@services/configuration.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; @@ -27,7 +27,7 @@ export interface NavTab { }) export class AppNavLayoutComponent implements OnInit { constructor( - public authService: AuthService, + public githubAuthService: GithubAuthService, public dataService: DataService, public translateService: TranslateService, private assignmentsService: AssignmentsService, diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html index 8270ccb2..312b8cb0 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/accounts.component.html @@ -101,14 +101,8 @@
- +
- - - - - {{ 'ACCOUNTS.LAST_SYNC' | translate }}: {{ acc.lastSync }} - {{ acc.tokenExpiresInDays }} {{ 'ACCOUNTS.DAYS' | translate }} diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html index 889f3cdf..7173cdaf 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html @@ -63,8 +63,6 @@
- - {{ 'ACCOUNTS.COMING_SOON' | translate }} + + + {{ 'ACCOUNTS.ACTIVE' | translate }}
@@ -141,7 +140,7 @@
{{ (selectedPlatform === 'github' ? 'ACCOUNTS.PLATFORM_GITHUB_TITLE' : (selectedPlatform === 'gitlab-cloud' ? 'ACCOUNTS.PLATFORM_GITLAB_TITLE' : 'ACCOUNTS.PLATFORM_GITLAB_SELF_TITLE')) | translate }} - {{ selectedPlatform === 'gitlab-custom' ? 'Token PAT' : 'OAuth 2.0' }} + {{ platformAuthTypeKey | translate }}
@@ -149,141 +148,20 @@
- {{ 'ACCOUNTS.SCOPE_LABEL' | translate }} : {{ selectedPlatform === 'gitlab-custom' ? 'read_api, read_user' : 'repo' }} + {{ 'ACCOUNTS.SCOPE_LABEL' | translate }} : {{ selectedPlatform === 'github' ? 'repo' : 'read_api, read_user' }}
- - - -
- - -
- - - - - -
-
- - -
-

- {{ 'ACCOUNTS.OAUTH_FIREBASE_DESC' | translate:{ provider: 'GitHub' } }} -

- - -
- - - - -
-

- {{ 'ACCOUNTS.OAUTH_FIREBASE_DESC' | translate:{ provider: 'GitLab' } }} -

- - -
+ + + + + + + + @@ -334,7 +212,7 @@
- + @@ -343,3 +221,123 @@
+ + + +
+ + +
+ + + + + +
+
+ + + + +
+

+ + {{ 'ACCOUNTS.OAUTH_FIREBASE_DESC' | translate:{ provider: 'GitHub' } }} + + + {{ 'ACCOUNTS.OAUTH_GITLAB_DESC' | translate }} + +

+ + +
+ diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss index 6fa1dbae..12453973 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import "variables"; :host { display: block; @@ -529,7 +529,7 @@ transform: translate3d(-96px, 0, 0); background-color: var(--color-danger); border-color: var(--color-danger); - color: #fff; + color: var(--color-on-primary); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35); &:hover:not(:disabled) { @@ -624,7 +624,7 @@ justify-content: center; background-color: var(--color-primary); border: 1px solid var(--color-primary); - color: #fff; + color: var(--color-on-primary); padding: 0.55rem 1.6rem; border-radius: 9999px; font-size: 0.875rem; diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts index 4961009b..50e941c6 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.spec.ts @@ -3,7 +3,9 @@ import { FormsModule } from "@angular/forms"; import { TranslateModule } from "@ngx-translate/core"; import { BehaviorSubject } from "rxjs"; import { AddAccountModalComponent } from "./add-account-modal.component"; -import { AuthService, AuthState } from "@services/auth.service"; +import { GithubAuthService, AuthState } from "@services/github-auth.service"; +import { GitlabAuthService } from "@services/gitlab-auth.service"; +import { AccountsService } from "@services/accounts.service"; import { DevFlagsService } from "@services/dev-flags.service"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import { SharedUiModule } from "@shared/ui/shared-ui.module"; @@ -11,7 +13,9 @@ import { SharedUiModule } from "@shared/ui/shared-ui.module"; describe("AddAccountModalComponent", () => { let component: AddAccountModalComponent; let fixture: ComponentFixture; - let authServiceSpy: jasmine.SpyObj; + let githubAuthSpy: jasmine.SpyObj; + let gitlabAuthSpy: jasmine.SpyObj; + let accountsServiceSpy: jasmine.SpyObj; let modalRefSpy: jasmine.SpyObj; let cloudFlag$: BehaviorSubject; let customFlag$: BehaviorSubject; @@ -20,7 +24,10 @@ describe("AddAccountModalComponent", () => { cloudFlag$ = new BehaviorSubject(false); customFlag$ = new BehaviorSubject(false); - authServiceSpy = jasmine.createSpyObj("AuthService", ["signIn", "signOut", "isSignedIn"], { + githubAuthSpy = jasmine.createSpyObj("GithubAuthService", ["signIn", "signOut", "isSignedIn", "getAccount", "getProfileUrl"], { + provider: "github", + name: "GitHub", + instanceHost: "github.com", token: "mock-token", username: "testuser", avatarUrl: "https://example.com/avatar.jpg", @@ -32,12 +39,47 @@ describe("AddAccountModalComponent", () => { displayName: "Test User", }).asObservable(), }); - authServiceSpy.isSignedIn.and.returnValue("mock-token"); + githubAuthSpy.isSignedIn.and.returnValue(true); + githubAuthSpy.getAccount.and.returnValue({ + id: "acc-github-real", + provider: "github", + instanceHost: "github.com", + username: "testuser", + avatarUrl: "https://example.com/avatar.jpg", + isCurrent: true, + }); + githubAuthSpy.getProfileUrl.and.returnValue("https://github.com/testuser"); + + gitlabAuthSpy = jasmine.createSpyObj( + "GitlabAuthService", + ["signIn", "loginWithPopup", "signOut", "isSignedIn", "getAccount", "getProfileUrl"], + { + provider: "gitlab", + name: "GitLab", + instanceHost: "gitlab.com", + token: null, + currentUser: null, + authChange$: new BehaviorSubject({ isSignedIn: false, token: null, user: null }).asObservable(), + }, + ); + gitlabAuthSpy.isSignedIn.and.returnValue(false); + gitlabAuthSpy.getAccount.and.returnValue(null); + gitlabAuthSpy.getProfileUrl.and.returnValue("https://gitlab.com"); modalRefSpy = jasmine.createSpyObj("CustomModalRef", ["close"]); + accountsServiceSpy = jasmine.createSpyObj("AccountsService", ["getProvider", "disconnectAccount", "getProfileUrl"], { + isGithubConnected: true, + isGitlabConnected: false, + }); + accountsServiceSpy.getProvider.and.callFake((type: string) => { + if (type === "github") return githubAuthSpy; + if (type === "gitlab") return gitlabAuthSpy; + return undefined; + }); + const devFlagsSpy = { - gitlabCloudEnabled: false, + gitlabCloudEnabled: true, gitlabCustomEnabled: false, gitlabCloudEnabled$: cloudFlag$.asObservable(), gitlabCustomEnabled$: customFlag$.asObservable(), @@ -47,7 +89,7 @@ describe("AddAccountModalComponent", () => { declarations: [AddAccountModalComponent], imports: [FormsModule, SharedUiModule, TranslateModule.forRoot()], providers: [ - { provide: AuthService, useValue: authServiceSpy }, + { provide: AccountsService, useValue: accountsServiceSpy }, { provide: CustomModalRef, useValue: modalRefSpy }, { provide: DevFlagsService, useValue: devFlagsSpy }, ], @@ -64,30 +106,29 @@ describe("AddAccountModalComponent", () => { expect(component.isGithubConnected).toBeTrue(); }); - it("should guard platform selection when dev flags are disabled", () => { + it("should allow gitlab-cloud and guard gitlab-custom when dev flags are disabled", () => { const devFlags = TestBed.inject(DevFlagsService); - // gitlab-cloud is disabled component.selectPlatform("gitlab-cloud"); - expect(component.selectedPlatform).toBe("github"); + expect(component.selectedPlatform).toBe("gitlab-cloud"); - // Enable gitlab-cloud - (devFlags as any).gitlabCloudEnabled = true; - component.selectPlatform("gitlab-cloud"); + component.selectPlatform("gitlab-custom"); expect(component.selectedPlatform).toBe("gitlab-cloud"); + + (devFlags as any).gitlabCustomEnabled = true; + component.selectPlatform("gitlab-custom"); + expect(component.selectedPlatform).toBe("gitlab-custom"); }); it("should handle the two-step disconnect confirmation flow", () => { expect(component.isConfirmingDisconnect).toBeFalse(); - // First click enters confirmation mode component.onDisconnectClick(); expect(component.isConfirmingDisconnect).toBeTrue(); - expect(authServiceSpy.signOut).not.toHaveBeenCalled(); + expect(githubAuthSpy.signOut).not.toHaveBeenCalled(); - // Second click performs disconnect component.onDisconnectClick(); - expect(authServiceSpy.signOut).toHaveBeenCalled(); + expect(githubAuthSpy.signOut).toHaveBeenCalled(); expect(component.isConfirmingDisconnect).toBeFalse(); }); @@ -98,7 +139,6 @@ describe("AddAccountModalComponent", () => { component.cancelConfirmDisconnect(); expect(component.isConfirmingDisconnect).toBeFalse(); - // Test Escape key handling component.onDisconnectClick(); expect(component.isConfirmingDisconnect).toBeTrue(); @@ -106,4 +146,15 @@ describe("AddAccountModalComponent", () => { component.onEscape(escapeEvent); expect(component.isConfirmingDisconnect).toBeFalse(); }); + + it("should return correct platform auth type key for badges", () => { + component.selectedPlatform = "github"; + expect(component.platformAuthTypeKey).toBe("ACCOUNTS.AUTH_TYPE_OAUTH"); + + component.selectedPlatform = "gitlab-cloud"; + expect(component.platformAuthTypeKey).toBe("ACCOUNTS.AUTH_TYPE_OAUTH_PKCE"); + + component.selectedPlatform = "gitlab-custom"; + expect(component.platformAuthTypeKey).toBe("ACCOUNTS.AUTH_TYPE_PAT"); + }); }); diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts index c654b498..7c8dbd62 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.ts @@ -2,9 +2,10 @@ import { Component, HostListener, OnDestroy, OnInit } from "@angular/core"; import { Subscription } from "rxjs"; import { TranslateService } from "@ngx-translate/core"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; -import { AuthService } from "@services/auth.service"; import { AccountsService } from "@services/accounts.service"; import { DevFlagsService } from "@services/dev-flags.service"; +import { GitAuthProvider } from "@models/GitAuthProvider.model"; +import { Account } from "@models/Account.model"; @Component({ selector: "app-add-account-modal", @@ -25,18 +26,53 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { constructor( public modalRef: CustomModalRef, public accountsService: AccountsService, - public authService: AuthService, public devFlagsService: DevFlagsService, private translateService: TranslateService, ) {} + get currentProvider(): GitAuthProvider | undefined { + if (this.selectedPlatform === "github") { + return this.accountsService.getProvider("github"); + } + if (this.selectedPlatform === "gitlab-cloud") { + return this.accountsService.getProvider("gitlab"); + } + return undefined; + } + + get isConnected(): boolean { + return !!this.currentProvider?.isSignedIn(); + } + + get connectedAccount(): Account | null { + return this.currentProvider?.getAccount() || null; + } + get isGithubConnected(): boolean { - return !!this.authService.isSignedIn(); + return this.accountsService.isGithubConnected; + } + + get isGitlabConnected(): boolean { + return this.accountsService.isGitlabConnected; + } + + get platformAuthTypeKey(): string { + switch (this.selectedPlatform) { + case "gitlab-cloud": + return "ACCOUNTS.AUTH_TYPE_OAUTH_PKCE"; + case "gitlab-custom": + return "ACCOUNTS.AUTH_TYPE_PAT"; + default: + return "ACCOUNTS.AUTH_TYPE_OAUTH"; + } } get profileUrl(): string { - const user = this.authService.username || ""; - return user ? `https://github.com/${user}` : "https://github.com"; + return this.currentProvider?.getProfileUrl() || "#"; + } + + get gitlabProfileUrl(): string { + return this.accountsService.getProvider("gitlab")?.getProfileUrl() || "https://gitlab.com"; } @HostListener("document:keydown.escape", ["$event"]) @@ -58,18 +94,11 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { ngOnInit(): void { this.selectedPlatform = "github"; - this.flagsSub = this.devFlagsService.gitlabCloudEnabled$.subscribe((enabled) => { - if (!enabled && this.selectedPlatform === "gitlab-cloud") { + this.flagsSub = this.devFlagsService.gitlabCustomEnabled$.subscribe((enabled) => { + if (!enabled && this.selectedPlatform === "gitlab-custom") { this.selectedPlatform = "github"; } }); - this.flagsSub.add( - this.devFlagsService.gitlabCustomEnabled$.subscribe((enabled) => { - if (!enabled && this.selectedPlatform === "gitlab-custom") { - this.selectedPlatform = "github"; - } - }), - ); } ngOnDestroy(): void { @@ -79,7 +108,7 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { selectPlatform(platform: "github" | "gitlab-cloud" | "gitlab-custom"): void { const allowed: Record = { github: true, - "gitlab-cloud": this.devFlagsService.gitlabCloudEnabled, + "gitlab-cloud": true, "gitlab-custom": this.devFlagsService.gitlabCustomEnabled, }; if (allowed[platform]) { @@ -89,54 +118,47 @@ export class AddAccountModalComponent implements OnInit, OnDestroy { } async submitConnect(): Promise { + const provider = this.currentProvider; + if (!provider) { + return; + } + this.isConnecting = true; this.errorMessage = ""; try { - await this.authService.signIn(); + await provider.signIn(); this.modalRef.close(); } catch (err: any) { - this.errorMessage = - err?.code === "auth/popup-closed-by-user" - ? this.translateService.instant("ACCOUNTS.POPUP_CLOSED") - : err?.message || this.translateService.instant("ACCOUNTS.LOGIN_ERROR"); + if (err?.code === "auth/popup-closed-by-user" || err?.message === "POPUP_CLOSED") { + this.errorMessage = this.translateService.instant("ACCOUNTS.POPUP_CLOSED"); + } else { + this.errorMessage = err?.message || this.translateService.instant("ACCOUNTS.LOGIN_ERROR"); + } } finally { this.isConnecting = false; } } - async submitGitlabCloud(): Promise { - this.isConnecting = true; - this.errorMessage = ""; - setTimeout(() => { - this.isConnecting = false; - this.errorMessage = "La connexion GitLab OAuth est en cours de développement."; - }, 600); - } - async submitGitlabCustom(): Promise { this.isConnecting = true; this.errorMessage = ""; setTimeout(() => { this.isConnecting = false; - this.errorMessage = `Vérification du token PAT pour l'instance "${this.gitlabInstanceUrl}"... (Mode Dev)`; + this.errorMessage = this.translateService.instant("ACCOUNTS.DEV_MODE_PAT", { url: this.gitlabInstanceUrl }); }, 600); } onDisconnectClick(event?: MouseEvent): void { event?.stopPropagation(); if (this.isConfirmingDisconnect) { - this.disconnectGithub(); + this.currentProvider?.signOut(); + this.isConfirmingDisconnect = false; } else { this.isConfirmingDisconnect = true; } } - disconnectGithub(): void { - this.authService.signOut(); - this.isConfirmingDisconnect = false; - } - cancelConfirmDisconnect(event?: MouseEvent): void { event?.stopPropagation(); this.isConfirmingDisconnect = false; diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html index 269a9255..5e1d4441 100644 --- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.html @@ -167,7 +167,7 @@ {{ 'SETTINGS.DOCS-TOOLTIP' | translate }} -
+
diff --git a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts index 96fdcb42..348575c0 100644 --- a/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts +++ b/src/app/components/nav-layouts/sidebar-settings/sidebar-settings.component.ts @@ -8,7 +8,7 @@ import { DatabaseService } from "@services/database.service"; import { ThemeService } from "@services/theme.service"; import { Subscription } from "rxjs"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { TranslateService } from "@ngx-translate/core"; import { TourService } from "@services/tour.service"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; @@ -47,7 +47,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges { private route: ActivatedRoute, private configurationService: ConfigurationService, private assignmentsService: AssignmentsService, - public authService: AuthService, + public githubAuthService: GithubAuthService, public translateService: TranslateService, private tourService: TourService, private customModalService: CustomModalService, @@ -63,7 +63,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges { this.displayLimit = parseInt(savedLimit, 10); } - this.authSub = this.authService.authChange$.subscribe(() => { + this.authSub = this.githubAuthService.authChange$.subscribe(() => { this.loadRecentAssignments(); this.cdr.markForCheck(); }); @@ -101,8 +101,8 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges { this.totalAssignmentsCount = all.length; // Filter by connection - const isGithubConnected = !!this.authService.isSignedIn(); - const isGitlabConnected = false; // Mock for now + const isGithubConnected = this.accountsService.isGithubConnected; + const isGitlabConnected = this.accountsService.isGitlabConnected; let filtered = all.filter((a) => { (a as any).uiType = this.computeType(a); @@ -192,7 +192,7 @@ export class SidebarSettingsComponent implements OnInit, OnDestroy, OnChanges { } onSignOut() { - this.authService.signOut(); + this.githubAuthService.signOut(); } replayTour() { diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts index bad2eb1b..1ca4831b 100644 --- a/src/app/guards/auth.guard.ts +++ b/src/app/guards/auth.guard.ts @@ -1,17 +1,9 @@ -import { - ActivatedRouteSnapshot, - CanActivate, - RouterStateSnapshot, - Router, -} from "@angular/router"; -import { Observable } from "rxjs/Observable"; import { Injectable } from "@angular/core"; -import "firebase/auth"; - -import { AuthService } from "@services/auth.service"; +import { CanActivate, Router } from "@angular/router"; +import { AccountsService } from "@services/accounts.service"; /** - * This guard ensures the user is connected with a Github account + * This guard ensures the user is connected with at least one Git provider account */ @Injectable({ providedIn: "root", @@ -19,20 +11,20 @@ import { AuthService } from "@services/auth.service"; export class AuthGuard implements CanActivate { /** * AuthGuard constructor - * @param authService + * @param accountsService * @param router */ - constructor(private authService: AuthService, private router: Router) {} + constructor(private accountsService: AccountsService, private router: Router) {} /** - * Allows access to the protected route if user is connected + * Allows access to the protected route if at least one account is connected * @returns true if connected, redirects to home otherwise */ - canActivate(): Observable | Promise | boolean { - if (this.authService.isSignedIn()) { + canActivate(): boolean { + if (!this.accountsService.isEmpty()) { return true; - } else { - this.router.navigate(["/home"]); } + this.router.navigate(["/home"]); + return false; } } diff --git a/src/app/guards/auth.guard.ts.orig b/src/app/guards/auth.guard.ts.orig deleted file mode 100644 index 5d837043..00000000 --- a/src/app/guards/auth.guard.ts.orig +++ /dev/null @@ -1,38 +0,0 @@ -import { - ActivatedRouteSnapshot, - CanActivate, - RouterStateSnapshot, - Router -} from '@angular/router'; -import { Observable } from 'rxjs/Observable'; -import { Injectable } from '@angular/core'; -import 'firebase/auth'; - -import { AuthService } from '@services/auth.service'; - -/** - * This guard ensures the user is connected with a Github account - */ -@Injectable({ - providedIn: 'root' -}) -export class AuthGuard implements CanActivate { - /** - * AuthGuard constructor - * @param authService - * @param router - */ - constructor(private authService: AuthService, private router: Router) {} - - /** - * Allows access to the protected route if user is connected - * @returns true if connected, redirects to home otherwise - */ - canActivate(): Observable | Promise | boolean { - if (this.authService.isSignedIn()) { - return true; - } else { - this.router.navigate(['/home']); - } - } -} diff --git a/src/app/guards/auth.guard.ts.rej b/src/app/guards/auth.guard.ts.rej deleted file mode 100644 index 6275defe..00000000 --- a/src/app/guards/auth.guard.ts.rej +++ /dev/null @@ -1,17 +0,0 @@ -@@ -10,7 +10,8 @@ - constructor(private authService: AuthService, private router: Router) {} - - canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) { -- return this.authService.user$.pipe( -+ return true; // Bypass for debugging -+/* return this.authService.user$.pipe( - take(1), - map((user) => !!user), - tap((loggedIn) => { -@@ -19,5 +20,6 @@ - } - }) - ); -+*/ - } - } diff --git a/src/app/models/GitAuthProvider.model.ts b/src/app/models/GitAuthProvider.model.ts new file mode 100644 index 00000000..7e31ab0c --- /dev/null +++ b/src/app/models/GitAuthProvider.model.ts @@ -0,0 +1,15 @@ +import { Observable } from "rxjs"; +import { Account, GitProviderType } from "./Account.model"; + +export interface GitAuthProvider { + readonly provider: GitProviderType; + readonly name: string; + readonly instanceHost: string; + readonly authChange$: Observable; + + isSignedIn(): boolean; + getAccount(): Account | null; + signIn(): Promise; + signOut(): Promise | void; + getProfileUrl(username?: string): string; +} diff --git a/src/app/services/accounts.service.spec.ts b/src/app/services/accounts.service.spec.ts index 58b64f15..aee5bf34 100644 --- a/src/app/services/accounts.service.spec.ts +++ b/src/app/services/accounts.service.spec.ts @@ -1,12 +1,15 @@ import { TestBed } from "@angular/core/testing"; import { AccountsService } from "./accounts.service"; -import { AuthService, AuthState } from "./auth.service"; +import { GithubAuthService, AuthState } from "./github-auth.service"; +import { GitlabAuthService, GitlabAuthState } from "./gitlab-auth.service"; import { BehaviorSubject } from "rxjs"; describe("AccountsService", () => { let service: AccountsService; let authChangeMock$: BehaviorSubject; - let authServiceSpy: jasmine.SpyObj; + let gitlabAuthChangeMock$: BehaviorSubject; + let githubAuthServiceSpy: jasmine.SpyObj; + let gitlabAuthServiceSpy: jasmine.SpyObj; beforeEach(() => { authChangeMock$ = new BehaviorSubject({ @@ -17,9 +20,20 @@ describe("AccountsService", () => { displayName: null, }); - authServiceSpy = { + gitlabAuthChangeMock$ = new BehaviorSubject({ + isSignedIn: false, + token: null, + user: null, + }); + + githubAuthServiceSpy = { + provider: "github", + name: "GitHub", + instanceHost: "github.com", signOut: jasmine.createSpy("signOut"), - isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(null), + isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false), + getAccount: jasmine.createSpy("getAccount").and.returnValue(null), + getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://github.com/${u || ""}`), authChange$: authChangeMock$.asObservable(), token: null, username: null, @@ -27,8 +41,25 @@ describe("AccountsService", () => { displayName: null, } as any; + gitlabAuthServiceSpy = { + provider: "gitlab", + name: "GitLab", + instanceHost: "gitlab.com", + signOut: jasmine.createSpy("signOut"), + isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(false), + getAccount: jasmine.createSpy("getAccount").and.returnValue(null), + getProfileUrl: jasmine.createSpy("getProfileUrl").and.callFake((u?: string) => `https://gitlab.com/${u || ""}`), + authChange$: gitlabAuthChangeMock$.asObservable(), + token: null, + currentUser: null, + } as any; + TestBed.configureTestingModule({ - providers: [AccountsService, { provide: AuthService, useValue: authServiceSpy }], + providers: [ + AccountsService, + { provide: GithubAuthService, useValue: githubAuthServiceSpy }, + { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy }, + ], }); service = TestBed.inject(AccountsService); @@ -45,10 +76,15 @@ describe("AccountsService", () => { }); it("should emit GitHub account when user is signed in", (done) => { - (authServiceSpy as any).token = "fake-token"; - (authServiceSpy as any).username = "octocat"; - (authServiceSpy as any).avatarUrl = "https://example.com/avatar.png"; - authServiceSpy.isSignedIn.and.returnValue("fake-token"); + githubAuthServiceSpy.isSignedIn.and.returnValue(true); + githubAuthServiceSpy.getAccount.and.returnValue({ + id: "acc-github-real", + provider: "github", + instanceHost: "github.com", + username: "octocat", + avatarUrl: "https://example.com/avatar.png", + isCurrent: true, + }); authChangeMock$.next({ isSignedIn: true, @@ -80,7 +116,6 @@ describe("AccountsService", () => { username: "johndoe", provider: "github", instanceHost: "github.com", - lastSync: "now", }), ).toBe("https://github.com/johndoe"); @@ -90,15 +125,20 @@ describe("AccountsService", () => { username: "gitlabuser", provider: "gitlab", instanceHost: "https://gitlab.example.org/", - lastSync: "now", }), ).toBe("https://gitlab.example.org/gitlabuser"); }); - it("should call authService.signOut when disconnecting real github account", () => { - (authServiceSpy as any).token = "fake-token"; - (authServiceSpy as any).username = "octocat"; - authServiceSpy.isSignedIn.and.returnValue("fake-token"); + it("should call githubAuthService.signOut when disconnecting real github account", () => { + githubAuthServiceSpy.isSignedIn.and.returnValue(true); + githubAuthServiceSpy.getAccount.and.returnValue({ + id: "acc-github-real", + provider: "github", + instanceHost: "github.com", + username: "octocat", + avatarUrl: null, + isCurrent: true, + }); authChangeMock$.next({ isSignedIn: true, @@ -109,6 +149,68 @@ describe("AccountsService", () => { }); service.disconnectAccount("acc-github-real"); - expect(authServiceSpy.signOut).toHaveBeenCalled(); + expect(githubAuthServiceSpy.signOut).toHaveBeenCalled(); + }); + + it("should emit GitLab account when GitLab user is signed in", (done) => { + gitlabAuthServiceSpy.isSignedIn.and.returnValue(true); + gitlabAuthServiceSpy.getAccount.and.returnValue({ + id: "acc-gitlab-cloud", + provider: "gitlab", + instanceHost: "gitlab.com", + username: "tanuki", + avatarUrl: "https://gitlab.com/avatar.png", + isCurrent: false, + }); + + gitlabAuthChangeMock$.next({ + isSignedIn: true, + token: "gitlab-token-123", + user: { + id: 42, + username: "tanuki", + name: "Tanuki User", + avatar_url: "https://gitlab.com/avatar.png", + web_url: "https://gitlab.com/tanuki", + }, + }); + + service.accounts$.subscribe((accounts) => { + const gitlabAcc = accounts.find((a) => a.provider === "gitlab"); + if (gitlabAcc) { + expect(gitlabAcc.username).toBe("tanuki"); + expect(gitlabAcc.provider).toBe("gitlab"); + expect(gitlabAcc.instanceHost).toBe("gitlab.com"); + expect(service.isGitlabConnected).toBeTrue(); + done(); + } + }); + }); + + it("should call gitlabAuthService.signOut when disconnecting gitlab account", () => { + gitlabAuthServiceSpy.isSignedIn.and.returnValue(true); + gitlabAuthServiceSpy.getAccount.and.returnValue({ + id: "acc-gitlab-cloud", + provider: "gitlab", + instanceHost: "gitlab.com", + username: "tanuki", + avatarUrl: null, + isCurrent: false, + }); + + gitlabAuthChangeMock$.next({ + isSignedIn: true, + token: "gitlab-token-123", + user: { + id: 42, + username: "tanuki", + name: "Tanuki User", + avatar_url: null, + web_url: "https://gitlab.com/tanuki", + }, + }); + + service.disconnectAccount("acc-gitlab-cloud"); + expect(gitlabAuthServiceSpy.signOut).toHaveBeenCalled(); }); }); diff --git a/src/app/services/accounts.service.ts b/src/app/services/accounts.service.ts index abaf2e69..c54eb0ae 100644 --- a/src/app/services/accounts.service.ts +++ b/src/app/services/accounts.service.ts @@ -1,7 +1,9 @@ import { Injectable, OnDestroy } from "@angular/core"; import { BehaviorSubject, Observable, Subscription } from "rxjs"; -import { AuthService } from "@services/auth.service"; -import { Account } from "@models/Account.model"; +import { GithubAuthService } from "@services/github-auth.service"; +import { GitlabAuthService } from "@services/gitlab-auth.service"; +import { Account, GitProviderType } from "@models/Account.model"; +import { GitAuthProvider } from "@models/GitAuthProvider.model"; @Injectable({ providedIn: "root", @@ -10,15 +12,16 @@ export class AccountsService implements OnDestroy { public accounts$: Observable; private accountsSubject = new BehaviorSubject([]); - private authSubscription: Subscription; + private authSubscription = new Subscription(); + private providers = new Map(); - constructor(public authService: AuthService) { + constructor(public githubAuthService: GithubAuthService, public gitlabAuthService: GitlabAuthService) { this.accounts$ = this.accountsSubject.asObservable(); - this.updateAccounts(); - this.authSubscription = this.authService.authChange$.subscribe(() => { - this.updateAccounts(); - }); + this.registerProvider(this.githubAuthService); + this.registerProvider(this.gitlabAuthService); + + this.updateAccounts(); } get currentAccounts(): Account[] { @@ -26,17 +29,32 @@ export class AccountsService implements OnDestroy { } get isGithubConnected(): boolean { - return !!this.authService.isSignedIn(); + return this.githubAuthService.isSignedIn(); + } + + get isGitlabConnected(): boolean { + return this.gitlabAuthService.isSignedIn(); } ngOnDestroy(): void { - this.authSubscription?.unsubscribe(); + this.authSubscription.unsubscribe(); + } + + getProvider(providerType: GitProviderType): GitAuthProvider | undefined { + return this.providers.get(providerType); } disconnectAccount(id: string): void { - const isGithub = id === "acc-github-real" || this.currentAccounts.some((a) => a.id === id && a.provider === "github"); - if (isGithub) { - this.authService.signOut(); + const account = this.currentAccounts.find((a) => a.id === id); + if (account) { + this.providers.get(account.provider)?.signOut(); + return; + } + for (const provider of this.providers.values()) { + if (id.includes(provider.provider)) { + provider.signOut(); + return; + } } } @@ -48,30 +66,39 @@ export class AccountsService implements OnDestroy { if (!account?.username) { return "#"; } - const fallbackHost = account.provider === "gitlab" ? "gitlab.com" : "github.com"; + const provider = account.provider ? this.providers.get(account.provider as GitProviderType) : undefined; + if (provider && (!account.instanceHost || account.instanceHost === provider.instanceHost)) { + return provider.getProfileUrl(account.username); + } + const fallbackHost = provider?.instanceHost || (account.provider === "gitlab" ? "gitlab.com" : "github.com"); const host = account.instanceHost || fallbackHost; const cleanHost = host.replace(/^https?:\/\//i, "").replace(/\/.*$/, ""); return `https://${cleanHost}/${encodeURIComponent(account.username)}`; } - private buildRealGithubAccount(): Account | null { - if (!this.authService.isSignedIn()) { - return null; - } - const username = this.authService.username || "github_user"; - return { - id: "acc-github-real", - provider: "github", - instanceHost: "github.com", - username, - avatarUrl: this.authService.avatarUrl || `https://avatars.githubusercontent.com/${username}`, - lastSync: "Connecté via Firebase", - isCurrent: true, - }; + private registerProvider(provider: GitAuthProvider): void { + this.providers.set(provider.provider, provider); + this.authSubscription.add( + provider.authChange$.subscribe(() => { + this.updateAccounts(); + }), + ); } private updateAccounts(): void { - const realGithub = this.buildRealGithubAccount(); - this.accountsSubject.next(realGithub ? [realGithub] : []); + const accounts: Account[] = []; + for (const provider of this.providers.values()) { + const acc = provider.getAccount(); + if (acc) { + acc.isCurrent = false; + accounts.push(acc); + } + } + if (accounts.length > 0) { + const primaryIdx = accounts.findIndex((a) => a.provider === "github"); + const activeIdx = primaryIdx >= 0 ? primaryIdx : 0; + accounts[activeIdx].isCurrent = true; + } + this.accountsSubject.next(accounts); } } diff --git a/src/app/services/commits.service.ts b/src/app/services/commits.service.ts index 2867550a..d43f587e 100644 --- a/src/app/services/commits.service.ts +++ b/src/app/services/commits.service.ts @@ -6,7 +6,7 @@ import { TranslateService } from "@ngx-translate/core"; import * as moment from "moment"; import { EMPTY, forkJoin, Observable, of } from "rxjs"; import { catchError, defaultIfEmpty, expand, map, reduce, shareReplay, switchMap, tap } from "rxjs/operators"; -import { AuthService } from "./auth.service"; +import { GithubAuthService } from "./github-auth.service"; import { Utils } from "./utils"; /** @@ -22,17 +22,17 @@ export class CommitsService { get headers(): HttpHeaders { return new HttpHeaders({ "Content-Type": "application/json", - Authorization: "token " + this.authService.token, + Authorization: "token " + this.githubAuthService.token, }); } /** * CommitsService constructor * @param http - * @param authService + * @param githubAuthService * @param translateService */ - constructor(private http: HttpClient, private authService: AuthService, private translateService: TranslateService) {} + constructor(private http: HttpClient, private githubAuthService: GithubAuthService, private translateService: TranslateService) {} /** * Gets readMe and commits of every repository diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/github-auth.service.spec.ts similarity index 72% rename from src/app/services/auth.service.spec.ts rename to src/app/services/github-auth.service.spec.ts index 88d73d20..31452190 100644 --- a/src/app/services/auth.service.spec.ts +++ b/src/app/services/github-auth.service.spec.ts @@ -2,11 +2,11 @@ import { TestBed } from "@angular/core/testing"; import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; import { Router } from "@angular/router"; import * as firebase from "firebase/app"; -import { AuthService } from "./auth.service"; +import { GithubAuthService } from "./github-auth.service"; import { ToastService } from "./toast.service"; -describe("AuthService", () => { - let service: AuthService; +describe("GithubAuthService", () => { + let service: GithubAuthService; let httpMock: HttpTestingController; let routerSpy: jasmine.SpyObj; let toastSpy: jasmine.SpyObj; @@ -32,10 +32,10 @@ describe("AuthService", () => { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], - providers: [AuthService, { provide: Router, useValue: routerSpy }, { provide: ToastService, useValue: toastSpy }], + providers: [GithubAuthService, { provide: Router, useValue: routerSpy }, { provide: ToastService, useValue: toastSpy }], }); - service = TestBed.inject(AuthService); + service = TestBed.inject(GithubAuthService); httpMock = TestBed.inject(HttpTestingController); }); @@ -49,10 +49,32 @@ describe("AuthService", () => { it("should be created and report isSignedIn based on token", () => { expect(service).toBeTruthy(); - expect(service.isSignedIn()).toBeNull(); + expect(service.isSignedIn()).toBeFalse(); service.token = "test-token"; - expect(service.isSignedIn()).toBe("test-token"); + expect(service.isSignedIn()).toBeTrue(); + }); + + it("should return account when signed in and null when signed out", () => { + service.token = null; + expect(service.getAccount()).toBeNull(); + + service.token = "valid-token"; + service.username = "test-user"; + service.avatarUrl = "https://avatar.com/test.png"; + + const account = service.getAccount(); + expect(account).not.toBeNull(); + expect(account?.provider).toBe("github"); + expect(account?.username).toBe("test-user"); + expect(account?.avatarUrl).toBe("https://avatar.com/test.png"); + expect(account?.instanceHost).toBe("github.com"); + }); + + it("should generate profile URL correctly", () => { + service.username = "octocat"; + expect(service.getProfileUrl()).toBe("https://github.com/octocat"); + expect(service.getProfileUrl("custom-user")).toBe("https://github.com/custom-user"); }); it("should reset state on signOut without removing dev_github_token from localStorage", async () => { diff --git a/src/app/services/auth.service.ts b/src/app/services/github-auth.service.ts similarity index 74% rename from src/app/services/auth.service.ts rename to src/app/services/github-auth.service.ts index 9378df37..d491e7c8 100644 --- a/src/app/services/auth.service.ts +++ b/src/app/services/github-auth.service.ts @@ -1,10 +1,13 @@ import { HttpClient, HttpHeaders } from "@angular/common/http"; -import { Injectable } from "@angular/core"; +import { Injectable, Optional } from "@angular/core"; import { Router } from "@angular/router"; +import { TranslateService } from "@ngx-translate/core"; import * as firebase from "firebase/app"; import { auth } from "firebase/app"; import "firebase/auth"; import { BehaviorSubject, Observable } from "rxjs"; +import { Account, GitProviderType } from "@models/Account.model"; +import { GitAuthProvider } from "@models/GitAuthProvider.model"; import { ToastService } from "./toast.service"; export interface AuthState { @@ -16,15 +19,17 @@ export interface AuthState { } /** - * A service used to sign in and sign out from Github + * A service used to sign in and sign out from GitHub via Firebase. + * Implements the GitAuthProvider strategy interface. */ @Injectable({ providedIn: "root", }) -export class AuthService { - /** - * The Github access token - */ +export class GithubAuthService implements GitAuthProvider { + readonly provider: GitProviderType = "github"; + readonly name: string = "GitHub"; + readonly instanceHost: string = "github.com"; + token: string | null = localStorage.getItem("dev_github_token") || null; username: string | null = localStorage.getItem("github_username") || null; avatarUrl: string | null = localStorage.getItem("github_avatar") || null; @@ -39,13 +44,12 @@ export class AuthService { displayName: localStorage.getItem("github_display_name") || null, }); - /** - * AuthService constructor - * @param router - * @param http - * @param toastService - */ - constructor(private router: Router, private http: HttpClient, private toastService: ToastService) { + constructor( + private router: Router, + private http: HttpClient, + private toastService: ToastService, + @Optional() private translateService?: TranslateService, + ) { firebase.auth().onAuthStateChanged((user) => { if (user) { this.syncUserFromFirebase(user); @@ -57,19 +61,26 @@ export class AuthService { } } - /** - * Returns the Github access token, so if its value is null, it's similar to a falsy value - * - * @returns The Github access token - */ - isSignedIn(): string { - return this.token; + isSignedIn(): boolean { + return !!this.token; + } + + getAccount(): Account | null { + if (!this.isSignedIn()) { + return null; + } + const username = this.username || "github_user"; + return { + id: "acc-github-real", + provider: "github", + instanceHost: this.instanceHost, + username, + avatarUrl: this.avatarUrl || `https://avatars.githubusercontent.com/${username}`, + isCurrent: true, + }; } - /** - * Open a popup to Github signin with firebase and authenticate - */ - async signIn(): Promise { + async signIn(): Promise { this.loading = true; const provider = new firebase.auth.GithubAuthProvider(); provider.addScope("repo"); @@ -77,9 +88,15 @@ export class AuthService { await firebase.auth().setPersistence(auth.Auth.Persistence.LOCAL); const result = await firebase.auth().signInWithPopup(provider); this.handleAuthResult(result); + const account = this.getAccount(); + if (!account) { + throw new Error("GitHub authentication succeeded but account details could not be retrieved"); + } + return account; } catch (error: any) { if (error?.code !== "auth/popup-closed-by-user") { - this.toastService.error("An error occured", error.message); + const title = this.translateService?.instant("ERROR") || "Error"; + this.toastService.error(title, error.message); } throw error; } finally { @@ -87,9 +104,6 @@ export class AuthService { } } - /** - * Signs out from Github, sets the access token to null and redirects to home - */ async signOut(): Promise { try { await firebase.auth().signOut(); @@ -108,8 +122,16 @@ export class AuthService { } } + getProfileUrl(username?: string): string { + const user = username || this.username; + if (!user) { + return `https://${this.instanceHost}`; + } + return `https://${this.instanceHost}/${encodeURIComponent(user)}`; + } + verifyUserAccess(repoURL: string): Observable { - var httpOptions = { + const httpOptions = { headers: new HttpHeaders({ "Content-Type": "application/json", Authorization: "token " + this.token, @@ -117,11 +139,11 @@ export class AuthService { }; const repoHashURL = repoURL.split("/"); - let url = "https://api.github.com/repos/" + repoHashURL[3] + "/" + repoHashURL[4]; + const url = "https://api.github.com/repos/" + repoHashURL[3] + "/" + repoHashURL[4]; return this.http.get(url, httpOptions); } - reauthenticate() { + reauthenticate(): void { firebase.auth().onAuthStateChanged((user) => { if (user && !this.isSignedIn()) { this.loading = true; diff --git a/src/app/services/gitlab-auth.service.spec.ts b/src/app/services/gitlab-auth.service.spec.ts new file mode 100644 index 00000000..ce7ebe85 --- /dev/null +++ b/src/app/services/gitlab-auth.service.spec.ts @@ -0,0 +1,97 @@ +import { TestBed } from "@angular/core/testing"; +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; +import { GitlabAuthService } from "./gitlab-auth.service"; + +describe("GitlabAuthService", () => { + let service: GitlabAuthService; + let httpMock: HttpTestingController; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [GitlabAuthService], + }); + + service = TestBed.inject(GitlabAuthService); + httpMock = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + httpMock.verify(); + }); + + it("should be created with default unauthenticated state", () => { + expect(service).toBeTruthy(); + expect(service.isSignedIn()).toBeFalse(); + expect(service.token).toBeNull(); + expect(service.currentUser).toBeNull(); + }); + + it("should return null for getAccount when signed out, and Account when signed in", () => { + expect(service.getAccount()).toBeNull(); + + service.token = "token-xyz"; + service.currentUser = { + id: 42, + username: "tanuki", + name: "Tanuki GitLab", + avatar_url: "https://gitlab.com/tanuki.png", + web_url: "https://gitlab.com/tanuki", + }; + + const account = service.getAccount(); + expect(account).not.toBeNull(); + expect(account?.provider).toBe("gitlab"); + expect(account?.username).toBe("tanuki"); + expect(account?.avatarUrl).toBe("https://gitlab.com/tanuki.png"); + expect(account?.instanceHost).toBe("gitlab.com"); + }); + + it("should generate profile URL correctly", () => { + service.currentUser = { + id: 42, + username: "tanuki", + name: "Tanuki", + avatar_url: "", + web_url: "", + }; + expect(service.getProfileUrl()).toBe("https://gitlab.com/tanuki"); + expect(service.getProfileUrl("another_user")).toBe("https://gitlab.com/another_user"); + }); + + it("should reset state on signOut", (done) => { + service.token = "fake-gitlab-token"; + service.currentUser = { + id: 1, + username: "john_doe", + name: "John Doe", + avatar_url: "https://gitlab.com/avatar.png", + web_url: "https://gitlab.com/john_doe", + }; + + service.signOut(); + + expect(service.isSignedIn()).toBeFalse(); + expect(service.token).toBeNull(); + expect(service.currentUser).toBeNull(); + + service.authChange$.subscribe((state) => { + expect(state.isSignedIn).toBeFalse(); + expect(state.token).toBeNull(); + expect(state.user).toBeNull(); + done(); + }); + }); + + it("should generate code verifier and challenge with web crypto", async () => { + const verifier = (service as any).generateCodeVerifier(); + expect(typeof verifier).toBe("string"); + expect(verifier.length).toBeGreaterThan(40); + + const challenge = await (service as any).generateCodeChallenge(verifier); + expect(typeof challenge).toBe("string"); + expect(challenge.length).toBeGreaterThan(0); + // Base64URL characters only + expect(challenge).toMatch(/^[A-Za-z0-9_-]+$/); + }); +}); diff --git a/src/app/services/gitlab-auth.service.ts b/src/app/services/gitlab-auth.service.ts new file mode 100644 index 00000000..936cd9eb --- /dev/null +++ b/src/app/services/gitlab-auth.service.ts @@ -0,0 +1,317 @@ +import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { BehaviorSubject, Observable } from "rxjs"; +import { Account, GitProviderType } from "@models/Account.model"; +import { GitAuthProvider } from "@models/GitAuthProvider.model"; +import { environment } from "../../environments/environment"; + +export interface GitlabUser { + id: number; + username: string; + name: string; + avatar_url: string; + web_url: string; +} + +export interface GitlabAuthState { + isSignedIn: boolean; + token: string | null; + user: GitlabUser | null; +} + +interface TokenResponse { + access_token: string; + token_type: string; + refresh_token?: string; + scope?: string; + created_at?: number; +} + +@Injectable({ + providedIn: "root", +}) +export class GitlabAuthService implements GitAuthProvider { + readonly provider: GitProviderType = "gitlab"; + readonly name: string = "GitLab"; + readonly instanceHost: string = + (environment.gitlab?.instanceUrl || "https://gitlab.com").replace(/^https?:\/\//i, "").replace(/\/.*$/, "") || "gitlab.com"; + + token: string | null = null; + currentUser: GitlabUser | null = null; + loading = false; + + public authChange$ = new BehaviorSubject({ + isSignedIn: false, + token: null, + user: null, + }); + + private clientId = environment.gitlab?.clientId || ""; + private redirectUri = environment.gitlab?.redirectUri || "/auth/callback"; + private instanceUrl = (environment.gitlab?.instanceUrl || "https://gitlab.com").replace(/\/+$/, ""); + private scope = environment.gitlab?.scope || "read_api read_user"; + + constructor(private http: HttpClient) {} + + isSignedIn(): boolean { + return !!(this.token && this.currentUser); + } + + getAccount(): Account | null { + if (!this.isSignedIn() || !this.currentUser) { + return null; + } + return { + id: "acc-gitlab-cloud", + provider: "gitlab", + instanceHost: this.instanceHost, + username: this.currentUser.username, + avatarUrl: this.currentUser.avatar_url || null, + isCurrent: false, + }; + } + + async signIn(): Promise { + await this.loginWithPopup(); + const account = this.getAccount(); + if (!account) { + throw new Error("GitLab authentication succeeded but account details could not be retrieved"); + } + return account; + } + + async loginWithPopup(): Promise { + if (!this.clientId) { + throw new Error("GitLab Client ID is not configured in environment.ts"); + } + + this.loading = true; + + try { + const codeVerifier = this.generateCodeVerifier(); + const codeChallenge = await this.generateCodeChallenge(codeVerifier); + const state = this.generateRandomString(32); + + sessionStorage.setItem("gitlab_oauth_verifier", codeVerifier); + sessionStorage.setItem("gitlab_oauth_state", state); + + const params = new URLSearchParams({ + client_id: this.clientId, + redirect_uri: this.effectiveRedirectUri, + response_type: "code", + state, + code_challenge: codeChallenge, + code_challenge_method: "S256", + scope: this.scope, + }); + + const authUrl = `${this.instanceUrl}/oauth/authorize?${params.toString()}`; + const code = await this.openAuthPopup(authUrl, state); + + const tokenResponse = await this.exchangeCodeForToken(code, codeVerifier); + const accessToken = tokenResponse.access_token; + + let user: GitlabUser; + try { + user = await this.fetchUserProfile(accessToken); + } catch (err: any) { + if (err?.status === 401 || err?.statusCode === 401) { + await new Promise((resolve) => setTimeout(resolve, 500)); + user = await this.fetchUserProfile(accessToken); + } else { + throw err; + } + } + + this.token = accessToken; + this.currentUser = user; + + this.notifyAuthChange(); + return user; + } finally { + this.loading = false; + sessionStorage.removeItem("gitlab_oauth_verifier"); + sessionStorage.removeItem("gitlab_oauth_state"); + } + } + + signOut(): void { + this.token = null; + this.currentUser = null; + this.notifyAuthChange(); + } + + getProfileUrl(username?: string): string { + const user = username || this.currentUser?.username; + if (!user) { + return `https://${this.instanceHost}`; + } + return `https://${this.instanceHost}/${encodeURIComponent(user)}`; + } + + private get effectiveRedirectUri(): string { + if (this.redirectUri.startsWith("/")) { + const base = typeof document !== "undefined" && document.baseURI ? document.baseURI : window.location.origin; + return new URL(this.redirectUri.replace(/^\//, ""), base).href; + } + return this.redirectUri; + } + + private generateCodeVerifier(): string { + const array = new Uint8Array(64); + window.crypto.getRandomValues(array); + return this.base64UrlEncode(array); + } + + private async generateCodeChallenge(verifier: string): Promise { + const encoder = new TextEncoder(); + const data = encoder.encode(verifier); + const digest = await window.crypto.subtle.digest("SHA-256", data); + return this.base64UrlEncode(new Uint8Array(digest)); + } + + private generateRandomString(length: number): string { + const array = new Uint8Array(length); + window.crypto.getRandomValues(array); + return this.base64UrlEncode(array).slice(0, length); + } + + private base64UrlEncode(buffer: Uint8Array): string { + let binary = ""; + for (let i = 0; i < buffer.byteLength; i++) { + binary += String.fromCharCode(buffer[i]); + } + return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, ""); + } + + private openAuthPopup(url: string, expectedState: string): Promise { + return new Promise((resolve, reject) => { + const width = 600; + const height = 700; + const left = window.screenX + (window.outerWidth - width) / 2; + const top = window.screenY + (window.outerHeight - height) / 2; + + localStorage.removeItem("gitlab_oauth_callback_data"); + + const popup = window.open( + url, + "gitlab_oauth_popup", + `width=${width},height=${height},top=${top},left=${left},status=no,toolbar=no,menubar=no`, + ); + + if (!popup) { + reject(new Error("Popup blocked by browser")); + return; + } + + let isResolved = false; + + const handlePayload = (data: any) => { + if (!data || data.type !== "GITLAB_OAUTH_CALLBACK" || isResolved) { + return; + } + + cleanup(); + + if (data.error) { + reject(new Error(data.errorDescription || data.error)); + return; + } + + if (data.state !== expectedState) { + reject(new Error("Invalid OAuth state parameter")); + return; + } + + if (!data.code) { + reject(new Error("No authorization code received")); + return; + } + + isResolved = true; + resolve(data.code); + }; + + const messageListener = (event: MessageEvent) => { + if (event.origin !== window.location.origin) { + return; + } + handlePayload(event.data); + }; + + const storageListener = (event: StorageEvent) => { + if (event.key === "gitlab_oauth_callback_data" && event.newValue) { + try { + const data = JSON.parse(event.newValue); + handlePayload(data); + } catch (e) { + console.warn("Invalid oauth callback storage event:", e); + } + } + }; + + window.addEventListener("message", messageListener); + window.addEventListener("storage", storageListener); + + const checkClosedInterval = window.setInterval(() => { + const stored = localStorage.getItem("gitlab_oauth_callback_data"); + if (stored) { + try { + const data = JSON.parse(stored); + handlePayload(data); + return; + } catch (e) { + // ignore + } + } + + if (popup.closed) { + cleanup(); + if (!isResolved) { + reject(new Error("POPUP_CLOSED")); + } + } + }, 400); + + const cleanup = () => { + window.removeEventListener("message", messageListener); + window.removeEventListener("storage", storageListener); + window.clearInterval(checkClosedInterval); + localStorage.removeItem("gitlab_oauth_callback_data"); + }; + }); + } + + private exchangeCodeForToken(code: string, verifier: string): Promise { + const tokenUrl = `${this.instanceUrl}/oauth/token`; + const body = new HttpParams() + .set("client_id", this.clientId) + .set("grant_type", "authorization_code") + .set("redirect_uri", this.effectiveRedirectUri) + .set("code", code) + .set("code_verifier", verifier); + + const headers = new HttpHeaders({ + "Content-Type": "application/x-www-form-urlencoded", + }); + + return this.http.post(tokenUrl, body.toString(), { headers }).toPromise(); + } + + private fetchUserProfile(token: string): Promise { + const userUrl = `${this.instanceUrl}/api/v4/user`; + const headers = new HttpHeaders({ + Authorization: `Bearer ${token}`, + }); + + return this.http.get(userUrl, { headers }).toPromise(); + } + + private notifyAuthChange(): void { + this.authChange$.next({ + isSignedIn: this.isSignedIn(), + token: this.token, + user: this.currentUser, + }); + } +} diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.ts b/src/app/shared/ui/dev-bar/dev-bar.component.ts index 9ca2da04..944002d2 100644 --- a/src/app/shared/ui/dev-bar/dev-bar.component.ts +++ b/src/app/shared/ui/dev-bar/dev-bar.component.ts @@ -6,7 +6,7 @@ import { environment } from "@environments/environment"; import { DevFlagsService } from "@services/dev-flags.service"; import { ToastService } from "@services/toast.service"; import { ThemeService } from "@services/theme.service"; -import { AuthService } from "@services/auth.service"; +import { GithubAuthService } from "@services/github-auth.service"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { ShortcutsModalComponent } from "@shared/ui/shortcuts-modal/shortcuts-modal.component"; @@ -37,7 +37,7 @@ export class DevBarComponent implements OnInit, OnDestroy { public devFlagsService: DevFlagsService, public toastService: ToastService, public themeService: ThemeService, - public authService: AuthService, + public githubAuthService: GithubAuthService, private customModalService: CustomModalService, private router: Router, ) {} diff --git a/src/assets/additional-docs/CONTRIBUTING.md b/src/assets/additional-docs/CONTRIBUTING.md index 703ef864..dcccafea 100644 --- a/src/assets/additional-docs/CONTRIBUTING.md +++ b/src/assets/additional-docs/CONTRIBUTING.md @@ -62,7 +62,7 @@ To create a new model, execute `ng g class models/ --type=model`. This folder contains the application services. The services allow to perform operations that can be common to several components in the application. Let's detail the 4 services we use: -- `auth.service.ts` : which allows to manage the user authentication to Github. +- `github-auth.service.ts` : which allows to manage the user authentication to GitHub. - `data.service.ts` : which allows to store the data to be shared between the components. It is thanks to it that the user can navigate in the application without having to enter the configuration file each time he changes pages. - `json-manager.service.ts` : which allows to manage the configuration file (upload/download/verification) - `commits.service.ts` : which allows to manage the retrieval of data from Github repositories, as well as the generation of statistical data (used for downloading and for displaying graphs `/students` and `/questions-completion`) @@ -112,7 +112,7 @@ If you want to add a localization, create a file `.json` and upd ```typescript constructor( - public authService: AuthService, + public githubAuthService: GithubAuthService, public dataService: DataService, private router: Router, public translate: TranslateService diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 7703034d..0cc4dada 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -559,6 +559,8 @@ "CONFIRM_DISCONNECT_MSG": "Are you sure you want to disconnect {{username}} on {{host}}?", "SCOPES": "Scopes", "LAST_SYNC": "Last synced", + "CONNECTED_VIA_FIREBASE": "Connected via Firebase", + "CONNECTED_VIA_OAUTH": "Connected via GitLab OAuth", "TOKEN_EXPIRES": "Expires in", "DAYS": "days", "CHOOSE_PROVIDER": "Choose a platform", @@ -569,11 +571,12 @@ "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Direct login via Firebase)", "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Direct login via Firebase)", + "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Direct OAuth 2.0 PKCE)", "PLATFORM_GITLAB_SELF_TITLE": "Self-hosted GitLab", "PLATFORM_GITLAB_SELF_DESC": "Institutional server (IRIT, University - URL & PAT Token)", "OAUTH_FIREBASE_TITLE": "Secure Login via Firebase", "OAUTH_FIREBASE_DESC": "Authentication is handled automatically in a popup using your {{provider}} credentials. No manual token is required.", + "OAUTH_GITLAB_DESC": "Authentication is handled directly in a secure popup using your GitLab credentials (OAuth 2.0 PKCE). No manual token is required.", "OAUTH_CONNECT_BTN": "Sign in with {{provider}}", "CUSTOM_GITLAB_INFO": "For institutional or private GitLab servers outside Firebase, please enter the server address and a Personal Access Token (PAT).", "INSTANCE_URL": "Instance URL", @@ -597,7 +600,12 @@ "SECURITY_NOTE": "Secure OAuth 2.0 authentication via Firebase (scope: repo).", "SCOPE_LABEL": "Scope", "POPUP_CLOSED": "The sign-in window was closed.", - "LOGIN_ERROR": "Error connecting via GitHub." + "LOGIN_ERROR": "Error during sign-in.", + "CALLBACK_CLOSING": "Finalizing authentication... This window will close automatically.", + "DEV_MODE_PAT": "Verifying PAT token for instance \"{{url}}\"... (Dev Mode)", + "AUTH_TYPE_OAUTH": "OAuth 2.0", + "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", + "AUTH_TYPE_PAT": "Token PAT" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & generator", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index c13d77bd..2b74c789 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -559,6 +559,8 @@ "CONFIRM_DISCONNECT_MSG": "Êtes-vous sûr de vouloir déconnecter le compte {{username}} sur {{host}} ?", "SCOPES": "Portées", "LAST_SYNC": "Dernière synchro", + "CONNECTED_VIA_FIREBASE": "Connecté via Firebase", + "CONNECTED_VIA_OAUTH": "Connecté via GitLab OAuth", "TOKEN_EXPIRES": "Expire dans", "DAYS": "jours", "CHOOSE_PROVIDER": "Choisir une plateforme", @@ -569,11 +571,12 @@ "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Connexion directe via Firebase)", "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Connexion directe via Firebase)", + "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (OAuth 2.0 PKCE direct)", "PLATFORM_GITLAB_SELF_TITLE": "GitLab auto-hébergé", "PLATFORM_GITLAB_SELF_DESC": "Serveur institutionnel (IRIT, Université - URL & Token PAT)", "OAUTH_FIREBASE_TITLE": "Connexion sécurisée via Firebase", "OAUTH_FIREBASE_DESC": "L'authentification s'effectue automatiquement via une popup avec vos identifiants {{provider}}. Aucun jeton manuel n'est requis.", + "OAUTH_GITLAB_DESC": "L'authentification s'effectue directement via une popup sécurisée avec vos identifiants GitLab (OAuth 2.0 PKCE). Aucun jeton manuel n'est requis.", "OAUTH_CONNECT_BTN": "Se connecter avec {{provider}}", "CUSTOM_GITLAB_INFO": "Pour les serveurs GitLab institutionnels ou privés hors Firebase, veuillez renseigner l'adresse du serveur et un Personal Access Token (PAT).", "INSTANCE_URL": "URL de l'instance", @@ -597,7 +600,12 @@ "SECURITY_NOTE": "Authentification OAuth 2.0 sécurisée via Firebase (portée : repo).", "SCOPE_LABEL": "Portée", "POPUP_CLOSED": "La fenêtre de connexion a été fermée.", - "LOGIN_ERROR": "Erreur lors de la connexion via GitHub." + "LOGIN_ERROR": "Erreur lors de la connexion.", + "CALLBACK_CLOSING": "Authentification en cours de finalisation... Cette fenêtre va se fermer automatiquement.", + "DEV_MODE_PAT": "Vérification du token PAT pour l'instance \"{{url}}\"... (Mode Dev)", + "AUTH_TYPE_OAUTH": "OAuth 2.0", + "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", + "AUTH_TYPE_PAT": "Token PAT" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Options & générateur", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index a2d1b527..39b502b2 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -556,6 +556,8 @@ "CONFIRM_DISCONNECT_MSG": "Вы уверены, что хотите отключить {{username}} на {{host}}?", "SCOPES": "Права доступа", "LAST_SYNC": "Последняя синхронизация", + "CONNECTED_VIA_FIREBASE": "Подключено через Firebase", + "CONNECTED_VIA_OAUTH": "Подключено через GitLab OAuth", "TOKEN_EXPIRES": "Истекает через", "DAYS": "дн.", "CHOOSE_PROVIDER": "Выберите платформу", @@ -566,11 +568,12 @@ "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Вход через Firebase)", "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Вход через Firebase)", + "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Прямой OAuth 2.0 PKCE)", "PLATFORM_GITLAB_SELF_TITLE": "GitLab (собственный)", "PLATFORM_GITLAB_SELF_DESC": "Сервер организации (IRIT, Университет - URL и токен PAT)", "OAUTH_FIREBASE_TITLE": "Безопасный вход через Firebase", "OAUTH_FIREBASE_DESC": "Аутентификация выполняется автоматически во всплывающем окне с вашим аккаунтом {{provider}}. Ручной ввод токена не требуется.", + "OAUTH_GITLAB_DESC": "Аутентификация выполняется напрямую во всплывающем окне с вашими учетными данными GitLab (OAuth 2.0 PKCE). Ручной ввод токена не требуется.", "OAUTH_CONNECT_BTN": "Войти через {{provider}}", "CUSTOM_GITLAB_INFO": "Для серверов GitLab организаций укажите адрес сервера и персональный токен доступа (PAT).", "INSTANCE_URL": "URL инстанса", @@ -594,7 +597,12 @@ "SECURITY_NOTE": "Безопасная аутентификация OAuth 2.0 через Firebase (область: repo).", "SCOPE_LABEL": "Область", "POPUP_CLOSED": "Окно входа было закрыто.", - "LOGIN_ERROR": "Ошибка при подключении через GitHub." + "LOGIN_ERROR": "Ошибка при подключении.", + "CALLBACK_CLOSING": "Завершение аутентификации... Это окно закроется автоматически.", + "DEV_MODE_PAT": "Проверка токена PAT для сервера \"{{url}}\"... (Режим разработки)", + "AUTH_TYPE_OAUTH": "OAuth 2.0", + "AUTH_TYPE_OAUTH_PKCE": "OAuth 2.0 PKCE", + "AUTH_TYPE_PAT": "Токен PAT" }, "QUESTIONS-ASSISTANT": { "TRIGGER_BUTTON": "Опции и генератор", diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 29977e93..401aa1dd 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -5,4 +5,10 @@ export const environment = { production: true, version: require("../../package.json").version, documentationUrl: "https://git4school.github.io/", + gitlab: { + clientId: "968f761fc1af187373cd90b2e5a1c04c5a3348ecff7e585eff50fd99086676d4", + redirectUri: "/auth/callback", + instanceUrl: "https://gitlab.com", + scope: "read_api read_user", + }, }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 24a2f93e..85c03efe 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -9,6 +9,12 @@ export const environment = { production: false, version: require("../../package.json").version, documentationUrl: "https://git4school.github.io/", + gitlab: { + clientId: "968f761fc1af187373cd90b2e5a1c04c5a3348ecff7e585eff50fd99086676d4", + redirectUri: "http://localhost:4200/auth/callback", + instanceUrl: "https://gitlab.com", + scope: "read_api read_user", + }, }; /* diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 163fb0fa..44d403e0 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -16,6 +16,8 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; + --color-text-white: #fff; + --color-on-primary: #fff; --color-on-surface: var(--color-text-primary); // Cognitive Palette (Flat) @@ -30,7 +32,7 @@ $font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Robot --color-warning: #d97706; // Amber/Orange: Warnings, dates, highlights --color-info: #0ea5e9; // Light blue for info - // Provider Colors + /* Provider Colors */ --color-github: #181717; --color-gitlab: #fc6d26; @@ -89,6 +91,8 @@ body.dark-theme { --color-text-primary: #f8fafc; --color-text-secondary: #cbd5e1; --color-text-muted: #64748b; + --color-text-white: #fff; + --color-on-primary: #fff; --color-on-surface: var(--color-text-primary); // Cognitive Palette adapted for Dark Mode @@ -103,7 +107,7 @@ body.dark-theme { --color-warning: #f59e0b; // Brighter amber --color-info: #38bdf8; // Light blue - // Provider Colors + /* Provider Colors */ --color-github: #fff; --color-gitlab: #fc6d26; From ce72700db1d4ea9c484bcac82cb8f68b95dd52bc Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 17 Sep 2026 11:51:25 +0200 Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=93=9D=20Add=20ADR=20showcase=20page?= =?UTF-8?q?=20for=20GitHub=20Wiki=20and=20docs=20index?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...stion-reactive-des-overlays-et-popovers.md | 2 +- docs/adr/README.md | 24 ++ docs/wiki/Architecture-Decision-Records.md | 292 ++++++++++++++++++ 3 files changed, 317 insertions(+), 1 deletion(-) create mode 100644 docs/adr/README.md create mode 100644 docs/wiki/Architecture-Decision-Records.md diff --git a/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md b/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md index 741868ca..64fb75cf 100644 --- a/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md +++ b/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md @@ -29,5 +29,5 @@ L'architecture initiale présentait plusieurs fragilités et dettes techniques : - **Élimination complète des hacks DOM** : Plus aucun appel à `querySelector` pour manipuler ou supprimer des éléments de composants tiers. - **Robustesse et extensibilité** : Tout nouvel overlay ou panneau ajouté dans l'application peut s'abonner à `OverlayManagerService` sans modifier `OverviewComponent`. - **Fidélité visuelle et fin des sauts d'affichage** : Élimination définitive des scintillements et des sauts de dropdowns sous la barre de navigation. -- **Règle d'architecture formalisée** : Mise à jour de `GEMINI.md` imposant l'usage exclusif de `OverlayManagerService` pour coordonner la fermeture des overlays. +- **Règle d'architecture formalisée** : Règle imposant l'usage exclusif de `OverlayManagerService` pour coordonner la fermeture des overlays. - **Périmètre et frontière claire** : `OverlayManagerService` est strictement restreint à la publication/souscription d'événements de fermeture ; les interactions de navigation clavier/souris au sein des fenêtres de suggestions sont découplées dans une directive dédiée (voir ADR-0005). diff --git a/docs/adr/README.md b/docs/adr/README.md new file mode 100644 index 00000000..1c810899 --- /dev/null +++ b/docs/adr/README.md @@ -0,0 +1,24 @@ +# 🏛️ Architecture Decision Records (ADRs) + +Ce répertoire contient l'historique formalisé de toutes les décisions d'architecture prises sur **Git4School Visu**. + +👉 **[Consulter la Vitrine Complète des ADRs sur le Wiki GitHub](../wiki/Architecture-Decision-Records.md)** (avec diagrammes d'architecture, analyse des patrons de conception et matrice d'impact). + +--- + +## 📑 Index des décisions + +| ADR | Titre | Domaine | Statut | +| :---: | :--- | :--- | :---: | +| [0001](./0001-keycap-design-system.md) | Standardisation du composant Keycap dans le Design System | Design System / A11y | `Accepté` | +| [0002](./0002-recherche-et-decouverte-des-depots.md) | Stratégie de recherche et découverte des dépôts GitHub GraphQL | Intégration API / UX | `Accepté` | +| [0003](./0003-gestion-reactive-des-overlays-et-popovers.md) | Gestion réactive et découplée des overlays et popovers (Pub/Sub) | Architecture Réactive | `Accepté` | +| [0004](./0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md) | Stratégie de clôture des questions, import en masse et rétrocompatibilité Dexie | Modèle Métier / IndexedDB | `Accepté` | +| [0005](./0005-navigation-clavier-typeahead-directive-decouplee.md) | Neutralisation des conflits souris-clavier dans les suggestions Typeahead | Ergonomie UI / Événements | `Accepté` | +| [0006](./0006-authentification-multi-fournisseurs-pattern-strategie.md) | Authentification multi-forges découplée (Pattern Stratégie & Fournisseurs) et OAuth 2.0 PKCE | Sécurité / Architecture SOLID | `Accepté` | + +--- + +## 🧭 Règle pour les contributeurs + +Toute décision technique majeure modifiant l'architecture logicielle, les contrats d'API, la persistance ou l'organisation de l'état doit faire l'objet d'un nouvel ADR rédigé selon le standard du projet et répertorié dans la vitrine d'architecture. diff --git a/docs/wiki/Architecture-Decision-Records.md b/docs/wiki/Architecture-Decision-Records.md new file mode 100644 index 00000000..f96a0084 --- /dev/null +++ b/docs/wiki/Architecture-Decision-Records.md @@ -0,0 +1,292 @@ +# 🏛️ Architecture Decision Records (ADR) — Git4School Visu + +> Vitrine des choix structurants d'architecture, de conception logicielle, d'ergonomie et de sécurité guidant l'évolution pérenne de **Git4School Visu**. + +[![ADRs Documented](https://img.shields.io/badge/ADRs-6%20Documentés-blue.svg?style=flat-square&logo=git)](https://github.com/git4school/git4school-visu/tree/master/docs/adr) +[![Status](https://img.shields.io/badge/Statut-100%25%20Implémenté-success.svg?style=flat-square)](https://github.com/git4school/git4school-visu/tree/master/docs/adr) +[![Architecture](https://img.shields.io/badge/Architecture-Clean%20%2F%20SOLID-orange.svg?style=flat-square)](https://github.com/git4school/git4school-visu) +[![UI Engine](https://img.shields.io/badge/Stack-Angular%20%7C%20D3.js%20%7C%20Dexie-red.svg?style=flat-square)](https://github.com/git4school/git4school-visu) + +--- + +## 📖 Pourquoi des ADRs dans Git4School Visu ? + +Une **ADR (Architectural Decision Record)** est un document court et pragmatique qui capture une décision d'architecture significative, son contexte initial, les options examinées, les justifications techniques et l'ensemble de ses conséquences (positives comme négatives). + +Dans un projet open-source et pédagogique comme **Git4School Visu**, les ADRs remplissent quatre rôles fondamentaux : +1. **Mémoire vivante & Rationale** : Comprendre instantanément *pourquoi* un composant ou un service a été conçu ainsi (par ex. pourquoi le protocole PKCE a été retenu pour GitLab ou pourquoi une directive gère le typeahead). +2. **Prévention des régressions d'architecture** : Éviter de réintroduire d'anciennes dettes techniques ou des anti-patterns déjà résolus (ex. hacks directs sur le DOM ou couplages omniscients). +3. **Alignement d'équipe & Intégration fluide** : Accélérer la montée en compétences des nouveaux contributeurs et partenaires académiques. +4. **Gouvernance technique partagée** : Offrir un cadre de conception strict, auditable et pérenne pour guider l'ensemble des développeurs et contributeurs du projet. + +--- + +## 🗺️ Cartographie & Radar Architectural + +Le schéma ci-dessous illustre l'imbrication des décisions d'architecture à travers les différentes couches de l'application : + +```mermaid +flowchart TB + subgraph Presentation["🎨 Couche Présentation & UI"] + ADR0001["ADR-0001
Design System Keycap
Tokens CSS & Micro-interactions"] + ADR0005["ADR-0005
Directive Typeahead
Découplage Souris/Clavier"] + end + + subgraph Reactive["⚡ Couche Orchestration & Événements"] + ADR0003["ADR-0003
OverlayManagerService
Patron Pub/Sub & NgZone Sync"] + end + + subgraph DataDomain["💾 Couche Métier & Persistance"] + ADR0004["ADR-0004
Clôture des Questions
Dexie v3 & Modèle Metadata"] + end + + subgraph Integration["🔐 Couche Forges Git & Sécurité"] + ADR0002["ADR-0002
Recherche GraphQL GitHub
Découverte Classroom & Orgs"] + ADR0006["ADR-0006
Auth Multi-Forges Découplée
Pattern Stratégie & OAuth PKCE"] + end + + ADR0005 -.->|S'applique à| ADR0004 + ADR0003 -->|Ordonne la fermeture de| ADR0005 + ADR0003 -->|Gère la fermeture de| ADR0001 + ADR0006 -->|Fournit les accès forges à| ADR0002 + ADR0004 -->|Structure les métadonnées de| ADR0002 + + classDef presentation fill:#e1f5fe,stroke:#0288d1,stroke-width:2px,color:#01579b; + classDef reactive fill:#fff3e0,stroke:#f57c00,stroke-width:2px,color:#e65100; + classDef domain fill:#e8f5e9,stroke:#388e3c,stroke-width:2px,color:#1b5e20; + classDef security fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px,color:#4a148c; + + class ADR0001,ADR0005 presentation; + class ADR0003 reactive; + class ADR0004 domain; + class ADR0002,ADR0006 security; +``` + +--- + +## 📊 Tableau de bord des décisions (Index) + +| Réf | Décision | Domaine | Patrons & Concepts Clés | Statut | Fichier Source | +| :---: | :--- | :--- | :--- | :---: | :---: | +| **0001** | [Standardisation du composant Keycap](#adr-0001--standardisation-du-composant-keycap-dans-le-design-system) | Design System / A11y | CSS Custom Properties, Balise sémantique ``, Dark Mode | `Accepté` | [0001-keycap-design-system.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0001-keycap-design-system.md) | +| **0002** | [Découverte des dépôts GitHub GraphQL](#adr-0002--stratégie-de-recherche-et-découverte-des-dépôts-github-graphql) | Intégration API / UX | GraphQL Aliases, GitHub Classroom, Normalisation de motif | `Accepté` | [0002-recherche-et-decouverte-des-depots.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0002-recherche-et-decouverte-des-depots.md) | +| **0003** | [Gestion réactive des overlays et popovers](#adr-0003--gestion-réactive-et-découplée-des-overlays-et-popovers-pubsub) | Architecture Réactive | Publish-Subscribe, RxJS `Subject`, Synchronisation `NgZone`, D3.js | `Accepté` | [0003-gestion-reactive-des-overlays-et-popovers.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md) | +| **0004** | [Clôture des questions et migration Dexie](#adr-0004--stratégie-de-clôture-des-questions-import-en-masse-et-rétrocompatibilité-dexie) | Modèle Métier / Stockage | IndexedDB (Dexie v3), Analyse heuristique Git, Parsing délimité | `Accepté` | [0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md) | +| **0005** | [Navigation clavier typeahead sans conflit](#adr-0005--neutralisation-des-conflits-souris-clavier-dans-les-suggestions-typeahead-directive-déclarative) | Ergonomie UI / Événements | Directive déclarative Angular, OCP/SRP, `runOutsideAngular`, CSS isolates | `Accepté` | [0005-navigation-clavier-typeahead-directive-decouplee.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0005-navigation-clavier-typeahead-directive-decouplee.md) | +| **0006** | [Authentification multi-forges et OAuth 2.0 PKCE](#adr-0006--authentification-multi-forges-découplée-pattern-stratégie--fournisseurs-et-oauth-20-pkce) | Sécurité / Architecture SOLID | Pattern Stratégie, Registre polymorphique, RFC 7636 (PKCE), Web Crypto API | `Accepté` | [0006-authentification-multi-fournisseurs-pattern-strategie.md](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md) | + +--- + +## 🌟 Vitrine détaillée des décisions (Showcase) + +### ADR-0001 : Standardisation du composant Keycap dans le Design System + +> *Harmonisation visuelle, accessibilité sémantique et micro-interactions des touches de raccourcis.* + +``` +┌────────────────────────────────────────────────────────┐ +│ Tags : #DesignSystem #HTML5Sémantique #CSSCustomTokens │ +│ Impact : Global UI, ShortcutsModal, Tooltips, Chooser │ +└────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : Les touches de raccourcis clavier et indicateurs d'interaction étaient dispersés dans le code avec des implémentations hétérogènes (balises `` vs ``, classes locales `.shortcut-badge`, `.cheat-badge`, `.shortcut-key`, styles d'ombres intérieures vs ombres douces, couleurs hexadécimales en dur). +- **La Décision** : + 1. Centralisation dans `_components.scss` sous les sélecteurs unifiés `kbd, .shortcut-key, .shortcut-badge`. + 2. Standardisation sur la balise sémantique HTML5 native ``. + 3. Support complet du Dark Mode sans aucune couleur en dur, via les tokens CSS globaux (`--color-bg-body`, `--color-border`, `--color-text-primary`, `--color-primary`). + 4. Création de variantes : taille standard (22px), compacte `.shortcut-key-sm` (18px) pour les zones denses, et conteneur `.shortcut-combo` avec séparateur `.key-sep`. + 5. Micro-interaction d'appui physique (`.shortcut-pressed-anim` avec `scale(0.92)`). +- **Bénéfice majeur** : Un composant d'interface universel, responsive, accessible et parfaitement fondu dans le thème clair comme sombre. +- 📄 Consulter l'ADR complet : [`docs/adr/0001-keycap-design-system.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0001-keycap-design-system.md) + +--- + +### ADR-0002 : Stratégie de recherche et découverte des dépôts GitHub GraphQL + +> *Résolution intelligente et arborescente des dépôts étudiants et organisations d'enseignement.* + +``` +┌──────────────────────────────────────────────────────────────┐ +│ Tags : #GraphQL #GitHubClassroom #Algorithme #UXRecherche │ +│ Impact : ModalAddRepositoriesComponent, CommitsService │ +└──────────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : L'API de recherche globale GitHub n'indexe par défaut que les dépôts publics, rendant les dépôts d'organisations d'enseignement privés (ex: `UE-TOAW`, `CLJ5059A`) introuvables. De plus, la recherche ouverte ramenait des dépôts tiers mondiaux non pertinents, et les dépôts de devoirs créés de manière autonome par GitHub Classroom (sans lien de parenté Git formel `fork`) étaient omis. +- **La Décision** : + 1. **Découverte automatique des organisations** : Récupération des organisations de l'utilisateur avec mise en cache `shareReplay(1)` pour éviter tout appel redondant. + 2. **Multi-requêtes GraphQL parallélisées par alias** : Découpage intelligent selon la saisie (URL directe, préfixe d'organisation, motif `owner/name` ou texte libre). + 3. **Normalisation de motif d'assignation (`extractAssignmentCore`)** : Extraction du cœur sémantique du devoir en éliminant les préfixes d'organisation et suffixes de templates pour identifier à coup sûr tous les dépôts étudiants associés. + 4. **Scission et pliage interactif des résultats** : Séparation claire entre « Correspondances par nom » et « Correspondances dans la description ou le README », avec accordéon interactif. + 5. **Arborescence visuelle des forks** : Dépôts étudiants indentés directement sous le modèle avec guides arborescents `└─`. +- **Bénéfice majeur** : Découverte instantanée et sans friction des promotions entières de TP sans exiger la saisie fastidieuse des dizaines d'URLs étudiantes. +- 📄 Consulter l'ADR complet : [`docs/adr/0002-recherche-et-decouverte-des-depots.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0002-recherche-et-decouverte-des-depots.md) + +--- + +### ADR-0003 : Gestion réactive et découplée des overlays et popovers (Pub/Sub) + +> *Éradication des hacks DOM et synchronisation fluide entre D3.js et le cycle de détection Angular.* + +``` +┌────────────────────────────────────────────────────────────┐ +│ Tags : #RxJS #PubSub #NgZone #D3js #ArchitecturePropre │ +│ Impact : OverviewComponent, TooltipService, Typeahead │ +└────────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : `OverviewComponent` agissait comme un contrôleur omniscient manipulant impérativement ses enfants via de multiples `@ViewChild`. Des hacks destructifs de DOM (`document.querySelector("ngb-typeahead-window")?.remove()`) étaient utilisés pour forcer la fermeture de popups tiers. L'exécution d'événements de souris dans D3 en dehors de la zone Angular générait des sauts graphiques brutaux de dropdowns sous la barre de navigation. +- **La Décision** : + 1. Création de `OverlayManagerService`, un bus d'événements singleton basé sur le patron **Publish-Subscribe** via un `Subject`. + 2. Typage granulaire des overlays (`TOOLTIP`, `CONTEXT_MENU`, `TYPEAHEAD`, `QUICK_HELP`, `DROPDOWN`, `ALL`). + 3. Sécurisation synchrone systématique dans `ngZone.run()` pour forcer un rafraîchissement d'état Angular immédiat sans étape transitoire brisée. + 4. Auto-gestion des composants récepteurs qui s'abonnent et se détruisent proprement via `takeUntil(destroy$)`. + 5. Règle d'architecture formalisée imposant l'usage exclusif de `OverlayManagerService` pour coordonner la fermeture des éléments flottants. +- **Bénéfice majeur** : Plus aucun appel à `querySelector` pour manipuler le DOM de composants tiers, fin définitive des scintillements et stabilité absolue des graphiques D3. +- 📄 Consulter l'ADR complet : [`docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0003-gestion-reactive-des-overlays-et-popovers.md) + +--- + +### ADR-0004 : Stratégie de clôture des questions, import en masse et rétrocompatibilité Dexie + +> *Flexibilité pédagogique sur la détection des commits, assistant ergonomique et migration IndexedDB sans perte.* + +``` +┌────────────────────────────────────────────────────────────┐ +│ Tags : #IndexedDB #Dexie #ModèleMétier #Pédagogie │ +│ Impact : Metadata, CommitModel, QuestionsChooser, Popover │ +└────────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : La détection des questions résolues reposait sur une expression régulière codée en dur ciblant uniquement les verbes GitHub (`fix`, `close`). Les enseignants souhaitant valider les jalons via d'autres mots-clés (`rendu`, `validé`) ou directement par l'identifiant de la question (`[ITER 1]`) étaient bloqués. L'ajout des questions se faisait une à une et risquait de corrompre les devoirs déjà stockés dans IndexedDB. +- **La Décision** : + 1. Enrichissement du modèle `Metadata` avec 3 modes configurables : `standard` (GitHub), `custom` (mots-clés libres de l'enseignant), et `none` (détection directe par nom de question). + 2. Migration de schéma Dexie `version(3)` dans `DatabaseService` garantissant l'initialisation transparente de tous les devoirs existants en base locale sans perte. + 3. Conception du composant `QuestionsAssistantPopoverComponent` intégrant un générateur de séries (`1..N`, `A..Z`), un panneau d'import multi-délimiteurs (`\n`, `,`, `;`, `\t`), et la configuration de la règle de clôture. + 4. Détection intelligente au copier-coller (`paste`) dans le champ des questions avec scission automatique et dédoublonnage. +- **Bénéfice majeur** : Adaptabilité totale à toutes les démarches pédagogiques universitaires et gain de temps massif lors de la configuration des devoirs. +- 📄 Consulter l'ADR complet : [`docs/adr/0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md) + +--- + +### ADR-0005 : Neutralisation des conflits souris-clavier dans les suggestions Typeahead (Directive déclarative) + +> *Élimination des sauts visuels lors de la navigation fléchée sans toucher au code des composants consommateurs.* + +``` +┌────────────────────────────────────────────────────────────┐ +│ Tags : #DirectiveAngular #SOLID #OCP #PerformanceDOM │ +│ Impact : SharedUiModule, QuestionsChooser, TextInput │ +└────────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : Lors de la navigation aux flèches dans les suggestions d'autocomplétion (`ngbTypeahead`), le fait de laisser le curseur de la souris immobile sur la liste déclenchait des événements synthétiques `mouseenter` émis par le navigateur lors des reflows DOM. Cela provoquait des allers-retours chaotiques de sélection et un double surbrillance visuelle `:hover` / `.active`. +- **La Décision** : + 1. Conception d'une directive déclarative `TypeaheadKeyboardNavDirective` ciblant `input[ngbTypeahead]`. + 2. Respect strict du principe Ouvert/Fermé (OCP) : s'applique immédiatement à tous les champs présents et futurs sans modifier leur logique métier. + 3. Gestion éphémère des écouteurs d'événements de rétablissement (`mousemove`, `mousedown`, `wheel`) : rattachés uniquement pendant la phase active de navigation clavier, exécutés hors zone Angular (`runOutsideAngular`) avec un seuil de mouvement de sécurité (> 2px) pour filtrer les micro-événements parasites. + 4. Neutralisation CSS instantanée (`pointer-events: none !important` et suppression des transitions pendant la navigation fléchée). +- **Bénéfice majeur** : Navigation clavier d'une netteté parfaite, zéro fuite mémoire, zéro écouteur passif persistant en arrière-plan. +- 📄 Consulter l'ADR complet : [`docs/adr/0005-navigation-clavier-typeahead-directive-decouplee.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0005-navigation-clavier-typeahead-directive-decouplee.md) + +--- + +### ADR-0006 : Authentification multi-forges découplée (Pattern Stratégie & Fournisseurs) et OAuth 2.0 PKCE + +> *Ouverture multi-fournisseurs (GitHub + GitLab Cloud), sécurité client-side conforme RFC 7636 et zéro secret applicatif exposé.* + +``` +┌────────────────────────────────────────────────────────────┐ +│ Tags : #OAuth2PKCE #PatternStratégie #RFC7636 #Sécurité │ +│ Impact : AccountsService, GithubAuth, GitlabAuth, Guards │ +└────────────────────────────────────────────────────────────┘ +``` + +- **Le Défi** : L'authentification était historiquement liée de manière monolithique à GitHub via Firebase Auth. L'ouverture à GitLab (plateforme cloud puis instances auto-hébergées) imposait de respecter l'architecture Single Page Application (SPA statique distribuée sur Firebase Hosting) : aucun secret client (*Client Secret*) ne pouvait être inclus dans le code client sans compromettre la sécurité. De plus, les API Gateways de GitLab présentaient parfois de légères latences de propagation du token provoquant des erreurs 401 temporaires. +- **La Décision** : + 1. **Contrat d'interface formel `GitAuthProvider`** : Abstraction normalisée unifiant le cycle de vie (`signIn`, `signOut`, `isSignedIn`, `getToken`, `getUserProfile`, `isAvailable`). + 2. **Pattern Stratégie & Registre centralisé (`AccountsService`)** : Source unique de vérité stockant les fournisseurs dans une table de correspondance typée `Map`. + 3. **Implémentation OAuth 2.0 avec PKCE (RFC 7636)** : Flux d'autorisation complet exécuté dans le navigateur sans dépendance externe lourde, utilisant la Web Crypto API (`window.crypto.getRandomValues`, hachage SHA-256 et Base64-URL pour le `code_challenge`, validation du `state` anti-CSRF). + 4. **Résilience et atomicité** : Affectation atomique de la session et mécanisme de nouvelle tentative automatique avec délai d'attente pour absorber les latences de réplication réseau. + 5. **Découplage de `AuthGuard` et polymorphisme d'UI** : `AuthGuard` s'appuie désormais sur `!accountsService.isEmpty()` et la modale d'ajout de compte factorise l'affichage via des templates réutilisables. +- **Bénéfice majeur** : Architecture SOLID hautement extensible permettant d'ajouter facilement toute nouvelle forge (GitLab Community auto-hébergé, Bitbucket, forges universitaires) avec un niveau de sécurité client optimal. +- 📄 Consulter l'ADR complet : [`docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md`](https://github.com/git4school/git4school-visu/blob/master/docs/adr/0006-authentification-multi-fournisseurs-pattern-strategie.md) + +--- + +## 🧭 Principes directeurs de l'architecture Git4School Visu + +L'ensemble de ces ADRs applique un socle commun d'exigences et de bonnes pratiques techniques partagées au sein du projet : + +``` +┌─────────────────────────────────────────────────────────────────────────────┐ +│ Principes Directeurs Communs │ +├─────────────────────────────────────────────────────────────────────────────┤ +│ 1. SOLID & Clean Code : Interfaces fortes, découplage, responsabilités│ +│ uniques, zéro code dupliqué. │ +│ 2. Isolation D3 / Angular : Respect de NgZone, pas de désynchronisation │ +│ ni de hacks directs sur le DOM tiers. │ +│ 3. Theming & Tokens CSS : Compatibilité Dark Mode native sans couleur │ +│ hexadécimale en dur dans les composants. │ +│ 4. Sécurité Client-Side : Flux OAuth 2.0 PKCE sans secret client exposé │ +│ dans les bundles frontend. │ +│ 5. Rétrocompatibilité : Évolution défensive des schémas IndexedDB │ +│ avec migration automatisée. │ +└─────────────────────────────────────────────────────────────────────────────┘ +``` + +--- + +## ✍️ Comment proposer une nouvelle ADR ? + +### Cycle de vie d'une décision + +```mermaid +stateDiagram-v2 + [*] --> Proposé : Rédaction initiale (PR) + Proposé --> Accepté : Validation par l'équipe + Proposé --> Rejeté : Débat & alternatives retenues + Accepté --> Implémenté : Déploiement dans le code + Implémenté --> Remplacé : Évolution majeure (Nouvelle ADR) + Rejeté --> [*] + Remplacé --> [*] +``` + +1. **Numérotation séquentielle** : Créer un fichier Markdown dans `docs/adr/` sous la forme `XXXX-titre-court-en-kebab-case.md` (ex: `0007-nouvelle-decision.md`). +2. **Utiliser le template standard** : Renseigner scrupuleusement le contexte, les options étudiées, la décision finale et ses conséquences. +3. **Mettre à jour cette vitrine** : Ajouter la nouvelle entrée dans le tableau de bord et dans la section Showcase. +4. **Mettre à jour la documentation d'architecture** : Référencer la nouvelle règle dans cette vitrine et documenter les impacts techniques. + +
+📋 Modèle Markdown d'ADR à copier (Template) + +```markdown +# XXXX - [Titre de la décision architecturale] + +## Contexte +[Décrire la situation initiale, les besoins fonctionnels ou techniques, les limites rencontrées et la dette technique à résoudre.] + +## Options considérées +1. **Option A : [Titre]** + - *Avantages / Inconvénients* : [...] + - *Verdict* : [Rejeté - Justification] +2. **Option B : [Titre]** (Option retenue) + - *Avantages / Inconvénients* : [...] + +## Décision +1. **[Composant / Service clé]** : [Détail de l'architecture retenue] +2. **[Patron de conception]** : [Explication du découplage et des contrats] +3. **[Règles d'implémentation]** : [Normes de sécurité, d'ergonomie ou de style] + +## Conséquences +- **Positives** : [Gains en maintenabilité, performance, extensibilité, sécurité...] +- **Contraintes / Négatives** : [Points d'attention, complexité induite éventuelle...] +- **Mises à jour documentaires** : [Mise à jour de la vitrine d'architecture et des guides associés] +``` + +
+ +--- + +*Page maintenue par l'équipe Git4School. Pour toute question ou proposition, ouvrez une issue ou soumettez une Pull Request.* From 660e3f2c663e375bcfe32c14185c9885f7e8a101 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 17 Sep 2026 22:14:31 +0200 Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20Add=20multi-provider=20GitLab?= =?UTF-8?q?=20support=20with=20Strategy=20Pattern=20and=20split=20button?= =?UTF-8?q?=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...donnees-git-pattern-strategie-et-facade.md | 48 + docs/adr/README.md | 1 + .../assignment-chooser.component.html | 135 ++- .../assignment-chooser.component.scss | 417 +++++++-- .../assignment-chooser.component.ts | 224 ++++- .../configuration.component.html | 2 +- .../configuration/configuration.component.ts | 7 +- .../edit-repositories.component.html | 2 +- .../edit-repositories.component.ts | 27 +- .../modal-add-repositories.component.ts | 186 +--- src/app/models/Assignment.model.ts | 11 +- src/app/models/Commit.model.ts | 14 + src/app/models/GitAuthProvider.model.ts | 2 + src/app/models/GitDataService.model.ts | 36 + src/app/models/Repository.model.ts | 38 +- src/app/services/accounts.service.spec.ts | 17 + src/app/services/accounts.service.ts | 32 +- src/app/services/commits.service.ts | 824 ++---------------- src/app/services/database.service.ts | 21 + src/app/services/github-data.service.spec.ts | 80 ++ src/app/services/github-data.service.ts | 735 ++++++++++++++++ src/app/services/gitlab-data.service.spec.ts | 98 +++ src/app/services/gitlab-data.service.ts | 341 ++++++++ src/app/services/utils.ts | 38 +- .../shared/ui/dev-bar/dev-bar.component.html | 6 +- .../shared/ui/dev-bar/dev-bar.component.ts | 2 +- src/assets/i18n/en.json | 13 +- src/assets/i18n/fr.json | 13 +- src/assets/i18n/ru.json | 13 +- 29 files changed, 2259 insertions(+), 1124 deletions(-) create mode 100644 docs/adr/0007-services-de-donnees-git-pattern-strategie-et-facade.md create mode 100644 src/app/models/GitDataService.model.ts create mode 100644 src/app/services/github-data.service.spec.ts create mode 100644 src/app/services/github-data.service.ts create mode 100644 src/app/services/gitlab-data.service.spec.ts create mode 100644 src/app/services/gitlab-data.service.ts diff --git a/docs/adr/0007-services-de-donnees-git-pattern-strategie-et-facade.md b/docs/adr/0007-services-de-donnees-git-pattern-strategie-et-facade.md new file mode 100644 index 00000000..0ea5ea1e --- /dev/null +++ b/docs/adr/0007-services-de-donnees-git-pattern-strategie-et-facade.md @@ -0,0 +1,48 @@ +# 0007 - Services de données Git multi-fournisseurs (Pattern Stratégie, Façade & Registre) + +## Contexte +Historiquement, la récupération des données de dépôts et de commits dans Git4School était concentrée dans un service monolithique `CommitsService`. Ce dernier combinait plus de 700 lignes de requêtes GraphQL spécifiques à l'API GitHub (`api.github.com`) avec les calculs statistiques et dictionnaires nécessaires aux visualisations D3.js. + +L'intégration de GitLab (GitLab Cloud `gitlab.com` et futures instances académiques auto-hébergées) imposait de : +1. Découpler la logique de récupération de données distantes des algorithmes d'analyse et de visualisation. +2. Définir un contrat d'abstraction formel pour les fournisseurs de données Git. +3. Permettre la résolution dynamique de l'hôte distant (*instance host*) afin de supporter nativement les instances GitLab auto-hébergées sans modifier le code applicatif. +4. Conserver une façade unifiée et rétrocompatible pour les composants graphiques existants. + +## Options considérées +1. **Ajout de conditions `if (provider === 'gitlab')` au sein de `CommitsService`** : + - *Rejeté* : Violation flagrante du principe Ouvert/Fermé (OCP) et du principe de responsabilité unique (SRP). Le service aurait accumulé les spécificités de multiples API (GraphQL GitHub vs REST v4 GitLab) au sein du même fichier. +2. **Injection directe des services de données concrets dans chaque composant** : + - *Rejeté* : Couplage fort des composants d'interface aux détails de chaque forge et duplication de la logique de sélection de stratégie. +3. **Architecture découplée en trois volets : Contrat `GitDataService`, Stratégies concrètes (`GithubDataService`, `GitlabDataService`), Registre polymorphique (`AccountsService`) et Façade (`CommitsService`) (Option retenue)**. + +## Décision +1. **Contrat d'abstraction `GitDataService` (`src/app/models/GitDataService.model.ts`)** : + - Définit le contrat unifié de données Git : + - `readonly provider: GitProviderType` + - `getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable` + - `getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit?: number): Observable` + - `getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit?: number): Observable` + - `verifyUserAccess(repoUrl: string): Observable` +2. **Stratégie GitHub (`GithubDataService`)** : + - Encapsule les requêtes GraphQL optimisées par lots (*batch queries* de 4 dépôts), la pagination des commits via curseur et la recherche ciblée (dépôt, organisation, recherche globale). +3. **Stratégie GitLab (`GitlabDataService`)** : + - Implémente l'API REST v4 de GitLab (`/api/v4/projects`). + - **Support natif des instances auto-hébergées** : Extraction dynamique de l'origine de l'hôte (`new URL(repo.url).origin`) et du chemin de projet encodé (`encodeURIComponent(pathWithNamespace)`). + - Récupération unifiée des fichiers `IDENTITY.json` et `README.md` via l'API raw files et pagination récursive des commits (`x-next-page`). +4. **Registre centralisé (`AccountsService`)** : + - Maintient la table de correspondance `dataServices: Map`. + - Expose `getDataService(provider: GitProviderType): GitDataService` et `hasAccount(provider: GitProviderType): boolean`. +5. **Façade unifiée (`CommitsService`)** : + - Délègue les opérations de chargement et de recherche au `GitDataService` correspondant au type de devoir (`assignment.provider`). + - Conserve les fonctions de calcul de graphes (dictionnaires de questions, métadonnées, étudiants) en tant que logique métier pure indépendante du fournisseur. +6. **Mise à jour des formulaires et de la modale d'ajout de dépôts** : + - `ConfigurationComponent`, `EditRepositoriesComponent` et `ModalAddRepositoriesComponent` propagent le type de fournisseur et conditionnent les actions à l'authentification effective sur le fournisseur ciblé (`isConnectedToProvider`). +7. **Rétrocompatibilité et migration Dexie v4** : + - Migration automatique fixant `provider = "github"` sur tous les devoirs et dépôts préexistants. + +## Conséquences +- **Extensibilité** : L'ajout d'une nouvelle forge (ex: forge d'enseignement hébergée, Bitbucket) ne nécessite que la création d'un service implémentant `GitDataService` et son enregistrement dans le registre. +- **Rétrocompatibilité totale** : Les devoirs créés avant la mise à jour continuent de fonctionner à l'identique avec GitHub. +- **Homogénéité mono-fournisseur garantie** : Un devoir est rattaché à une forge unique, évitant les mélanges complexes d'identifiants et de droits d'accès. +- **Expérience utilisateur fluide** : Le bouton de création d'un devoir s'adapte dynamiquement au filtre sélectionné par l'enseignant, tout en offrant 3 déclinaisons d'interaction ergonomiques évaluables via le prototype. diff --git a/docs/adr/README.md b/docs/adr/README.md index 1c810899..b93155ce 100644 --- a/docs/adr/README.md +++ b/docs/adr/README.md @@ -16,6 +16,7 @@ Ce répertoire contient l'historique formalisé de toutes les décisions d'archi | [0004](./0004-strategie-de-cloture-des-questions-et-retrocompatibilite-dexie.md) | Stratégie de clôture des questions, import en masse et rétrocompatibilité Dexie | Modèle Métier / IndexedDB | `Accepté` | | [0005](./0005-navigation-clavier-typeahead-directive-decouplee.md) | Neutralisation des conflits souris-clavier dans les suggestions Typeahead | Ergonomie UI / Événements | `Accepté` | | [0006](./0006-authentification-multi-fournisseurs-pattern-strategie.md) | Authentification multi-forges découplée (Pattern Stratégie & Fournisseurs) et OAuth 2.0 PKCE | Sécurité / Architecture SOLID | `Accepté` | +| [0007](./0007-services-de-donnees-git-pattern-strategie-et-facade.md) | Services de données Git découplés (Pattern Stratégie, Registre & Façade CommitsService) | Intégration Git / Architecture | `Accepté` | --- diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.html b/src/app/components/home/assignment-chooser/assignment-chooser.component.html index 7123a6b4..07eada2a 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.html +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.html @@ -233,19 +233,110 @@
{{ 'HOME.FILTER.YEAR' | translate }}
-
- + +
+ + +
+ +
+ + +
+ +
+ + + +
+
+ +
+ +
+ + +
+ + +
+
+
+ (mouseleave)="hoveredAssignment = null" [class.disabled]="!isAssignmentConnected(assignment) || assignment.id === -1" + (click)="isAssignmentConnected(assignment) && assignment.id !== -1 && toggleSelection(assignment.id); $event.stopPropagation()">
@@ -394,19 +485,19 @@
{{ 'HOME.FILTER.YEAR' | translate }}
diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss index 47555d64..d2c472c2 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.scss +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.scss @@ -1,3 +1,5 @@ +@import 'variables'; + .assignment-container { font-family: 'Inter', 'Roboto', sans-serif; } @@ -24,7 +26,9 @@ } &[data-active="all"] .filter-indicator { transform: translateX(0); } + &[data-active="github"] .filter-indicator { transform: translateX(100px); } + &[data-active="gitlab"] .filter-indicator { transform: translateX(200px); } .filter-btn { @@ -69,7 +73,8 @@ .btn-primary.action-btn { background-color: var(--color-primary); border-color: var(--color-primary); - color: #ffffff; + color: #fff; + &:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); @@ -80,10 +85,12 @@ border-color: var(--color-border); background-color: var(--color-surface); color: var(--color-text-primary); + &:hover { background-color: var(--color-bg-body); } } + .actions-group { .square-btn { width: 36px; @@ -96,6 +103,57 @@ box-shadow: none !important; } + .creation-interactive-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: flex-end; + } + + .export-btn { + height: 36px; + max-width: 36px; + padding: 0 !important; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 6px; + overflow: hidden; + white-space: nowrap; + transition: max-width 0.3s ease, padding 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; + + .icon { + flex-shrink: 0; + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + } + + .text { + opacity: 0; + max-width: 0; + overflow: hidden; + margin: 0; + transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease; + } + + &.export-active { + max-width: 250px; + padding: 0 0.5rem 0 1rem !important; + background-color: var(--color-primary-bg) !important; + border-color: var(--color-primary-bg) !important; + color: var(--color-primary) !important; + + .text { + opacity: 1; + max-width: 200px; + margin-right: 0.5rem; + } + } + } + .expandable-wrapper { position: relative; width: 36px; @@ -145,13 +203,206 @@ } } } + + /* Filter-specific button styling */ + &.provider-filter-wrapper { + .btn-provider-github { + background-color: #24292e; + border-color: #24292e; + color: #fff; + + &:hover { + background-color: #1b1f23; + border-color: #1b1f23; + } + } + + .btn-provider-gitlab { + background: linear-gradient(135deg, #fc6d26 0%, #e24329 100%); + border-color: #fc6d26; + color: #fff; + + &:hover { + background: linear-gradient(135deg, #e24329 0%, #d13a22 100%); + border-color: #e24329; + } + } + } + } + + /* Split Capsule provider button styles */ + .split-provider-wrapper { + .brand-svg { + display: block; + } + + .split-pill-container { + display: inline-flex; + align-items: center; + height: 36px; + border-radius: 8px; + color: #fff; + overflow: hidden; + transition: background 0.2s ease, box-shadow 0.2s ease; + + .split-main-btn { + border: none; + background: transparent; + color: inherit; + height: 100%; + padding: 0 12px; + font-size: 0.85rem; + font-weight: 500; + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; + + &:focus, + &:focus-visible { + outline: none; + } + + .split-icon { + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + } + + .split-text { + display: inline-block; + line-height: 1.2; + } + } + + .split-divider { + width: 1px; + height: 20px; + background: rgba(255, 255, 255, 0.3); + } + + .split-toggle-btn { + border: none; + background: transparent; + color: inherit; + height: 100%; + width: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background 0.15s ease; + + .chevron-svg { + display: block; + transition: transform 0.2s ease; + } + + &:hover { + background: rgba(255, 255, 255, 0.2); + } + + &:focus, + &:focus-visible { + outline: none; + } + } + + &.is-open .split-toggle-btn .chevron-svg { + transform: rotate(180deg); + } + + &.provider-github { + background-color: #24292e; + + &:hover { + background-color: #1b1f23; + } + } + + &.provider-gitlab { + background: linear-gradient(135deg, #fc6d26 0%, #e24329 100%); + + &:hover { + background: linear-gradient(135deg, #e24329 0%, #d13a22 100%); + } + } + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + } + + .split-drawer { + position: absolute; + top: calc(100% + 6px); + right: 0; + min-width: 180px; + z-index: $zindex-context-menu; + animation: frostedPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); + display: flex; + flex-direction: column; + gap: 2px; + + .dropdown-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.8rem; + padding: 6px 12px; + white-space: nowrap; + + .brand-svg { + width: 14px; + height: 14px; + display: inline-block; + flex-shrink: 0; + } + + .provider-name { + flex: 1; + white-space: nowrap; + } + + .active-check { + margin-left: auto; + flex-shrink: 0; + } + + &:disabled { + opacity: 0.45; + cursor: not-allowed; + pointer-events: auto; + + * { + pointer-events: none; + } + } + } + } } } } +@keyframes frostedPopIn { + from { + opacity: 0; + transform: translateY(-4px) scale(0.96); + } + + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + + .search-filters-group { .search-input-wrapper { position: relative; + .search-icon { position: absolute; left: 12px; @@ -161,6 +412,7 @@ z-index: 5; pointer-events: none; } + .modern-search-input { padding-left: 36px; border-radius: 8px; @@ -169,18 +421,21 @@ color: var(--color-text-primary); transition: border-color 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out; font-size: 0.9rem; + + &::placeholder { + color: var(--color-text-muted); + transition: color 0.2s ease; + } + &:focus { box-shadow: none !important; outline: none; border-color: var(--color-border) !important; + &::placeholder { color: transparent; } } - &::placeholder { - color: var(--color-text-muted); - transition: color 0.2s ease; - } } } @@ -210,10 +465,12 @@ .filter-chips { gap: 0.5rem; + .filter-chip { display: inline-flex; cursor: pointer; margin: 0; + input[type="checkbox"] { display: none; } @@ -275,16 +532,19 @@ color: var(--badge-prepared-text); border-color: var(--badge-prepared-border); } + &.chip-ongoing input[type="checkbox"]:checked + span { background-color: var(--badge-ongoing-bg); color: var(--badge-ongoing-text); border-color: var(--badge-ongoing-border); } + &.chip-finished input[type="checkbox"]:checked + span { background-color: var(--badge-finished-bg); color: var(--badge-finished-text); border-color: var(--badge-finished-border); } + &.chip-default input[type="checkbox"]:checked + span { background-color: var(--badge-default-bg); color: var(--badge-default-text); @@ -303,6 +563,7 @@ color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 6px; + &:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); @@ -366,6 +627,7 @@ &.disabled-card { opacity: 0.6; + &::before { background: var(--color-bg-body); box-shadow: none; @@ -382,17 +644,6 @@ &::before { left: calc(1.2rem + 40px - 0.5rem); } - - .selection-zone { - .type-indicator-overlay { - opacity: 0; - transform: scale(0.92); - } - .selection-checkbox-overlay { - opacity: 1; - transform: scale(1); - } - } } } @@ -428,11 +679,13 @@ transform: scale(1); z-index: 2; - i { + .fab { font-size: 1.5rem; } - &.github i { color: var(--color-github, #24292e); } - &.gitlab i { color: var(--color-gitlab, #fc6d26); } + + &.github .fa-github { color: var(--color-github, #24292e); } + + &.gitlab .fa-gitlab { color: var(--color-gitlab, #fc6d26); } } .selection-checkbox-overlay { @@ -463,6 +716,53 @@ } } } + + .assignment-card.is-shrunk & { + .type-indicator-overlay { + opacity: 0; + transform: scale(0.92); + } + + .selection-checkbox-overlay { + opacity: 1; + transform: scale(1); + } + } +} + +.btn-icon-action { + width: 32px; + height: 32px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + border: none; + background: transparent; + transition: all 0.2s; + + i { + font-size: 1rem; + } + + &.text-primary { color: var(--color-primary) !important; } + + &.text-secondary { color: var(--color-text-secondary) !important; } + + &.text-danger { color: var(--color-danger) !important; } + + &:disabled { + opacity: 0.4; + cursor: not-allowed; + } + + &:hover:not(:disabled) { + &.text-primary { background: rgba(59, 130, 246, 0.1); color: var(--color-primary-hover) !important; } + + &.text-secondary { background: var(--color-bg-body); color: var(--color-text-primary) !important; } + + &.text-danger { background: rgba(239, 68, 68, 0.1); color: var(--color-danger) !important; } + } } .assignment-title { @@ -484,6 +784,7 @@ opacity: 0.4; color: var(--color-text-muted); } + .meta-item { font-size: 0.8rem; font-weight: 400; @@ -520,6 +821,7 @@ line-height: 1.2; letter-spacing: -0.02em; } + .year { font-size: 0.7rem; color: var(--color-text-secondary); @@ -587,37 +889,6 @@ } } -.btn-icon-action { - width: 32px; - height: 32px; - border-radius: 6px; - display: flex; - align-items: center; - justify-content: center; - border: none; - background: transparent; - transition: all 0.2s; - - i { - font-size: 1rem; - } - - &.text-primary { color: var(--color-primary) !important; } - &.text-secondary { color: var(--color-text-secondary) !important; } - &.text-danger { color: var(--color-danger) !important; } - - &:hover:not(:disabled) { - &.text-primary { background: rgba(59, 130, 246, 0.1); color: var(--color-primary-hover) !important; } - &.text-secondary { background: var(--color-bg-body); color: var(--color-text-primary) !important; } - &.text-danger { background: rgba(239, 68, 68, 0.1); color: var(--color-danger) !important; } - } - - &:disabled { - opacity: 0.4; - cursor: not-allowed; - } -} - .sort-direction-svg { .sort-arrow { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); @@ -661,54 +932,10 @@ opacity: 0; transform: translate3d(0, -6px, 0); } + 100% { opacity: 1; transform: translate3d(0, 0, 0); } } - -.export-btn { - height: 36px; - max-width: 36px; - padding: 0 !important; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 6px; - overflow: hidden; - white-space: nowrap; - transition: max-width 0.3s ease, padding 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; - - .icon { - flex-shrink: 0; - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - } - - .text { - opacity: 0; - max-width: 0; - overflow: hidden; - margin: 0; - transition: opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease; - } - - &.export-active { - max-width: 250px; - padding: 0 0.5rem 0 1rem !important; - background-color: var(--color-primary-bg) !important; - border-color: var(--color-primary-bg) !important; - color: var(--color-primary) !important; - - .text { - opacity: 1; - max-width: 200px; - margin-right: 0.5rem; - } - } -} - diff --git a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts index ba783f83..5427ae95 100644 --- a/src/app/components/home/assignment-chooser/assignment-chooser.component.ts +++ b/src/app/components/home/assignment-chooser/assignment-chooser.component.ts @@ -1,12 +1,15 @@ -import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy } from "@angular/core"; +import { Component, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy, HostListener } from "@angular/core"; import { Router } from "@angular/router"; import { Assignment } from "@models/Assignment.model"; +import { GitProviderType } from "@models/GitAuthProvider.model"; import { TranslateService } from "@ngx-translate/core"; import { AssignmentsService } from "@services/assignments.service"; +import { AccountsService } from "@services/accounts.service"; import { GithubAuthService } from "@services/github-auth.service"; import { ConfigurationService } from "@services/configuration.service"; import { DataService } from "@services/data.service"; import { DatabaseService } from "@services/database.service"; +import { OverlayManagerService } from "@services/overlay-manager.service"; import { ToastService } from "@services/toast.service"; import { Subscription } from "rxjs"; import * as moment from "moment"; @@ -18,7 +21,6 @@ import * as moment from "moment"; }) export class AssignmentChooserComponent implements OnInit, OnDestroy { assignments: any[]; // Using any to attach UI-specific properties temporarily - private dbSubscription: Subscription; sortField = "lastModificationDate"; sortDirection: "asc" | "desc" = "desc"; @@ -43,19 +45,59 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { availablePrograms: string[] = []; availableYears: string[] = []; - // Selection state selectionMode = false; selectedAssignments: Set = new Set(); hoveredAssignment: number | null = null; // Status hover preview state hoveredStatusPreview: string | null = null; - private statusPreviewTimeout: any = null; + + // Provider split button dropdown state + isProviderDropdownOpen = false; + lastUsedProvider: GitProviderType = "github"; // Inline edit state editingAssignmentId: number | null = null; isCreatingNew = false; + isSortHovered = false; + sortWasClicked = false; + + private dbSubscription?: Subscription; + private overlaySub: Subscription | null = null; + private accountsSub?: Subscription; + private statusPreviewTimeout: any = null; + + constructor( + private databaseService: DatabaseService, + private dataService: DataService, + private router: Router, + public githubAuthService: GithubAuthService, + public accountsService: AccountsService, + private overlayManager: OverlayManagerService, + private translateService: TranslateService, + private toastService: ToastService, + private assignmentsService: AssignmentsService, + private configurationService: ConfigurationService, + private cdr: ChangeDetectorRef, + ) {} + + @HostListener("document:click", ["$event"]) + onDocumentClick(event: MouseEvent): void { + const target = event.target as HTMLElement; + if (!target || !target.isConnected) { + return; + } + if (!target.closest(".creation-interactive-wrapper")) { + this.closeAllCreationPopovers(); + } + } + + @HostListener("window:keydown.escape") + onEscape(): void { + this.closeAllCreationPopovers(); + } + get filteredAssignments() { let result = this.assignments; @@ -198,17 +240,33 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.cdr.markForCheck(); } - constructor( - private databaseService: DatabaseService, - private dataService: DataService, - private router: Router, - public githubAuthService: GithubAuthService, - private translateService: TranslateService, - private toastService: ToastService, - private assignmentsService: AssignmentsService, - private configurationService: ConfigurationService, - private cdr: ChangeDetectorRef, - ) {} + isAssignmentConnected(assignment: any): boolean { + if (!assignment) { + return false; + } + const provider = (assignment.provider || assignment.uiType || "github") as GitProviderType; + return this.accountsService.hasAccount(provider); + } + + get isGithubConnected(): boolean { + return this.accountsService.isGithubConnected; + } + + get isGitlabConnected(): boolean { + return this.accountsService.isGitlabConnected; + } + + get canCreateAny(): boolean { + return !this.accountsService.isEmpty(); + } + + get hasMultipleProviders(): boolean { + return this.isGithubConnected && this.isGitlabConnected; + } + + get singleConnectedProvider(): GitProviderType { + return this.isGithubConnected ? "github" : "gitlab"; + } ngOnInit(): void { this.assignments = []; @@ -217,6 +275,29 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.dbSubscription = this.databaseService.dbChanged.subscribe(() => { this.loadAssignments(); }); + + this.overlaySub = this.overlayManager.dismiss$.subscribe(() => { + this.closeAllCreationPopovers(); + }); + + this.accountsSub = this.accountsService.accounts$.subscribe(() => { + this.cdr.markForCheck(); + }); + } + + ngOnDestroy(): void { + if (this.dbSubscription) { + this.dbSubscription.unsubscribe(); + } + if (this.overlaySub) { + this.overlaySub.unsubscribe(); + } + if (this.accountsSub) { + this.accountsSub.unsubscribe(); + } + if (this.statusPreviewTimeout) { + clearTimeout(this.statusPreviewTimeout); + } } loadPreferences() { @@ -231,6 +312,10 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { console.error("Could not load preferences", e); } } + const savedProvider = localStorage.getItem("git4school_last_provider") as GitProviderType; + if (savedProvider && (savedProvider === "github" || savedProvider === "gitlab")) { + this.lastUsedProvider = savedProvider; + } } savePreferences() { @@ -244,15 +329,6 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { ); } - ngOnDestroy(): void { - if (this.dbSubscription) { - this.dbSubscription.unsubscribe(); - } - if (this.statusPreviewTimeout) { - clearTimeout(this.statusPreviewTimeout); - } - } - async loadAssignments() { // Preserve editing state if possible, unless it's a new assignment const currentEditingId = this.editingAssignmentId; @@ -287,6 +363,14 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { this.sortAssignments(); + // Fallback: if no provider is explicitly stored in localStorage, use provider of most recent assignment + if (!localStorage.getItem("git4school_last_provider")) { + const lastAssignment = this.assignments.find((a) => a.provider && a.id !== -1); + if (lastAssignment && lastAssignment.provider) { + this.lastUsedProvider = lastAssignment.provider; + } + } + // Restore new assignment if we were creating one if (wasCreatingNew && newAssignmentObj) { this.assignments.unshift(newAssignmentObj); @@ -377,11 +461,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } computeType(assignment: Assignment): "github" | "gitlab" { - // Mock logic: Assign gitlab if title contains 'gitlab', else github - if (assignment.title && assignment.title.toLowerCase().includes("gitlab")) { - return "gitlab"; - } - return "github"; + return assignment.provider || "github"; } getSortLabel(field: string): string { @@ -535,9 +615,6 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { return moment(dateStr).format(format); } - isSortHovered = false; - sortWasClicked = false; - onSortMouseEnter() { this.isSortHovered = true; this.sortWasClicked = false; @@ -560,7 +637,13 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } selectAssignment(assignment: any) { - if (!this.githubAuthService.isSignedIn()) return; + const provider = assignment.provider || "github"; + if (!this.accountsService.hasAccount(provider)) { + const errorKey = provider === "gitlab" ? "HOME.MUST-LOGIN-ASSIGNMENT-GITLAB" : "HOME.MUST-LOGIN-ASSIGNMENT-GITHUB"; + const msg = this.translateService.instant(errorKey); + this.toastService.warning(this.translateService.instant("WARNING"), msg); + return; + } this.dataService.assignment = assignment; this.dataService.groupFilter = ""; if (this.dataService.repoToLoad) { @@ -569,19 +652,80 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } deleteAssignment(assignment: any) { - if (!this.githubAuthService.isSignedIn()) return; + if (!this.isAssignmentConnected(assignment)) return; this.databaseService.deleteAssignment(assignment.id); } - createAssignment() { - if (!this.githubAuthService.isSignedIn()) return; + createAssignment(provider?: GitProviderType, event?: MouseEvent) { + if (event) { + event.stopPropagation(); + } + const targetProvider: GitProviderType = provider || (this.filterType !== "all" ? this.filterType : this.lastUsedProvider) || "github"; + + if (!this.accountsService.hasAccount(targetProvider)) { + if (this.accountsService.isEmpty()) { + const msg = this.translateService.instant("HOME.MUST-LOGIN"); + this.toastService.warning(this.translateService.instant("WARNING"), msg); + return; + } + const errorKey = targetProvider === "gitlab" ? "HOME.MUST-LOGIN-GITLAB" : "HOME.MUST-LOGIN-GITHUB"; + const msg = this.translateService.instant(errorKey); + this.toastService.warning(this.translateService.instant("WARNING"), msg); + return; + } + if (this.isCreatingNew) return; // Prevent multiple creates + this.closeAllCreationPopovers(); + this.lastUsedProvider = targetProvider; + try { + localStorage.setItem("git4school_last_provider", targetProvider); + } catch (e) {} + let assignment = new Assignment(); assignment.id = -1; // Temporary ID for creation + assignment.provider = targetProvider; + (assignment as any).uiType = targetProvider; + (assignment as any).uiStatus = "prepared"; this.assignments.unshift(assignment); // Add to the top this.isCreatingNew = true; this.editAssignment(assignment); + this.cdr.markForCheck(); + } + + onNewAssignmentClick(event?: MouseEvent) { + if (event) { + event.stopPropagation(); + } + if (!this.canCreateAny) { + const msg = this.translateService.instant("HOME.MUST-LOGIN"); + this.toastService.warning(this.translateService.instant("WARNING"), msg); + return; + } + + /* If a specific provider filter is active, create directly with that provider */ + if (this.filterType === "github") { + this.createAssignment("github"); + return; + } + if (this.filterType === "gitlab") { + this.createAssignment("gitlab"); + return; + } + + this.createAssignment(this.lastUsedProvider); + } + + toggleProviderDropdown(event?: MouseEvent): void { + if (event) { + event.stopPropagation(); + } + this.isProviderDropdownOpen = !this.isProviderDropdownOpen; + } + + closeAllCreationPopovers(): void { + this.isProviderDropdownOpen = false; + this.cdr.markForCheck(); } trackByAssignmentId(index: number, item: any): any { @@ -589,7 +733,7 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } editAssignment(assignment: any) { - if (!this.githubAuthService.isSignedIn()) return; + if (!this.isAssignmentConnected(assignment) && assignment.id !== -1) return; // If we were creating a new one and clicked edit on another, discard the new one if (this.isCreatingNew && assignment.id !== -1) { @@ -620,6 +764,12 @@ export class AssignmentChooserComponent implements OnInit, OnDestroy { } onAssignmentSaved(assignment: Assignment) { + if (assignment && assignment.provider) { + this.lastUsedProvider = assignment.provider; + try { + localStorage.setItem("git4school_last_provider", assignment.provider); + } catch (e) {} + } this.isCreatingNew = false; this.editingAssignmentId = null; this.loadAssignments(); diff --git a/src/app/components/home/assignment-chooser/configuration/configuration.component.html b/src/app/components/home/assignment-chooser/configuration/configuration.component.html index 6329427a..5d5fb48c 100644 --- a/src/app/components/home/assignment-chooser/configuration/configuration.component.html +++ b/src/app/components/home/assignment-chooser/configuration/configuration.component.html @@ -30,7 +30,7 @@
-
diff --git a/src/app/components/home/assignment-chooser/configuration/configuration.component.ts b/src/app/components/home/assignment-chooser/configuration/configuration.component.ts index 98628107..97f307c1 100644 --- a/src/app/components/home/assignment-chooser/configuration/configuration.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/configuration.component.ts @@ -1,6 +1,7 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core"; import { FileChooserComponent } from "@components/file-chooser/file-chooser.component"; import { Assignment } from "@models/Assignment.model"; +import { Repository } from "@models/Repository.model"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { Optional } from "@angular/core"; import { TranslateService } from "@ngx-translate/core"; @@ -78,7 +79,11 @@ export class ConfigurationComponent implements OnInit { } if (this.reposComp) { - this.assignment.repositories = this.reposComp.getFormControls.map((row) => row.value); + this.assignment.repositories = this.reposComp.getFormControls.map((row) => { + const repo = Repository.withJSON(row.value); + repo.provider = this.assignment.provider || "github"; + return repo; + }); } this.metadataModified = false; diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html index 43ad4510..f2fef326 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.html @@ -183,7 +183,7 @@
{{ 'EDIT-REPOSITORIES.NO-REPOSITORIES' | translate }}
{{ 'EDIT-REPOSITORIES.ADD-EMPTY-REPOSITORY' | translate }} - diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts index bc203a69..4a2841dc 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/edit-repositories.component.ts @@ -1,10 +1,13 @@ -import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; +import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild } from "@angular/core"; import { AbstractControl, AsyncValidatorFn, FormBuilder, FormGroup, ValidationErrors, ValidatorFn, Validators } from "@angular/forms"; import { Error, Repository } from "@models/Repository.model"; +import { Assignment } from "@models/Assignment.model"; +import { GitProviderType } from "@models/Account.model"; import { TranslateService } from "@ngx-translate/core"; import { CustomModalService } from "@shared/ui/custom-modal/custom-modal.service"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import { ToastService } from "@services/toast.service"; +import { AccountsService } from "@services/accounts.service"; import { GithubAuthService } from "@services/github-auth.service"; import { DataService } from "@services/data.service"; import { Observable, of, timer } from "rxjs"; @@ -19,7 +22,7 @@ export type SortDirection = "asc" | "desc" | ""; /** * This component lets the user edit the list of repositories of an assignment, manually by entering the URL of the repository, - * or by selecting it in the list of repositories retrieved from Github + * or by selecting it in the list of repositories retrieved from Github or GitLab */ @Component({ selector: "edit-repositories", @@ -27,6 +30,15 @@ export type SortDirection = "asc" | "desc" | ""; styleUrls: ["../configuration.component.scss", "./edit-repositories.component.scss"], }) export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent implements OnInit { + @Input() assignment?: Assignment; + + get provider(): GitProviderType { + return this.assignment?.provider || "github"; + } + + get isConnectedToProvider(): boolean { + return this.accountsService.hasAccount(this.provider); + } /** * The matrix that defines the transition relationships between the sorting modes. * @@ -127,6 +139,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent constructor( protected fb: FormBuilder, protected cdref: ChangeDetectorRef, + public accountsService: AccountsService, public githubAuthService: GithubAuthService, private modalService: CustomModalService, private translateService: TranslateService, @@ -154,12 +167,13 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent } /** - * Opens the modal to add one or several repositories from a list retrieved from Github. + * Opens the modal to add one or several repositories from a list retrieved from Github or GitLab. * If the modal is closed with the "Add" button, all the new selected repositories are saved in the assignment */ openAddRepositoriesModal() { let modalReference: CustomModalRef = this.modalService.open(ModalAddRepositoriesComponent, { size: "lg" }); modalReference.componentInstance.repoList = this.getFormControls.map((row) => Repository.withJSON(row.value)); + modalReference.componentInstance.provider = this.provider; modalReference.result.then( (result) => { @@ -171,6 +185,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent .some((repo2, index, array) => Repository.isEqual(repo1, repo2)), ); repoToadd.forEach((repo) => { + repo.provider = this.provider; this.addRow(repo); }); this.modify(); @@ -263,6 +278,7 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent tpGroup: [data?.tpGroup], errors: [data ? data.errors : []], avatarUrl: [avatarUrl], + provider: [data?.provider || this.provider], isEditable: false, isInvalid: false, save: {}, @@ -293,10 +309,11 @@ export class EditRepositoriesComponent extends BaseTabEditConfigurationComponent ); } else { return timer(1000).pipe( - switchMap(() => this.githubAuthService.verifyUserAccess(urlControl.value)), + switchMap(() => this.accountsService.getDataService(this.provider).verifyUserAccess(urlControl.value)), map((res) => { if (urlControl.parent && urlControl.parent.get("avatarUrl")) { - urlControl.parent.get("avatarUrl").setValue(res?.owner?.avatar_url || null, { emitEvent: false }); + const avatar = res?.avatar_url || res?.owner?.avatar_url || null; + urlControl.parent.get("avatarUrl").setValue(avatar, { emitEvent: false }); } return null; }), diff --git a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts index fbad8ba4..d5d455ef 100644 --- a/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts +++ b/src/app/components/home/assignment-chooser/configuration/edit-repositories/modal-add-repositories/modal-add-repositories.component.ts @@ -1,13 +1,5 @@ -import { - AfterViewInit, - Component, - ElementRef, - Input, - NgZone, - OnDestroy, - OnInit, - ViewChild, -} from "@angular/core"; +import { AfterViewInit, Component, ElementRef, Input, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core"; +import { GitProviderType } from "@models/Account.model"; import { Repository } from "@models/Repository.model"; import { CustomModalRef } from "@shared/ui/custom-modal/custom-modal-ref"; import { CommitsService } from "@services/commits.service"; @@ -20,11 +12,10 @@ import { debounceTime, map } from "rxjs/operators"; templateUrl: "./modal-add-repositories.component.html", styleUrls: ["./modal-add-repositories.component.scss"], }) -export class ModalAddRepositoriesComponent - implements OnInit, OnDestroy, AfterViewInit -{ +export class ModalAddRepositoriesComponent implements OnInit, OnDestroy, AfterViewInit { @ViewChild("reposTable", { read: ElementRef }) datatable: ElementRef; @Input() repoList: Repository[]; + @Input() provider: GitProviderType = "github"; rows: Repository[]; nameMatches: Repository[] = []; contentMatches: Repository[] = []; @@ -43,17 +34,10 @@ export class ModalAddRepositoriesComponent private searchFilterChanged: Subject; private searchFilter; - constructor( - public activeModal: CustomModalRef, - private commitsService: CommitsService, - private ngZone: NgZone - ) {} + constructor(public activeModal: CustomModalRef, private commitsService: CommitsService, private ngZone: NgZone) {} get hasGroupedMatches(): boolean { - return ( - Boolean(this.searchFilter) && - (this.contentMatches.length > 0 || this.nameMatches.length > 0) - ); + return Boolean(this.searchFilter) && (this.contentMatches.length > 0 || this.nameMatches.length > 0); } toggleNameMatches() { @@ -73,19 +57,17 @@ export class ModalAddRepositoriesComponent private getTargetSourceUrl(filter: string): string | undefined { if (!filter) return undefined; const clean = filter.trim(); - const urlMatch = clean.match( - /^(?:https?:\/\/github\.com\/|git@github\.com:)?([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i - ); + const urlMatch = clean.match(/^(?:https?:\/\/[^/]+\/|git@[^:]+:)?([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i); if (urlMatch) { - return `https://github.com/${urlMatch[1]}/${urlMatch[2]}`; + const defaultHost = this.provider === "gitlab" ? "gitlab.com" : "github.com"; + const hostMatch = clean.match(/^(?:https?:\/\/([^/]+)\/|git@([^:]+):)/i); + const host = hostMatch ? hostMatch[1] || hostMatch[2] : defaultHost; + return `https://${host}/${urlMatch[1]}/${urlMatch[2]}`; } return undefined; } - organizeHierarchy( - repositories: Repository[], - targetSourceUrl?: string - ): Repository[] { + organizeHierarchy(repositories: Repository[], targetSourceUrl?: string): Repository[] { if (!repositories || repositories.length === 0) { return []; } @@ -101,12 +83,8 @@ export class ModalAddRepositoriesComponent const rootRepos: Repository[] = []; const targetLower = targetSourceUrl ? targetSourceUrl.toLowerCase() : null; const targetRepo = targetLower ? urlMap.get(targetLower) : null; - const { owner } = targetSourceUrl - ? this.getSearchTerms(targetSourceUrl) - : { owner: undefined }; - const targetCore = targetRepo - ? Utils.extractAssignmentCore(targetRepo.name, owner) - : ""; + const { owner } = targetSourceUrl ? this.getSearchTerms(targetSourceUrl) : { owner: undefined }; + const targetCore = targetRepo ? Utils.extractAssignmentCore(targetRepo.name, owner) : ""; for (const repo of repositories) { const pUrl = repo.parentUrl ? repo.parentUrl.toLowerCase() : null; @@ -121,8 +99,7 @@ export class ModalAddRepositoriesComponent targetRepo && repo.url.toLowerCase() !== targetLower && targetCore && - (repo.name.toLowerCase().includes(targetCore) || - Utils.extractAssignmentCore(repo.name, owner).includes(targetCore)) + (repo.name.toLowerCase().includes(targetCore) || Utils.extractAssignmentCore(repo.name, owner).includes(targetCore)) ) { // Child fork belonging to target assignment (e.g. GitHub Classroom student repo created from template) if (!parentToChildren.has(targetLower)) { @@ -136,9 +113,7 @@ export class ModalAddRepositoriesComponent // If targetSourceUrl is provided, ensure target repository is at index 0 if (targetLower) { - const targetIdx = rootRepos.findIndex( - (r) => r.url && r.url.toLowerCase() === targetLower - ); + const targetIdx = rootRepos.findIndex((r) => r.url && r.url.toLowerCase() === targetLower); if (targetIdx > 0) { const [targetR] = rootRepos.splice(targetIdx, 1); rootRepos.unshift(targetR); @@ -170,9 +145,7 @@ export class ModalAddRepositoriesComponent if (!filter) return { name: "" }; const clean = filter.trim(); // 1. URL pattern (e.g. https://github.com/UE-TOAW/repo or UE-TOAW/repo) - const urlMatch = clean.match( - /^(?:https?:\/\/github\.com\/|git@github\.com:)?([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i - ); + const urlMatch = clean.match(/^(?:https?:\/\/[^/]+\/|git@[^:]+:)?([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i); if (urlMatch) { return { owner: urlMatch[1].toLowerCase(), @@ -180,9 +153,7 @@ export class ModalAddRepositoriesComponent }; } // 2. Org URL or single token (e.g. https://github.com/UE-TOAW or UE-TOAW) - const singleMatch = clean.match( - /^(?:https?:\/\/github\.com\/|git@github\.com:)?([a-zA-Z0-9_.-]+)\/?$/i - ); + const singleMatch = clean.match(/^(?:https?:\/\/[^/]+\/|git@[^:]+:)?([a-zA-Z0-9_.-]+)\/?$/i); if (singleMatch) { return { name: singleMatch[1].toLowerCase() }; } @@ -211,12 +182,7 @@ export class ModalAddRepositoriesComponent if (cleanName && repoUrl.includes(cleanName)) { return true; } - if ( - coreSearch && - (repoName.includes(coreSearch) || - coreRepo.includes(coreSearch) || - coreSearch.includes(coreRepo)) - ) { + if (coreSearch && (repoName.includes(coreSearch) || coreRepo.includes(coreSearch) || coreSearch.includes(coreRepo))) { return true; } return false; @@ -235,10 +201,7 @@ export class ModalAddRepositoriesComponent const cleanName = name.replace(/[-_]+$/, ""); const coreSearch = Utils.extractAssignmentCore(name, owner); const desc = (repo.description || "").toLowerCase(); - return ( - (Boolean(cleanName) && desc.includes(cleanName)) || - (Boolean(coreSearch) && desc.includes(coreSearch)) - ); + return (Boolean(cleanName) && desc.includes(cleanName)) || (Boolean(coreSearch) && desc.includes(coreSearch)); } private updateMatchesGrouping() { @@ -270,20 +233,13 @@ export class ModalAddRepositoriesComponent for (const group of groups) { const rootNameMatch = this.isNameMatch(group.root, this.searchFilter); - const childNameMatch = group.children.some((c) => - this.isNameMatch(c, this.searchFilter) - ); + const childNameMatch = group.children.some((c) => this.isNameMatch(c, this.searchFilter)); if (rootNameMatch || childNameMatch) { nameGroupRows.push(group.root, ...group.children); } else { - const rootContentMatch = this.isContentMatch( - group.root, - this.searchFilter - ); - const childContentMatch = group.children.some((c) => - this.isContentMatch(c, this.searchFilter) - ); + const rootContentMatch = this.isContentMatch(group.root, this.searchFilter); + const childContentMatch = group.children.some((c) => this.isContentMatch(c, this.searchFilter)); if (isGlobalSearch || rootContentMatch || childContentMatch) { contentGroupRows.push(group.root, ...group.children); @@ -296,10 +252,7 @@ export class ModalAddRepositoriesComponent } private updateResults(repositories: Repository[], isFirstPage = false) { - const filterAlreadyInAssignment = (repo: Repository) => - repo && - repo.url && - !this.repoList.some((r) => Repository.isEqual(r, repo)); + const filterAlreadyInAssignment = (repo: Repository) => repo && repo.url && !this.repoList.some((r) => Repository.isEqual(r, repo)); const targetUrl = this.getTargetSourceUrl(this.searchFilter); @@ -315,20 +268,13 @@ export class ModalAddRepositoriesComponent this.rows = this.organizeHierarchy(filtered, targetUrl); } else { const seenUrls = new Set(this.rows.map((r) => r.url)); - const newRepos = repositories.filter( - (repo) => filterAlreadyInAssignment(repo) && !seenUrls.has(repo.url) - ); - this.rows = this.organizeHierarchy( - [...this.rows, ...newRepos], - targetUrl - ); + const newRepos = repositories.filter((repo) => filterAlreadyInAssignment(repo) && !seenUrls.has(repo.url)); + this.rows = this.organizeHierarchy([...this.rows, ...newRepos], targetUrl); } if (!this.searchFilter) { const cachedUrls = new Set(this.allUserRepositories.map((r) => r.url)); - const newForCache = repositories.filter( - (repo) => repo && repo.url && !cachedUrls.has(repo.url) - ); + const newForCache = repositories.filter((repo) => repo && repo.url && !cachedUrls.has(repo.url)); this.allUserRepositories = [...this.allUserRepositories, ...newForCache]; } @@ -342,7 +288,7 @@ export class ModalAddRepositoriesComponent repositories: Repository[]; cursor?: string; }>, - isFirstPage = false + isFirstPage = false, ): Subscription { return response .pipe( @@ -350,43 +296,26 @@ export class ModalAddRepositoriesComponent this.done = res.completed; this.cursor = res.cursor; return res.repositories; - }) + }), ) .subscribe((repositories) => { this.updateResults(repositories, isFirstPage); }); } - private updateResultsWithAuthenticatedUser( - cursor?: string, - isFirstPage = false - ) { - this.processIntermediateResponse( - this.commitsService.getRepositoriesByAuthenticatedUser(cursor), - isFirstPage - ); + private updateResultsWithAuthenticatedUser(cursor?: string, isFirstPage = false) { + this.processIntermediateResponse(this.commitsService.getRepositoriesByAuthenticatedUser(cursor, 100, this.provider), isFirstPage); } - private updateResultsWithSearchFilter( - searchFilter: string, - cursor?: string, - isFirstPage = false - ) { - this.processIntermediateResponse( - this.commitsService.getRepositoriesBySearch(searchFilter, cursor), - isFirstPage - ); + private updateResultsWithSearchFilter(searchFilter: string, cursor?: string, isFirstPage = false) { + this.processIntermediateResponse(this.commitsService.getRepositoriesBySearch(searchFilter, cursor, 100, this.provider), isFirstPage); } private loadResults() { this.loading = true; const isFirstPage = !this.cursor; if (this.searchFilter) { - this.updateResultsWithSearchFilter( - this.searchFilter, - this.cursor, - isFirstPage - ); + this.updateResultsWithSearchFilter(this.searchFilter, this.cursor, isFirstPage); } else { this.updateResultsWithAuthenticatedUser(this.cursor, isFirstPage); } @@ -398,8 +327,7 @@ export class ModalAddRepositoriesComponent onScroll(event: Event) { const target = event.target as HTMLElement; - const endOfScrolling = - target.scrollHeight - target.scrollTop <= target.clientHeight + 50; + const endOfScrolling = target.scrollHeight - target.scrollTop <= target.clientHeight + 50; if (!this.loading && !this.done && endOfScrolling) { this.ngZone.run(() => { @@ -412,6 +340,7 @@ export class ModalAddRepositoriesComponent this.selected.forEach((repo) => { repo.tpGroup = this.tpGroup; repo.name = ""; + repo.provider = this.provider; }); this.activeModal.close(this.selected); } @@ -439,9 +368,7 @@ export class ModalAddRepositoriesComponent getChildForks(parentRepo: Repository): Repository[] { if (!parentRepo || !parentRepo.url) return []; const parentUrlLower = parentRepo.url.toLowerCase(); - return this.rows.filter( - (r) => r.isChildFork && r.parentUrl && r.parentUrl.toLowerCase() === parentUrlLower - ); + return this.rows.filter((r) => r.isChildFork && r.parentUrl && r.parentUrl.toLowerCase() === parentUrlLower); } hasChildForks(parentRepo: Repository): boolean { @@ -513,19 +440,13 @@ export class ModalAddRepositoriesComponent this.cursor = undefined; this.done = false; const seenUrls = new Set(this.repoList.map((r) => r.url)); - const filtered = this.allUserRepositories.filter( - (r) => !seenUrls.has(r.url) - ); + const filtered = this.allUserRepositories.filter((r) => !seenUrls.has(r.url)); this.rows = this.organizeHierarchy(filtered); this.applySort(); this.loading = false; } else { // If a full repository URL is typed/pasted, reset sorting so target repo stays in first position - if ( - /^(?:https?:\/\/github\.com\/|git@github\.com:)/i.test( - this.searchFilter - ) - ) { + if (/^(?:https?:\/\/[^/]+\/|git@[^:]+:)/i.test(this.searchFilter)) { this.sortBy = ""; } // Immediate client-side filter of cached repositories for instant feedback @@ -535,10 +456,7 @@ export class ModalAddRepositoriesComponent const seenUrls = new Set(this.repoList.map((r) => r.url)); const targetUrl = this.getTargetSourceUrl(this.searchFilter); const filtered = this.allUserRepositories.filter( - (r) => - !seenUrls.has(r.url) && - (this.isNameMatch(r, this.searchFilter) || - this.isContentMatch(r, this.searchFilter)) + (r) => !seenUrls.has(r.url) && (this.isNameMatch(r, this.searchFilter) || this.isContentMatch(r, this.searchFilter)), ); this.rows = this.organizeHierarchy(filtered, targetUrl); this.applySort(); @@ -628,14 +546,12 @@ export class ModalAddRepositoriesComponent this.done = false; this.searchFilterChanged = new Subject(); this.searchFilter = ""; - this.searchSubscription = this.searchFilterChanged - .pipe(debounceTime(600)) - .subscribe((searchFilter) => { - if (searchFilter) { - this.cursor = undefined; - this.loadResults(); - } - }); + this.searchSubscription = this.searchFilterChanged.pipe(debounceTime(600)).subscribe((searchFilter) => { + if (searchFilter) { + this.cursor = undefined; + this.loadResults(); + } + }); } ngOnInit() { @@ -646,10 +562,7 @@ export class ModalAddRepositoriesComponent ngAfterViewInit() { this.ngZone.runOutsideAngular(() => { if (this.datatable && this.datatable.nativeElement) { - this.datatable.nativeElement.addEventListener( - "scroll", - this.onScroll.bind(this) - ); + this.datatable.nativeElement.addEventListener("scroll", this.onScroll.bind(this)); } }); } @@ -661,10 +574,7 @@ export class ModalAddRepositoriesComponent ngOnDestroy(): void { this.searchSubscription.unsubscribe(); if (this.datatable && this.datatable.nativeElement) { - this.datatable.nativeElement.removeEventListener( - "scroll", - this.onScroll.bind(this) - ); + this.datatable.nativeElement.removeEventListener("scroll", this.onScroll.bind(this)); } } } diff --git a/src/app/models/Assignment.model.ts b/src/app/models/Assignment.model.ts index 076dfc7f..e95993e4 100644 --- a/src/app/models/Assignment.model.ts +++ b/src/app/models/Assignment.model.ts @@ -4,6 +4,7 @@ import { Repository } from "@models/Repository.model"; import { Session } from "@models/Session.model"; import { NgbTimeStruct } from "@ng-bootstrap/ng-bootstrap"; import { Type } from "class-transformer"; +import { GitProviderType } from "@models/GitAuthProvider.model"; /** * A practical course, with sessions, questions and @@ -12,7 +13,15 @@ import { Type } from "class-transformer"; export class Assignment { id: number; uiStatus?: "prepared" | "ongoing" | "finished" | "default"; - uiType?: "github" | "gitlab"; + provider: GitProviderType = "github"; + + get uiType(): GitProviderType { + return this.provider || "github"; + } + + set uiType(value: GitProviderType) { + this.provider = value || "github"; + } @Type(() => Metadata) metadata: Metadata; diff --git a/src/app/models/Commit.model.ts b/src/app/models/Commit.model.ts index 959ff3d2..15de9705 100644 --- a/src/app/models/Commit.model.ts +++ b/src/app/models/Commit.model.ts @@ -119,6 +119,20 @@ export class Commit { ); } + /** + * Initialize a Commit from the GitLab REST API JSON object + * @param json The GitLab REST JSON node + * @returns A commit + */ + static withGitlabJSON(json): Commit { + return new Commit( + json.message || json.title || "", + json.author_name || "Unknown", + json.committed_date ? new Date(json.committed_date) : new Date(json.authored_date || Date.now()), + json.web_url || "", + ); + } + /** * Updates the isEnSeance variable * @param startDate The date before which commits are not processed diff --git a/src/app/models/GitAuthProvider.model.ts b/src/app/models/GitAuthProvider.model.ts index 7e31ab0c..7723315b 100644 --- a/src/app/models/GitAuthProvider.model.ts +++ b/src/app/models/GitAuthProvider.model.ts @@ -1,6 +1,8 @@ import { Observable } from "rxjs"; import { Account, GitProviderType } from "./Account.model"; +export { GitProviderType } from "./Account.model"; + export interface GitAuthProvider { readonly provider: GitProviderType; readonly name: string; diff --git a/src/app/models/GitDataService.model.ts b/src/app/models/GitDataService.model.ts new file mode 100644 index 00000000..97805beb --- /dev/null +++ b/src/app/models/GitDataService.model.ts @@ -0,0 +1,36 @@ +import { Observable } from "rxjs"; +import { GitProviderType } from "@models/Account.model"; +import { Repository } from "@models/Repository.model"; + +export interface GitDataSearchResult { + completed: boolean; + repositories: Repository[]; + cursor?: string; +} + +/** + * Interface representing a Git data provider service (GitHub, GitLab, etc.) + */ +export interface GitDataService { + readonly provider: GitProviderType; + + /** + * Retrieves repository metadata (README.md, IDENTITY.json) and commits for a list of repositories + */ + getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable; + + /** + * Fetches repositories accessible by or belonging to the authenticated user + */ + getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit?: number): Observable; + + /** + * Searches repositories matching the search filter (search keyword, org/group name, repo path) + */ + getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit?: number): Observable; + + /** + * Verifies that the authenticated user has access to the specified repository URL + */ + verifyUserAccess(repoUrl: string): Observable; +} diff --git a/src/app/models/Repository.model.ts b/src/app/models/Repository.model.ts index 6f184af0..84c66bff 100644 --- a/src/app/models/Repository.model.ts +++ b/src/app/models/Repository.model.ts @@ -1,4 +1,5 @@ import { Commit } from "@models/Commit.model"; +import { GitProviderType } from "@models/Account.model"; import * as assert from "assert"; import { Exclude, Type } from "class-transformer"; import { Utils } from "../services/utils"; @@ -21,6 +22,7 @@ export class Repository { * @param isFork Whether this repository is a fork * @param parentUrl The parent repository URL if this is a fork * @param isChildFork Whether this repository is displayed as a child fork row + * @param provider The Git provider (github or gitlab) */ constructor( public url: string, @@ -31,12 +33,14 @@ export class Repository { public description?: string, public isFork?: boolean, public parentUrl?: string, - public isChildFork?: boolean + public isChildFork?: boolean, + public provider?: GitProviderType, ) { this.commits = commits || []; this.errors = errors || []; this.isFork = Boolean(isFork); this.isChildFork = Boolean(isChildFork); + this.provider = provider || (url?.includes("gitlab") ? "gitlab" : "github"); } /** @@ -54,11 +58,7 @@ export class Repository { * @param max_length * @returns A string with length below max_length */ - static getFormattedName( - last_name: string, - first_name: string, - max_length: number - ): string { + static getFormattedName(last_name: string, first_name: string, max_length: number): string { assert(max_length > 0); if (!last_name && !first_name) { @@ -98,35 +98,23 @@ export class Repository { if (displayName.length > Utils.OVERVIEW_NAME_LENGTH_LIMIT) { let numberOfSpace = (displayName.match(/ /g) || []).length; if (numberOfSpace === 0) { - displayName = - displayName.substring(0, Utils.OVERVIEW_NAME_LENGTH_LIMIT - 1) + "."; + displayName = displayName.substring(0, Utils.OVERVIEW_NAME_LENGTH_LIMIT - 1) + "."; } else if (numberOfSpace == 1) { let [lastName, firstName] = displayName.split(" "); - displayName = Repository.getFormattedName( - firstName, - lastName, - Utils.OVERVIEW_NAME_LENGTH_LIMIT - ); + displayName = Repository.getFormattedName(firstName, lastName, Utils.OVERVIEW_NAME_LENGTH_LIMIT); } else { let findLastName = displayName.match(/^([A-Z\-]+ )*/g); if (findLastName.length === 1 && findLastName[0].trim().length !== 0) { displayName = Repository.getFormattedName( findLastName[0].trim(), displayName.substring(findLastName[0].length), - Utils.OVERVIEW_NAME_LENGTH_LIMIT + Utils.OVERVIEW_NAME_LENGTH_LIMIT, ); } else { let lastspace = displayName.lastIndexOf(" "); - let [lastName, firstName] = [ - displayName.substring(0, lastspace), - displayName.substring(lastspace + 1), - ]; + let [lastName, firstName] = [displayName.substring(0, lastspace), displayName.substring(lastspace + 1)]; - displayName = Repository.getFormattedName( - lastName, - firstName, - Utils.OVERVIEW_NAME_LENGTH_LIMIT - ); + displayName = Repository.getFormattedName(lastName, firstName, Utils.OVERVIEW_NAME_LENGTH_LIMIT); } } } @@ -152,7 +140,9 @@ export class Repository { json.errors, json.description, json.isFork, - json.parentUrl + json.parentUrl, + json.isChildFork, + json.provider, ); } } diff --git a/src/app/services/accounts.service.spec.ts b/src/app/services/accounts.service.spec.ts index aee5bf34..4abd7659 100644 --- a/src/app/services/accounts.service.spec.ts +++ b/src/app/services/accounts.service.spec.ts @@ -213,4 +213,21 @@ describe("AccountsService", () => { service.disconnectAccount("acc-gitlab-cloud"); expect(gitlabAuthServiceSpy.signOut).toHaveBeenCalled(); }); + + it("should return correct status for hasAccount", () => { + githubAuthServiceSpy.isSignedIn.and.returnValue(true); + gitlabAuthServiceSpy.isSignedIn.and.returnValue(false); + + expect(service.hasAccount("github")).toBeTrue(); + expect(service.hasAccount("gitlab")).toBeFalse(); + }); + + it("should return data service if registered", () => { + const fakeGithubData = { provider: "github" } as any; + const fakeGitlabData = { provider: "gitlab" } as any; + const customService = new AccountsService(githubAuthServiceSpy, gitlabAuthServiceSpy, fakeGithubData, fakeGitlabData); + + expect(customService.getDataService("github")).toBe(fakeGithubData); + expect(customService.getDataService("gitlab")).toBe(fakeGitlabData); + }); }); diff --git a/src/app/services/accounts.service.ts b/src/app/services/accounts.service.ts index c54eb0ae..e9624b7f 100644 --- a/src/app/services/accounts.service.ts +++ b/src/app/services/accounts.service.ts @@ -1,9 +1,12 @@ -import { Injectable, OnDestroy } from "@angular/core"; +import { Injectable, OnDestroy, Optional } from "@angular/core"; import { BehaviorSubject, Observable, Subscription } from "rxjs"; import { GithubAuthService } from "@services/github-auth.service"; import { GitlabAuthService } from "@services/gitlab-auth.service"; +import { GithubDataService } from "@services/github-data.service"; +import { GitlabDataService } from "@services/gitlab-data.service"; import { Account, GitProviderType } from "@models/Account.model"; import { GitAuthProvider } from "@models/GitAuthProvider.model"; +import { GitDataService } from "@models/GitDataService.model"; @Injectable({ providedIn: "root", @@ -14,13 +17,26 @@ export class AccountsService implements OnDestroy { private accountsSubject = new BehaviorSubject([]); private authSubscription = new Subscription(); private providers = new Map(); + private dataServices = new Map(); - constructor(public githubAuthService: GithubAuthService, public gitlabAuthService: GitlabAuthService) { + constructor( + public githubAuthService: GithubAuthService, + public gitlabAuthService: GitlabAuthService, + @Optional() public githubDataService?: GithubDataService, + @Optional() public gitlabDataService?: GitlabDataService, + ) { this.accounts$ = this.accountsSubject.asObservable(); this.registerProvider(this.githubAuthService); this.registerProvider(this.gitlabAuthService); + if (this.githubDataService) { + this.dataServices.set("github", this.githubDataService); + } + if (this.gitlabDataService) { + this.dataServices.set("gitlab", this.gitlabDataService); + } + this.updateAccounts(); } @@ -36,6 +52,18 @@ export class AccountsService implements OnDestroy { return this.gitlabAuthService.isSignedIn(); } + hasAccount(providerType: GitProviderType): boolean { + return Boolean(this.providers.get(providerType)?.isSignedIn()); + } + + getDataService(providerType: GitProviderType = "github"): GitDataService { + const service = this.dataServices.get(providerType); + if (!service) { + return this.githubDataService; + } + return service; + } + ngOnDestroy(): void { this.authSubscription.unsubscribe(); } diff --git a/src/app/services/commits.service.ts b/src/app/services/commits.service.ts index d43f587e..e3ff8bf6 100644 --- a/src/app/services/commits.service.ts +++ b/src/app/services/commits.service.ts @@ -1,262 +1,69 @@ -import { HttpClient, HttpHeaders } from "@angular/common/http"; import { Injectable } from "@angular/core"; +import { GitProviderType } from "@models/Account.model"; import { Commit, CommitColor } from "@models/Commit.model"; -import { Error, ErrorType, Repository } from "@models/Repository.model"; +import { GitDataSearchResult } from "@models/GitDataService.model"; +import { Repository } from "@models/Repository.model"; import { TranslateService } from "@ngx-translate/core"; -import * as moment from "moment"; -import { EMPTY, forkJoin, Observable, of } from "rxjs"; -import { catchError, defaultIfEmpty, expand, map, reduce, shareReplay, switchMap, tap } from "rxjs/operators"; -import { GithubAuthService } from "./github-auth.service"; +import { Observable, of } from "rxjs"; +import { AccountsService } from "./accounts.service"; import { Utils } from "./utils"; /** - * This service retrieves repository data from Github + * Façade service retrieving repository data from Git providers (GitHub, GitLab, etc.) + * and computing graph statistics. */ @Injectable({ providedIn: "root", }) export class CommitsService { - /** - * Headers to use when sending HTTP requests - */ - get headers(): HttpHeaders { - return new HttpHeaders({ - "Content-Type": "application/json", - Authorization: "token " + this.githubAuthService.token, - }); - } - - /** - * CommitsService constructor - * @param http - * @param githubAuthService - * @param translateService - */ - constructor(private http: HttpClient, private githubAuthService: GithubAuthService, private translateService: TranslateService) {} + constructor(private accountsService: AccountsService, private translateService: TranslateService) {} /** - * Gets readMe and commits of every repository + * Gets readMe and commits of every repository by delegating to the appropriate GitDataService * @param repoTab The repositories to get data from * @param startDate The date before which commits are not retrieved * @param endDate The date after which commits are not retrieved */ getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable { - const t0 = performance.now(); - - const CHUNK_SIZE = 4; - const chunks: Repository[][] = []; - for (let i = 0; i < repoTab.length; i += CHUNK_SIZE) { - chunks.push(repoTab.slice(i, i + CHUNK_SIZE)); - } - - if (chunks.length === 0) { + if (!repoTab || repoTab.length === 0) { return of([]); } - - const chunkObservables = chunks.map((chunk) => this.getBatchedRepositories(chunk, startDate, endDate)); - - return forkJoin(chunkObservables).pipe( - map((results) => results.reduce((acc, val) => acc.concat(val), [])), - tap(() => { - const t1 = performance.now(); - console.log(`[Performance] getRepositories (GraphQL Batched) took ${Math.round(t1 - t0)} ms for ${repoTab.length} repos`); - }), - ); + const provider: GitProviderType = repoTab[0]?.provider || "github"; + return this.accountsService.getDataService(provider).getRepositories(repoTab, startDate, endDate); } - private getBatchedRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable { - const repoInfos = repoTab.map((repo, index) => { - const parts = repo.url.split("/"); - return { - alias: `repo${index}`, - owner: parts[3], - name: parts[4], - repository: repo, - }; - }); - - const hasSince = !!startDate; - const hasUntil = !!endDate; - - let query = "query"; - const queryParams = []; - if (hasSince) queryParams.push("$since: GitTimestamp!"); - if (hasUntil) queryParams.push("$until: GitTimestamp!"); - if (queryParams.length > 0) { - query += "(" + queryParams.join(", ") + ")"; - } - query += " {\n"; - - repoInfos.forEach((info) => { - let historyArgs = "first: 100"; - if (hasSince) historyArgs += ", since: $since"; - if (hasUntil) historyArgs += ", until: $until"; - - query += ` - ${info.alias}: repository(owner: "${info.owner}", name: "${info.name}") { -${this.getCommitHistoryQueryFragment(historyArgs)} - identity: object(expression: "HEAD:IDENTITY.json") { - ... on Blob { text } - } - readme: object(expression: "HEAD:README.md") { - ... on Blob { text } - } - } - `; - }); - query += "}"; - - let sinceMoment = startDate ? moment(startDate).toDate().toISOString() : null; - let untilMoment = endDate ? moment(endDate).toDate().toISOString() : null; - - const variables: any = {}; - if (sinceMoment) variables.since = sinceMoment; - if (untilMoment) variables.until = untilMoment; - - return this.http - .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) - .pipe( - switchMap((response) => { - if (response.errors) { - console.error("GraphQL reported errors:", response.errors); - } - - const results = []; - const reposWithNextPage = []; - - repoInfos.forEach((info) => { - const repoData = response?.data?.[info.alias]; - if (!repoData) { - info.repository.errors.push(new Error(ErrorType.COMMITS_NOT_FOUND)); - results.push(info.repository); - return; - } - - const identityData = repoData.identity?.text; - const readmeData = repoData.readme?.text; - let name = ""; - let tpGroup = ""; - - if (identityData) { - try { - const identityParsed = JSON.parse(identityData); - name = this.getNameFromIdentity(identityParsed); - tpGroup = identityParsed.group; - } catch (e) {} - } else if (readmeData) { - name = this.getNameFromReadMe(readmeData); - tpGroup = this.getTPGroupFromReadMe(readmeData); - } - - const history = repoData.defaultBranchRef?.target?.history; - let commits = []; - let hasNextPage = false; - let endCursor = null; - - if (history) { - commits = history.nodes.map((node) => Commit.withGraphQLJSON(node)); - hasNextPage = history.pageInfo.hasNextPage; - endCursor = history.pageInfo.endCursor; - } - - info.repository.commits = commits; - - if (!info.repository.name) { - info.repository.name = name || info.repository.getNameFromUrl(); - } - if (!info.repository.tpGroup) { - info.repository.tpGroup = tpGroup || Utils.DEFAULT_TP_GROUP; - } - - results.push(info.repository); - - if (hasNextPage) { - reposWithNextPage.push({ - repository: info.repository, - owner: info.owner, - name: info.name, - cursor: endCursor, - }); - } - }); - - if (reposWithNextPage.length > 0) { - return this.fetchRemainingCommits(reposWithNextPage, startDate, endDate).pipe(map(() => results)); - } else { - return of(results); - } - }), - catchError((error) => { - console.error("GraphQL batch error", error); - return of(repoTab); - }), - ); + /** + * Fetch authenticated user's repositories from the Git provider + * + * @param cursor The cursor of repositories to fetch + * @param pageLimit The number of repositories to fetch per page + * @param provider The provider to query ("github" or "gitlab") + * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor + */ + getRepositoriesByAuthenticatedUser( + cursor?: string, + pageLimit = 100, + provider: GitProviderType = "github", + ): Observable { + return this.accountsService.getDataService(provider).getRepositoriesByAuthenticatedUser(cursor, pageLimit); } - private fetchRemainingCommits( - reposWithNextPage: { - repository: Repository; - owner: string; - name: string; - cursor: string; - }[], - startDate?: string, - endDate?: string, - ): Observable { - let query = "query($since: GitTimestamp, $until: GitTimestamp) {\n"; - - reposWithNextPage.forEach((info, index) => { - query += ` - repo${index}: repository(owner: "${info.owner}", name: "${info.name}") { -${this.getCommitHistoryQueryFragment(`first: 100, after: "${info.cursor}", since: $since, until: $until`)} - } - `; - }); - query += "}"; - - let sinceMoment = startDate ? moment(startDate).toDate().toISOString() : null; - let untilMoment = endDate ? moment(endDate).toDate().toISOString() : null; - - const variables: any = {}; - if (sinceMoment) variables.since = sinceMoment; - if (untilMoment) variables.until = untilMoment; - - return this.http - .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) - .pipe( - switchMap((response) => { - if (response.errors) { - console.error("GraphQL fetchRemainingCommits errors:", response.errors); - } - - const nextReposWithNextPage = []; - - reposWithNextPage.forEach((info, index) => { - const history = response?.data?.[`repo${index}`]?.defaultBranchRef?.target?.history; - if (history) { - const moreCommits = history.nodes.map((node) => Commit.withGraphQLJSON(node)); - info.repository.commits.push(...moreCommits); - - if (history.pageInfo.hasNextPage) { - nextReposWithNextPage.push({ - ...info, - cursor: history.pageInfo.endCursor, - }); - } - } - }); - - if (nextReposWithNextPage.length > 0) { - return this.fetchRemainingCommits(nextReposWithNextPage, startDate, endDate); - } else { - return of(null); - } - }), - catchError((error) => { - console.error("fetchRemainingCommits batch error", error); - return of(null); - }), - ); + /** + * Fetch repositories from the Git provider according to the given search filter + * + * @param searchFilter The search filter used to fetch the repositories + * @param cursor The cursor of repositories to fetch + * @param pageLimit The number of repositories to fetch per page + * @param provider The provider to query ("github" or "gitlab") + * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor + */ + getRepositoriesBySearch( + searchFilter: string, + cursor?: string, + pageLimit = 100, + provider: GitProviderType = "github", + ): Observable { + return this.accountsService.getDataService(provider).getRepositoriesBySearch(searchFilter, cursor, pageLimit); } /** @@ -482,554 +289,23 @@ ${this.getCommitHistoryQueryFragment(`first: 100, after: "${info.cursor}", since return questions.includes(q2) && this.compareQuestions(q1, q2, questions) > 0; } - /** - * Fetch authenticated user's repositories from Github - * - * @param cursor The cursor of repositories to fetch - * @param pageLimit The number of repositories to fetch per page - * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor - */ - getRepositoriesByAuthenticatedUser( - cursor?: string, - pageLimit = 100, - ): Observable<{ - completed: boolean; - repositories: Repository[]; - cursor?: string; - }> { - const query = ` - query($cursor: String, $pageLimit: Int!) { - viewer { - repositories( - first: $pageLimit - after: $cursor - affiliations: [OWNER, COLLABORATOR, ORGANIZATION_MEMBER] - orderBy: { field: CREATED_AT, direction: DESC } - ) { - pageInfo { - endCursor - hasNextPage - } - nodes { - name - url - description - isFork - parent { - name - url - } - forks(first: 100) { - nodes { - name - url - description - isFork - } - } - } - } - } - } - `; - const variables = { cursor, pageLimit }; - return this.http - .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) - .pipe( - map((response) => { - const repositoriesData = response?.data?.viewer?.repositories; - if (!repositoriesData) { - return { - completed: true, - repositories: [], - cursor: undefined, - }; - } - - const reposMap = this.extractRepositoriesFromNodes(repositoriesData.nodes || []); - - return { - completed: !repositoriesData.pageInfo?.hasNextPage, - repositories: Array.from(reposMap.values()), - cursor: repositoriesData.pageInfo?.endCursor, - }; - }), - catchError((err) => { - console.error("Error fetching authenticated user repositories", err); - return of({ - completed: true, - repositories: [], - cursor: undefined, - }); - }), - ); - } - - private userOrganizations$: Observable = null; - - /** - * Fetch organizations the authenticated user belongs to (cached) - */ - getUserOrganizations(): Observable { - if (this.userOrganizations$) { - return this.userOrganizations$; - } - const query = ` - query { - viewer { - organizations(first: 100) { - nodes { - login - } - } - } - } - `; - this.userOrganizations$ = this.http - .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query }, { headers: this.headers }) - .pipe( - map((response) => { - const nodes = response?.data?.viewer?.organizations?.nodes || []; - return nodes.map((org: any) => org.login).filter(Boolean); - }), - catchError((err) => { - console.error("Error fetching user organizations", err); - return of([]); - }), - shareReplay(1), - ); - return this.userOrganizations$; - } - - /** - * Helper to extract repositories and forks from GraphQL response nodes into a Map - */ - private extractRepositoriesFromNodes( - nodes: any[], - reposMap: Map = new Map(), - ): Map { - if (!nodes) return reposMap; - - nodes.forEach((node: any) => { - if (!node || !node.url) return; - - const parentUrl = node.parent?.url || undefined; - const isFork = Boolean(node.isFork || parentUrl); - - if (!reposMap.has(node.url)) { - reposMap.set(node.url, new Repository(node.url, node.name, undefined, undefined, undefined, node.description, isFork, parentUrl)); - } else { - const existing = reposMap.get(node.url); - if (!existing.parentUrl && parentUrl) { - existing.parentUrl = parentUrl; - existing.isFork = true; - } - } - - if (node.forks?.nodes) { - node.forks.nodes.forEach((fork: any) => { - if (fork && fork.url) { - if (!reposMap.has(fork.url)) { - reposMap.set( - fork.url, - new Repository(fork.url, fork.name, undefined, undefined, undefined, fork.description, true, node.url), - ); - } else { - const existingFork = reposMap.get(fork.url); - existingFork.parentUrl = node.url; - existingFork.isFork = true; - } - } - }); - } - }); - - return reposMap; - } - - /** - * Fetch repositories from Github according to the given search filter - * - * @param searchFilter The search filter used to fetch the repositories - * @param cursor The cursor of repositories to fetch - * @param pageLimit The number of repositories to fetch per page - * @return An object containing the repositories, a boolean indicating if the results are complete and the next cursor - */ - getRepositoriesBySearch( - searchFilter: string, - cursor?: string, - pageLimit = 100, - ): Observable<{ - completed: boolean; - repositories: Repository[]; - cursor?: string; - }> { - const cleanFilter = searchFilter ? searchFilter.trim() : ""; - if (!cleanFilter) { - return this.getRepositoriesByAuthenticatedUser(cursor, pageLimit); - } - - // 1. Check if the searchFilter is an organization URL (e.g. https://github.com/UE-TOAW or https://github.com/UE-TOAW/) - const orgUrlMatch = cleanFilter.match(/^(?:https?:\/\/github\.com\/|git@github\.com:)([a-zA-Z0-9_.-]+)\/?$/i); - let effectiveFilter = cleanFilter; - if (orgUrlMatch) { - effectiveFilter = orgUrlMatch[1]; - } - - // 2. Check if searchFilter is a repository URL or an "owner/name" pattern - // (e.g. "https://github.com/UE-TOAW/repo" or "UE-TOAW/tp-m2sdl-2024-friendsofmine-") - const repoMatch = effectiveFilter.match( - /^(?:https?:\/\/github\.com\/|git@github\.com:|^)([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i, - ); - - if (repoMatch) { - const owner = repoMatch[1]; - const name = repoMatch[2]; - const corePattern = Utils.extractAssignmentCore(name, owner); - const qOrg = corePattern ? `${corePattern} org:${owner} fork:true` : `org:${owner} fork:true`; - - const scopedQuery = ` - query($owner: String!, $name: String!, $qOrg: String!, $pageLimit: Int!, $cursor: String) { - repository(owner: $owner, name: $name) { - name - url - description - isFork - parent { - name - url - } - forks(first: 100) { - nodes { - name - url - description - isFork - parent { - name - url - } - } - } - } - orgSearch: search(query: $qOrg, type: REPOSITORY, first: $pageLimit, after: $cursor) { - pageInfo { - hasNextPage - endCursor - } - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - } - `; - const variables = { - owner, - name, - qOrg, - pageLimit, - cursor: cursor || null, - }; - return this.http - .post<{ data?: any; errors?: any[] }>( - "https://api.github.com/graphql", - { query: scopedQuery, variables }, - { headers: this.headers }, - ) - .pipe( - map((response) => { - const reposMap = new Map(); - - if (response?.data) { - // 1. Direct match repository is added FIRST - if (response.data.repository) { - this.extractRepositoriesFromNodes([response.data.repository], reposMap); - } - // 2. Organization search matches (e.g. all student repos in that org) - if (response.data.orgSearch?.nodes) { - this.extractRepositoriesFromNodes(response.data.orgSearch.nodes, reposMap); - } - } - - return { - completed: !response?.data?.orgSearch?.pageInfo?.hasNextPage, - repositories: Array.from(reposMap.values()), - cursor: response?.data?.orgSearch?.pageInfo?.endCursor, - }; - }), - catchError((err) => { - console.error("Error searching owner/name repositories", err); - return of({ - completed: true, - repositories: [], - cursor: undefined, - }); - }), - ); - } - - // If cursor is provided for subsequent pages, query globalSearch with after cursor - if (cursor) { - const cleanTerm = cleanFilter.replace(/[-_]+$/, ""); - const coreTerm = Utils.extractAssignmentCore(cleanTerm); - const searchKeyword = coreTerm || cleanTerm; - const query = ` - query($queryString: String!, $cursor: String, $pageLimit: Int!) { - globalSearch: search(query: $queryString, type: REPOSITORY, first: $pageLimit, after: $cursor) { - pageInfo { - hasNextPage - endCursor - } - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - } - `; - const variables = { - queryString: (searchKeyword ? `${searchKeyword} ` : "") + "fork:true", - cursor, - pageLimit, - }; - return this.http - .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) - .pipe( - map((response) => { - const searchData = response?.data?.globalSearch; - const reposMap = this.extractRepositoriesFromNodes(searchData?.nodes || []); - return { - completed: !searchData?.pageInfo?.hasNextPage, - repositories: Array.from(reposMap.values()), - cursor: searchData?.pageInfo?.endCursor, - }; - }), - catchError((err) => { - console.error("Error searching repositories (page)", err); - return of({ - completed: true, - repositories: [], - cursor: undefined, - }); - }), - ); - } - - // 3. Free text search / Organization name: scope to authenticated user, accessible organizations and global repositories - return this.getUserOrganizations().pipe( - switchMap((orgs) => { - const isUserOrg = orgs && orgs.some((o) => o.toLowerCase() === effectiveFilter.toLowerCase()); - - const cleanTerm = effectiveFilter.replace(/[-_]+$/, ""); - const coreTerm = Utils.extractAssignmentCore(cleanTerm); - const searchKeyword = coreTerm || cleanTerm; - - const queryArgs = ["$qGlobal: String!", "$qUser: String!", "$pageLimit: Int!"]; - let queryBody = ` - globalSearch: search(query: $qGlobal, type: REPOSITORY, first: $pageLimit) { - pageInfo { - hasNextPage - endCursor - } - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - userSearch: search(query: $qUser, type: REPOSITORY, first: $pageLimit) { - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - `; - - const variables: any = { - qGlobal: searchKeyword ? `${searchKeyword} fork:true` : "fork:true", - qUser: searchKeyword ? `${searchKeyword} user:@me fork:true` : "user:@me fork:true", - pageLimit, - }; - - if (isUserOrg) { - queryArgs.push("$login: String!", "$qOwnerOrg: String!"); - queryBody += ` - ownerOrgSearch: search(query: $qOwnerOrg, type: REPOSITORY, first: $pageLimit) { - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - repositoryOwner(login: $login) { - repositories(first: 100, affiliations: [OWNER, COLLABORATOR]) { - nodes { - name - url - description - isFork - parent { - name - url - } - } - } - } - `; - variables.login = effectiveFilter; - variables.qOwnerOrg = `org:${effectiveFilter} fork:true`; - } else if (orgs && orgs.length > 0) { - // Search each of the user's accessible organizations for this partial keyword - orgs.forEach((org, index) => { - const orgVar = `qOrg_${index}`; - queryArgs.push(`$${orgVar}: String!`); - queryBody += ` - orgSearch_${index}: search(query: $${orgVar}, type: REPOSITORY, first: $pageLimit) { - nodes { - ... on Repository { - name - url - description - isFork - parent { - name - url - } - } - } - } - `; - variables[orgVar] = searchKeyword ? `${searchKeyword} org:${org} fork:true` : `org:${org} fork:true`; - }); - } - - const fullQuery = `query(${queryArgs.join(", ")}) {\n${queryBody}\n}`; - - return this.http - .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query: fullQuery, variables }, { headers: this.headers }) - .pipe( - map((response) => { - const reposMap = new Map(); - - if (response?.data) { - Object.keys(response.data).forEach((key) => { - const field = response.data[key]; - if (key === "repositoryOwner") { - this.extractRepositoriesFromNodes(field?.repositories?.nodes || [], reposMap); - } else if (field?.nodes) { - this.extractRepositoriesFromNodes(field.nodes, reposMap); - } - }); - } - - return { - completed: !response?.data?.globalSearch?.pageInfo?.hasNextPage, - repositories: Array.from(reposMap.values()), - cursor: response?.data?.globalSearch?.pageInfo?.endCursor, - }; - }), - catchError((err) => { - console.error("Error searching repositories across user, orgs & global", err); - return of({ - completed: true, - repositories: [], - cursor: undefined, - }); - }), - ); - }), - ); - } - getNameFromReadMe(readme: string): string { - if (!readme) { - return null; - } - let lastNameToken = this.translateService.instant("TOKEN-LAST-NAME"); - let firstNameToken = this.translateService.instant("TOKEN-FIRST-NAME"); - let lastName = this.getValueWithToken(`${lastNameToken}.*:`, readme); - let firstName = this.getValueWithToken(`${firstNameToken}.*:`, readme); - return [lastName, firstName].filter(Boolean).join(" "); + return Utils.getNameFromReadMe( + readme, + this.translateService.instant("TOKEN-LAST-NAME"), + this.translateService.instant("TOKEN-FIRST-NAME"), + ); } getNameFromIdentity(identity: any): string { - return [identity.last_name, identity.first_name].filter(Boolean).join(" "); + return Utils.getNameFromIdentity(identity); } getTPGroupFromReadMe(readme: string): string { - if (!readme) { - return null; - } - let tpGroup = this.getValueWithToken("-\\s*\\[\\S\\]", readme); - return tpGroup; + return Utils.getTPGroupFromReadMe(readme); } getValueWithToken(token: string, text: string): string { - let regex = new RegExp(`(?<=${token}).*`); - let value = text.match(regex); - return value ? value[0].trim() : null; - } - - private getCommitHistoryQueryFragment(historyArgs: string): string { - return ` - defaultBranchRef { - target { - ... on Commit { - history(${historyArgs}) { - pageInfo { - hasNextPage - endCursor - } - nodes { - message - author { - name - } - committedDate - url - } - } - } - } - }`; + return Utils.getValueWithToken(token, text); } } diff --git a/src/app/services/database.service.ts b/src/app/services/database.service.ts index d3f84d8b..c9806a19 100644 --- a/src/app/services/database.service.ts +++ b/src/app/services/database.service.ts @@ -58,6 +58,27 @@ export class DatabaseService extends Dexie { } }); }); + this.version(4) + .stores({ + assignments: "++id, metadata.title, provider", + }) + .upgrade((tx) => { + return tx + .table("assignments") + .toCollection() + .modify((assignment) => { + if (!assignment.provider) { + assignment.provider = "github"; + } + if (assignment.repositories && Array.isArray(assignment.repositories)) { + assignment.repositories.forEach((repo: any) => { + if (!repo.provider) { + repo.provider = "github"; + } + }); + } + }); + }); this.assignments = this.table("assignments"); this.assignments.mapToClass(Assignment); } diff --git a/src/app/services/github-data.service.spec.ts b/src/app/services/github-data.service.spec.ts new file mode 100644 index 00000000..f4e6ba94 --- /dev/null +++ b/src/app/services/github-data.service.spec.ts @@ -0,0 +1,80 @@ +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; +import { TestBed } from "@angular/core/testing"; +import { TranslateService } from "@ngx-translate/core"; +import { GithubAuthService } from "./github-auth.service"; +import { GithubDataService } from "./github-data.service"; + +describe("GithubDataService", () => { + let service: GithubDataService; + let httpMock: HttpTestingController; + let githubAuthServiceSpy: jasmine.SpyObj; + let translateServiceSpy: jasmine.SpyObj; + + beforeEach(() => { + githubAuthServiceSpy = { + token: "test-token-github", + isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(true), + } as any; + + translateServiceSpy = { + instant: jasmine.createSpy("instant").and.callFake((key: string) => key), + } as any; + + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ + GithubDataService, + { provide: GithubAuthService, useValue: githubAuthServiceSpy }, + { provide: TranslateService, useValue: translateServiceSpy }, + ], + }); + + service = TestBed.inject(GithubDataService); + httpMock = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + httpMock.verify(); + }); + + it("should be created with provider github", () => { + expect(service).toBeTruthy(); + expect(service.provider).toBe("github"); + }); + + it("should verify user access by querying repository endpoint", () => { + service.verifyUserAccess("https://github.com/octocat/Hello-World").subscribe((res) => { + expect(res).toBeTruthy(); + expect(res.name).toBe("Hello-World"); + }); + + const req = httpMock.expectOne("https://api.github.com/repos/octocat/Hello-World"); + expect(req.request.method).toBe("GET"); + expect(req.request.headers.get("Authorization")).toBe("token test-token-github"); + req.flush({ name: "Hello-World" }); + }); + + it("should fetch user organizations with caching", () => { + service.getUserOrganizations().subscribe((orgs) => { + expect(orgs).toEqual(["my-org"]); + }); + + const req = httpMock.expectOne("https://api.github.com/graphql"); + expect(req.request.method).toBe("POST"); + req.flush({ + data: { + viewer: { + organizations: { + nodes: [{ login: "my-org" }], + }, + }, + }, + }); + + // Second call should return cached without HTTP call + service.getUserOrganizations().subscribe((orgs) => { + expect(orgs).toEqual(["my-org"]); + }); + httpMock.expectNone("https://api.github.com/graphql"); + }); +}); diff --git a/src/app/services/github-data.service.ts b/src/app/services/github-data.service.ts new file mode 100644 index 00000000..4fcda097 --- /dev/null +++ b/src/app/services/github-data.service.ts @@ -0,0 +1,735 @@ +import { HttpClient, HttpHeaders } from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { GitProviderType } from "@models/Account.model"; +import { Commit } from "@models/Commit.model"; +import { GitDataSearchResult, GitDataService } from "@models/GitDataService.model"; +import { Error, ErrorType, Repository } from "@models/Repository.model"; +import { TranslateService } from "@ngx-translate/core"; +import * as moment from "moment"; +import { forkJoin, Observable, of } from "rxjs"; +import { catchError, map, shareReplay, switchMap, tap } from "rxjs/operators"; +import { GithubAuthService } from "./github-auth.service"; +import { Utils } from "./utils"; + +@Injectable({ + providedIn: "root", +}) +export class GithubDataService implements GitDataService { + public readonly provider: GitProviderType = "github"; + + private userOrganizations$: Observable = null; + + constructor(private http: HttpClient, private githubAuthService: GithubAuthService, private translateService: TranslateService) {} + + get headers(): HttpHeaders { + return new HttpHeaders({ + "Content-Type": "application/json", + Authorization: "token " + this.githubAuthService.token, + }); + } + + getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable { + const t0 = performance.now(); + const CHUNK_SIZE = 4; + const chunks: Repository[][] = []; + for (let i = 0; i < repoTab.length; i += CHUNK_SIZE) { + chunks.push(repoTab.slice(i, i + CHUNK_SIZE)); + } + + if (chunks.length === 0) { + return of([]); + } + + const chunkObservables = chunks.map((chunk) => this.getBatchedRepositories(chunk, startDate, endDate)); + + return forkJoin(chunkObservables).pipe( + map((results) => results.reduce((acc, val) => acc.concat(val), [])), + tap(() => { + const t1 = performance.now(); + console.log(`[Performance] GithubDataService getRepositories took ${Math.round(t1 - t0)} ms for ${repoTab.length} repos`); + }), + ); + } + + getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit = 100): Observable { + const query = ` + query($cursor: String, $pageLimit: Int!) { + viewer { + repositories( + first: $pageLimit + after: $cursor + affiliations: [OWNER, COLLABORATOR, ORGANIZATION_MEMBER] + orderBy: { field: CREATED_AT, direction: DESC } + ) { + pageInfo { + endCursor + hasNextPage + } + nodes { + name + url + description + isFork + parent { + name + url + } + forks(first: 100) { + nodes { + name + url + description + isFork + } + } + } + } + } + } + `; + const variables = { cursor, pageLimit }; + return this.http + .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) + .pipe( + map((response) => { + const repositoriesData = response?.data?.viewer?.repositories; + if (!repositoriesData) { + return { + completed: true, + repositories: [], + cursor: undefined, + }; + } + + const reposMap = this.extractRepositoriesFromNodes(repositoriesData.nodes || []); + + return { + completed: !repositoriesData.pageInfo?.hasNextPage, + repositories: Array.from(reposMap.values()), + cursor: repositoriesData.pageInfo?.endCursor, + }; + }), + catchError((err) => { + console.error("Error fetching authenticated GitHub user repositories", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + } + + getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit = 100): Observable { + const cleanFilter = searchFilter ? searchFilter.trim() : ""; + if (!cleanFilter) { + return this.getRepositoriesByAuthenticatedUser(cursor, pageLimit); + } + + const orgUrlMatch = cleanFilter.match(/^(?:https?:\/\/github\.com\/|git@github\.com:)([a-zA-Z0-9_.-]+)\/?$/i); + let effectiveFilter = cleanFilter; + if (orgUrlMatch) { + effectiveFilter = orgUrlMatch[1]; + } + + const repoMatch = effectiveFilter.match( + /^(?:https?:\/\/github\.com\/|git@github\.com:|^)([a-zA-Z0-9_.-]+)\/([a-zA-Z0-9_.-]+?)(?:\.git|\/)?$/i, + ); + + if (repoMatch) { + const owner = repoMatch[1]; + const name = repoMatch[2]; + const corePattern = Utils.extractAssignmentCore(name, owner); + const qOrg = corePattern ? `${corePattern} org:${owner} fork:true` : `org:${owner} fork:true`; + + const scopedQuery = ` + query($owner: String!, $name: String!, $qOrg: String!, $pageLimit: Int!, $cursor: String) { + repository(owner: $owner, name: $name) { + name + url + description + isFork + parent { + name + url + } + forks(first: 100) { + nodes { + name + url + description + isFork + parent { + name + url + } + } + } + } + orgSearch: search(query: $qOrg, type: REPOSITORY, first: $pageLimit, after: $cursor) { + pageInfo { + hasNextPage + endCursor + } + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + } + `; + const variables = { + owner, + name, + qOrg, + pageLimit, + cursor: cursor || null, + }; + return this.http + .post<{ data?: any; errors?: any[] }>( + "https://api.github.com/graphql", + { query: scopedQuery, variables }, + { headers: this.headers }, + ) + .pipe( + map((response) => { + const reposMap = new Map(); + + if (response?.data) { + if (response.data.repository) { + this.extractRepositoriesFromNodes([response.data.repository], reposMap); + } + if (response.data.orgSearch?.nodes) { + this.extractRepositoriesFromNodes(response.data.orgSearch.nodes, reposMap); + } + } + + return { + completed: !response?.data?.orgSearch?.pageInfo?.hasNextPage, + repositories: Array.from(reposMap.values()), + cursor: response?.data?.orgSearch?.pageInfo?.endCursor, + }; + }), + catchError((err) => { + console.error("Error searching GitHub owner/name repositories", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + } + + if (cursor) { + const cleanTerm = cleanFilter.replace(/[-_]+$/, ""); + const coreTerm = Utils.extractAssignmentCore(cleanTerm); + const searchKeyword = coreTerm || cleanTerm; + const query = ` + query($queryString: String!, $cursor: String, $pageLimit: Int!) { + globalSearch: search(query: $queryString, type: REPOSITORY, first: $pageLimit, after: $cursor) { + pageInfo { + hasNextPage + endCursor + } + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + } + `; + const variables = { + queryString: (searchKeyword ? `${searchKeyword} ` : "") + "fork:true", + cursor, + pageLimit, + }; + return this.http + .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) + .pipe( + map((response) => { + const searchData = response?.data?.globalSearch; + const reposMap = this.extractRepositoriesFromNodes(searchData?.nodes || []); + return { + completed: !searchData?.pageInfo?.hasNextPage, + repositories: Array.from(reposMap.values()), + cursor: searchData?.pageInfo?.endCursor, + }; + }), + catchError((err) => { + console.error("Error searching GitHub repositories (page)", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + } + + return this.getUserOrganizations().pipe( + switchMap((orgs) => { + const isUserOrg = orgs && orgs.some((o) => o.toLowerCase() === effectiveFilter.toLowerCase()); + const cleanTerm = effectiveFilter.replace(/[-_]+$/, ""); + const coreTerm = Utils.extractAssignmentCore(cleanTerm); + const searchKeyword = coreTerm || cleanTerm; + + const queryArgs = ["$qGlobal: String!", "$qUser: String!", "$pageLimit: Int!"]; + let queryBody = ` + globalSearch: search(query: $qGlobal, type: REPOSITORY, first: $pageLimit) { + pageInfo { + hasNextPage + endCursor + } + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + userSearch: search(query: $qUser, type: REPOSITORY, first: $pageLimit) { + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + `; + + const variables: any = { + qGlobal: searchKeyword ? `${searchKeyword} fork:true` : "fork:true", + qUser: searchKeyword ? `${searchKeyword} user:@me fork:true` : "user:@me fork:true", + pageLimit, + }; + + if (isUserOrg) { + queryArgs.push("$login: String!", "$qOwnerOrg: String!"); + queryBody += ` + ownerOrgSearch: search(query: $qOwnerOrg, type: REPOSITORY, first: $pageLimit) { + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + repositoryOwner(login: $login) { + repositories(first: 100, affiliations: [OWNER, COLLABORATOR]) { + nodes { + name + url + description + isFork + parent { + name + url + } + } + } + } + `; + variables.login = effectiveFilter; + variables.qOwnerOrg = `org:${effectiveFilter} fork:true`; + } else if (orgs && orgs.length > 0) { + orgs.forEach((org, index) => { + const orgVar = `qOrg_${index}`; + queryArgs.push(`$${orgVar}: String!`); + queryBody += ` + orgSearch_${index}: search(query: $${orgVar}, type: REPOSITORY, first: $pageLimit) { + nodes { + ... on Repository { + name + url + description + isFork + parent { + name + url + } + } + } + } + `; + variables[orgVar] = searchKeyword ? `${searchKeyword} org:${org} fork:true` : `org:${org} fork:true`; + }); + } + + const fullQuery = `query(${queryArgs.join(", ")}) {\n${queryBody}\n}`; + + return this.http + .post<{ data: any; errors?: any[] }>("https://api.github.com/graphql", { query: fullQuery, variables }, { headers: this.headers }) + .pipe( + map((response) => { + const reposMap = new Map(); + + if (response?.data) { + Object.keys(response.data).forEach((key) => { + const field = response.data[key]; + if (key === "repositoryOwner") { + this.extractRepositoriesFromNodes(field?.repositories?.nodes || [], reposMap); + } else if (field?.nodes) { + this.extractRepositoriesFromNodes(field.nodes, reposMap); + } + }); + } + + return { + completed: !response?.data?.globalSearch?.pageInfo?.hasNextPage, + repositories: Array.from(reposMap.values()), + cursor: response?.data?.globalSearch?.pageInfo?.endCursor, + }; + }), + catchError((err) => { + console.error("Error searching GitHub repositories across user, orgs & global", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + }), + ); + } + + verifyUserAccess(repoUrl: string): Observable { + const parts = repoUrl.split("/"); + const url = "https://api.github.com/repos/" + parts[3] + "/" + parts[4]; + return this.http.get(url, { headers: this.headers }); + } + + getUserOrganizations(): Observable { + if (this.userOrganizations$) { + return this.userOrganizations$; + } + const query = ` + query { + viewer { + organizations(first: 100) { + nodes { + login + } + } + } + } + `; + this.userOrganizations$ = this.http + .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query }, { headers: this.headers }) + .pipe( + map((response) => { + const nodes = response?.data?.viewer?.organizations?.nodes || []; + return nodes.map((org: any) => org.login).filter(Boolean); + }), + catchError((err) => { + console.error("Error fetching GitHub user organizations", err); + return of([]); + }), + shareReplay(1), + ); + return this.userOrganizations$; + } + + private getBatchedRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable { + const repoInfos = repoTab.map((repo, index) => { + const parts = repo.url.split("/"); + return { + alias: `repo${index}`, + owner: parts[3], + name: parts[4], + repository: repo, + }; + }); + + const hasSince = !!startDate; + const hasUntil = !!endDate; + + let query = "query"; + const queryParams = []; + if (hasSince) queryParams.push("$since: GitTimestamp!"); + if (hasUntil) queryParams.push("$until: GitTimestamp!"); + if (queryParams.length > 0) { + query += "(" + queryParams.join(", ") + ")"; + } + query += " {\n"; + + repoInfos.forEach((info) => { + let historyArgs = "first: 100"; + if (hasSince) historyArgs += ", since: $since"; + if (hasUntil) historyArgs += ", until: $until"; + + query += ` + ${info.alias}: repository(owner: "${info.owner}", name: "${info.name}") { +${this.getCommitHistoryQueryFragment(historyArgs)} + identity: object(expression: "HEAD:IDENTITY.json") { + ... on Blob { text } + } + readme: object(expression: "HEAD:README.md") { + ... on Blob { text } + } + } + `; + }); + query += "}"; + + let sinceMoment = startDate ? moment(startDate).toDate().toISOString() : null; + let untilMoment = endDate ? moment(endDate).toDate().toISOString() : null; + + const variables: any = {}; + if (sinceMoment) variables.since = sinceMoment; + if (untilMoment) variables.until = untilMoment; + + return this.http + .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) + .pipe( + switchMap((response) => { + if (response.errors) { + console.error("GraphQL reported errors:", response.errors); + } + + const results: Repository[] = []; + const reposWithNextPage = []; + + repoInfos.forEach((info) => { + const repoData = response?.data?.[info.alias]; + if (!repoData) { + info.repository.errors.push(new Error(ErrorType.COMMITS_NOT_FOUND)); + results.push(info.repository); + return; + } + + const identityData = repoData.identity?.text; + const readmeData = repoData.readme?.text; + let name = ""; + let tpGroup = ""; + + if (identityData) { + try { + const identityParsed = JSON.parse(identityData); + name = Utils.getNameFromIdentity(identityParsed); + tpGroup = identityParsed.group; + } catch (e) {} + } else if (readmeData) { + name = Utils.getNameFromReadMe( + readmeData, + this.translateService.instant("TOKEN-LAST-NAME"), + this.translateService.instant("TOKEN-FIRST-NAME"), + ); + tpGroup = Utils.getTPGroupFromReadMe(readmeData); + } + + const history = repoData.defaultBranchRef?.target?.history; + let commits = []; + let hasNextPage = false; + let endCursor = null; + + if (history) { + commits = history.nodes.map((node: any) => Commit.withGraphQLJSON(node)); + hasNextPage = history.pageInfo.hasNextPage; + endCursor = history.pageInfo.endCursor; + } + + info.repository.commits = commits; + info.repository.provider = "github"; + + if (!info.repository.name) { + info.repository.name = name || info.repository.getNameFromUrl(); + } + if (!info.repository.tpGroup) { + info.repository.tpGroup = tpGroup || Utils.DEFAULT_TP_GROUP; + } + + results.push(info.repository); + + if (hasNextPage) { + reposWithNextPage.push({ + repository: info.repository, + owner: info.owner, + name: info.name, + cursor: endCursor, + }); + } + }); + + if (reposWithNextPage.length > 0) { + return this.fetchRemainingCommits(reposWithNextPage, startDate, endDate).pipe(map(() => results)); + } else { + return of(results); + } + }), + catchError((error) => { + console.error("GraphQL batch error", error); + return of(repoTab); + }), + ); + } + + private fetchRemainingCommits( + reposWithNextPage: { + repository: Repository; + owner: string; + name: string; + cursor: string; + }[], + startDate?: string, + endDate?: string, + ): Observable { + let query = "query($since: GitTimestamp, $until: GitTimestamp) {\n"; + + reposWithNextPage.forEach((info, index) => { + query += ` + repo${index}: repository(owner: "${info.owner}", name: "${info.name}") { +${this.getCommitHistoryQueryFragment(`first: 100, after: "${info.cursor}", since: $since, until: $until`)} + } + `; + }); + query += "}"; + + let sinceMoment = startDate ? moment(startDate).toDate().toISOString() : null; + let untilMoment = endDate ? moment(endDate).toDate().toISOString() : null; + + const variables: any = {}; + if (sinceMoment) variables.since = sinceMoment; + if (untilMoment) variables.until = untilMoment; + + return this.http + .post<{ data?: any; errors?: any[] }>("https://api.github.com/graphql", { query, variables }, { headers: this.headers }) + .pipe( + switchMap((response) => { + if (response.errors) { + console.error("GraphQL fetchRemainingCommits errors:", response.errors); + } + + const nextReposWithNextPage = []; + + reposWithNextPage.forEach((info, index) => { + const history = response?.data?.[`repo${index}`]?.defaultBranchRef?.target?.history; + if (history) { + const moreCommits = history.nodes.map((node: any) => Commit.withGraphQLJSON(node)); + info.repository.commits.push(...moreCommits); + + if (history.pageInfo.hasNextPage) { + nextReposWithNextPage.push({ + ...info, + cursor: history.pageInfo.endCursor, + }); + } + } + }); + + if (nextReposWithNextPage.length > 0) { + return this.fetchRemainingCommits(nextReposWithNextPage, startDate, endDate); + } else { + return of(null); + } + }), + catchError((error) => { + console.error("fetchRemainingCommits batch error", error); + return of(null); + }), + ); + } + + private extractRepositoriesFromNodes( + nodes: any[], + reposMap: Map = new Map(), + ): Map { + if (!nodes) return reposMap; + + nodes.forEach((node: any) => { + if (!node || !node.url) return; + + const parentUrl = node.parent?.url || undefined; + const isFork = Boolean(node.isFork || parentUrl); + + if (!reposMap.has(node.url)) { + const repo = new Repository(node.url, node.name, undefined, undefined, undefined, node.description, isFork, parentUrl); + repo.provider = "github"; + reposMap.set(node.url, repo); + } else { + const existing = reposMap.get(node.url); + if (!existing.parentUrl && parentUrl) { + existing.parentUrl = parentUrl; + existing.isFork = true; + } + } + + if (node.forks?.nodes) { + node.forks.nodes.forEach((fork: any) => { + if (fork && fork.url) { + if (!reposMap.has(fork.url)) { + const forkRepo = new Repository(fork.url, fork.name, undefined, undefined, undefined, fork.description, true, node.url); + forkRepo.provider = "github"; + reposMap.set(fork.url, forkRepo); + } else { + const existingFork = reposMap.get(fork.url); + existingFork.parentUrl = node.url; + existingFork.isFork = true; + } + } + }); + } + }); + + return reposMap; + } + + private getCommitHistoryQueryFragment(historyArgs: string): string { + return ` + defaultBranchRef { + target { + ... on Commit { + history(${historyArgs}) { + pageInfo { + hasNextPage + endCursor + } + nodes { + message + author { + name + } + committedDate + url + } + } + } + } + }`; + } +} diff --git a/src/app/services/gitlab-data.service.spec.ts b/src/app/services/gitlab-data.service.spec.ts new file mode 100644 index 00000000..4bc8b677 --- /dev/null +++ b/src/app/services/gitlab-data.service.spec.ts @@ -0,0 +1,98 @@ +import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; +import { TestBed } from "@angular/core/testing"; +import { TranslateService } from "@ngx-translate/core"; +import { GitlabAuthService } from "./gitlab-auth.service"; +import { GitlabDataService } from "./gitlab-data.service"; + +describe("GitlabDataService", () => { + let service: GitlabDataService; + let httpMock: HttpTestingController; + let gitlabAuthServiceSpy: jasmine.SpyObj; + let translateServiceSpy: jasmine.SpyObj; + + beforeEach(() => { + gitlabAuthServiceSpy = { + token: "test-token-gitlab", + instanceHost: "gitlab.com", + isSignedIn: jasmine.createSpy("isSignedIn").and.returnValue(true), + } as any; + + translateServiceSpy = { + instant: jasmine.createSpy("instant").and.callFake((key: string) => key), + } as any; + + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ + GitlabDataService, + { provide: GitlabAuthService, useValue: gitlabAuthServiceSpy }, + { provide: TranslateService, useValue: translateServiceSpy }, + ], + }); + + service = TestBed.inject(GitlabDataService); + httpMock = TestBed.inject(HttpTestingController); + }); + + afterEach(() => { + httpMock.verify(); + }); + + it("should be created with provider gitlab", () => { + expect(service).toBeTruthy(); + expect(service.provider).toBe("gitlab"); + }); + + it("should verify user access by querying gitlab project endpoint", () => { + service.verifyUserAccess("https://gitlab.com/univ/course/student-repo").subscribe((res) => { + expect(res).toBeTruthy(); + expect(res.name).toBe("student-repo"); + expect(res.owner.avatar_url).toBe("https://example.com/avatar.png"); + }); + + const encodedPath = encodeURIComponent("univ/course/student-repo"); + const req = httpMock.expectOne(`https://gitlab.com/api/v4/projects/${encodedPath}`); + expect(req.request.method).toBe("GET"); + expect(req.request.headers.get("Authorization")).toBe("Bearer test-token-gitlab"); + req.flush({ + name: "student-repo", + avatar_url: "https://example.com/avatar.png", + namespace: { avatar_url: null }, + }); + }); + + it("should support self-hosted GitLab instance URLs", () => { + service.verifyUserAccess("https://gitlab.univ-nantes.fr/group/subgroup/project.git").subscribe((res) => { + expect(res).toBeTruthy(); + expect(res.name).toBe("project"); + }); + + const encodedPath = encodeURIComponent("group/subgroup/project"); + const req = httpMock.expectOne(`https://gitlab.univ-nantes.fr/api/v4/projects/${encodedPath}`); + expect(req.request.method).toBe("GET"); + req.flush({ name: "project" }); + }); + + it("should fetch authenticated user repositories with pagination", () => { + service.getRepositoriesByAuthenticatedUser().subscribe((result) => { + expect(result.completed).toBeTrue(); + expect(result.repositories.length).toBe(1); + expect(result.repositories[0].name).toBe("group/my-repo"); + expect(result.repositories[0].provider).toBe("gitlab"); + }); + + const req = httpMock.expectOne("https://gitlab.com/api/v4/projects?membership=true&order_by=created_at&sort=desc&per_page=100&page=1"); + expect(req.request.method).toBe("GET"); + req.flush( + [ + { + web_url: "https://gitlab.com/group/my-repo", + path_with_namespace: "group/my-repo", + name: "my-repo", + description: "Test repo", + }, + ], + { headers: { "x-next-page": "" } }, + ); + }); +}); diff --git a/src/app/services/gitlab-data.service.ts b/src/app/services/gitlab-data.service.ts new file mode 100644 index 00000000..afb88f26 --- /dev/null +++ b/src/app/services/gitlab-data.service.ts @@ -0,0 +1,341 @@ +import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http"; +import { Injectable } from "@angular/core"; +import { GitProviderType } from "@models/Account.model"; +import { Commit } from "@models/Commit.model"; +import { GitDataSearchResult, GitDataService } from "@models/GitDataService.model"; +import { Error, ErrorType, Repository } from "@models/Repository.model"; +import { TranslateService } from "@ngx-translate/core"; +import * as moment from "moment"; +import { forkJoin, Observable, of } from "rxjs"; +import { catchError, map, switchMap, tap } from "rxjs/operators"; +import { GitlabAuthService } from "./gitlab-auth.service"; +import { Utils } from "./utils"; + +@Injectable({ + providedIn: "root", +}) +export class GitlabDataService implements GitDataService { + public readonly provider: GitProviderType = "gitlab"; + + constructor(private http: HttpClient, private gitlabAuthService: GitlabAuthService, private translateService: TranslateService) {} + + get headers(): HttpHeaders { + return new HttpHeaders({ + "Content-Type": "application/json", + Authorization: `Bearer ${this.gitlabAuthService.token}`, + }); + } + + getRepositories(repoTab: Repository[], startDate?: string, endDate?: string): Observable { + const t0 = performance.now(); + if (!repoTab || repoTab.length === 0) { + return of([]); + } + + const observables = repoTab.map((repo) => this.fetchSingleRepositoryData(repo, startDate, endDate)); + + return forkJoin(observables).pipe( + tap(() => { + const t1 = performance.now(); + console.log(`[Performance] GitlabDataService getRepositories took ${Math.round(t1 - t0)} ms for ${repoTab.length} repos`); + }), + ); + } + + getRepositoriesByAuthenticatedUser(cursor?: string, pageLimit = 100): Observable { + const baseApi = this.getBaseApi(); + const page = cursor ? parseInt(cursor, 10) : 1; + const url = `${baseApi}/projects?membership=true&order_by=created_at&sort=desc&per_page=${pageLimit}&page=${page}`; + + return this.http.get(url, { headers: this.headers, observe: "response" }).pipe( + map((response: HttpResponse) => { + const nextPage = response.headers.get("x-next-page"); + const projects = response.body || []; + const repositories = projects.map((p) => this.mapProjectToRepository(p)); + + return { + completed: !nextPage || nextPage.trim() === "", + repositories, + cursor: nextPage && nextPage.trim() !== "" ? nextPage.trim() : undefined, + }; + }), + catchError((err) => { + console.error("Error fetching authenticated GitLab user repositories", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + } + + getRepositoriesBySearch(searchFilter: string, cursor?: string, pageLimit = 100): Observable { + const cleanFilter = searchFilter ? searchFilter.trim() : ""; + if (!cleanFilter) { + return this.getRepositoriesByAuthenticatedUser(cursor, pageLimit); + } + + const baseApi = this.getBaseApi(); + const page = cursor ? parseInt(cursor, 10) : 1; + + // Check if filter is a full URL or owner/name + const repoInfo = this.extractRepoPathAndOrigin(cleanFilter); + if (repoInfo.path) { + const projectApiUrl = `${repoInfo.origin}/api/v4/projects/${encodeURIComponent(repoInfo.path)}`; + const forksUrl = `${repoInfo.origin}/api/v4/projects/${encodeURIComponent(repoInfo.path)}/forks?per_page=${pageLimit}&page=${page}`; + + return forkJoin({ + project: this.http.get(projectApiUrl, { headers: this.headers }).pipe(catchError(() => of(null))), + forks: this.http.get(forksUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))), + }).pipe( + map(({ project, forks }) => { + const reposMap = new Map(); + if (project && project.web_url) { + const r = this.mapProjectToRepository(project); + reposMap.set(r.url.toLowerCase(), r); + } + let nextPage: string | null = null; + if (forks) { + nextPage = forks.headers?.get("x-next-page"); + (forks.body || []).forEach((f: any) => { + const r = this.mapProjectToRepository(f, project?.web_url); + reposMap.set(r.url.toLowerCase(), r); + }); + } + + if (reposMap.size > 0) { + return { + completed: !nextPage || nextPage.trim() === "", + repositories: Array.from(reposMap.values()), + cursor: nextPage && nextPage.trim() !== "" ? nextPage.trim() : undefined, + }; + } + return null; + }), + switchMap((result) => { + if (result) { + return of(result); + } + return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi); + }), + ); + } + + return this.searchProjectsByKeyword(cleanFilter, page, pageLimit, baseApi); + } + + verifyUserAccess(repoUrl: string): Observable { + const { origin, path } = this.extractRepoPathAndOrigin(repoUrl); + if (!path) { + return of({ valid: false }); + } + const url = `${origin}/api/v4/projects/${encodeURIComponent(path)}`; + return this.http.get(url, { headers: this.headers }).pipe( + map((project) => ({ + ...project, + owner: { + avatar_url: project.avatar_url || project.namespace?.avatar_url || null, + }, + avatar_url: project.avatar_url || project.namespace?.avatar_url || null, + })), + ); + } + + private searchProjectsByKeyword(keyword: string, page: number, pageLimit: number, baseApi: string): Observable { + const memberUrl = `${baseApi}/projects?search=${encodeURIComponent(keyword)}&membership=true&per_page=${pageLimit}&page=${page}`; + const allUrl = `${baseApi}/projects?search=${encodeURIComponent(keyword)}&per_page=${pageLimit}&page=${page}`; + + return forkJoin({ + memberRes: this.http.get(memberUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))), + allRes: this.http.get(allUrl, { headers: this.headers, observe: "response" }).pipe(catchError(() => of(null))), + }).pipe( + map(({ memberRes, allRes }) => { + const reposMap = new Map(); + const nextPage = memberRes?.headers?.get("x-next-page") || allRes?.headers?.get("x-next-page"); + + const memberProjects = memberRes?.body || []; + const allProjects = allRes?.body || []; + + [...memberProjects, ...allProjects].forEach((p) => { + if (p && p.web_url) { + const r = this.mapProjectToRepository(p); + reposMap.set(r.url.toLowerCase(), r); + } + }); + + return { + completed: !nextPage || nextPage.trim() === "", + repositories: Array.from(reposMap.values()), + cursor: nextPage && nextPage.trim() !== "" ? nextPage.trim() : undefined, + }; + }), + catchError((err) => { + console.error("Error searching GitLab projects", err); + return of({ + completed: true, + repositories: [], + cursor: undefined, + }); + }), + ); + } + + private fetchSingleRepositoryData(repo: Repository, startDate?: string, endDate?: string): Observable { + const { origin, path } = this.extractRepoPathAndOrigin(repo.url); + if (!path) { + repo.errors.push(new Error(ErrorType.COMMITS_NOT_FOUND)); + return of(repo); + } + + const projectUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}`; + + return this.http.get(projectUrl, { headers: this.headers }).pipe( + switchMap((project) => { + const defaultBranch = project?.default_branch || "main"; + const readmeUrl = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/files/README%2Emd/raw?ref=${encodeURIComponent( + defaultBranch, + )}`; + const identityUrl = `${origin}/api/v4/projects/${encodeURIComponent( + path, + )}/repository/files/IDENTITY%2Ejson/raw?ref=${encodeURIComponent(defaultBranch)}`; + + return forkJoin({ + readme: this.http.get(readmeUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))), + identity: this.http.get(identityUrl, { headers: this.headers, responseType: "text" }).pipe(catchError(() => of(null))), + commits: this.fetchAllCommits(origin, path, defaultBranch, startDate, endDate), + }).pipe( + map(({ readme, identity, commits }) => { + let name = ""; + let tpGroup = ""; + + if (identity) { + try { + const parsed = JSON.parse(identity); + name = Utils.getNameFromIdentity(parsed); + tpGroup = parsed.group; + } catch (e) {} + } else if (readme) { + name = Utils.getNameFromReadMe( + readme, + this.translateService.instant("TOKEN-LAST-NAME"), + this.translateService.instant("TOKEN-FIRST-NAME"), + ); + tpGroup = Utils.getTPGroupFromReadMe(readme); + } + + repo.commits = commits; + repo.provider = "gitlab"; + + if (!repo.name) { + repo.name = name || repo.getNameFromUrl(); + } + if (!repo.tpGroup) { + repo.tpGroup = tpGroup || Utils.DEFAULT_TP_GROUP; + } + + return repo; + }), + ); + }), + catchError((err) => { + console.error(`Error fetching GitLab repo data for ${repo.url}`, err); + repo.errors.push(new Error(ErrorType.COMMITS_NOT_FOUND)); + return of(repo); + }), + ); + } + + private fetchAllCommits(origin: string, path: string, defaultBranch: string, startDate?: string, endDate?: string): Observable { + let url = `${origin}/api/v4/projects/${encodeURIComponent(path)}/repository/commits?ref_name=${encodeURIComponent( + defaultBranch, + )}&per_page=100`; + if (startDate) { + url += `&since=${encodeURIComponent(moment(startDate).toDate().toISOString())}`; + } + if (endDate) { + url += `&until=${encodeURIComponent(moment(endDate).toDate().toISOString())}`; + } + + return this.fetchCommitsPage(url, 1, []); + } + + private fetchCommitsPage(baseUrl: string, page: number, accumulated: Commit[]): Observable { + const pageUrl = `${baseUrl}&page=${page}`; + return this.http.get(pageUrl, { headers: this.headers, observe: "response" }).pipe( + switchMap((response: HttpResponse) => { + const nodes = response.body || []; + const commits = nodes.map((n) => Commit.withGitlabJSON(n)); + const allCommits = [...accumulated, ...commits]; + + const nextPage = response.headers.get("x-next-page"); + if (nextPage && nextPage.trim() !== "" && nodes.length > 0) { + return this.fetchCommitsPage(baseUrl, parseInt(nextPage, 10), allCommits); + } + return of(allCommits); + }), + catchError((err) => { + console.error(`Error fetching commits page ${page}`, err); + return of(accumulated); + }), + ); + } + + private mapProjectToRepository(project: any, parentUrl?: string): Repository { + const resolvedParent = project.forked_from_project?.web_url || parentUrl || undefined; + const isFork = Boolean(project.forked_from_project || resolvedParent); + const repo = new Repository( + project.web_url, + project.path_with_namespace || project.name, + undefined, + undefined, + undefined, + project.description, + isFork, + resolvedParent, + ); + repo.provider = "gitlab"; + return repo; + } + + private extractRepoPathAndOrigin(repoUrl: string): { origin: string; path: string } { + if (!repoUrl) { + return { origin: this.getBaseOrigin(), path: "" }; + } + let clean = repoUrl.trim(); + // Handle SSH format e.g. git@gitlab.com:group/subgroup/project.git + const sshMatch = clean.match(/^git@([^:]+):(.+?)(?:\.git|\/)?$/); + if (sshMatch) { + return { + origin: `https://${sshMatch[1]}`, + path: sshMatch[2].replace(/^\//, "").replace(/\/$/, ""), + }; + } + + try { + const url = new URL(clean.startsWith("http") ? clean : `https://${this.gitlabAuthService.instanceHost}/${clean}`); + const path = url.pathname + .replace(/^\//, "") + .replace(/\.git$/, "") + .replace(/\/$/, ""); + return { origin: url.origin, path }; + } catch (e) { + return { + origin: this.getBaseOrigin(), + path: clean + .replace(/^\//, "") + .replace(/\.git$/, "") + .replace(/\/$/, ""), + }; + } + } + + private getBaseOrigin(): string { + const host = this.gitlabAuthService.instanceHost || "gitlab.com"; + return `https://${host.replace(/^https?:\/\//i, "").replace(/\/.*$/, "")}`; + } + + private getBaseApi(): string { + return `${this.getBaseOrigin()}/api/v4`; + } +} diff --git a/src/app/services/utils.ts b/src/app/services/utils.ts index 28e3f996..2f20a7e0 100644 --- a/src/app/services/utils.ts +++ b/src/app/services/utils.ts @@ -103,7 +103,7 @@ export class Utils { new Date(Math.min(interval[0].getTime(), date.getTime())), new Date(Math.max(interval[1].getTime(), date.getTime())), ], - [dates[0], dates[1]] + [dates[0], dates[1]], ); } @@ -198,7 +198,7 @@ export class Utils { const charsToShow = Math.max(1, maxLength - 3); const frontChars = Math.ceil(charsToShow / 2); const backChars = Math.floor(charsToShow / 2); - return str.substring(0, frontChars) + '...' + str.substring(str.length - backChars); + return str.substring(0, frontChars) + "..." + str.substring(str.length - backChars); } /** @@ -215,17 +215,35 @@ export class Utils { if (owner) { clean = clean.replace(new RegExp(`^${owner}[-_]`, "i"), ""); } - clean = clean.replace( - /[-_][a-zA-Z0-9_]*(?:squelette|template|skeleton)[a-zA-Z0-9_]*$/i, - "" - ); - clean = clean.replace( - /[-_](?:squelette|template|skeleton)[a-zA-Z0-9_]*$/i, - "" - ); + clean = clean.replace(/[-_][a-zA-Z0-9_]*(?:squelette|template|skeleton)[a-zA-Z0-9_]*$/i, ""); + clean = clean.replace(/[-_](?:squelette|template|skeleton)[a-zA-Z0-9_]*$/i, ""); clean = clean.replace(/[-_]+$/, ""); return clean.replace(/_/g, "-").toLowerCase(); } + static getValueWithToken(token: string, text: string): string { + if (!token || !text) return null; + let regex = new RegExp(`(?<=${token}).*`); + let value = text.match(regex); + return value ? value[0].trim() : null; + } + + static getNameFromIdentity(identity: any): string { + if (!identity) return ""; + return [identity.last_name, identity.first_name].filter(Boolean).join(" "); + } + + static getNameFromReadMe(readme: string, lastNameToken = "Nom", firstNameToken = "Prénom"): string { + if (!readme) return null; + let lastName = this.getValueWithToken(`${lastNameToken}.*:`, readme); + let firstName = this.getValueWithToken(`${firstNameToken}.*:`, readme); + return [lastName, firstName].filter(Boolean).join(" "); + } + + static getTPGroupFromReadMe(readme: string): string { + if (!readme) return null; + return this.getValueWithToken("-\\s*\\[\\S\\]", readme); + } + constructor() {} } diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.html b/src/app/shared/ui/dev-bar/dev-bar.component.html index e49b8218..93f35f09 100644 --- a/src/app/shared/ui/dev-bar/dev-bar.component.html +++ b/src/app/shared/ui/dev-bar/dev-bar.component.html @@ -140,16 +140,16 @@
- + diff --git a/src/app/shared/ui/dev-bar/dev-bar.component.ts b/src/app/shared/ui/dev-bar/dev-bar.component.ts index 944002d2..dc9bae93 100644 --- a/src/app/shared/ui/dev-bar/dev-bar.component.ts +++ b/src/app/shared/ui/dev-bar/dev-bar.component.ts @@ -142,7 +142,7 @@ export class DevBarComponent implements OnInit, OnDestroy { toggleGitlabCloud(): void { this.devFlagsService.toggleGitlabCloud(); const state = this.devFlagsService.gitlabCloudEnabled ? "activé" : "désactivé"; - this.toastService.success("Feature Flag", `GitLab Cloud ${state}`); + this.toastService.success("Feature Flag", `GitLab ${state}`); } toggleGitlabCustom(): void { diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 0cc4dada..99848196 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -159,6 +159,13 @@ "SORT-BY": "Sort by", "MUST-LOGIN": "You must be logged in to perform this action", "CREATE-ASSIGNMENT": "New Assignment", + "CREATE-ASSIGNMENT-GITHUB": "New GitHub Assignment", + "CREATE-ASSIGNMENT-GITLAB": "New GitLab Assignment", + "CREATE-ASSIGNMENT-CHOOSE": "Choose Git Provider", + "MUST-LOGIN-GITHUB": "Connect a GitHub account to create an assignment", + "MUST-LOGIN-GITLAB": "Connect a GitLab account to create an assignment", + "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connect a GitHub account to access this assignment", + "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connect a GitLab account to access this assignment", "FILTER": { "STATUS": "Status", "COURSE": "Course", @@ -566,12 +573,12 @@ "CHOOSE_PROVIDER": "Choose a platform", "CHOOSE_PLATFORM": "Choose a platform", "PROVIDER_GITHUB": "GitHub", - "PROVIDER_GITLAB": "GitLab Cloud", + "PROVIDER_GITLAB": "GitLab", "PROVIDER_GITLAB_SELF": "Institutional GitLab (e.g. IRIT)", "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Direct login via Firebase)", - "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Direct OAuth 2.0 PKCE)", + "PLATFORM_GITLAB_TITLE": "GitLab", + "PLATFORM_GITLAB_DESC": "GitLab (Direct OAuth 2.0 PKCE)", "PLATFORM_GITLAB_SELF_TITLE": "Self-hosted GitLab", "PLATFORM_GITLAB_SELF_DESC": "Institutional server (IRIT, University - URL & PAT Token)", "OAUTH_FIREBASE_TITLE": "Secure Login via Firebase", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 2b74c789..1cdd94e1 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -158,6 +158,13 @@ "SORT-BY": "Trier par", "MUST-LOGIN": "Vous devez être connecté pour effectuer cette action", "CREATE-ASSIGNMENT": "Nouveau devoir", + "CREATE-ASSIGNMENT-GITHUB": "Nouveau devoir GitHub", + "CREATE-ASSIGNMENT-GITLAB": "Nouveau devoir GitLab", + "CREATE-ASSIGNMENT-CHOOSE": "Choisir la forge", + "MUST-LOGIN-GITHUB": "Connectez un compte GitHub pour créer un devoir", + "MUST-LOGIN-GITLAB": "Connectez un compte GitLab pour créer un devoir", + "MUST-LOGIN-ASSIGNMENT-GITHUB": "Connectez un compte GitHub pour accéder à ce devoir", + "MUST-LOGIN-ASSIGNMENT-GITLAB": "Connectez un compte GitLab pour accéder à ce devoir", "FILTER": { "STATUS": "Statut", "COURSE": "Cours", @@ -566,12 +573,12 @@ "CHOOSE_PROVIDER": "Choisir une plateforme", "CHOOSE_PLATFORM": "Choisir une plateforme", "PROVIDER_GITHUB": "GitHub", - "PROVIDER_GITLAB": "GitLab Cloud", + "PROVIDER_GITLAB": "GitLab", "PROVIDER_GITLAB_SELF": "GitLab Institutionnel (ex: IRIT)", "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Connexion directe via Firebase)", - "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (OAuth 2.0 PKCE direct)", + "PLATFORM_GITLAB_TITLE": "GitLab", + "PLATFORM_GITLAB_DESC": "GitLab (OAuth 2.0 PKCE direct)", "PLATFORM_GITLAB_SELF_TITLE": "GitLab auto-hébergé", "PLATFORM_GITLAB_SELF_DESC": "Serveur institutionnel (IRIT, Université - URL & Token PAT)", "OAUTH_FIREBASE_TITLE": "Connexion sécurisée via Firebase", diff --git a/src/assets/i18n/ru.json b/src/assets/i18n/ru.json index 39b502b2..49ed11d5 100644 --- a/src/assets/i18n/ru.json +++ b/src/assets/i18n/ru.json @@ -157,6 +157,13 @@ "SORT-BY": "Сортировать по", "MUST-LOGIN": "Для выполнения этого действия необходимо войти в систему", "CREATE-ASSIGNMENT": "Новое задание", + "CREATE-ASSIGNMENT-GITHUB": "Новое задание GitHub", + "CREATE-ASSIGNMENT-GITLAB": "Новое задание GitLab", + "CREATE-ASSIGNMENT-CHOOSE": "Выбрать Git-провайдера", + "MUST-LOGIN-GITHUB": "Подключите GitHub для создания задания", + "MUST-LOGIN-GITLAB": "Подключите GitLab для создания задания", + "MUST-LOGIN-ASSIGNMENT-GITHUB": "Подключите аккаунт GitHub для доступа к этому заданию", + "MUST-LOGIN-ASSIGNMENT-GITLAB": "Подключите аккаунт GitLab для доступа к этому заданию", "FILTER": { "STATUS": "Статус", "COURSE": "Курс", @@ -563,12 +570,12 @@ "CHOOSE_PROVIDER": "Выберите платформу", "CHOOSE_PLATFORM": "Выберите платформу", "PROVIDER_GITHUB": "GitHub", - "PROVIDER_GITLAB": "GitLab Cloud", + "PROVIDER_GITLAB": "GitLab", "PROVIDER_GITLAB_SELF": "Институциональный GitLab (напр. IRIT)", "PLATFORM_GITHUB_TITLE": "GitHub", "PLATFORM_GITHUB_DESC": "GitHub.com (Вход через Firebase)", - "PLATFORM_GITLAB_TITLE": "GitLab.com", - "PLATFORM_GITLAB_DESC": "GitLab.com Cloud (Прямой OAuth 2.0 PKCE)", + "PLATFORM_GITLAB_TITLE": "GitLab", + "PLATFORM_GITLAB_DESC": "GitLab (Прямой OAuth 2.0 PKCE)", "PLATFORM_GITLAB_SELF_TITLE": "GitLab (собственный)", "PLATFORM_GITLAB_SELF_DESC": "Сервер организации (IRIT, Университет - URL и токен PAT)", "OAUTH_FIREBASE_TITLE": "Безопасный вход через Firebase", From 6cc88528e3c2fe8f43e1339c3381289a22fa2dc3 Mon Sep 17 00:00:00 2001 From: Mika Pons Date: Thu, 17 Sep 2026 23:54:38 +0200 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20Add=20secure=20remember-me=20to?= =?UTF-8?q?ken=20storage,=20clean=20legacy=20auth=20and=20fix=20sidebar=20?= =?UTF-8?q?multi-forge=20assignments?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...08-memorisation-securisee-tokens-forges.md | 77 ++++ docs/adr/README.md | 1 + src/app/app.component.ts | 17 +- .../add-account-modal.component.html | 66 ++++ .../add-account-modal.component.scss | 75 ++++ .../add-account-modal.component.spec.ts | 22 ++ .../add-account-modal.component.ts | 3 +- .../sidebar-settings.component.html | 2 +- .../sidebar-settings.component.ts | 32 +- src/app/models/GitAuthProvider.model.ts | 2 +- src/app/services/github-auth.service.spec.ts | 50 ++- src/app/services/github-auth.service.ts | 150 ++++---- src/app/services/gitlab-auth.service.spec.ts | 16 + src/app/services/gitlab-auth.service.ts | 29 +- .../services/token-storage.service.spec.ts | 99 ++++++ src/app/services/token-storage.service.ts | 329 ++++++++++++++++++ src/app/services/tooltip.service.ts | 10 +- .../shared/ui/tooltip/tooltip.component.html | 2 +- .../shared/ui/tooltip/tooltip.component.scss | 13 +- .../shared/ui/tooltip/tooltip.component.ts | 99 +++--- .../shared/ui/tooltip/tooltip.directive.ts | 3 +- src/assets/i18n/en.json | 4 +- src/assets/i18n/fr.json | 4 +- src/assets/i18n/ru.json | 4 +- 24 files changed, 939 insertions(+), 170 deletions(-) create mode 100644 docs/adr/0008-memorisation-securisee-tokens-forges.md create mode 100644 src/app/services/token-storage.service.spec.ts create mode 100644 src/app/services/token-storage.service.ts diff --git a/docs/adr/0008-memorisation-securisee-tokens-forges.md b/docs/adr/0008-memorisation-securisee-tokens-forges.md new file mode 100644 index 00000000..9b839d8b --- /dev/null +++ b/docs/adr/0008-memorisation-securisee-tokens-forges.md @@ -0,0 +1,77 @@ +# 0008 - Mémorisation sécurisée des jetons d'accès aux forges (sessionStorage vs localStorage) et sensibilisation aux risques XSS + +## Contexte +Avec l'introduction de l'authentification multi-forges (GitHub OAuth et GitLab OAuth 2.0 PKCE, voir [ADR 0006](./0006-authentification-multi-fournisseurs-pattern-strategie.md)), les utilisateurs devaient jusqu'ici se ré-authentifier à chaque fermeture ou réouverture de page (dans le cas de GitLab dont l'état n'était pas persisté), ou dépendaient d'une persistance locale inconditionnelle (Firebase Auth pour GitHub). + +Plusieurs contraintes majeures caractérisent l'architecture de Git4School Visu : +1. **Application cliente statique sans serveur applicatif (Serverless SPA)** : + Git4School est hébergée sous forme d'actifs statiques (HTML/JS/CSS). Les requêtes vers les API des forges (GitHub REST/GraphQL, GitLab REST v4) sont émises directement par le navigateur de l'utilisateur avec un en-tête `Authorization: Bearer ...` ou `token ...`. +2. **Impossibilité d'utiliser des cookies `HttpOnly` pour les API tierces directes** : + Les cookies `HttpOnly` protégés contre les scripts ne peuvent être définis que par le domaine émetteur de l'API ou via un proxy backend inverse dédié. En l'absence de backend intermédiaire, les jetons d'accès doivent nécessairement être manipulés par le code JavaScript côté client. +3. **Risques inhérents au stockage persistant (`localStorage`)** : + - **Accès physique ou machine partagée** : Dans les salles de travaux pratiques ou sur un ordinateur public/partagé, un jeton laissé en `localStorage` survit à la fermeture du navigateur. Tout utilisateur ultérieur sur la même session machine accède directement aux dépôts Git de l'enseignant ou de l'étudiant. + - **Vulnérabilité aux attaques XSS (Cross-Site Scripting)** : Tout script injecté ou extension de navigateur malveillante accédant au contexte de la page peut lire l'intégralité du `localStorage`. + - **Scanners d'extensions et fuite accidentelle** : Les jetons bruts stockés en clair avec des motifs reconnaissables (`gho_`, `glpat-`) peuvent être détectés par des outils tiers ou inclus involontairement dans des rapports d'erreurs. + +L'objectif est d'offrir le choix explicite à l'utilisateur de mémoriser sa session sur son appareil personnel de confiance, tout en garantissant un niveau de sécurité optimal adapté à l'architecture sans backend et en l'alertant en toute transparence sur les risques associés. + +--- + +## Options considérées + +1. **Persistance inconditionnelle en `localStorage` pour tous les utilisateurs** : + - *Rejeté* : Dangereux en environnement éducatif (salles de TP, ordinateurs en libre accès). Risque critique d'usurpation d'identité et d'accès non autorisé aux dépôts des utilisateurs précédents. +2. **Stockage en mémoire vive uniquement (aucun stockage navigateur)** : + - *Rejeté* : Expérience utilisateur dégradée. Tout rafraîchissement de page (`F5`) ou navigation inter-onglets déconnecte instantanément l'utilisateur et interrompt les flux de travail en cours. +3. **Ségrégation conditionnelle `sessionStorage` (par défaut) vs `localStorage` (choix explicite) avec scellement chiffré/obfusqué et purge garantie (Option retenue)**. + +--- + +## Décision + +1. **Principe du "Sécurisé par défaut" (Secure by Default)** : + - Lors de la connexion à une forge (GitHub ou GitLab), la case *"Rester connecté sur cet appareil"* est **décochée par défaut**. + - **Case décochée** : Les jetons d'accès et profils sont stockés dans `sessionStorage`. Dès la fermeture de l'onglet ou du navigateur, le stockage est instantanément détruit par le navigateur, sans laisser de trace sur le disque. + - **Case cochée** : Les données sont enregistrées dans `localStorage` afin de persister d'une session à l'autre sur l'appareil de confiance. + +2. **Service centralisé `TokenStorageService` (`src/app/services/token-storage.service.ts`)** : + - Encapsule l'ensemble des opérations de stockage des identifiants et données de profil pour toutes les forges (`github`, `gitlab`). + - Fournit une API synchrone garantissant la disponibilité immédiate du token lors de l'instanciation des services et gardes Angular, sans race conditions. + +3. **Algorithme de scellement lié à l'appareil et à l'origine avec contrôle d'intégrité** : + - Les jetons ne sont jamais stockés en clair dans le stockage du navigateur. + - À l'écriture, une enveloppe structurée est créée : + - Génération d'un vecteur d'initialisation aléatoire (`iv`). + - Génération et conservation d'un sel cryptographique unique par installation/appareil (`g4s_device_seed`) tiré via `crypto.getRandomValues`, évitant tout secret statique en dur dans le bundle JS. + - Dérivation d'un flux de clé pseudo-aléatoire (LCG) combinant l'origine (`window.location.origin`), le sel d'appareil et l'IV. + - Chiffrement par masque XOR du JSON sérialisé (`token`, `provider`, `createdAt`, `expiresAt`). + - Calcul d'une signature d'intégrité (hachage FNV-1a à double passe) sur l'ensemble `(origine + sel appareil + IV + clair + exp)`. + - À la lecture : + - Vérification de la signature d'intégrité : toute modification externe ou altération de données entraîne le rejet immédiat du jeton et la purge de l'entrée. + - Liaison appareil & origine : un jeton exporté ou injecté sur une autre machine ou une autre origine ne peut être déchiffré. + - Détection des scans de regex : aucun motif de token (`gho_`, `glpat-`) n'apparaît en clair dans les clés ou valeurs de stockage. + +4. **Gestion de l'expiration et éviction automatique (TTL)** : + - Les jetons GitLab OAuth PKCE sont accompagnés d'une durée de validité (`expires_in`, typiquement 7200 secondes). + - L'enveloppe enregistre `expiresAt`. Si `Date.now() > expiresAt` lors de la lecture, le jeton est immédiatement purgé et l'utilisateur est considéré comme déconnecté, évitant des échecs d'appels API silencieux en boucle. + +5. **Purge atomique à la déconnexion (`signOut`)** : + - Lors de la déconnexion, `tokenStorageService.clearAll(provider)` purge simultanément les données dans `sessionStorage` et `localStorage`. + - La session Firebase Auth est également fermée. + +6. **Sensibilisation et avertissement contextuel (Infobulle UX)** : + - Dans `AddAccountModalComponent`, un indicateur d'information avec infobulle interactive (`[appTooltip]`) prévient l'utilisateur : + > *"Le jeton sera stocké dans le localStorage de votre navigateur. Pratique pour éviter de vous reconnecter, mais sensible aux failles XSS et à l'accès physique à l'appareil. À n'activer que sur un ordinateur personnel de confiance."* + +--- + +## Conséquences + +- **Sécurité renforcée en milieu universitaire/scolaire** : + Par défaut, aucun jeton ne persiste sur le disque local. Les étudiants et enseignants utilisant des postes partagés ne risquent pas d'abandonner leur session active après fermeture du navigateur. +- **Transparence totale pour l'utilisateur** : + L'utilisateur est conscient du compromis ergonomie / sécurité (commodité de ne pas retaper ses accès vs exposition en cas de faille XSS ou de machine partagée). +- **Uniformité multi-forges** : + GitHub et GitLab partagent désormais le même contrat et le même cycle de vie de persistance sécurisée via `TokenStorageService`. +- **Nettoyage de la dette technique** : + L'ancien mécanisme de token de développement (`dev_github_token`) et la ré-authentification automatique Firebase par popup (`reauthenticate()`) sont définitivement supprimés au profit de la mémorisation sécurisée explicite *"Rester connecté"* et de la restauration synchrone de session. diff --git a/docs/adr/README.md b/docs/adr/README.md index b93155ce..bb34d0fe 100644 --- a/docs/adr/README.md +++ b/docs/adr/README.md @@ -17,6 +17,7 @@ Ce répertoire contient l'historique formalisé de toutes les décisions d'archi | [0005](./0005-navigation-clavier-typeahead-directive-decouplee.md) | Neutralisation des conflits souris-clavier dans les suggestions Typeahead | Ergonomie UI / Événements | `Accepté` | | [0006](./0006-authentification-multi-fournisseurs-pattern-strategie.md) | Authentification multi-forges découplée (Pattern Stratégie & Fournisseurs) et OAuth 2.0 PKCE | Sécurité / Architecture SOLID | `Accepté` | | [0007](./0007-services-de-donnees-git-pattern-strategie-et-facade.md) | Services de données Git découplés (Pattern Stratégie, Registre & Façade CommitsService) | Intégration Git / Architecture | `Accepté` | +| [0008](./0008-memorisation-securisee-tokens-forges.md) | Mémorisation sécurisée des jetons d'accès aux forges (sessionStorage vs localStorage) et sensibilisation aux risques XSS | Sécurité / Stockage Client | `Accepté` | --- diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3cb5e0a3..7ac8f332 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, OnDestroy, OnInit } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; import { Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; import { GithubAuthService } from "@services/github-auth.service"; @@ -18,7 +18,7 @@ import { environment } from "@environments/environment"; templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) -export class AppComponent implements OnInit, OnDestroy { +export class AppComponent implements OnInit { readonly isProduction = environment.production; /** * AppComponent constructor @@ -38,21 +38,8 @@ export class AppComponent implements OnInit, OnDestroy { /** * This method is called once the component is loaded. - * If the user is not signed in, call the the sign in method. */ ngOnInit(): void { Chart.pluginService.unregister(ChartDataLabels); - this.githubAuthService.loading = false; - if (!this.githubAuthService.isSignedIn()) { - this.githubAuthService.reauthenticate(); - } - } - - /** - * This method is called when the component is destroyed. - * Disconnects the user - */ - ngOnDestroy(): void { - this.githubAuthService.signOut(); } } diff --git a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html index 7173cdaf..33ae8ae1 100644 --- a/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html +++ b/src/app/components/nav-layouts/sidebar-settings/accounts/add-account-modal/add-account-modal.component.html @@ -192,6 +192,39 @@
{{ 'ACCOUNTS.PAT_HELP' | translate }}
+ +
+ + + + + + + + + +
+