[PM-142] Add environment selector to trial initiation (#5546)

This commit is contained in:
André Bispo 2023-06-30 16:50:00 +01:00 committed by GitHub
parent 5247168c1e
commit 05c4d172a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
53 changed files with 155 additions and 53 deletions

View File

@ -58,10 +58,14 @@
</div>
<div class="tw-pt-44" *ngIf="useTrialStepper">
<div class="tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
<div class="tw-flex tw-h-12 tw-w-full tw-items-center tw-rounded-t tw-bg-secondary-100">
<h2 class="tw-mb-0 tw-pl-4 tw-text-base tw-font-bold tw-uppercase">
Start your 7-Day free trial of Bitwarden for {{ org }}
<div class="tw-flex tw-h-auto tw-w-full tw-rounded-t tw-bg-secondary-100">
<h2 class="tw-pb-4 tw-pl-4 tw-pt-5 tw-text-base tw-font-bold tw-uppercase">
{{ "startYour7DayFreeTrialOfBitwardenFor" | i18n : org }}
</h2>
<environment-selector
[hasFlags]="true"
class="tw-mr-4 tw-mt-6 tw-text-end"
></environment-selector>
</div>
<app-vertical-stepper #stepper linear (selectionChange)="stepSelectionChange($event)">
<app-vertical-step label="Create Account" [editable]="false" [subLabel]="email">
@ -80,7 +84,7 @@
[disabled]="orgInfoFormGroup.get('name').invalid"
cdkStepperNext
>
Next
{{ "next" | i18n }}
</button>
</app-vertical-step>
<app-vertical-step label="Billing" [subLabel]="billingSubLabel">
@ -100,7 +104,7 @@
></app-trial-confirmation-details>
<div class="tw-mb-3 tw-flex">
<button type="button" bitButton buttonType="primary" (click)="navigateToOrgVault()">
Get Started
{{ "getStarted" | i18n | titlecase }}
</button>
<button
type="button"
@ -109,7 +113,7 @@
(click)="navigateToOrgInvite()"
class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
>
Invite Users
{{ "inviteUsers" | i18n }}
</button>
</div>
</app-vertical-step>

View File

@ -7,6 +7,7 @@ import { FormFieldModule } from "@bitwarden/components";
import { OrganizationCreateModule } from "../../admin-console/organizations/create/organization-create.module";
import { RegisterFormModule } from "../../auth/register-form/register-form.module";
import { BillingComponent } from "../../billing/accounts/trial-initiation/billing.component";
import { EnvironmentSelectorModule } from "../../components/environment-selector/environment-selector.module";
import { LooseComponentsModule, SharedModule } from "../../shared";
import { ConfirmationDetailsComponent } from "./confirmation-details.component";
@ -37,6 +38,7 @@ import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.modul
RegisterFormModule,
OrganizationCreateModule,
LooseComponentsModule,
EnvironmentSelectorModule,
],
declarations: [
TrialInitiationComponent,

View File

@ -0,0 +1,55 @@
<div class="tw-mb-1" *ngIf="showRegionSelector">
<bit-menu #environmentOptions>
<a
bitMenuItem
[attr.href]="isUsServer ? 'javascript:void(0)' : 'https://vault.bitwarden.com'"
class="pr-4"
>
<i
class="bwi bwi-fw bwi-sm bwi-check pb-1"
aria-hidden="true"
[style.visibility]="isUsServer ? 'visible' : 'hidden'"
></i>
<img src="../../images/us_flag.png" alt="{{ 'usFlag' | i18n }}" class="pb-1 mr-1" />
{{ "us" | i18n }}
</a>
<a
bitMenuItem
[attr.href]="isEuServer ? 'javascript:void(0)' : 'https://vault.bitwarden.eu'"
class="pr-4"
*ngIf="euServerFlagEnabled"
>
<i
class="bwi bwi-fw bwi-sm bwi-check pb-1"
aria-hidden="true"
[style.visibility]="isEuServer ? 'visible' : 'hidden'"
></i>
<img src="../../images/eu_flag.png" alt="{{ 'euFlag' | i18n }}" class="pb-1 mr-1" />
{{ "eu" | i18n }}
</a>
</bit-menu>
<span *ngIf="hasFlags" class="!tw-inline-block !tw-w-52 !tw-min-w-52">
<label>{{ "region" | i18n }}:</label>
<a
[routerLink]="[]"
[bitMenuTriggerFor]="environmentOptions"
class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-2"
>
<img
[src]="'../../images/' + selectedRegionImageName + '.png'"
alt="{{ 'selectedRegionFlag' | i18n }}"
class="pb-1 mr-1 tw-ml-1"
/><label class="tw-cursor-pointer !tw-font-normal"
>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i
></label>
</a>
</span>
<div *ngIf="!hasFlags">
{{ "region" | i18n }}:
<a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
<b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
</div>
</div>

View File

@ -0,0 +1,43 @@
import { Component, Input, OnInit } from "@angular/core";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
import { RegionDomain } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
@Component({
selector: "environment-selector",
templateUrl: "environment-selector.component.html",
})
export class EnvironmentSelectorComponent implements OnInit {
constructor(
private configService: ConfigServiceAbstraction,
private platformUtilsService: PlatformUtilsService
) {}
@Input() hasFlags: boolean;
isEuServer: boolean;
isUsServer: boolean;
showRegionSelector = false;
euServerFlagEnabled: boolean;
selectedRegionImageName: string;
async ngOnInit() {
this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
FeatureFlag.DisplayEuEnvironmentFlag
);
const domain = Utils.getDomain(window.location.href);
this.isEuServer = domain.includes(RegionDomain.EU);
this.isUsServer = domain.includes(RegionDomain.US) || domain.includes(RegionDomain.USQA);
this.selectedRegionImageName = this.getRegionImage();
this.showRegionSelector = !this.platformUtilsService.isSelfHost();
}
getRegionImage(): string {
if (this.isEuServer) {
return "eu_flag";
} else {
return "us_flag";
}
}
}

