Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00
Code Issues Projects Releases Wiki Activity

[SG-577] Display content based on layout params (#3339)

Browse Source 
* display content based on layout params

* Subfolder TrialInitiationModule content components

Co-authored-by: rr-bw <rrichetto@bitwarden.com>
Co-authored-by: addison <addisonbeck1@gmail.com>
This commit is contained in:
Robyn MacCallum 2022-08-19 09:31:50 -04:00 committed by GitHub
parent a48bf9269f
commit 295ae5aa4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 330 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/web/src/app/accounts/trial-initiation/content/cnet-enterprise-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Enterprise Free Trial Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Collaborate and share securely</li>
<li>Deploy and manage quickly and easily</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-cnet></app-logo-cnet>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/cnet-enterprise-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-cnet-enterprise-content",
templateUrl: "cnet-enterprise-content.component.html",
})
export class CnetEnterpriseContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/cnet-individual-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Premium Account Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Store logins, secure notes, and more</li>
<li>Secure your account with advanced two-step login</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-cnet></app-logo-cnet>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/cnet-individual-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-cnet-individual-content",
templateUrl: "cnet-individual-content.component.html",
})
export class CnetIndividualContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/cnet-teams-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Teams Free Trial Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Collaborate and share securely</li>
<li>Deploy and manage quickly and easily</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-cnet></app-logo-cnet>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/cnet-teams-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-cnet-teams-content",
templateUrl: "cnet-teams-content.component.html",
})
export class CnetTeamsContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/default-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Trusted by millions of individuals, teams, and organizations worldwide for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Store logins, secure notes, and more</li>
<li>Collaborate and share securely</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/default-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-default-content",
templateUrl: "default-content.component.html",
})
export class DefaultContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/enterprise-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Trusted by millions of individuals, teams, and organizations worldwide for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Store logins, secure notes, and more</li>
<li>Collaborate and share securely</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

0
apps/web/src/app/accounts/trial-initiation/enterprise-content.component.ts → apps/web/src/app/accounts/trial-initiation/content/enterprise-content.component.ts
View File

17
apps/web/src/app/accounts/trial-initiation/content/enterprise1-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Trusted by millions of individuals, teams, and organizations worldwide for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Store logins, secure notes, and more</li>
<li>Collaborate and share securely</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/enterprise1-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-enterprise1-content",
templateUrl: "enterprise1-content.component.html",
})
export class Enterprise1ContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/enterprise2-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Enterprise Free Trial Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Collaborate and share securely</li>
<li>Deploy and manage quickly and easily</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/enterprise2-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-enterprise2-content",
templateUrl: "enterprise2-content.component.html",
})
export class Enterprise2ContentComponent {}

15
apps/web/src/app/accounts/trial-initiation/content/logo-cnet.component.html Normal file
View File

@ -0,0 +1,15 @@
<figure>
<figcaption>
<cite>
<img
src="../../images/register-layout/cnet-logo.svg"
class="tw-mx-auto tw-block tw-w-40"
alt="CNET Logo"
/>
</cite>
</figcaption>
<blockquote class="tw-mx-auto tw-mt-2 tw-max-w-xl tw-px-4 tw-text-center">
"No more excuses; start using Bitwarden today. The identity you save could be your own. The
money definitely will be."
</blockquote>
</figure>

7
apps/web/src/app/accounts/trial-initiation/content/logo-cnet.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-logo-cnet",
templateUrl: "logo-cnet.component.html",
})
export class LogoCnetComponent {}

15
apps/web/src/app/accounts/trial-initiation/content/logo-forbes.component.html Normal file
View File

@ -0,0 +1,15 @@
<figure>
<figcaption>
<cite>
<img
src="../../images/register-layout/forbes-logo.svg"
class="tw-mx-auto tw-block tw-w-40"
alt="Forbes Logo"
/>
</cite>
</figcaption>
<blockquote class="tw-mx-auto tw-mt-2 tw-max-w-xl tw-px-4 tw-text-center">
“Bitwarden boasts the backing of some of the world's best security experts and an attractive,
easy-to-use interface”
</blockquote>
</figure>

7
apps/web/src/app/accounts/trial-initiation/content/logo-forbes.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-logo-forbes",
templateUrl: "logo-forbes.component.html",
})
export class LogoForbesComponent {}

5
apps/web/src/app/accounts/trial-initiation/content/logo-us-news.component.html Normal file
View File

@ -0,0 +1,5 @@
<img
src="../../images/register-layout/usnews-360-badge.svg"
class="tw-mx-auto tw-block tw-w-48"
alt="US News 360 Reviews Best Password Manager"
/>

