# Harbor Web Portal Management: Complete Guide to the Angular UI

> Master Harbor web portal management with our complete Angular UI guide. Effortlessly control projects, repositories, users, and system settings through an intuitive interface. Simplify your container registry operations today.

- Repository: [Harbor/harbor](https://github.com/goharbor/harbor)
- Tags: how-to-guide
- Published: 2026-04-09

---

**The Harbor web portal provides a single-page Angular application that wraps the Harbor container registry REST API, enabling browser-based management of projects, repositories, users, and system configuration.**

The Harbor web portal serves as the primary graphical interface for the goharbor/harbor open-source container registry. Located in `src/portal/` within the repository, this Angular application translates user interactions into HTTP calls against backend API endpoints, offering visual workflows for authentication, container image management, and administrative tasks without requiring command-line tools.

## Authentication and Session Management

The portal handles identity verification through the `/c/login` endpoint, implemented in [`src/portal/src/app/account/sign-in/sign-in.component.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/account/sign-in/sign-in.component.ts). When users submit credentials, the component delegates to **SessionService** ([`src/portal/src/app/shared/services/session.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/shared/services/session.service.ts)), which manages session lifecycle operations including sign-in, sign-off, language switching via `/language?lang=xx-XX`, and current-user retrieval.

Upon successful authentication, the backend issues a session cookie that the browser stores for subsequent requests. The `SessionService.retrieveUser()` method then fetches the current user profile to determine permissions and route access. This service maintains the client-side state necessary for rendering role-specific navigation elements.

## Project and Repository Navigation

After login, the left-side navigation displays the **Projects** section, powered by **ProjectService** ([`src/portal/src/app/shared/services/project.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/shared/services/project.service.ts)). This service communicates with `GET /api/v2.0/projects` to list, create, edit, or delete projects and their associated repositories.

Within the project view, users manage container images, trigger vulnerability scans, and configure content trust policies. The UI calls backend endpoints such as `/projects/:projectId/repositories` and `/artifacts/:digest/scan` to perform these operations. The portal remains a thin wrapper—all business logic resides in the core API defined in [`api/v2.0/swagger.yaml`](https://github.com/goharbor/harbor/blob/main/api/v2.0/swagger.yaml).

## Administrative Configuration and Customization

Administrators access system-wide settings through the **Administration** menu, which utilizes **UserService** ([`src/portal/src/app/shared/services/user.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/shared/services/user.service.ts)) to manage accounts, groups, and role bindings via the `/users` API. The portal also supports visual customization through **SkinableConfig** ([`src/portal/src/app/services/skinable-config.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/services/skinable-config.service.ts)), allowing administrators to upload custom JSON configurations that modify the login background, logo, and portal title via the `/api/v2.0/skin` endpoint.

The **JobServiceDashboardHealthCheckService** ([`src/portal/src/app/base/left-side-nav/job-service-dashboard/job-service-dashboard-health-check.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/base/left-side-nav/job-service-dashboard/job-service-dashboard-health-check.service.ts)) periodically polls core services to display real-time health status in the top-right dashboard.

## Portal Architecture and Bootstrapping

The entry point [`src/portal/src/app/app.component.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/app.component.ts) initializes the application by setting the theme, loading language preferences, and configuring the title before bootstrapping the Angular router. The UI implements the **Clarity Design System** for component styling and follows standard Angular CLI build configurations defined in [`src/portal/angular.json`](https://github.com/goharbor/harbor/blob/main/src/portal/angular.json).

Unlike monolithic applications, the Harbor web portal contains no client-side business logic. It functions as a **RESTful API consumer**, translating user events into HTTP requests and updating the view based on JSON responses.

## Code Examples: Portal Service Implementations

### Authenticating Users Programmatically

The sign-in component demonstrates the authentication flow using `SessionService`:

```typescript
// src/portal/src/app/account/sign-in/sign-in.component.ts
const cred = { principal: 'admin', password: 'Harbor12345' };
this.session.signIn(cred).subscribe(() => {
  // Backend creates session cookie
  this.session.retrieveUser().subscribe(() => {
    // UI routes to dashboard after user profile loads
    this.router.navigateByUrl('/harbor');
  });
});

```

### Managing Projects and Repositories

The ProjectService provides CRUD operations for registry organization:

```typescript
// src/portal/src/app/shared/services/project.service.ts

// Fetch all projects
public getProjects(): Observable<Project[]> {
  const url = `${CURRENT_BASE_HREF}/projects`;
  return this.http.get<Project[]>(url, HTTP_GET_OPTIONS);
}

// Create a new project
public createProject(name: string, publicProject: boolean): Observable<Project> {
  const payload = { project_name: name, public: publicProject };
  const url = `${CURRENT_BASE_HREF}/projects`;
  return this.http.post<Project>(url, payload, HTTP_JSON_OPTIONS);
}

```

### Customizing Portal Appearance

Administrators can load custom skins through the SkinableConfig service:

```typescript
// src/portal/src/app/services/skinable-config.service.ts
public getSkinConfig(): CustomStyle | null {
  const skinUrl = '/api/v2.0/skin';
  // Caches custom login backgrounds, titles, and logos
}

```

### Switching Interface Languages

The SessionService supports runtime language changes:

```typescript
// src/portal/src/app/shared/services/session.service.ts
this.session.switchLanguage('zh').subscribe(() => {
  this.translate.use('zh-CN');
});

```

## Summary

- The Harbor web portal is an **Angular single-page application** located in `src/portal/` that consumes the Harbor REST API.
- **SessionService** handles authentication via `/c/login` and maintains user state throughout the browser session.
- **ProjectService** manages container registry organization through endpoints like `/api/v2.0/projects`.
- **SkinableConfig** enables visual customization of the login page and portal branding without code changes.
- All UI actions are thin wrappers around backend API calls—the portal contains no embedded business logic.

## Frequently Asked Questions

### Where is the Harbor web portal source code located?

The source code resides in the `src/portal/` directory of the goharbor/harbor repository. This directory contains the Angular application, including components, services, and the [`angular.json`](https://github.com/goharbor/harbor/blob/main/angular.json) configuration file. The entry point for the application is [`src/portal/src/app/app.component.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/app.component.ts).

### How does the Harbor UI handle user authentication?

The portal authenticates users through the `/c/login` endpoint using **SessionService** ([`src/portal/src/app/shared/services/session.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/shared/services/session.service.ts)). Upon successful login, the backend issues a session cookie that the browser stores for subsequent API requests. The service also retrieves the current user profile to determine access permissions and available routes.

### Can I customize the Harbor web portal appearance?

Yes. Administrators can upload a custom skin JSON configuration that modifies the login background, logo, and portal title. The **SkinableConfig** service ([`src/portal/src/app/services/skinable-config.service.ts`](https://github.com/goharbor/harbor/blob/main/src/portal/src/app/services/skinable-config.service.ts)) loads these settings from `/api/v2.0/skin` at application startup, allowing branded deployments without modifying the Angular source code.

### What framework powers the Harbor management interface?

The Harbor web portal is built with **Angular** and uses the **Clarity Design System** for UI components. It is a standard Angular CLI application defined in [`src/portal/angular.json`](https://github.com/goharbor/harbor/blob/main/src/portal/angular.json), compiling TypeScript components like [`sign-in.component.ts`](https://github.com/goharbor/harbor/blob/main/sign-in.component.ts) and services like [`project.service.ts`](https://github.com/goharbor/harbor/blob/main/project.service.ts) into a single-page application that runs entirely in the browser.