View File

@ -0,0 +1,12 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../../../app/shared";
import { EnvironmentSelectorComponent } from "./environment-selector.component";
@NgModule({
imports: [SharedModule],
declarations: [EnvironmentSelectorComponent],
exports: [EnvironmentSelectorComponent],
})
export class EnvironmentSelectorModule {}

View File

@ -1,34 +1,6 @@
<router-outlet></router-outlet>
<div class="container my-5 text-muted text-center">
<div class="tw-mb-1" *ngIf="!isSelfHosted">
<bit-menu #environmentOptions>
<a bitMenuItem href="https://vault.bitwarden.com" class="pr-4">
<i
class="bwi bwi-fw bwi-sm bwi-check pb-1"
aria-hidden="true"
[style.visibility]="isEuServer ? 'hidden' : 'visible'"
></i>
<img src="../../images/us_flag.png" alt="" class="pb-1 mr-1" />
{{ "us" | i18n }}
</a>
<a bitMenuItem href="https://vault.bitwarden.eu" class="pr-4" *ngIf="euServerFlagEnabled">
<i
class="bwi bwi-fw bwi-sm bwi-check pb-1"
aria-hidden="true"
[style.visibility]="isEuServer ? 'visible' : 'hidden'"
></i>
<img src="../../images/eu_flag.png" alt="" class="pb-1 mr-1" />
{{ "eu" | i18n }}
</a>
</bit-menu>
{{ "region" | i18n }}:
<a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
<b>{{ isEuServer ? ("eu" | i18n) : ("us" | i18n) }}</b
><i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
</a>
<br />
</div>
<environment-selector [hasFlags]="false"></environment-selector>
&copy; {{ year }} Bitwarden Inc. <br />
{{ "versionNumber" | i18n : version }}
</div>

View File

