[PM-11407] add upated copy to managed accounts (#11768)

* add upated copy to managed accounts

* Add link URL

* Update link

* change copy in danger zone component

* Refactor to look at content projection children

apps/web/src/app/auth/settings/account/danger-zone.component.html

@@ -1,9 +1,15 @@
 <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
 
 <div class="tw-rounded tw-border tw-border-solid tw-border-danger-600 tw-p-5">
-  <p>{{ "dangerZoneDesc" | i18n }}</p>
+  <p>
+    {{
+      (accountDeprovisioningEnabled$ | async) && content.children.length === 1
+        ? ("dangerZoneDescSingular" | i18n)
+        : ("dangerZoneDesc" | i18n)
+    }}
+  </p>
 
-  <div class="tw-flex tw-flex-row tw-gap-2">
+  <div #content class="tw-flex tw-flex-row tw-gap-2">
     <ng-content></ng-content>
   </div>
 </div>

apps/web/src/app/auth/settings/account/danger-zone.component.ts

@@ -1,6 +1,10 @@
-import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { TypographyModule } from "@bitwarden/components";
 
 /**
@@ -10,6 +14,15 @@ import { TypographyModule } from "@bitwarden/components";
   selector: "app-danger-zone",
   templateUrl: "danger-zone.component.html",
   standalone: true,
-  imports: [TypographyModule, JslibModule],
+  imports: [TypographyModule, JslibModule, CommonModule],
 })
-export class DangerZoneComponent {}
+export class DangerZoneComponent implements OnInit {
+  constructor(private configService: ConfigService) {}
+  accountDeprovisioningEnabled$: Observable<boolean>;
+
+  ngOnInit(): void {
+    this.accountDeprovisioningEnabled$ = this.configService.getFeatureFlag$(
+      FeatureFlag.AccountDeprovisioning,
+    );
+  }
+}

apps/web/src/app/auth/settings/account/profile.component.html

@@ -36,6 +36,12 @@
           Customize
         </button>
       </div>
+      <div *ngIf="managingOrganization$ | async as managingOrganization">
+        {{ "accountIsManagedMessage" | i18n: managingOrganization?.name }}
+        <a href="https://bitwarden.com/help/claimed-accounts">
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        </a>
+      </div>
       <app-account-fingerprint
         [fingerprintMaterial]="fingerprintMaterial"
         fingerprintLabel="{{ 'yourAccountsFingerprint' | i18n }}"

apps/web/src/app/auth/settings/account/profile.component.ts

@@ -1,11 +1,15 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup } from "@angular/forms";
-import { firstValueFrom, map, Subject, takeUntil } from "rxjs";
+import { firstValueFrom, map, Observable, of, Subject, switchMap, takeUntil } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UpdateProfileRequest } from "@bitwarden/common/auth/models/request/update-profile.request";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ProfileResponse } from "@bitwarden/common/models/response/profile.response";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 
@@ -19,6 +23,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
   loading = true;
   profile: ProfileResponse;
   fingerprintMaterial: string;
+  managingOrganization$: Observable<Organization>;
   private destroy$ = new Subject<void>();
 
   protected formGroup = new FormGroup({
@@ -32,6 +37,8 @@ export class ProfileComponent implements OnInit, OnDestroy {
     private accountService: AccountService,
     private dialogService: DialogService,
     private toastService: ToastService,
+    private configService: ConfigService,
+    private organizationService: OrganizationService,
   ) {}
 
   async ngOnInit() {
@@ -40,6 +47,19 @@ export class ProfileComponent implements OnInit, OnDestroy {
     this.fingerprintMaterial = await firstValueFrom(
       this.accountService.activeAccount$.pipe(map((a) => a?.id)),
     );
+    this.managingOrganization$ = this.configService
+      .getFeatureFlag$(FeatureFlag.AccountDeprovisioning)
+      .pipe(
+        switchMap((isAccountDeprovisioningEnabled) =>
+          isAccountDeprovisioningEnabled
+            ? this.organizationService.organizations$.pipe(
+                map((organizations) =>
+                  organizations.find((o) => o.userIsManagedByOrganization === true),
+                ),
+              )
+            : of(null),
+        ),
+      );
     this.formGroup.get("name").setValue(this.profile.name);
     this.formGroup.get("email").setValue(this.profile.email);
 

apps/web/src/locales/en/messages.json

@@ -1713,6 +1713,9 @@
   "dangerZoneDesc": {
     "message": "Careful, these actions are not reversible!"
   },
+  "dangerZoneDescSingular": {
+    "message": "Careful, this action is not reversible!"
+  },
   "deauthorizeSessions": {
     "message": "Deauthorize sessions"
   },
@@ -1725,6 +1728,15 @@
   "sessionsDeauthorized": {
     "message": "All sessions deauthorized"
   },
+  "accountIsManagedMessage": {
+    "message": "This account is managed by $ORGANIZATIONNAME$",
+    "placeholders": {
+      "organizationName": {
+        "content": "$1",
+        "example": "Organization"
+      }
+    }
+  },
   "purgeVault": {
     "message": "Purge vault"
   },