Login Flows (#4411)

* [SG-171] Login with a device request: Desktop (#3999)

* Move LoginWithDeviceComponent to libs

* Create login module

* Remove login component from previous location

* Move startPasswordlessLogin method to base class

* Register route for login with device component

* Add new localizations

* Add Login with Device page styles

* Add desktop login with device component

* Spacing fix

* Add content box around page

* Update wording of helper text

* Make resend timeout a class variable

* SG-173 - Login device approval desktop (#4232)

* SG-173 Implemented UI and login for login approval request

* SG-173 - Show login approval after login

* SG-173 Fetch login requests if the setting is true

* SG-173 Add subheading to new setting

* SG-173 Handle modal dismiss denying login request

* SG-173 Fix pr comments

* SG-173 Implemented desktop alerts

* SG-173 Replicated behaviour of openViewRef

* SG-173 Fixed previous commit

* SG-173 PR fix

* SG-173 Fix PR comment

* SG-173 Added missing service injection

* SG-173 Added logo to notifications

* SG-173 Fix PR comments

* [SG-910] Override self hosted check for desktop (#4405)

* Override base component self hosted check

* Add selfhost check to environment service

* [SG-170] Login with Device Request - Browser (#4198)

* work: ui stuff

* fix: use parent

* fix: words

* [SG-987] [SG-988] [SG-989] Fix passwordless login request (#4573)

* SG-987 Fix notification text and button options

* SG-988 Fix approval and decline confirmation toasts

* SG-989 Fix methods called

* SG-988 Undo previous commit

* [SG-1034] [Defect] - Vault is empty upon login confirmation (#4646)

* fix: sync after login

* undo: whoops

---------

Co-authored-by: Carlos Gonçalves <cgoncalves@bitwarden.com>
Co-authored-by: Brandon Maharaj <bmaharaj@bitwarden.com>
Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>

apps/desktop/src/scss/pages.scss

@@ -1,6 +1,7 @@
 @import "variables.scss";
 
 #login-page,
+#login-with-device-page,
 #lock-page,
 #sso-page,
 #set-password-page,
@@ -187,7 +188,8 @@
   }
 }
 
-#login-page {
+#login-page,
+#login-with-device-page {
   flex-direction: column;
   justify-content: unset;
   padding-top: 20px;
@@ -216,3 +218,57 @@
     }
   }
 }
+
+#login-with-device-page {
+  .content {
+    display: block;
+    width: 350px !important;
+
+    .fingerprint {
+      margin: auto;
+      width: 315px;
+
+      .fingerpint-header {
+        padding-left: 15px;
+      }
+    }
+
+    .section {
+      margin-bottom: 30px;
+    }
+
+    .another-method {
+      display: flex;
+      margin: auto;
+      .description-text {
+        padding-right: 5px;
+      }
+    }
+
+    code {
+      @include themify($themes) {
+        color: themed("codeColor");
+      }
+    }
+  }
+}
+
+#login-approval-page {
+  .section-title {
+    padding: 20px;
+  }
+  .content {
+    padding: 16px;
+    .section {
+      margin-bottom: 30px;
+      code {
+        @include themify($themes) {
+          color: themed("codeColor");
+        }
+      }
+      h4.label {
+        font-weight: bold;
+      }
+    }
+  }
+}

apps/desktop/src/scss/variables.scss

@@ -40,6 +40,8 @@ $button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
 $button-color-danger: darken($brand-danger, 10%);
 
+$code-color: #e83e8c;
+
 $themes: (
   light: (
     textColor: $text-color,
@@ -95,6 +97,7 @@ $themes: (
     accountSwitcherTextColor: #ffffff,
     svgSuffix: "-light.svg",
     hrColor: #eeeeee,
+    codeColor: $code-color,
   ),
   dark: (
     textColor: #ffffff,
@@ -150,6 +153,7 @@ $themes: (
     accountSwitcherTextColor: #ffffff,
     svgSuffix: "-dark.svg",
     hrColor: #a3a3a3,
+    codeColor: $code-color,
   ),
   nord: (
     textColor: $nord5,
@@ -205,6 +209,7 @@ $themes: (
     accountSwitcherTextColor: $nord5,
     svgSuffix: "-dark.svg",
     hrColor: $nord4,
+    codeColor: $code-color,
   ),
 );