overview.component.html

<app-header [title]="organizationName">
  <sm-new-menu></sm-new-menu>
</app-header>

<div *ngIf="!loading && view$ | async as view; else spinner">
  <app-onboarding [title]="'getStarted' | i18n" *ngIf="showOnboarding" (dismiss)="hideOnboarding()">
    <app-onboarding-task
      [title]="'createMachineAccount' | i18n"
      (click)="openServiceAccountDialog()"
      icon="bwi-cli"
      [completed]="view.tasks.createServiceAccount"
    >
      <span class="tw-pl-1">
        {{ "downloadThe" | i18n }}
        <a
          bitLink
          href="https://bitwarden.com/help/secrets-manager-cli/"
          target="_blank"
          rel="noreferrer"
          >{{ "smCLI" | i18n }}</a
        >
      </span>
    </app-onboarding-task>
    <app-onboarding-task
      *ngIf="userIsAdmin"
      [title]="'createProject' | i18n"
      (click)="openNewProjectDialog()"
      icon="bwi-collection"
      [completed]="view.tasks.createProject"
    ></app-onboarding-task>
    <app-onboarding-task
      *ngIf="userIsAdmin"
      [title]="'importSecrets' | i18n"
      [route]="['settings', 'import']"
      icon="bwi-download"
      [completed]="view.tasks.importSecrets"
    ></app-onboarding-task>
    <app-onboarding-task
      *ngIf="view.tasks.createProject"
      [title]="'createSecret' | i18n"
      (click)="openSecretDialog()"
      icon="bwi-key"
      [completed]="view.tasks.createSecret"
    ></app-onboarding-task>
  </app-onboarding>

  <div class="tw-mt-6 tw-flex tw-flex-col tw-gap-6">
    <sm-section>
      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "projects" | i18n }}</h2>
      <sm-projects-list
        (newProjectEvent)="openNewProjectDialog()"
        (editProjectEvent)="openEditProject($event)"
        (deleteProjectEvent)="openDeleteProjectDialog($event)"
        [projects]="view.latestProjects"
      ></sm-projects-list>
      <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
        {{ "showingPortionOfTotal" | i18n: view.latestProjects.length : view.allProjects.length }}
        <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
      </div>
    </sm-section>
    <sm-section>
      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "secrets" | i18n }}</h2>
      <sm-secrets-list
        baseRoute="secrets"
        (deleteSecretsEvent)="openDeleteSecret($event)"
        (newSecretEvent)="openNewSecretDialog()"
        (editSecretEvent)="openEditSecret($event)"
        (copySecretNameEvent)="copySecretName($event)"
        (copySecretValueEvent)="copySecretValue($event)"
        (copySecretUuidEvent)="copySecretUuid($event)"
        [secrets]="view.latestSecrets"
      ></sm-secrets-list>
      <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
        {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length : view.allSecrets.length }}
        <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
      </div>
    </sm-section>
  </div>
</div>

<ng-template #spinner>
  <div class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
    <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
  </div>
</ng-template>