[PM-1834] Add Windows 8/8.1 deprecation notice (#5213)

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

@@ -73,4 +73,9 @@
       </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,3 +1,5 @@
+import * as os from "os";
+
 import { Component, NgZone } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { ipcRenderer } from "electron";
@@ -27,6 +29,8 @@ const BroadcasterSubscriptionId = "LockComponent";
 })
 export class LockComponent extends BaseLockComponent {
   private deferFocus: boolean = null;
+  protected oldOs = false;
+  protected deprecated = false;
 
   constructor(
     router: Router,
@@ -66,6 +70,20 @@ 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,6 +159,12 @@
         </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,3 +1,5 @@
+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";
@@ -37,6 +39,8 @@ 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;
@@ -89,6 +93,20 @@ 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

@@ -2233,5 +2233,13 @@
         "example": "14"
       }
     }
+  },
+  "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/pages.scss

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