7
apps/web/src/app/accounts/trial-initiation/content/logo-us-news.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-logo-us-news",
templateUrl: "logo-us-news.component.html",
})
export class LogoUSNewsComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/teams-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">The Bitwarden Password Manager</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Trusted by millions of individuals, teams, and organizations worldwide for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Store logins, secure notes, and more</li>
<li>Collaborate and share securely</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

0
apps/web/src/app/accounts/trial-initiation/teams-content.component.ts → apps/web/src/app/accounts/trial-initiation/content/teams-content.component.ts
View File

17
apps/web/src/app/accounts/trial-initiation/content/teams1-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Teams Free Trial Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Collaborate and share securely</li>
<li>Deploy and manage quickly and easily</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/teams1-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-teams1-content",
templateUrl: "teams1-content.component.html",
})
export class Teams1ContentComponent {}

17
apps/web/src/app/accounts/trial-initiation/content/teams2-content.component.html Normal file
View File

@ -0,0 +1,17 @@
<h1 class="tw-text-4xl !tw-text-alt2">Start Your Free Trial Now</h1>
<div class="tw-pt-24">
<h2 class="tw-text-2xl">
Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure password
storage and sharing.
</h2>
</div>
<ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
<li>Collaborate and share securely</li>
<li>Deploy and manage quickly and easily</li>
<li>Access anywhere on any device</li>
<li>Create your account to get started</li>
</ul>
<div class="tw-mt-28 tw-flex tw-flex-col tw-items-center tw-gap-5">
<app-logo-forbes></app-logo-forbes>
<app-logo-us-news></app-logo-us-news>
</div>

7
apps/web/src/app/accounts/trial-initiation/content/teams2-content.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-teams2-content",
templateUrl: "teams2-content.component.html",
})
export class Teams2ContentComponent {}

11
apps/web/src/app/accounts/trial-initiation/enterprise-content.component.html
View File

@ -1,11 +0,0 @@
<h1 class="!tw-text-alt2">You've chosen Bitwarden for Enterprise</h1>
<div class="tw-pt-24">
<h2>What you can do with Bitwarden for Enterprise</h2>
</div>
<div class="tw-mt-12 tw-text-3xl tw-text-main">
<p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
<p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
<p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
<p class="tw-mt-2.5 tw-mb-20">Create your account to get started</p>
</div>

13
apps/web/src/app/accounts/trial-initiation/families-content.component.html
View File

@ -1,13 +0,0 @@
<h1 class="!tw-text-alt2">You've chosen Bitwarden for Families</h1>
<div class="tw-pt-24">
<h2>
Trusted by millions of individuals, teams, and organizations worldwide for secure password
storage and sharing.
</h2>
</div>
<div class="tw-mt-12 tw-text-3xl tw-text-main">
<p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
<p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
<p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
<p class="tw-mt-2.5 tw-mb-20">Create your account to get started</p>
</div>

7
apps/web/src/app/accounts/trial-initiation/families-content.component.ts
View File

@ -1,7 +0,0 @@
import { Component } from "@angular/core";
@Component({
selector: "app-families-content",
templateUrl: "families-content.component.html",
})
export class FamiliesContentComponent {}

10
apps/web/src/app/accounts/trial-initiation/teams-content.component.html
View File

@ -1,10 +0,0 @@
<h1 class="!tw-text-alt2">You've chosen Bitwarden for Teams</h1>
<div class="tw-pt-24">
<h2>What you can do with Btiwarden for Teams</h2>
</div>
<div class="tw-mt-12 tw-text-3xl tw-text-main">
<p class="tw-mt-2.5 tw-mb-20">Collaborate and share securely</p>
<p class="tw-mt-2.5 tw-mb-20">Deploy and manage quickly and easily</p>
<p class="tw-mt-2.5 tw-mb-20">Access anywhere on any device</p>
<p class="tw-mt-2.5 tw-mb-20">Create your account to get started</p>
</div>

25
apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
View File