@ -1,9 +1,6 @@
import { Component, OnDestroy, OnInit } from "@angular/core";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { Utils } from "@bitwarden/common/platform/misc/utils";
@Component({
selector: "app-frontend-layout",
@ -11,24 +8,13 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
})
export class FrontendLayoutComponent implements OnInit, OnDestroy {
version: string;
isSelfHosted: boolean;
euServerFlagEnabled: boolean;
year = "2015";
isEuServer = true;
constructor(
private platformUtilsService: PlatformUtilsService,
private configService: ConfigServiceAbstraction
) {}
constructor(private platformUtilsService: PlatformUtilsService) {}
async ngOnInit() {
this.year = new Date().getFullYear().toString();
this.version = await this.platformUtilsService.getApplicationVersion();
this.isSelfHosted = this.platformUtilsService.isSelfHost();
this.euServerFlagEnabled = await this.configService.getFeatureFlagBool(
FeatureFlag.DisplayEuEnvironmentFlag
);
this.isEuServer = Utils.getDomain(window.location.href).includes(".eu");
document.body.classList.add("layout_frontend");
}

View File

@ -8,7 +8,6 @@ import { UnauthGuard } from "@bitwarden/angular/auth/guards/unauth.guard";
import { SubscriptionRoutingModule } from "../app/billing/settings/subscription-routing.module";
import { flagEnabled, Flags } from "../utils/flags";
import { TrialInitiationComponent } from "./accounts/trial-initiation/trial-initiation.component";
import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
@ -26,6 +25,7 @@ import { SetPasswordComponent } from "./auth/set-password.component";
import { EmergencyAccessViewComponent } from "./auth/settings/emergency-access/emergency-access-view.component";
import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emergency-access.component";
import { SsoComponent } from "./auth/sso.component";
import { TrialInitiationComponent } from "./auth/trial-initiation/trial-initiation.component";
import { TwoFactorComponent } from "./auth/two-factor.component";
import { UpdatePasswordComponent } from "./auth/update-password.component";
import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";

View File

@ -1,10 +1,10 @@
import { NgModule } from "@angular/core";
import { TrialInitiationModule } from "./accounts/trial-initiation/trial-initiation.module";
import { OrganizationCreateModule } from "./admin-console/organizations/create/organization-create.module";
import { OrganizationManageModule } from "./admin-console/organizations/manage/organization-manage.module";
import { OrganizationUserModule } from "./admin-console/organizations/users/organization-user.module";
import { LoginModule } from "./auth/login/login.module";
import { TrialInitiationModule } from "./auth/trial-initiation/trial-initiation.module";
import { LooseComponentsModule, SharedModule } from "./shared";
import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";

View File

@ -108,6 +108,7 @@ import { AddEditComponent as OrgAddEditComponent } from "../vault/org-vault/add-
import { AttachmentsComponent as OrgAttachmentsComponent } from "../vault/org-vault/attachments.component";
import { CollectionsComponent as OrgCollectionsComponent } from "../vault/org-vault/collections.component";
import { EnvironmentSelectorModule } from "./../components/environment-selector/environment-selector.module";
import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
import { SharedModule } from "./shared.module";
@ -122,10 +123,10 @@ import { SharedModule } from "./shared.module";
UserVerificationModule,
ChangeKdfModule,
DynamicAvatarComponent,
EnvironmentSelectorModule,
AccountFingerprintComponent,
],
declarations: [
PremiumBadgeComponent,
AcceptEmergencyComponent,
AcceptFamilySponsorshipComponent,
AcceptOrganizationComponent,

View File

@ -6930,5 +6930,26 @@
},
"removeMembersWithoutMasterPasswordWarning": {
"message": "Removing members who do not have master passwords without setting one for them may restrict access to their full account."
},
"startYour7DayFreeTrialOfBitwardenFor": {
"message": "Start your 7-Day free trial of Bitwarden for $ORG$",
"placeholders": {
"org": {
"content": "$1",
"example": "Organization name"
}
}
},
"next": {
"message": "Next"
},
"usFlag": {
"message": "US flag"
},
"euFlag": {
"message": "EU flag"
},
"selectedRegionFlag": {
"message": "Selected region flag"
}
}

View File

@ -23,6 +23,12 @@ export enum Region {
SelfHosted = "Self-hosted",
}
export enum RegionDomain {
US = "bitwarden.com",
EU = "bitwarden.eu",
USQA = "bitwarden.pw",
}
export abstract class EnvironmentService {
urls: Observable<void>;
usUrls: Urls;