[PM-358] Bump electron to 24 and node to 18 (#5205)

Upgrade Electron to version 24, node to 18 and npm to 9. Electron changed to using node 18 in 23, with node 18 using npm 9 as default.

There doesn't seem to be any breaking changes except the deprecation of Windows 7, 8.1, and Server 2012. A somewhat undocumented breaking change was that elements in the title bar are now draggable which broke the account switching selector. Resolved by adding a no-drag css rule.

- electronjs.org/blog/electron-22-0
- electronjs.org/blog/electron-23-0
- electronjs.org/blog/electron-24-0

apps/cli/package.json

@@ -24,7 +24,7 @@
     "build:prod": "cross-env NODE_ENV=production webpack",
     "build:prod:watch": "cross-env NODE_ENV=production webpack --watch",
     "package": "npm run package:win && npm run package:mac && npm run package:lin",
-    "package:win": "pkg . --targets win-x64 --output ./dist/windows/bw.exe --build",
+    "package:win": "pkg . --targets win-x64 --output ./dist/windows/bw.exe",
     "package:mac": "pkg . --targets macos-x64 --output ./dist/macos/bw",
     "package:lin": "pkg . --targets linux-x64 --output ./dist/linux/bw",
     "debug": "node --inspect ./build/bw.js",

apps/desktop/electron-builder.json

@@ -19,7 +19,7 @@
     "**/node_modules/@bitwarden/desktop-native/index.js",
     "**/node_modules/@bitwarden/desktop-native/desktop_native.${platform}-${arch}*.node"
   ],
-  "electronVersion": "21.3.1",
+  "electronVersion": "24.1.1",
   "generateUpdatesFilesForAllChannels": true,
   "publish": {
     "provider": "generic",

apps/desktop/src/auth/lock.component.html

@@ -73,9 +73,4 @@
       </div>
     </div>
   </div>
-  <ng-container *ngIf="oldOs">
-    <app-callout type="warning" class="os-deprecated">
-      {{ (deprecated ? "windows8Deprecated" : "windows8SoonDeprecated") | i18n }}
-    </app-callout>
-  </ng-container>
 </form>

apps/desktop/src/auth/lock.component.ts

@@ -1,5 +1,3 @@
-import * as os from "os";
-
 import { Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ipcRenderer } from "electron";
@@ -33,8 +31,6 @@ const BroadcasterSubscriptionId = "LockComponent";
 export class LockComponent extends BaseLockComponent {
   private deferFocus: boolean = null;
   protected biometricReady = false;
-  protected oldOs = false;
-  protected deprecated = false;
 
   constructor(
     router: Router,
@@ -74,20 +70,6 @@ export class LockComponent extends BaseLockComponent {
       policyService,
       passwordGenerationService
     );
-
-    if (process.platform === "win32") {
-      try {
-        const release = os.release();
-        const majorVersion = parseInt(release.split(".")[0], 10);
-
-        this.oldOs = majorVersion < 10;
-        if (new Date() > new Date("2023-05-31")) {
-          this.deprecated = true;
-        }
-      } catch (e) {
-        this.logService.error(e);
-      }
-    }
   }
 
   async ngOnInit() {

apps/desktop/src/auth/login/login.component.html

@@ -159,12 +159,6 @@
         </div>
       </ng-template>
     </div>
-
-    <ng-container *ngIf="oldOs">
-      <app-callout type="warning" class="os-deprecated">
-        {{ (deprecated ? "windows8Deprecated" : "windows8SoonDeprecated") | i18n }}
-      </app-callout>
-    </ng-container>
   </form>
 </div>
 <ng-template #environment></ng-template>

apps/desktop/src/auth/login/login.component.ts

@@ -1,5 +1,3 @@
-import * as os from "os";
-
 import { Component, NgZone, OnDestroy, ViewChild, ViewContainerRef } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -39,8 +37,6 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
   showingModal = false;
 
   private deferFocus: boolean = null;
-  protected oldOs = false;
-  protected deprecated = false;
 
   get loggedEmail() {
     return this.formGroup.value.email;
@@ -93,20 +89,6 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
     super.onSuccessfulLogin = () => {
       return syncService.fullSync(true);
     };
-
-    if (process.platform === "win32") {
-      try {
-        const release = os.release();
-        const majorVersion = parseInt(release.split(".")[0], 10);
-
-        this.oldOs = majorVersion < 10;
-        if (new Date() > new Date("2023-05-31")) {
-          this.deprecated = true;
-        }
-      } catch (e) {
-        this.logService.error(e);
-      }
-    }
   }
 
   async ngOnInit() {

apps/desktop/src/locales/en/messages.json

@@ -2251,13 +2251,5 @@
   },
   "windowsBiometricUpdateWarningTitle": {
     "message": "Recommended Settings Update"
-  },
-  "windows8SoonDeprecated": {
-    "message": "The operating system you are using will no longer be supported after the 2023.5.0 release. Upgrade to a supported operating system. Continuing without updating your operating system may result in unexpected behavior or security risks.",
-    "description": "Windows 8, 8.1 and Server 2012 R2 are no longer supported by Electron & Chromium. Show a notice on the login and lock screen while 2023.4.0 is the active version."
-  },
-  "windows8Deprecated": {
-    "message": "The operating system you are using is no longer supported. Continuing without updating your operating system may result in unexpected behavior.",
-    "description": "Windows 8, 8.1 and Server 2012 R2 are no longer supported by Electron & Chromium. Show a notice on the login and lock screen after 2023.5.0 is released."
   }
 }

apps/desktop/src/scss/header.scss

@@ -31,6 +31,9 @@
   }
 
   app-account-switcher {
+    // Electron will mark elements in the title bar as draggable so that the window can be moved. This
+    // disables the click events. To restore the click functionality, we mark this element as no-drag.
+    -webkit-app-region: no-drag;
     justify-self: end;
     height: 100%;
   }

apps/desktop/src/scss/pages.scss

@@ -272,13 +272,3 @@
     }
   }
 }
-
-// TODO: Remove after 2023.4 release
-.os-deprecated {
-  margin-top: 20px;
-  width: 500px;
-}
-
-#lock-page {
-  flex-direction: column;
-}