@ -13,7 +13,7 @@
<div
class="tw-absolute tw--z-10 tw--mt-48 tw-h-96 tw-w-full tw--skew-y-3 tw-bg-background-alt2"
></div>
<div class="tw-min-w-4xl tw-mx-auto tw-flex tw-max-w-screen-xl tw-px-4">
<div class="tw-min-w-4xl tw-mx-auto tw-flex tw-max-w-screen-xl tw-gap-12 tw-px-4">
<div class="tw-w-1/2">
<img
alt="Bitwarden"
@ -21,14 +21,23 @@
class="tw-mt-6"
src="../../images/register-layout/logo-horizontal-white.svg"
/>
<!-- This is to for illustrative purposes and content will be replaced by marketing -->
<div class="tw-pt-12">
<!-- Teams Body -->
<app-teams-content *ngIf="org === 'teams'"></app-teams-content>
<!-- Enterprise Body -->
<app-enterprise-content *ngIf="org === 'enterprise'"></app-enterprise-content>
<!-- Families Body -->
<app-families-content *ngIf="org === 'families'"></app-families-content>
<!-- Layout params are used by marketing to determine left-hand content -->
<app-default-content *ngIf="layout === 'default'"></app-default-content>
<app-teams-content *ngIf="layout === 'teams'"></app-teams-content>
<app-teams1-content *ngIf="layout === 'teams1'"></app-teams1-content>
<app-teams2-content *ngIf="layout === 'teams2'"></app-teams2-content>
<app-enterprise-content *ngIf="layout === 'enterprise'"></app-enterprise-content>
<app-enterprise1-content *ngIf="layout === 'enterprise1'"></app-enterprise1-content>
<app-enterprise2-content *ngIf="layout === 'enterprise2'"></app-enterprise2-content>
<app-cnet-enterprise-content
*ngIf="layout === 'cnetcmpgnent'"
></app-cnet-enterprise-content>
<app-cnet-individual-content
*ngIf="layout === 'cnetcmpgnind'"
></app-cnet-individual-content>
<app-cnet-teams-content *ngIf="layout === 'cnetcmpgnteams'"></app-cnet-teams-content>
</div>
</div>
<div class="tw-w-1/2">

5
apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts
View File

@ -29,6 +29,7 @@ export class TrialInitiationComponent implements OnInit {
orgId = "";
orgLabel = "";
billingSubLabel = "";
layout = "default";
plan: PlanType;
product: ProductType;
accountCreateOnly = true;
@ -64,6 +65,10 @@ export class TrialInitiationComponent implements OnInit {
return;
}
if (qParams.layout) {
this.layout = qParams.layout;
}
if (this.validOrgs.includes(qParams.org)) {
this.org = qParams.org;
} else {

30
apps/web/src/app/accounts/trial-initiation/trial-initiation.module.ts
View File

@ -10,9 +10,19 @@ import { RegisterFormModule } from "../register-form/register-form.module";
import { BillingComponent } from "./billing.component";
import { ConfirmationDetailsComponent } from "./confirmation-details.component";
import { EnterpriseContentComponent } from "./enterprise-content.component";
import { FamiliesContentComponent } from "./families-content.component";
import { TeamsContentComponent } from "./teams-content.component";
import { CnetEnterpriseContentComponent } from "./content/cnet-enterprise-content.component";
import { CnetIndividualContentComponent } from "./content/cnet-individual-content.component";
import { CnetTeamsContentComponent } from "./content/cnet-teams-content.component";
import { DefaultContentComponent } from "./content/default-content.component";
import { EnterpriseContentComponent } from "./content/enterprise-content.component";
import { Enterprise1ContentComponent } from "./content/enterprise1-content.component";
import { Enterprise2ContentComponent } from "./content/enterprise2-content.component";
import { LogoCnetComponent } from "./content/logo-cnet.component";
import { LogoForbesComponent } from "./content/logo-forbes.component";
import { LogoUSNewsComponent } from "./content/logo-us-news.component";
import { TeamsContentComponent } from "./content/teams-content.component";
import { Teams1ContentComponent } from "./content/teams1-content.component";
import { Teams2ContentComponent } from "./content/teams2-content.component";
import { TrialInitiationComponent } from "./trial-initiation.component";
import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.module";
@ -29,10 +39,22 @@ import { VerticalStepperModule } from "./vertical-stepper/vertical-stepper.modul
declarations: [
TrialInitiationComponent,
EnterpriseContentComponent,
FamiliesContentComponent,
TeamsContentComponent,
ConfirmationDetailsComponent,
BillingComponent,
DefaultContentComponent,
EnterpriseContentComponent,
Enterprise1ContentComponent,
Enterprise2ContentComponent,
TeamsContentComponent,
Teams1ContentComponent,
Teams2ContentComponent,
CnetEnterpriseContentComponent,
CnetIndividualContentComponent,
CnetTeamsContentComponent,
LogoCnetComponent,
LogoForbesComponent,
LogoUSNewsComponent,
],
exports: [TrialInitiationComponent],
providers: [TitleCasePipe],