From d20b7a5f303c61f747ce4f9d85b00855b833d34d Mon Sep 17 00:00:00 2001
From: jng <jng@bitwarden.com>
Date: Tue, 26 Nov 2024 12:25:24 -0500
Subject: [PATCH] update designs for first page. rename components and files

---
 apps/web/src/app/oss-routing.module.ts        |  4 +--
 ...erification-notice-page-one.component.html | 29 +++++++++++++++++++
 ...verification-notice-page-one.component.ts} | 10 +++----
 ...-device-verification-notice.component.html | 19 ------------
 4 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html
 rename libs/vault/src/components/new-device-verification-notice/{new-device-verification-notice.component.ts => new-device-verification-notice-page-one.component.ts} (60%)
 delete mode 100644 libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html

diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index c05522855a..1d3f975e49 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -39,9 +39,9 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { VaultIcons } from "@bitwarden/vault";
 
 import { twofactorRefactorSwap } from "../../../../libs/angular/src/utils/two-factor-component-refactor-route-swap";
+import { NewDeviceVerificationNoticePageOneComponent } from "../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component";
 import { flagEnabled, Flags } from "../utils/flags";
 
-import { NewDeviceVerificationNoticeComponent } from "./../../../../libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component";
 import { VerifyRecoverDeleteOrgComponent } from "./admin-console/organizations/manage/verify-recover-delete-org.component";
 import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
@@ -649,7 +649,7 @@ const routes: Routes = [
     children: [
       {
         path: "",
-        component: NewDeviceVerificationNoticeComponent,
+        component: NewDeviceVerificationNoticePageOneComponent,
         data: {
           pageIcon: VaultIcons.ExclamationTriangle,
           pageTitle: {
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html
new file mode 100644
index 0000000000..c78546c2ca
--- /dev/null
+++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.html
@@ -0,0 +1,29 @@
+<form #form (ngSubmit)="submit()">
+  <p class="tw-text-center" bitTypography="body1">
+    {{ "newDeviceVerificationNoticeContentPage1" | i18n }}
+  </p>
+
+  <div
+    class="tw-flex tw-flex-col tw-items-center tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-pb-2"
+  >
+    <p bitTypography="body2" class="text-muted tw-w-9/12">{{ formMessage }}</p>
+
+    <div class="radio-group tw-w-9/12">
+      <input type="radio" class="radio" id="option_A" />
+      <label class="unstyled">
+        {{ "newDeviceVerificationNoticePage1OptionA" | i18n }}
+      </label>
+    </div>
+
+    <div class="radio-group tw-w-9/12">
+      <input type="radio" class="radio" id="option_A" />
+      <label class="unstyled">
+        {{ "newDeviceVerificationNoticePage1OptionB" | i18n }}
+      </label>
+    </div>
+  </div>
+
+  <button bitButton type="submit" buttonType="primary" class="tw-w-full tw-mt-4">
+    {{ "continue" | i18n }}
+  </button>
+</form>
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts
similarity index 60%
rename from libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts
rename to libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts
index ab43aba33d..c9b295b609 100644
--- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.ts
+++ b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice-page-one.component.ts
@@ -3,15 +3,15 @@ import { Component, OnInit } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { TypographyModule } from "@bitwarden/components";
+import { ButtonModule, TypographyModule } from "@bitwarden/components";
 
 @Component({
   standalone: true,
-  selector: "app-new-device-verification-notice",
-  templateUrl: "./new-device-verification-notice.component.html",
-  imports: [CommonModule, JslibModule, TypographyModule],
+  selector: "app-new-device-verification-notice-page-one",
+  templateUrl: "./new-device-verification-notice-page-one.component.html",
+  imports: [CommonModule, JslibModule, TypographyModule, ButtonModule],
 })
-export class NewDeviceVerificationNoticeComponent implements OnInit {
+export class NewDeviceVerificationNoticePageOneComponent implements OnInit {
   formMessage: string;
   constructor(private i18nService: I18nService) {}
 
diff --git a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html b/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html
deleted file mode 100644
index 931db7723d..0000000000
--- a/libs/vault/src/components/new-device-verification-notice/new-device-verification-notice.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<form #form (ngSubmit)="submit()">
-  <p bitTypography="body1">{{ "newDeviceVerificationNoticeContentPage1" | i18n }}</p>
-
-  <p bitTypography="body2" class="text-muted">{{ formMessage }}</p>
-
-  <div class="radio-group">
-    <input type="radio" class="radio" id="option_A" />
-    <label class="unstyled">
-      {{ "newDeviceVerificationNoticePage1OptionA" | i18n }}
-    </label>
-  </div>
-
-  <div class="radio-group">
-    <input type="radio" class="radio" id="option_A" />
-    <label class="unstyled">
-      {{ "newDeviceVerificationNoticePage1OptionB" | i18n }}
-    </label>
-  </div>
-</form>