From bc6cff8a66f8907b88687814834193d0d57c6f94 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Thu, 4 May 2023 09:18:52 +0200
Subject: [PATCH] [PM-1024] feat: add content to login settings component

---
 apps/web/src/app/settings/change-password.component.html | 2 +-
 .../fido2-login-settings.component.html                  | 8 +++++++-
 .../fido2-login-settings/fido2-login-settings.module.ts  | 4 +++-
 apps/web/src/locales/en/messages.json                    | 9 +++++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/settings/change-password.component.html b/apps/web/src/app/settings/change-password.component.html
index aa505343409..52152ba7e3a 100644
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/apps/web/src/app/settings/change-password.component.html
@@ -16,7 +16,7 @@
   [appApiAction]="formPromise"
   ngNativeValidate
   autocomplete="off"
-  class="tw-mb-3"
+  class="tw-mb-14"
 >
   <div class="row">
     <div class="col-6">
diff --git a/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.html b/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.html
index b4e9eff07e7..effbefa0582 100644
--- a/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.html
+++ b/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.component.html
@@ -1 +1,7 @@
-Passkey login settings
+<h2 bitTypography="h2">{{ "loginWithPasskey" | i18n }}</h2>
+<p bitTypography="body1">
+  {{ "loginWithPasskeyInfo" | i18n }}
+  <a bitLink href="???">{{ "learnMoreAboutPasswordless" | i18n }}</a>
+</p>
+
+<button type="button" bitButton>{{ "enable" | i18n }}</button>
diff --git a/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.module.ts b/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.module.ts
index ce4e51d3e0f..620c4012a45 100644
--- a/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.module.ts
+++ b/apps/web/src/app/settings/fido2-login-settings/fido2-login-settings.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from "@angular/core";
 
+import { SharedModule } from "../../shared";
+
 import { Fido2LoginSettingsComponent } from "./fido2-login-settings.component";
 
 @NgModule({
-  imports: [],
+  imports: [SharedModule],
   declarations: [Fido2LoginSettingsComponent],
   exports: [Fido2LoginSettingsComponent],
 })
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 578caf9ad50..82036f2a64f 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -625,6 +625,15 @@
   "loginWithMasterPassword": {
     "message": "Log in with master password"
   },
+  "loginWithPasskey": {
+    "message": "Log in with passkey"
+  },
+  "loginWithPasskeyInfo": {
+    "message": "Use facial recognition, a fingerprint, or other FIDO2 security key to log in instead of your email and password."
+  },
+  "learnMoreAboutPasswordless": {
+    "message": "Learn more about passwordless"
+  },
   "createAccount": {
     "message": "Create account"
   },